Need to change Node's angle alone

GoJS
1

Hi I just want to change node angle but not the text block

below is my template
const template02 =
$(go.Node, ‘Auto’,
“Spot”,
{ locationSpot: go.Spot.Center },
{
/* rotatable: true,/
angle: 90
},
new go.Binding(“location”, “Location”, go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding(“visible”, “visible”),
$(go.Panel, “Vertical”,
$(go.Panel, “Spot”,
$(go.Picture,
{
alignment: go.Spot.Center,
width: 55,
height: 55,
cursor: ‘pointer’
},
new go.Binding(“source”)),
// Ports
this.makePort($, ‘l’, go.Spot.Left, false, true, ‘Square’, ‘black’, Medium.Fluid, new go.Size(10, 10)),
this.makePort($, ‘r’, go.Spot.Right, true, false, ‘Square’, ‘black’, Medium.Fluid, new go.Size(10, 10)),
),
$(go.TextBlock,
{
alignment: go.Spot.Bottom,
alignmentFocus: go.Spot.Top,
editable: false,
wrap: go.TextBlock.WrapFit,
textAlign: “center”,
width: 100,
/ angle: 360,*/

                    },
                    new go.Binding("text", "Text"),
                    new go.Binding("visible", "IsLabelVisible")),
            ),
        );

my output is like
this is the normal diagram:
image
After i apply the angle (90):
image
but i dont want to change the text’s angle (have tried angle property in Textblock but not working)
Could you pls suggest any way to keep the text always same?

2

You have set the angle on the whole Node, so I hope it makes sense to you that it rotated the whole node, including the TextBlock.

It’s perfectly reasonable to want to always show text upright. But where should the text be relative to the icon and ports? In your example did you want the text on the left side, or do you want it to remain underneath?

If you want it on the left, try setting the TextBlock.angle to the negative of the Node.angle.

I think you will want to use data binding. I suggest:

  new go.Binding("angle"),  // on the Node

and:

  new go.Binding("angle", "angle", a => -a),  // on the TextBlock

To rotate a node, modify the node’s data. For example, given a reference to a Node:

myDiagram.model.commit(m => m.set(node.data, "angle", 90);
3

Hi Walter Thanks for above example.I need to flip the images like below for e.g
this is before changing the angle:
image
I want to change the image like below
image
I am using svg images for the nodes
Kindly help me on this , to get the above out put what is the changes i need to do?

4

What!? That’s quite different from your original screenshots.

If you want to change the direction of the arrow, set or bind its angle. In this case it looks like the value would be either zero or 180.

5

Hi Walter yes second one is different image but the logic i wanted is the first one i wanted be revers like the second image as mentioned ,I used angle as 180 but below is my output(tried with -180 also)
image

6

So what is the problem? Please provide enough information so that I can understand precisely what your situation (i.e. node template) is and what kinds of behaviors that you want. Include both before-and-after screenshots along with descriptions of what exactly changed between them.

7

When angle is not set or zero image is like below:
image
After setting angle is 180 i am getting image like:
image
But actually i needs like below (forgot about the image color ,size just see the orientation)
image

8

Don’t set or bind the angle – set or bind the Picture.flip property. Picture | GoJS API

9

like this new go.Binding(“flip”,“180”)?

10

Please read the documentation for the property.

11

Hi I have referred the documentation
1.if i using the flip property below is the result
image
It is flipped the image alone not the port points

2.If i used angle is 180
image
the port points properly maintained but image is not reversed

I need to do the reverse of the images as well need to maintain its connecting ports also.(in point 1 image reversed as expected in point 2 connection are rotated properly but image not reversed as expected)

12

Do you always want the arrow to go from left to right, whther or not the shape and ports have been rotated? Bind the arrow’s angle property to the same data property and use a conversion function to negate the angle.