Location

GoJS
1

Hi ,

I try to save the location of my nodes but i have an issue when i move my node the location is not correct . In my node template i show the X and Y .
In this sample i moved F1 and F2 the coordinate are corrects.

But if i move R1, the coordinate of F1 and F2 changed.

   myLocalDiagram.nodeTemplateMap.add("Field",
          GO(go.Node, go.Panel.Vertical, { locationSpot: go.Spot.Center, selectionObjectName:'selection' },
                            new go.Binding("location", "loc",<span ="apple-tab-span"="" style="white-space:pre">				</span>go.Point.parse).makeTwoWay(go.Point.stringify),
                                                          new go.Binding("text", "key"),
                                                                   GO(go.Panel, go.Panel.Auto, { name: 'selection' },
                                                                       GO(go.Shape, "RoundedRectangle",
                                                                          { fill: FieldColor, stroke: null }),
                                                                       GO(go.Panel, go.Panel.Horizontal,
                                                                            GO(go.Picture,
                                                                                   new go.Binding("source", "category", <span ="apple-tab-span"="" style="white-space:pre">											</span>nodeTypeImage), { width: 40, height: 40 }),
                                                                            GO(go.TextBlock, textStyle(),
                                                                              { text: 'Field' },
                                                                              new go.Binding("text", "text").makeTwoWay())
                                                                          )),

   <span ="apple-tab-span"="" style="white-space:pre">								</span>  GO(go.TextBlock, textStyle(),
                                                             <span ="apple-tab-span"="" style="white-space:pre">		</span>  new go.Binding("text", "loc", function (p) {  return p; })
                                                                    )
                                                                    ))
                                                             ,
                                                              {
                                                                  click: function (e, obj) { LeftLocalClick() }
                                                              }
                                                         )
                                               );


  myFullDiagram.nodeTemplateMap.add("Reservoir",
                 GO(go.Node, go.Panel.Vertical, { locationSpot: go.Spot.Center, selectionObjectName: <span ="apple-tab-span"="" style="white-space:pre">			</span>'selection' },
                   <span ="apple-tab-span"="" style="white-space:pre">	</span>new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                                                          new go.Binding("text", "key"),
                                                                   GO(go.Panel, go.Panel.Auto, { name: 'selection' },
                                                                       GO(go.Shape, "RoundedRectangle",
                                                                          { fill: ReservoirColor, stroke: null }),
                                                                       GO(go.Panel, go.Panel.Horizontal,
                                                                            GO(go.Picture,
                                                                                   new go.Binding("source", "category", <span ="apple-tab-span"="" style="white-space:pre">											</span>nodeTypeImage), { width: 20, height: 20 }),
                                                                            GO(go.TextBlock, textStyle(),
                                                                              { text: 'Reservoir' },
                                                                              new go.Binding("text", "text").makeTwoWay()),
                                                                       GO(go.TextBlock, textStyle(),
                                                               new go.Binding("text", "loc", function (p) {
                                                                   return p;
                                                               }).makeTwoWay()
                                                                    )
                                                                          )),
                                                             ,
                                                              {
                                                                  click: function (e, obj) { LeftFullClick() }
                                                              }
                                                         )
                                               );

I dont think that was a problem with the template.
May be the definition of my diagram.

    myFullDiagram =
                                 GO(go.Diagram, "myDiagramDiv",  // each diagram refers to its DIV HTML element by id
                                   {
                                       initialScale: 0.4,
                                       minScale: 0.1,
                                       maxScale: 1.5,
                                       contentAlignment: go.Spot.Center,  // center the tree in the viewport
                                       isReadOnly: false,// don't allow user to change the diagram
                                       allowMove: true,
                                       allowCopy: false,
                                       allowDelete: false,
                                       allowDrop: false,
                                       allowGroup: false,
                                       allowLink: false,
                                       hasHorizontalScrollbar: false,
                                       hasVerticalScrollbar: false,
                                       layout: GO(go.TreeLayout,
                                    { angle: 90, sorting: go.TreeLayout.SortingAscending }),
                                       click: function (e, obj) { ClickOnFullDiagram(e, obj) }
                                   });
                         myFullDiagram.toolManager.dragSelectingTool.isPartialInclusion = true;
                         myFullDiagram.toolManager.dragSelectingTool.delay = 150,
                         myFullDiagram.grid.visible = false;
                         myFullDiagram.toolManager.draggingTool.isGridSnapEnabled = true;
                         myFullDiagram.initialContentAlignment = go.Spot.Center;
2

My guess is that the problem is caused by the Diagram.layout being performed each time the size of a Node changes, which is the default behavior. That is the default behavior so that in tree diagrams the automatic layout keeps the nodes from overlapping each other if the nodes become wider, or to move them closer together if the nodes become narrower.

The Nodes keep changing size because you are including the textual representation of the location in the Node, resulting in the Node changing size. If you did not show the location that way, making the Node.actualBounds.width change, I think it would work well for you. Try replacing that in your templates with ways that show the location without changing the size of the Node, such as by using tooltips, or by showing the location in a TextBlock with a fixed desiredSize.

Or you can set the Part.layoutConditions flags on the Node templates not to include the Part.LayoutNodeSized flag.

3

Ok , i put the location in the tooltype.

That ok.

I have my diagram in treelayout, the user can change location of nodes and save the location in database.
So the user save the layout in database. That is correct.
But after that , i need to load the layout saved. So i pass my layout of my diagram in new go.Layout();
and i load the location of my nodes.

Location saved : 290 50 location render : 150 42.

I dont know how the location is not the same.

Thx,

4

Is it performing the layout again? (If so, that should be apparent because the manually moved nodes have been put back where the layout had originally placed them.)

The question really is: when do you want a layout to be performed? Why should a layout have been done initially? Do you want to set Layout.isInitial to false? And/or set Layout.isOngoing to false? Or both and explicitly call Diagram.layoutDiagram(true) when you do want it to happen?

I can’t answer these questions for you, because there are a lot of reasonable answers. You may need to learn about the possibilities and experiment to get the behavior(s) that you want.