Rotating all the nodes in the canvas by 90 degrees

GoJS
1

I want to get all the nodes in my canvas, and then rotate them by 90 degrees counterclockwise, when a certain prop passed to my canvas component is true. If its false, I want to rotate it back by 90 degrees clockwise. How can I do this?

2

Basically, you’ll want to use a Binding of the GraphObject.angle property to a shared property on the Model.modelData object.

Try this sample:

image
image199×207 7.92 KB

Note the .bindModel call. Also I set the Node.locationSpot to be Spot.Center so that the nodes don’t appear to move so much when they are rotated.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  <button id="myTestButton">Toggle Angle</button>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv", {
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  new go.Node("Auto", { locationSpot: go.Spot.Center })
    .bindModel("angle", "rotated", r => r ? -90 : 0)
    .add(
      new go.Shape({ fill: "white" })
        .bind("fill", "color"),
      new go.TextBlock({ margin: 8 })
        .bind("text")
    );

myDiagram.model = new go.GraphLinksModel(
  {
    modelData: { rotated: false },
    nodeDataArray: [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 3, text: "Gamma", color: "lightgreen" },
      { key: 4, text: "Delta", color: "pink" }
    ],
    linkDataArray: [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 2 },
      { from: 3, to: 4 },
      { from: 4, to: 1 }
    ]
  }
);

document.getElementById("myTestButton").addEventListener("click", e => {
  myDiagram.model.commit(m => m.set(m.modelData, "rotated", !m.modelData.rotated));
});
  </script>
</body>
</html>