Unable to drag outside the group nested groups & nodes

GoJS
1

Hello i use typescript and try to configure my groups in the way that nested groups & nodes are ungroupable.
The idea is that there are two type of groups, one wrapper of everything (subscriptions) and resource groups that nodes can exist only in resource groups.

my group template is the following

  $(go.Group, "Spot",
    {
      toSpot: go.Spot.AllSides, 
      minSize: new go.Size(200, 200),
      ungroupable: true,
      computesBoundsAfterDrag: true,
      handlesDragDropForMembers: true, 

      layout: $(go.LayeredDigraphLayout,
      {
      }),
      mouseDrop: (e: go.InputEvent, node: any) => {
        let ok = false;
        const selectedGroupType = this.diagram.selection.first()?.data.GroupType;
        if(node.data.GroupType === 'subscription' && selectedGroupType === "resourcegroup") {
          node.addMembers(node.diagram.selection, true);
          ok = true;
        }
        if(node.data.GroupType === 'resourcegroup' && !['subscription', 'resourcegroup'].includes(selectedGroupType )) {
          node.addMembers(node.diagram.selection, true);
          ok = true;
        }

        if(!ok) {
          this.diagram.currentTool.doCancel()
        }
      },
    },
    new go.Binding('location', 'loc').makeTwoWay(),
    $(go.Panel, "Auto",
      $(go.Shape, "Rectangle",
        {
          name: "OBJSHAPE",
          parameter1: 14,
        },
        new go.Binding("fill", 'GroupType', (e: string) => {
          return e === 'subscription' ? 'rgba(115, 150, 190, 0.2)' : 'rgba(230, 249, 171, 0.2)'
        })
        ),
        
      $(go.Placeholder,
        { padding: 16 })
    ),
    $(go.TextBlock,
      {
        alignment: go.Spot.TopLeft,
        alignmentFocus: new go.Spot(0, 0, -4, -4),
        font: "Bold 10pt Sans-Serif"
      },
      new go.Binding("text", "label")),
  );

With that code im not able to move anything that is inside a group only to change the group size.
here 2 screenshots of the results before and after moving nodes & groups:

graph1
graph1896×1112 300 KB

graph2
graph21516×1092 180 KB

2

Are you saying that the user cannot drag any member node at all, or only that they are unable to move it a little bit within the same group?

If you debug your mouseDrop code, is the selected Node what you expect? Is its data.GroupType what you expect?

Or did you really want to look at the node’s Part.containingGroup’s data.GroupType?

3

I want the user to be able to drag nodes and groups outside of the wrapper group. Currently I’m not able to move anything outside of groups.

4

OK. Have you considered my other questions and implicit suggestions?

5

Nodes are correct when i debug the mousedrop as data.GroupType is correct. sorry i didnt get something as a suggestion, im not sure what you mean with if i want to look at the node’s Part.containingGroup’s data.GroupType. Even when i remove the mouseDrop fn i have the same results, nothing can be dragged outside the group that exist and only the size of wrapper group changes.

6

You may want to take a look at the Regrouping sample. Notice that the diagram includes a mouseDrop function that adds the dropped parts as top level parts, which will remove them from their current group. You’ll probably need to modify the finishDrop function for your desired logic when nodes/groups are dropped.

7

His code does set:
computesBoundsAfterDrag: true,
which is needed when wanting to let the user drag a member node out of a group that has a Placeholder.