How center any node with model.commit

GoJS
#1

I am adding a node and I want to put an object in center of canvas with

myDiagram.model.commit(m => {
m.addNodeData({ . . . });
});

even after the canvas is panned/moved or zoomed in or out the node to be placed in the new center instead of default canvas center.

#2

I don’t understand what you want. You already put the new node in the center of the viewport: Insert shape in center of canvas with click of an HTML btn - #5 by kaushal722

Maybe you have a situation where the middle of the viewport is at a document point that cannot be centered because the diagram cannot be scrolled far enough? You can either increase the Diagram.padding (which increases the document bounds) or the Diagram.scrollMargin (which increases how far one can scroll) or you can turn off scrolling limitations entirely by setting Diagram.scrollMode to go.Diagram.InfiniteScroll.

Please read GoJS Coordinate Systems-- Northwoods Software and what follows.

#3

I have turned on the infinite scroll but now once i’m out scrolling the diagram out of the visible space the placed object by model.commit is also out of the canvas’ visible space but technically it is the center of the entire canvas. What i want is to place the node at center of the screen.

#4

I don’t understand what the problem is. Here’s my test code. Note that I do not assign Diagram.padding or Diagram.scrollMargin or Diagram.scrollMode. Even after zooming in or out and panning, each time I click on the HTML button the new node is placed at the center of the viewport.

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

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

  myDiagram =
    $(go.Diagram, "myDiagramDiv",
      {
        "undoManager.isEnabled": true
      });

  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      { locationSpot: go.Spot.Center },
      $(go.Shape,
        { fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 8, editable: true },
        new go.Binding("text").makeTwoWay())
    );

  myDiagram.model = new go.GraphLinksModel(
  [
    { key: 1, text: "Alpha", color: "lightblue" },
    { key: 2, text: "Beta", color: "orange" },
    { key: 3, text: "Gamma", color: "lightgreen" },
    { key: 4, text: "Delta", color: "pink" }
  ],
  [
    { 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.commit(diag => {
        const data = { text: new Date().toLocaleString() };
        diag.model.addNodeData(data);
        const node = diag.findNodeForData(data);
        if (node) node.location = diag.viewportBounds.center;
      })
    });
}
window.addEventListener('DOMContentLoaded', init);
  </script>
</body>
</html>
#5

Thanks! it is working as expected.