Hi,
How can i implement the flipping functionality for the shapes.I made these shape using simple json data
nodeDataArray = [ {fig: “Rectangle”,fill:“transparent”,size:“70 70”,ang:0,stroke:"#000000",strokeWidth:1,textcolor:“black”,fontstyle:“bold 14px sans-serif”,category:“basic” },
{fig: “Cylinder1”,fill:“transparent”,size:“70 70”,ang:0,strokeWidth:1,stroke:"#000000",textcolor:“black”,fontstyle:“bold 14px sans-serif”,category:“basic” },]
Could you show what you want to happen, with screenshots showing before and after?
If i have have a shape like this <— after flipping it should be like —>
original shape
filpped shape
I don’t think that would look different for rectangles and circles, as you ask in your subject line. And might not for triangles. And for some Shapes like that example you could just change the angle by 180 degrees.
You want to call Geometry | GoJS API. Something like:
node.diagram.startTransaction();
var shape = node.findObject("NAMEOFSHAPE");
shape.geometry = shape.geometry.copy().scale(-1, 1);
node.diagram.commitTransaction("flip");
As I have my shapes(objects) in
nodeDataArray = [ {fig: “Rectangle”,fill:“transparent”,size:“70 70”,ang:0,stroke:"#000000",strokeWidth:1,textcolor:“black”,fontstyle:“bold 14px sans-serif”,category:“basic” },
{fig: “Cylinder1”,fill:“transparent”,size:“70 70”,ang:0,strokeWidth:1,stroke:"#000000",textcolor:“black”,fontstyle:“bold 14px sans-serif”,category:“basic” },]
So how will i find the object or shape to be flipped ?
That depends on your node template(s).
Thanks.I flipped the shape using this code:
myDiagram.startTransaction();
var it = myDiagram.selection.iterator;
while (it.next()) {
var node =it.value;
var shape = node.findObject("SHAPE");
console.log("&&&&&&&&&&&&"+shape);
shape.geometry = shape.geometry.copy().scale(-1, 1);}
myDiagram.commitTransaction("flipped");
But after shape is flipped, it looks like this and also resize and rotate functionalities doesn’t seem to work correctly.
before flipping
after flipping
As you see the resize panel is expanding to the right side.
Sorry about that – I wasn’t able to actually try the code that I gave you. In this case I forgot that the points of the Geometry will be negative, causing everything to be shifted to the left. The points ought to be normalized not to be negative. Try this instead:
myDiagram.startTransaction();
myDiagram.selection.each(function(node) {
var shape = node.findObject("SHAPE");
if (shape === null) return;
var geo = shape.geometry.copy();
geo.scale(-1, 1).normalize();
shape.geometry = geo;
}
myDiagram.commitTransaction("flipped");
Thank you so much, it’s working accurately for the single nodes.
Now if i want to apply it to grouped nodes or on the node having ports on them.what are the things i have to do.
If you have a Panel of Shapes that you want to flip, it depends on what kind of Panel it is. Although it should be clear that you should at least flip each Shape.
For a “Position” Panel, you’ll want to flip the positions about the midpoint.
For a “Vertical” Panel, I guess you just need to flip the alignments.
For a “Horizontal” Panel, I think you just need to toggle Panel.isOpposite.
“Auto” Panels require flipping spot1 and spot2 on the main element and flipping the alignment on the rest of the elements.
“Spot” Panels require flipping the alignment on the non-main elements.
I don’t know about “Table” Panels or “Graduated” Panels. “Grid” Panels and “Viewbox” Panels need nothing, and “Link” Panels should not be flipped at all.
yes i am using Auto panel…Can you please explain this point .
It would be a lot easier to give you advice if you posted your node template. It would also be easier to understand if you stripped out all of the pieces of the template that are unrelated to this topic about flipping shapes. And it would help if you had before and after screenshots of a representative node.
Here is my node template :
myDiagram.nodeTemplate =
GO(go.Node,"Spot",
{ selectionObjectName: "SHAPE",
selectionAdorned: false,
movable:false,
locationSpot: go.Spot.Center,
rotatable: false,
resizable: false, resizeObjectName: "SHAPE",
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
},
new go.Binding("itemArray","spots"),
new go.Binding("angle", "ang").makeTwoWay(),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
// each spot is represented by a Panel holding a circular Shape
// at a particular alignment relative to the "BODY"
itemTemplate:
GO(go.Panel,
GO(go.Shape, "Circle",
{
fill:"transparent",
strokeWidth: 0, width: 8, height: 8
},
{
toLinkable: true,
fromLinkable:true
},
new go.Binding("portId","portId")
),
new go.Binding("alignment", "spot", go.Spot.parse).makeTwoWay(go.Spot.stringify)
)
},
GO(go.Panel, "Auto",
GO(go.Shape,
{ name:"SHAPE",
cursor: "pointer",
// fill: "transparent",
desiredSize: new go.Size(70,70)
},
new go.Binding("figure","fig"),
new go.Binding("fill", "fill"),
new go.Binding("stroke", "stroke"),
new go.Binding("strokeWidth", "strokeWidth"),
new go.Binding("desiredSize", "size",go.Size.parse).makeTwoWay(go.Size.stringify)
)
),
GO(go.TextBlock,
{
font: "bold 14px sans-serif",
alignment: go.Spot.Bottom,
wrap: go.TextBlock.WrapFit,
stroke:"black",
editable: true
},
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("stroke", "textcolor"),
new go.Binding("font", "fontstyle")),
);
Here is my grouptemplate:
myDiagram.groupTemplate =
GO(go.Group, "Auto",
{selectionAdorned:false,rotatable:false,resizable:false,resizeObjectName:"SHAPE",
locationObjectName: "SHAPE",ungroupable: true},
new go.Binding("location", "loc",go.Point.parse).makeTwoWay(go.Point.stringify),
GO(go.Panel, "Auto",
GO(go.Shape, "RoundedRectangle", // surrounds the Placeholder
{ name:"SHAPE",
parameter1:0,
fill: "rgba(255,255,255,0)",
// desiredSize:new go.Size(270, 200),
stroke:"transparent"
// minSize: new go.Size(270, 200)
}),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
GO(go.Placeholder, // represents the area of all member parts,
{ padding: 0}), // with some extra padding around them
GO(go.TextBlock,
{
font: "bold 14px sans-serif",
stroke:"black",
alignment: go.Spot.Bottom,
wrap: go.TextBlock.WrapFit,
editable: true
},
new go.Binding("font", "fontstyle"),
new go.Binding("text", "textname").makeTwoWay(),
new go.Binding("stroke", "textcolor"))
)
);
before flipping the diagram:
after flipping:
There isn’t enough information for me to tell what you are doing. I do not know why you bothered to show your Group template when the problem case does not involve groups. It appears that you only have one Shape per Node, which is counterintuitive and contrary to what I had been assuming earlier in this forum topic. I cannot tell whether you are properly changing the locations of the nodes when flipping, and the individual shapes are not flipped at all.
Fundamentally you need to debug your code and determine the precise problem. Then you can show us the relevant code and ask a specific question that we can answer. It is wasteful of your time and ours if you do not present a complete situation, causing us to have to guess what you are doing. And it is wasteful of our time when you show us code that is unrelated to your problem.
The problem was of flipping the diagram which is created using the shapes by grouping them. Your given code flips the single node, but if you have group of nodes then it breaks the positions.