Rotating a node re-renders the entire diagram

GoJS
1

I need to provide the user to rotate an image within a node to line up with the link/edge. For example,

image
image1257×1047 18.5 KB

I’m able successfully able to rotate the node and have it line up but, the entire diagram ends up rerendering as follows:

image
image440×798 13.7 KB

The image is perfect square. How can I prevent the diagram from rerendering. Here’s the nodeTemplate:

   myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        {
          locationSpot: go.Spot.Center,  // Node.location is the center of the Shape
          locationObjectName: "SHAPE",
          selectionObjectName: "SHAPE",
          rotatable: true,
          locationSpot: go.Spot.Center,
          rotateObjectName: "SHAPE",
          rotateAdornmentTemplate:  // specify appearance of rotation handle
            $(go.Adornment,
              { locationSpot: go.Spot.Center },
              $(go.Shape, "Circle",
                { width: 12, height: 12, cursor: "pointer",
                  background: "transparent", stroke: "dodgerblue", strokeWidth: 2
                }
                )
            ),
          //selectionAdorned: false,
        },
        new go.Binding("location", "", toLocation).makeTwoWay(fromLocation),
        $(go.Panel, "Vertical", {},
           $(go.TextBlock, {
                alignment: go.Spot.Center,
                textAlign: "center",
                font: '9px bold sans-serif',
            },
            new go.Binding("text")),
        ),
        $(go.Panel, "Auto",
        $(go.Picture,
          {
            name: "SHAPE",
            angle: 180,
            alignment: go.Spot.Center,
            portId: ""
          },
          new go.Binding("source", "type", nodeTypeImage),
          new go.Binding("desiredSize", "type", nodeTypeSize)
        ),
      ),

Finally, sometimes when I rotate the link/edge follows. I want to be able to rotate a shape independent of the link/edge.

2

Do you have a Diagram.layout? If so, why?

I don’t know about your other issue – let’s resolve the first issue first.

3
goJS - Rotate 
<script id="code">
  function init() {
    var $ = go.GraphObject.make;  // for conciseness in defining templates
    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.TopCenter,
          layout: $(go.TreeLayout, { angle: 90, arrangement: go.TreeLayout.ArrangementFixedRoots }),
          'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,
        });
    myDiagram.layout.isInitial = false;

    // define the Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        {
          locationSpot: go.Spot.Center,
          locationObjectName: "SHAPE",
          selectionObjectName: "SHAPE",
          rotatable: true,
          rotateObjectName: "SHAPE",
          rotateAdornmentTemplate:
            $(go.Adornment,
              { locationSpot: go.Spot.Center },
              $(go.Shape, "Circle",
                { width: 12, height: 12, cursor: "pointer",
                  background: "transparent", stroke: "dodgerblue", strokeWidth: 2
                }
              )
            ),
        },
        new go.Binding("location", "", toLocation).makeTwoWay(fromLocation),
        $(go.Panel, "Vertical",
          $(go.TextBlock, {
              alignment: go.Spot.Center,
              textAlign: "center",
              font: '9px bold sans-serif',
            },
            new go.Binding("text")),
        ),
        $(go.Panel, "Auto",
          $(go.Picture,
            {
              name: "SHAPE",
              alignment: go.Spot.Center,
              portId: "",
              desiredSize: new go.Size(50,50),
              source: "images/rotateTest.svg"
            },
          ),
        ),
      );

    myDiagram.linkTemplate =
      $(go.Link, go.Link.AvoidsNodes,
        { corner: 3 },
        $(go.Shape,
          { strokeWidth: 2, stroke: "gray" },
        )
      );

    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
  }

  function toLocation(data, node) {
    return new go.Point(data.x, data.y);
  }

  function fromLocation(loc, data, model) {
    model.setDataProperty(data, "x", loc.x);
    model.setDataProperty(data, "y", loc.y);
  }

</script>
{ "class": "go.GraphLinksModel", "nodeDataArray": [ {"key":"PM", "type":"S2", "x":-190, "y":-469, "text": "SampleText", "text1": "259.3"}, {"key":"BusBar", "type":"S3", "x":-89.5, "y":-459, "text": "SampleText2", "text1": "59.3"}, {"key":"RPP02", "type":"P1", "x":-141.3515625, "y":-294.124, "text": "SampleText3", "text1": "29.322"}, {"key":"LVB02", "type":"M4", "x":305.7060546875, "y":-121.5, "text": "LVB02", "text1": "459.3"}, {"key":"BB01", "type":"M4", "x":502.11676429793465, "y":-121.5, "text": "BB01", "text1": "1259.3"}, {"key":"BB02", "type":"P2","x":295.2700585787611, "y":28, "text": "BB02", "text1": "2.30"}, {"key":"SB01", "type":"P2", "x":295.2700585787611, "y":134, "text": "SB01", "text1": "16.3"} ], "linkDataArray": [ {"from":"PM", "to":"RPP02"}, {"from":"BusBar", "to":"RPP02"}, {"from":"RPP02", "to":"LVB02"}, {"from":"RPP02", "to":"BB01"}, {"from":"LVB02", "to":"BB02"}, {"from":"BB02", "to":"SB01"} ]}
4

I am guessing that GoJS thought that the node might have changed size, so it performed another layout.

Try setting this on the node template:

    { layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized  },

https://gojs.net/latest/intro/layouts.html#LayoutInvalidation

5

Thank you Walter.