Node and Group are not align together

GoJS
1

Hi,
I’m trying to align a node and a group side by side, namely to have the same Y coordinate, set to zero.
On both, node and group templates, i use the bind to location and i set the loc value of the node to “0 0” and the loc value of the group to “100 0”.
When i run the application, the Group the located properly but the node is located somewhere on “0 150”, namely, shifted down.
By the way, when i use only group nodes and set them to “0 0” and “100 0” respectively, the group nodes are align on Y=0.
It happens only when i mix templates.
The templates are :

diagram.nodeTemplate =
$(go.Node, “Spot”, // the Shape automatically fits around the TextBlock

		    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
				$(go.TextBlock,
                        { 
                            maxSize: new go.Size(100, 30),
                            isMultiline: false, editable: true },
                        new go.Binding("text", "loc")),
                $(go.Picture, { width: 50, height: 50 }, new go.Binding("source") )
        );

diagram.groupTemplate =
$(go.Group, “Auto”,
{
isSubGraphExpanded: false,
// layout: $(go.TreeLayout, { isInitial:false, angle: 90, arrangement: go.TreeLayout.ArrangementHorizontal } /* isOngoing:false */)
// layout: $(go.GridLayout),

                    subGraphExpandedChanged: function(group) {
						diagram.startTransaction("graph");
						if (group.isSubGraphExpanded === false ) {
							// collapse
							for (var i = 0; i < diagram.model.nodeDataArray.length; i++) {
									//var nodeData = diagram.model.findNodeDataForKey(diagram.model.nodeDataArray[i].key);
									var node = diagram.findNodeForKey(diagram.model.nodeDataArray[i].key);
									if (node.data.isGroup) {
									    diagram.model.setDataProperty(node.data, "loc", origLoc[node.data.key]);  // restore the original location of the group	
										node.isLayoutPositioned = false;
									}
								}
						}
						else {
							// expand
							for (var i = 0; i < diagram.model.nodeDataArray.length; i++) {
									var node = diagram.findNodeForKey(diagram.model.nodeDataArray[i].key);
									if (node.data.isGroup) {
										node.isLayoutPositioned = true;
									}
							}
							// diagram.layout.isOngoing = false;
						}
						diagram.commitTransaction("graph");
                    } // subGraphExpanderClicked
					
					
                },
				new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
				
                $(go.Shape, "RoundedRectangle", // surrounds everything
                        { parameter1: 10, fill: "whitesmoke" }),
                $(go.Panel, "Vertical",  // position header above the subgraph
                        { defaultAlignment: go.Spot.Left },
                        $(go.Panel, "Vertical",  // the header
                                { defaultAlignment: go.Spot.Top },
                                $("SubGraphExpanderButton", {visible: true }, new go.Binding("visible", "SubGraphExpanderButtonVisble")),
                                $(go.TextBlock,     // group title near top, next to button
                                        { font: "Bold 12pt Sans-Serif", margin: new go.Margin(10,0,10,0) },
                                        new go.Binding("text", "loc") ),
                                /*$(go.Picture, { width: 50, height: 50, source:"icons/campus.png" } ) , */
								$("Button",
									{ margin: 2 },
									$(go.TextBlock, "Click me!")
									),
                        $(go.Placeholder,     // represents area for all member parts
                                { padding: new go.Margin(0, 10), background: "white" })
                        )
						
                )
        );

Regards,
Tany

2

First, it depends on whether you have specified a Diagram.layout, and if so, with what properties.

Second, your Group template includes a Placeholder, so despite whatever location it gets from a Binding, it may be moved by the locations of its member nodes.

3

Hi,
thanks for the response.

  1. I’m not using any predefined Layout.
  2. The Group node has no members.
    I can send you the code if you wish.
4

Only when i deleted the go.Placeholder from the group template, nodes were aligned…

5

I just tried this by adding a Node.location Binding on the Group template in the Basic sample (Basic GoJS Sample), and by setting the corresponding data property in the model.

When there were member nodes, the group was located according to the locations of the member nodes, demonstrating that it was ignoring the binding. (The Group template does contain a Placeholder.)

When I loaded the same code but with a model which did not have member nodes, then the group was located where the binding specified according to the data property.

So I am not getting the same behavior as you have – even with a Placeholder, a group will be located where it needs to be to contain its member nodes, but it will be located according to its binding if there are no member nodes.

6

This is the code that i wrote, it does not behave as you describe:

var nodeDataArray = [ 	
    { key: "A",  source: "icons/Router.svg", loc: "0 0" },
    { key: "B",  source: "icons/Router.svg", loc: "100 0", isGroup: true},
];
var linkDataArray = [];

var $ = go.GraphObject.make;

var diagram = new go.Diagram("myDiagramDiv");

diagram.nodeTemplate =
        $(go.Node, "Spot",  
			
			    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
				$(go.TextBlock,
                        {  isMultiline: false, editable: false },
                        new go.Binding("text", "loc")),
                $(go.Picture, { width: 50, height: 50 }, new go.Binding("source") )
        );

diagram.groupTemplate =
        $(go.Group, "Auto",
                {
                    isSubGraphExpanded: false,						
                },
				new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
				
                $(go.Shape, "RoundedRectangle", 
                        { parameter1: 10, fill: "whitesmoke" }),
                $(go.Panel, "Vertical",  
                        $(go.Panel, "Vertical",  // the header
                                $("SubGraphExpanderButton"),
                                $(go.TextBlock,     // group title near top, next to button
                                        { font: "Bold 12pt Sans-Serif" },
                                        new go.Binding("text", "loc") ),												
								$("Button",
									{ margin: 2 },
									$(go.TextBlock, "Click me!")
									),
                        $(go.Placeholder, { background: "white" })
                        )
						
                )
        );
diagram.model = new go.GraphLinksModel(nodeDataArray,linkDataArray);
7

I have modified your code to give the regular Node a gray background and to insert an Auto Panel with a gray background around the Placeholder with margin: 1. Here is the result:

Note how the tops of the two gray rectangles have the same Y coordinate? The top-left corner of the regular node is at (0,0) and the top-left corner of the group’s Placeholder is at (100,0).

If you really want to line up the tops of the nodes, you should bind Node.position instead of Node.location.

8

I see,
In your tutorial guides you always use Node.location, so i figured it is the common and right way to work
I wasn’t able to find Node.position sample, not even when trying to google it.
Can you point me to some sample code ?
Tany

9

Just bind “position” instead of “location”.

Read about the difference between the Part.location and GraphObject.position properties at Part | GoJS API and Part | GoJS API.

10

Works perfect !!
Thanks