During Node Rotation Node Name and Port Name also Rotates

shashi1 · February 1, 2018, 11:28am

I have created a node added text block for Node name and Port defined in the node. when I am Rotating(using angle) the node the Text block also rotate along with Node Rotate. due to that if is difficult to read the node and port name.Could it possible that after rotating the Node text should not rotate so that It is easy to read the Node name and its port name?

walter · February 1, 2018, 1:38pm

What does your node look like when rotated? I think you have two basic choices.

Do you really want to rotate the whole node? If not, you might want to set Node.rotateObjectName to a Panel that does not include the TextBlock that you do not want to rotate. Please read: GoJS Tools -- Northwoods Software
But if you really need to rotate that TextBlock along with everything else, but you then want to make sure it has a zero document angle, you could do something like what the Seating Chart sample does for tables. Do not set Node.rotateObjectName, so that the whole Node rotates. Add a TwoWay Binding on Node.angle, using (for example) the angle property on the node data object. But add a Binding on TextBlock.angle that reverses the rotation of the node:

$(go.Node,
  { rotatable: true },
  new go.Binding("angle").makeTwoWay(),
  . . .,

    $(go.TextBlock, . . .,
      new go.Binding("angle", "angle", function(a) { return -a; })),

  . . .
)

shashi1 · February 4, 2018, 4:10am

Yes it is working correctly.
but I am facing another issue with Text block rotation . in My node few of the Text block align as Top,left.could it possible to change the Text block alignment when changing the node angle?

walter · February 4, 2018, 11:52am

Which of the two choices above did you take?

How can anyone help you when you do not provide two small screenshots showing the behavior that you are experiencing? And they should have sketched markings showing what you really want at both angles.

It would also help if you showed the outline of your node template, showing the relevant panel and textblock properties.

shashi1 · February 4, 2018, 4:19pm

as you can see the first block left text block is left aligned and top text box is top aligned after rotating node through 90 and text block through -90 it is aligned correctly but when editing text block after -90 rotation text block alignment get disturbed. due to this i also want to change the textblock alignment after textblock rotation.

walter · February 5, 2018, 2:46pm

I’m sorry, but it still isn’t clear to me what you want. Do you always want the ports that appear on the left or right sides of the node, even when the node has been rotated, to have text that is upright and wide and short, rather than upright and narrow and tall as shown in your second screenshot?

And in your first screenshot did you want the port text of ports on the top of the node to be running vertically, with an angle of 90 or -90, just as they are in the bottom screenshot?

walter · February 5, 2018, 4:13pm

Here’s some code that I tried:

    myDiagram.nodeTemplate =
      $(go.Node, "Table",
        { rotatable: true, locationSpot: go.Spot.Center },
        new go.Binding("angle").makeTwoWay(),
        $(go.Panel, { row: 1, column: 1 },
          $(go.Shape, { fill: "white" },
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            { margin: 8, editable: true },
            new go.Binding("text").makeTwoWay())
        ),
        $(go.TextBlock, "port T", { row: 0, column: 1, angle: -90 },
          new go.Binding("angle", "angle", function(a) { return a > 135 ? 90 : -90; })),
        $(go.TextBlock, "port R", { row: 1, column: 2 },
          new go.Binding("angle", "angle", function(a) { return a > 135 ? 180 : 0; })),
        $(go.TextBlock, "port B", { row: 2, column: 1, angle: -90 },
          new go.Binding("angle", "angle", function(a) { return a > 135 ? 90 : -90; })),
        $(go.TextBlock, "port L", { row: 1, column: 0 },
        new go.Binding("angle", "angle", function(a) { return a > 135 ? 180 : 0; }))
      );

To simplify things I only have one port on each side, and I didn’t bother with a separate port shape such as a square. I think it does what I am guessing that you want. For example, when the angle is 90:

shashi1 · February 8, 2018, 2:03am

hello Walter,
I am using option 2. below is more detail about my work

alignment of left textblock are row1-4 using option go.spot.left

alignment of port1-4 text blocks are using go.spot.top
I do not want to rotate node but do not want to text block .below is the code that I have used as per suggestion
$(go.TextBlock, . . .,
new go.Binding(“angle”, “angle”, function(a) { return -a; })),

after rotating the block through 90 below is result

it roataing the text box correctly.but when I am editing the port say row1 then below is result
it
so my query is that if I am rotating the text block could it possible that I can change the textblock alignment from go.spot.left to go.spot.top so that my text block behaving correcly?

walter · February 8, 2018, 3:32am

Yes, if you aren’t able to using binding on the data.angle, you can always do whatever you want by overriding RotatingTool.rotate. Just call the super method first, and then you can make whatever changes to the node that you like.

One advantage of this is that you won’t need those bindings on data.angle any more, which should simplify your node template.

shashi1 · February 9, 2018, 7:53am

new go.Binding(“angle”, “angle”, function(a) { return -a; })),
I just have a question that could it not possible that when I am changing the angle then i can change the text box alignment i.e if angle is 90 then alignment go.spot.left to go.spot.top. except alignment all other thins working correctly at my side

walter · February 9, 2018, 10:33am

I don’t understand what your question is. Did you try binding the alignment and/or alignmentFocus to the “angle”?

shashi1 · February 9, 2018, 11:00am

Hello Walter,
text block angle binding is below
$(go.TextBlock, . . .,
new go.Binding(“angle”, “angle”, function(a) { return -a; })),
it is working correctly. so my query is can I change the text block alignment alignment:go.spot.left to alignment: go.spot.top if angle changes from 0 to 90.

walter · February 9, 2018, 12:17pm

new go.Binding("alignment", "angle", function(a) { return a === 90 ? go.Spot.Top : go.Spot.Left; })

You’ll want to figure out what to do for other angles.

shashi1 · March 11, 2018, 4:35pm

hello Walter,
the code is working perfectly fine for me. one more query is during rotation if I want to change the panel vertical to horizontal then could it possible?
I tried to look multiple example but I have not found any solution.
could it possible similar to below
new go.Binding(“Vertical”, “angle”, function(a) { return a === 90 ?" Vertical" : “Horizontal”; }) I tried this code but it is not working at my end

walter · March 11, 2018, 7:09pm

There is no Vertical property that you can set, so that Binding could not possibly work.

Maybe something like:

new go.Binding("type", "angle", function(a) { return a===90 ? go.Panel.Vertical : go.Panel.Horizontal; })