Group items being incorrectly positioned

[jJones]

I’m currently attempting to use groups for a diagram I’m creating.

Every node within the diagram has ‘isGroup’ set to true, and is assigned to an ‘OfGroups’ category for templating. The idea is that these groups can go as many levels down as the user would like them too, however when I move one node/group into another the positioning is incorrect and I’m not quite sure what I’m doing wrong.

This is an example of 3 separate nodes/groups.

I move the ‘User’ node/group into the ‘Requirement’ node:

And then I try to move the ‘Principle’ node/group into ‘Requirement’ as well:

As you can see it doesn’t line up or sit within the group very well…

My group template is as follows:

oDiagram.groupTemplateMap.add('OfGroups',
  goJs(go.Group, go.Panel.Auto, {
      mouseDragEnter: fGroupMouseDragEnter,
      mouseDragLeave: fGroupMouseDragLeave,
      computesBoundsAfterDrag: false,
      mouseDrop: function () {
        fFinishDrop.apply(that, arguments);
      },
      layout: goJs(go.GridLayout, {
        wrappingColumn: 1,
        alignment: go.GridLayout.Position,
        cellSize: new go.Size(1, 1),
        spacing: new go.Size(4, 4)
      })
    },
    new go.Binding('location', 'loc', go.Point.parse),
    goJs(go.Panel, go.Panel.Vertical,
      goJs(go.Panel, go.Panel.Horizontal, {
          stretch: go.GraphObject.Horizontal,
          height: 20
        },
        goJs(go.TextBlock, {
            alignment: go.Spot.Left,
            font: 'bold 10pt helvetica, bold arial, sans-serif'
          },
          new go.Binding('text', 'text')
        ),
        goJs(go.Placeholder, {
          alignment: go.Spot.Center,
          padding: new go.Margin(0, 5)
        }),
        goJs(go.Shape, {
            alignment: go.Spot.Right,
            name: 'shape',
            strokeWidth: 2,
            desiredSize: new go.Size(20, 20)
          },
          new go.Binding('fill', 'colour'),
          new go.Binding('geometryString', 'geoString'),
          new go.Binding('stroke', 'stroke')
        )
      ),
      goJs(go.Placeholder, {
          padding: 10,
          alignment: go.Spot.Center
        },
        new go.Binding('background', 'isHighlighted', function (b) {
          return b ? 'red' : 'transparent';
        }).ofObject()
      )
    ),
    goJs(go.Shape, 'RoundedRectangle', {
      isPanelMain: true,
      fill: null,
      stroke: 'black',
      strokeWidth: 2
    })
  )
);

Any idea what could be causing this?

Thanks

[walter]

Aren’t you getting errors? You cannot have more than one Placeholder in a Group, but your template has two.

In an unrelated matter, if you are using only one group template, it’s easier to just set Diagram.groupTemplate (or equivalently, call Diagram.groupTemplateMap.add("", …)). Using the default template means you won’t need to set category: “OfGroups” on your node data.

Similarly, if you want all of your nodes to be Groups, you can set GraphLinksModel.nodeIsGroupProperty = function(obj) { return true; }. That will cause the model to think that every node data should be represented by a Group.

[jJones]

No errors from having two placeholders, though I just removed the first one and now they’re being positioned correctly. Didn’t know about only having one placeholder!

Thanks for the other two tips as well, I will apply them now.

Thank you very much

[walter]

Odd, I just tested having a second Placeholder in a Group template, and I got an error even when I was using go.js instead of go-debug.js. Were there any warnings at all in the console log?

[jJones]

The console was completely empty.
Using the non-debug version of 1.4.14 currently, not the latest version.

[walter]

I believe that the error happens when the template is constructed, not when the diagram is shown.

[jJones]

Surely the template would be constructed before the diagram is shown though? Console remained empty at all times.

That was also after I placed another node/group into another

[walter]

There must be some order of events that causes the error not to be detected. Maybe we can improve that in the future, although I think it should be low priority for us.

[jJones]

I’ve also just noticed another issue…

Previously when I resized a node (before they were groups), the link paths would alter with them so that constant contact with the node was maintained…

Having now just resized a group to check, the links don’t move and thus must be manually reset currently.

Is there a way to fix this?

Picture of a resized group:

[walter]

So you have resized the group to be very short?
The three straight links seem to connect appropriately. Are the four self or reflexive links connecting with the group or with an individual node within the group? Have you set Group.isSubGraphExpanded to false? Are those member nodes still .visible or .isVisible()?

[walter]

Actually, I now see that you haven’t set portId = “” on the resizable/resized GraphObject. You might want to do that, so that other parts of the group that are dependent on the size of the Placeholder aren’t still depending on the size of those member nodes. Assuming you are not making those member nodes not visible, so that they don’t take any space.

It might still be easier to collapse the group.

[jJones]

There were no nodes within the resized group, it was completely empty.

I’ve realised my last image was misleading, the straight links do move (unlike the self-links) when the node/group is resized however they still don’t always connect. I’ve taken a screenshot of a better example below, this group was also completely empty.

I also set the portId = ‘’ for the group template, however that didn’t make any changes in this scenario due to no nodes.

It also happens when nodes are inside the group, though at that point it is easier to offer a collapsing option.