Issues with initial content alignement

GoJS
1

We have some issues with the initialContentAlignment feature of GoJS. Is there a way to leave the nodes in the location where it is dropped instead of using Diagram.initialContentAlignment. We would like to disable the default behaviour of aligning to the top-left.

2

Could you show a screenshot of what you mean? You can always change the initialContentAlignment to something else like go.Spot.Center, which is actually the default in 2.0.

3

We want to disable any alignment in our grid. That includes the default alignment of center.

4

You can set initialContentAlignment to go.Spot.None, but I still don’t understand what it is you really want.

5

So, when we drag and drop components on to the screen they either go align themselves to the top-left corner or the center. But we want the component to remain in the same position where the user dropped it. so when we resize the grid dynamically we observe that there is a jump in the nodes on screen which we want to avoid.

6

Maybe you need to turn off grid snapping. Also, make sure you haven’t set Diagram.contentAlignment.

7

You still haven’t showed us what is happening. I cannot reproduce that problem.

Here’s what I just tried:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
  <script src="go.js"></script>

  <script>
    function init() {
      var $ = go.GraphObject.make;

      // initialize main Diagram
      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            "animationManager.isEnabled": false,
            initialPosition: new go.Point(0, 0),
            padding: 0,
            "grid.visible": true,
            "undoManager.isEnabled": true
          });

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, { fill: "white" },
            new go.Binding("fill", "color")),
          $(go.TextBlock, { margin: 8 },
            new go.Binding("text"))
        );

      // initialize Palette
      myPalette =
        $(go.Palette, "myPaletteDiv",
          {
            nodeTemplateMap: myDiagram.nodeTemplateMap
          });

      // now add the initial contents of the Palette
      myPalette.model.nodeDataArray = [
        { text: "green node", color: "lightgreen" },
        { text: "orange node", color: "orange" }
      ];

      // initialize Overview
      myOverview =
        $(go.Overview, "myOverviewDiv",
          {
            observed: myDiagram
          });
    }

    // save a model to and load a model from Json text, displayed below the Diagram
    function save() {
      var str = myDiagram.model.toJson();
      document.getElementById("mySavedModel").value = str;
    }
    function load() {
      var str = document.getElementById("mySavedModel").value;
      myDiagram.model = go.Model.fromJson(str);
    }
  </script>
</head>
<body onload="init()">
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
      <div id="myPaletteDiv" style="flex-grow: 1; width: 100px; background-color: whitesmoke; border: solid 1px black"></div>
      <div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 100px; height: 100px; background-color: lightgray; border: solid 1px black"></div>
    </div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
  </div>
  <div id="buttons">
    <button id="loadModel" onclick="load()">Load</button>
    <button id="saveModel" onclick="save()">Save</button>
  </div>
  <textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [],
  "linkDataArray": []}
  </textarea>
</body>
</html>
8

Can we send a mail with a video attachment for you to see? It cannot be shown with screenshots.

9

Sure, send us email to GoJS at our domain, nwoods.com.