Adding Node on the topleft of the canvas

GoJS
1

I am trying to add a node on the canvas exactly at TopLeft. But node is always getting added at center of canvas/viewport. How can i be able to add node on the topleft of the canvas

Screenshot 2023-10-13 at 12.11.25 AM
Screenshot 2023-10-13 at 12.11.25 AM3402×1952 140 KB

How can I add a node on to canvas exactly at TopLeft of the canvas

2

The top-left corner of the viewport is at Diagram.viewportBounds.position, which is in document coordinates. When you added the node, did you somehow specify it’s position?

Also, check that you have not set Diagram.contentAlignment and that you have either set Diagram.initialContentAlignment to go.Spot.TopLeft or that you have set Diagram.initialPosition to the same Point to which you have set that initial node’s position.

3

I’ve tried below script. But node is coming still at the center of the canvas but not at TopLeft.

const newlyAddedNode = diagram.findNodeForKey(key);

newlyAddedNode.position = diagram.viewportBounds.position;
diagram.initialContentAlignment = go.Spot.TopLeft;
4

You have to set any Diagram.initial… properties before you assign a new Model to the Diagram.model.

Here’s a complete sample. EDIT: I have added an HTML button that dynamically adds a new node that is positioned at the top-left corner of the viewport no matter how the user has panned/scrolled/zoomed the diagram.

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

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      padding: 0,
      "initialPosition": new go.Point(0, 0),
      "animationManager.isInitial": false,
      "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 =
  $(go.Node, "Auto",
    new go.Binding("position", "pos", go.Point.parse),
    $(go.Shape,
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue", pos: "0 0" },
  { key: 2, text: "Beta", color: "orange", pos: "100 0" },
  { key: 3, text: "Gamma", color: "lightgreen", pos: "0 100" },
  { key: 4, text: "Delta", color: "pink", pos: "100 100" }
],
[
  { 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.addNodeData({ text: "extra", pos: go.Point.stringify(myDiagram.viewportBounds.position) })
  })
});
</script>
</body>
</html>