while reloading the diagram with different set of data (nodes and links), diagram keeps shifting towards right side of the screen every time. Also, i have observed that, viewport width is also getting increased every time.
I want to keep the “div” same all the time for all the data sets.
How can i prevent this shifting of diagram towards right?
Thanks.
First, please make sure when you have questions unrelated to other topics that you create new topics for them. This makes it easier for other to search for answers if they have a similar question.
I’m not entirely clear on what you want the behavior to be. Could you provide some screenshots of the behavior you’re seeing and what you’d like to happen?
Maybe you want to set Diagram.fixedBounds.
Or maybe you need to manage the content alignment or the viewport: GoJS Initial Viewport -- Northwoods Software
Screenshots are as follows:
I want the diagram to be at the same place every time, not getting shifted as seen in the above screenshots.
I think, this is because “viewport” size is getting increased, where i have aligned “diagram” at the “center”.
How can i prevent this?
Thanks.
How is the Diagram defined? Do the saved positions/locations of the nodes change?
Diagram definition is as follows:
myDiagram =
$(go.Diagram, "citopology_viewer_miniapp",
{
// start everything in the middle of the viewport
initialContentAlignment: go.Spot.Left,
// use a custom ResizingTool (along with a custom ResizeAdornment on each Group)
resizingTool: new LaneResizingTool(),
// don't allow dropping onto the diagram's background unless they are all Groups (lanes or pools)
mouseDragOver: function(e) {
if (!e.diagram.selection.all(function(n) { return n instanceof go.Group; })) {
e.diagram.currentCursor = 'not-allowed';
}
},
mouseDrop: function(e) {
if (!e.diagram.selection.all(function(n) { return n instanceof go.Group; })) {
e.diagram.currentTool.doCancel();
}
},
// a clipboard copied node is pasted into the original node's group (i.e. lane).
"commandHandler.copiesGroupKey": false,
// automatically re-layout the swim lanes after dragging the selection
"SelectionMoved": relayoutDiagram, // this DiagramEvent listener is
"SelectionCopied": relayoutDiagram, // defined above
"animationManager.isEnabled": false,
// disable undo & redo
"undoManager.isEnabled": false,
//toolTip duration: Infinity
"toolManager.toolTipDuration": NaN,
});
>>> Do the saved positions/locations of the nodes change?
– How can i verify this ?
Interesting – there’s no Diagram.layout. OK, check the values of Node.position after each load.
Node.position is undefined every time:
Value of Node:
At which point, should i need to check the value of Node.position? I am checking this at the end of diagram creation.
It’s not a static property: GraphObject | GoJS API
(And if it were, you would need to write: go.Node.position.)
Try:
myDiagram.nodes.each(function(n) { console.log(n.position.toString()); })
As i have set the alignment to left, Node’s position is same all the time as follows:
Point(-4.263256414560601e-14,0)
Point(100.49999999999996,228.0845140823228)
Point(100.49999999999996,90.08451408232283)
Point(136.0228474983079,240.0845140823228)
Point(175.7145150550707,391.6073615806307)
Point(172.16451581801016,543.1302090789387)
Point(473.93951543654043,240.0845140823228)
Point(467.72284826124746,543.1302090789387)
Point(136.0228474983079,102.08451408232283)
Point(767.7228482612475,543.1302090789387)
This result include the position of 10 nodes (6 child nodes, 3 parent or lane nodes and 1 diagram node which includes the lanes.)
Issue is resolved now.
I had used the section width as 70%.
After removing the width property or giving it a fixed value, issue is resolved.
Thanks.