Node and Group are not align together

@Tany wrote:

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

Posts: 2

Participants: 2

Read full topic