Reload of data causes wrong alignment

GoJS
1

Hi all!

This is the first time I use GoJS so I might be missing info.

I am trying to align some nodes(or a diagram?) on an image but they keep getting misplaced after I reload the page.

I am using an altered version of the DynamicPorts example (Dynamic Ports)

The changes I did are the following:
I altered the canvas html style to change the dimensions and added an image in the background.

<div id="myDiagramDiv" style="width:1200px; height:1200px; border:1px solid black; 
     background-image: url('rack.jpg'); background-size: cover;"></div>

I added a code to disable scrolling of the diagram.

myDiagram =
        $(go.Diagram, "myDiagramDiv",  //Diagram refers to its DIV HTML element by id
          { "undoManager.isEnabled": false,
             allowHorizontalScroll: false,
             allowVerticalScroll: false,

         });

I have also removed the top and and left side navigation menu.

The issue is the following:

I add the nodes and create the links between them.
I then save in order to generate the JSON data.
I take the JSON data and put them in the “mySavedModel” text area (hardcoded in the HTML) and reload the HTML page.

The result is that all the node(or diagram altogether) is misaligned with the image. Sometimes just by a few pixels and some other times by a lot.

Any suggestions?

2

If you don’t specify any initial scroll or zoom values (i.e. Diagram.initial… properties that govern the initial values for Diagram.position and Diagram.scale), the default behavior is to position the content in the middle of the viewport.

So if you happen to have the nodes off-center, by default they will be re-centered upon loading the model.

The solution is to set Diagram.initialPosition to some Point that you like. I suppose new go.Point(0, 0) is as good as any.

By the way, the user could effectively scroll by zooming out and in, so you probably want to set Diagram.allowZoom to false. And if you allow the user to move nodes around, they could cause auto-scroll to happen, which you can disallow by setting Diagram.autoscrollRegion to zero.

You might be interested in these samples that demonstrate alternative implementation strategies. I think the second one might be better for you:

Note that in the Kitten Monitor sample the image is not the background of the HTMLDivElement, but is a Picture in a Part that is in the “Background” Layer with a defined size and position. That gives the user freedom to scroll and zoom.