Hi here. I am using Grid layout
I want to rearrange the positions of the nodes and save the positions.
And later when reloading the page, the API returns some nodes with real locations and some new nodes without locations.
As per my diagram, I have to position the nodes with appropriate locations that have real locations and arrange remaining nodes without locations in Grid layout.
Similarly say me a way to save locations in Layered digraph Layout.
The way that one saves programmatic changes in GraphObjects to model data is via TwoWay Bindings. This talks about that: GoJS Data Binding -- Northwoods Software
For locations, one typically one has a TwoWay Binding on the Node.location property:
$(go.Node, . . .,
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
. . .
Normally, the Diagram.layout will do its layout right after you replace the Diagram.model. However, you can set Layout.isInitial to false to prevent it from doing its automatic layout then.
Hi Walter,
Good day…
But What if some nodes has locations and some without locations, I have to arrange the nodes with locations in locations and nodes without locations in grid layout???
Where and how do you want those location-less nodes to be placed? GridLayout doesn’t distinguish whether a node already has a real location or not.
In the same diagram , if I have real locations I have to position those nodes and if not then auto layout of grid has to be performed.
Could you please be more specific about where and how they should go?
Suppose Initially I have 5nodes without locations in nodedata array as follows :
[{“region”: “Uk”},
{“region”: “Utah”},
{“region”: “Ontario”},
{“region”: “California”},
{“region”: “UAE”}]
it has to be arranged as following in grid layout :
After that, I am changing the nodes positions and saving the data.
and again when I retrieve the data, it comes with 5 data with locations (Here I have given with sample locations for example) and also another 5 without locations.
[{“region”: “Utah”,“loc” : “0 0”},
{“region”: “Ontario”,“loc” : “40 0”},
{“region”: “California”,“loc” : “80 0”},
{“region”: “UAE”,“loc” : “120 0”},
{“region”: “Utah”,“loc” : “160 0”},
{“region”: “Germany”},
{“region”: “France”},
{“region”: “Bangladesh”},
{“region”: “Srilanka”},
{“region”: “Egypt”}]
In that case, I have to align the nodes with locations by binding locations and nodes without data as Grid layout as follows in the same diagram itself
I’m sorry, but I still do not understand. The second time you say Utah should be at 0,0, Ontario should be at 40,0 and California should be at 80,0. Yet in your screenshot, that is clearly not the case – Utah has a larger X value than Ontario, and California is way farther right than it should be.
There’s an empty spot between Utah and UK. Why?
Why should Germany and the others without specified locations be arranged below Ontario, and Utah and the others?
I still do not have a clear and unambiguous set of rules for the layout that you want to do.
Sorry…I have given locations for sample only…
Clearly…
At first time , API returns array with 5 regions (without locations) and user have rearranged the positions and saved them…
Later then the API returns array with 10 regions (5 with already saved locations and 5 without locations)
Now I have to arrange these nodes ( locate 5 regions having location as per the locations and another 5 with automatic layout or some else).
Waiting for your help…
If you don’t set Diagram.layout at all, you’ll get something like that behavior. Nodes with real locations remain there; those that don’t are laid out in a grid-like manner, ignoring the pre-positioned nodes.
If you want something different, I’m waiting for a precise description of the behavior that you want.
I have implemented some stuffs after layoutcompleted.
As you said, if I don’t use layout, then what is the alternative for layoutcompleted??
Yes, implementing some layout behavior in a “LayoutCompleted” DiagramEvent listener could work. You would need to look at the value of node.data.loc to see if a location was specified in the model – if not, you would position the node where you want.
But it would be more efficient to implement that behavior in a custom Layout. GoJS Layouts -- Northwoods Software Extending GoJS -- Northwoods Software
I am using angular 4. Can you please demonstrate or give any examples of how to implement custom layout or extensions in angular??
Hi Walter,
In the above image, the clouds are overlapping when initially loading. Not using any layouts.
In the image UK has location where as B doesn’t has locations in node data array.
So can you help me out to avoid this overlapping while initially loading
Yes, the default Layout behavior is to position unlocated nodes in a grid-like pattern, which might overlap with already-located nodes.
I’ll see what I can do to help you when I get some free time.
OK Thanks…Please help me around
Here you go: IncrementalLayout that only arranges nodes without real locations and by not overlapping existing nodes
The complete implementation is there on the page.
Hey Thanks walter
But Where can I see the source code of this layout
By the way I have another question : that can I locate nodes with location in this incremental layout itself??
I don’t understand your second question.
