Adding a diagram to a diagram


#1

Hi,
I have two diagram that are saved as JSON in a DB and loaded into the diagram DIV.
Diagram A :


And Diagram B:

When i load each diagram from JSON, independently, they are located as shown in pics, as saved in DB (i bind “loc”).
When i load diagram A and then diagram B, diagram B is located on the right side of the document, un seen. I have to zoom out in order to see both diagrams :
.
To be more accurate, when i load diagram A, i load it from JSON as is. And then, when i add diagram B, i load only the nodeDataArray and add node by node by calling model.addNodeData(nodeData).
Every added node is added only if not already exist.
In the current example all nodes of diagram B DO NOT exist in diagram A, so all of them are added.
But, i want the nodes of diagram B to be located exactly where they saved.
I want that the two merged diagrams span like this :
.
I’ve tried to “modify” “loc” values before adding the node data, by adding or subtracting viewport bounds, but without success.
How can I load any diagram ONTO an existing diagram and maintain its original nodes location ?
Regards,
Tany


#2

Check the location values in the saved data. I bet the nodes from model B are in fact being loaded at their stated locations in document coordinates. This is shown by the results in your third screenshot. It appears that you are forgetting that users can scroll their viewports.

So it seems to me that you want to move those nodes – i.e. change their locations. You can do that either in their node data, or you can do that after they exist in your diagram by calling Diagram.moveParts.

You can find out what area a collection of nodes is occupying by calling https://gojs.net/latest/api/symbols/Diagram.html#computePartsBounds. Then you can decide where to put them, upon which you can call https://gojs.net/latest/api/symbols/Diagram.html#moveParts.


#3

No problem,
I can moveParts but in order to center them, i don’t know what value to set.
Diagram’s B nodes X,Y location have a very big (x,y) values, for example (3800,1330)
(these values are saved in JSON and are binded to “loc”)
while viewPortsBounds.position(x,y)=(-58,-58). I don’t understand the negative values.
So i don’t know which (x,y) values to set in the part in order to move it to the center.


#4

Please read https://gojs.net/latest/intro/viewport.html.

I think you will want to remember a copy of the Diagram.documentBounds before you start adding stuff from another diagram or model. Then add those new parts and remember each one in a collection. Call Diagram.computePartsBounds on that collection of new parts. Now you have Rects for both the original diagram’s parts and the new ones. You can compare them and decide where to move those new parts relative to the old parts.


#5

OK i did that.
Here are the results :
diagramBounds.position(x,y)=(-58,-208)
computedBounds.position(x,y) = (2988,1128).
I have no idea which values should be set in order to move the added nodes to the center.


#6

Clearly, since the second x value is much greater than the first x value, you’ll want to move it a good distance in the negative x direction. You might want to do the same in the negative y direction. Exactly how far you want to move the new parts depends on where you want to position them relative to the old parts.