I’m developing a Genogram based on GoJS Genogram with VueJS.
The Genogram can be saved into local storage and loaded anytime. It saves whole diagram data including node and link location coordinates. But there is one issue I found:
layout: // use a custom layout, defined below
$(GenogramLayout, {direction: 90, layerSpacing: 30, columnSpacing: 10})
The layout config above does auto layout but ignores the node location coordinates.
Removing that code means I can save node and link location but no auto layout.
My aim is to make an auto layout for the first time genogram render then save the layout state.
When I load the genogram data, It shows the same layout location from the local storage.
I tried modifying the GenogramLayout class but I couldn’t find specific function that control the layout coordinates.
Which part of code or function I need to modify/override ?
Normally whenever you load a model it performs a layout. But if your node data has location information for each node, and you have a Binding on Node.location (or Node.position), set isInitial: false on the GenogramLayout. That will prevent that initial layout from happening.
The main problem is the initial data has no location value, so the genogram isn’t generated when I set isInitial: false.
But when I add new node, the genogram is generated perfectly and could be saved and loaded.
My plan for the program:
Initialize genogram data, no location value available.
Generate the genogram, initial auto layout is performed. (Location value is calculated by the GenogramLayout class and automatically added into the data).
Save and Load the genogram (No more layout calculation from GenogramLayout).
I suggest that after you have loaded the model data but before you assign Diagram.model, you determine whether or not all of the nodes have location property values. Then set Layout.isInitial accordingly on the Diagram.layout.
Hmm, maybe you would prefer always having Layout.isInitial set to false. Then in an “InitialLayoutCompleted” DiagramEvent listener you can see whether all of the Nodes have real values for Node.location. (Call Point.isReal.) If they do, then everything is OK. If some or all do not, then you need to call Diagram.layoutDiagram with a true argument.
