Hi everyone, I have a diagram with nodes and I want to move a node, and then I want to obtain this new position, because I want the node to be in that new position when recharging the page. How can I obtain the position of the node? I know then I cand bind the property location to put the node in the position, but I can’t obtain the position, I tried finding the node by key, and then thisNode.Position, but it doesn’t work, can somebody help me please?
Normally one uses a TwoWay Binding on the Node.location property. That will cause the model data object for each Node to have the latest location information, so that when the model is saved and then reloaded, the corresponding Node will get that saved location point.
See any of the samples that allow you to Save the model. For example, in the FlowChart sample, Interactive Flowchart Diagram | GoJS Diagramming Library, there is such a Binding on the Node template(s):
.bindTwoWay('location', 'loc', go.Point.parse, go.Point.stringify)
If you take a look at the node data objects shown in the JSON-formatted text, you will see “loc” properties that have values that are the result of calling the Point.stringify function. Try moving a node, clicking the “Save” button, and see the updated “loc” property value.
Note that if you have a Diagram.layout defined, the layout will be performed upon loading a model. Each Node gets the saved location, but then the layout moves the nodes to where it thinks they should be. In order to avoid that, set Layout.isInitial to false on your Diagram.layout. Or don’t set Diagram.layout at all.
Thanks, I hadn’t seen that sample…a question, Does the version of gojs matter? Because I have problems with the code, exactly with “apply(nodeStyles)” part.
I have something like this:
Is it possible to add the “apply” part inside NodeTemplate? I don’t find that function on internet for this part.
the version is 2.3.16
If you are doing new development, I recommend using the latest version (currently 3.0.11).
If you cannot upgrade for some reason, at least update to to 2.3.17. Even then there may be some sample code that uses features only available in 3.0.*. For those cases you’ll need to find the equivalent code that works in all versions.
I did it, thanks! I found the way to do it for nodes.
Is there a form to do the same with items in a Panel? I have my code like this:
Each node(nodeTemplate) is process, and Panel itemsarray are subprocesses, I have them now with table layout, but I want to move them like if they were nodes, free movement, and not onlye rows and columns; I’ve tried setting Auto in layout but it doesn’t work
Don’t use itemArray/itemTemplate – replace the Node by a Group, and have each subprocess represented by a Node that is a member of a Group.
Thanks for the answers, they really helped me