Group property of node returns undefined

GoJS
1

I have the following node template in my diagram:

        var $ = go.GraphObject.make;  // for conciseness in defining templates

        myDiagram =
          $(go.Diagram, "myDiagram",  // must name or refer to the DIV HTML element
            {
                initialContentAlignment: go.Spot.Center
                 ,allowDrop: true
            , grid: $(go.Panel, "Grid",
                { gridCellSize: new go.Size (10, 10) },
                $(go.Shape, "LineH", { stroke: "#d9d8d8" }),
                $(go.Shape, "LineV", { stroke: "#d9d8d8" }),
                $(go.Shape, "LineH", { stroke: "blue", interval: 5 }),
                $(go.Shape, "LineV", { stroke: "blue", interval: 5 })
              )
             , "draggingTool.isGridSnapEnabled": true,
            "draggingTool.gridSnapCellSpot": go.Spot.Center
            });  // must be true to accept drops from the Palette

        // define the Node template for regular nodes
        myDiagram.nodeTemplateMap.add("",  // the default category
                  $(go.Node, go.Panel.Auto
                        , {
                            selectionChanged: onSelectionChanged
                        , locationSpot: new go.Spot(0, 0, cellSize.width / 2, cellSize.height / 2)
                        }
                        // The Node.location comes from the "loc" property of the node data,
                        // converted by the Point.parse method.
                        // If the Node.location is changed, it updates the "loc" property of the node data,
                        // converting back using the Point.stringify method.
                        , new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
                        // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
                        $(go.Shape,
                            { figure: "Rectangle", fill: "white", strokeWidth: 2 }
                            , new go.Binding("stroke", "color")
                            //, new go.Binding("position", "pos")
                        )

                        , $(go.TextBlock,
                              {
                                  maxSize: new go.Size(150, NaN), textAlign: "center",
                                  margin: 12, editable: true, name: "TEXT",
                                  font: "16pt Helvetica, Arial, sans-serif"
                              }
                              , new go.Binding("text", "text").makeTwoWay()
                          )
                   )
            );



        myDiagram.groupTemplate =
          $(go.Group, go.Panel.Auto,
                {
                    isSubGraphExpanded: false,  // only show the Group itself, not any of its members
                    ungroupable: true
                }
                // allow the ExternalObjectsDropped event handler to ungroup the members as top-level parts
                , $(go.Shape, "Rectangle",  // the rectangular shape around the members
                        { fill: "rgba(128,128,128,0.2)", stroke: "black", strokeWidth: 1 }
                   )
                , $(go.Placeholder, { alignment: go.Spot.TopLeft }),
                $(go.TextBlock,
                      { font: "bold 16pt Helvetica, Arial, sans-serif", margin: 10 },
                      new go.Binding("text", "RackGrpName")
                      //, new go.Binding("key", "RackGrpID")
                 )
           );

I have the follwing Json:

        myPalette.model = new go.GraphLinksModel([
          { key: "1", RackGrpName: "Customer Left", isGroup: true },
          { key: "Ge", text: "Pocket 1", color: "green", group: "1", pos: "0 0" },
          { key: "Gr", text: "Pocket 2", color: "orange", group: "1", pos: "100 25" },
          { key: "Gd", text: "Pocket 3", color: "red", group: "1", pos: "50 100" },

]
, []);
}

However, in the function:

    function onSelectionChanged(node) {

var SelectedNode = myDiagram.selection.first();
if (SelectedNode !== null) {
var data = SelectedNode.data;
}
}

The SelectedNode.group property results in undefined.

Can any one help?

thank you

Felipe Solanet
magnet

2

Diagram.selection is a collection of Parts, typically either Nodes or Links, depending on what the user has selected.

There is no property named “group” on the Part class, nor on the Node class. Perhaps you meant “containingGroup”, confusing the Part with its model data?

3

I hover the node as well as the node.data and for both the containingGroup is null. I also hover the node.part.containingGroup and is also null.

How can I get the group the node is in?

4

That’s right: part.containingGroup will be the Group of which the Node or Link is a member. Maybe the selected Node isn’t a member of any Group. Are you sure that node instanceof go.Node is true?

If you have set Node.selectable = false, how are you getting the reference to the member node in the group (assuming it is a member of the group)?

5

I removed the selectable = false. I can select the node with no problems. However, I just can’t get to the group or containing group of the node that I select.
When I select it, I can hover the javascript code and see all its properties, but neither the group or containing group have a value, they are both null.

My project is from the block: [EDIT: now a standard sample] Graphical Macros via Auto Ungrouping

As the group is dropped in the diagram, it is ungrouped and all its members are shown. My intent is once that is done, to be able to select one of those nodes, which should cause all of the other nodes in the same group to select and drag it so that all of them move at the same time. The overall idea is to keep the groups of nodes together.
Right now, I can select one node and none of the other nodes in the same group is selected.

6

By default CommandHandler.ungroupSelection selects all of the now-ungrouped Nodes. So the user can just drag everything, or you can do whatever you like with that selected collection.

7

That is true. However, I am referring to after initial ungrouping. Once the user clicks on another object the nodes get diselected. Then the user wants to drag an entire group and the nodes can move freely away from their group. That would be a problem.

I need a way to, upon the user clicking on a node, that all the group members also get selected so when the user drags that node, all the member of the same group move with it.

8

Why not leave the group, expanded, with no layout?

If you really don’t want to have transparent groups in your diagram, you can still override DraggingTool.computeEffectiveCollection. That’s demonstrated, for example, by the Seating Chart sample.