Sub-process (bpmn group) resizable issue

GoJS
1

We are using bpmn sub-process group,
when we move any shape at the edge of the sub-process, it stays like this it doesn’t auto layout,
we haven’t used placeholder as we wanted to make the sub process resizable, but both things are not achievable at this movement.
image

Our motive: we wanted the sub process to be resizable as well as auto layout whenever we move a shape at the edge of the sub-process

I have attached the sub-process code below

    return $(
      go.Group,
      "Auto",
      new go.Binding("location", "location"),
      {
        defaultAlignment: go.Spot.Top,
        resizable: true,
        resizeObjectName: "BODY",
        selectionObjectName: "BODY",
        locationObjectName: "BODY",
        contextMenu: contextMenuRef.myContextMenu,
        mouseDrop: (e, group) => {
          if (!(group instanceof go.Group)) {
            return;
          }
          group.addMembers(e.diagram.selection, true);
        },
      },
      $(go.Panel, "Auto", {},
        $(
          go.Shape,
          "RoundedRectangle",
          {
            parameter1: 10,
            fill: "#FCF3D3",
            stroke: "#828190",
            strokeWidth: 2,
          }),
      ),
      $(
        go.Panel,
        "Vertical",
        {
          defaultAlignment: go.Spot.TopCenter,
        },
        $(
          go.Panel,
          "Horizontal",
          { defaultAlignment: go.Spot.TopCenter, },
          $(
            go.TextBlock,
            {
              font: "14px Sans-Serif",
              margin: new go.Margin(6),
              editable: true,
              textAlign: "center",
            },
            new go.Binding("text", "text").makeTwoWay()
          )
        ),
        $(
          go.Shape,
          "Placeholder",
          {
            name: "BODY",
            fill: "#fff",
            minSize: new go.Size(300, 150),
            stretch: go.GraphObject.Horizontal,
          },
          new go.Binding("visible", "isSubGraphExpanded", function (e) {
            return e;
          }).ofObject()
        ),
      ),
    );
  };
}
2

Did you create and add a tool to drag events around the border of a subprocess? I do not understand how you want such dragging to automatically change the size of the subprocess.

But if I were you I would customize that custom event-dragging tool even further, so that at the end of a successful drag you would also change the size of the subprocess to whatever size seems appropriate to you.

3

Can you suggest me how do I create any drag events at the border of subprocess if possible.
Because when we drop the shape at stays like that half in and half out, the user will not know whether its inside the group or outside. This needs to be solved.
Is there any way to identify whether the node has reached at the edge of group so that we cancel the drag?

4

I misunderstood your intent. Did you want to limit where nodes can be dragged, so that they stay within the bounds of the (possibly resized) group?

If so, implement a Part | GoJS API dragComputation function. An example is in the Swim Lanes sample, the stayInGroup function: Swim Lanes

5

I want to move the node out of group, but my only ask is that is there any way to indentify that node is touching any border of group via coordinates or any other way?

6

Is this what you are asking for?

node.actualBounds.intersectsRect(group.actualBounds)
7

Can we resize the sub-process group programmatically if any conditions satisfies?

8

Sure, but you need to decide exactly what you want to do. If making the borders of the group smaller causes the border to intersect a node, or causes a member node to appear outside of the border, what do you want to do? And vice-versa, if growing the size of the border.

9

My motive is, if the node is inside (edge) group then increase the size of that side of group and if the node is partially outside of the group then make the group size smaller (or shift the sub process)
Here in this diagram the node is part of group as its inside more than half so i want to increase the size of group from right side.

image
image520×581 10.2 KB

Else, in this diagram the node is not part of group, i want to either shift or make the sub-process smaller from right side.
image
image471×565 9.73 KB

This is what i want to achieve. Thanks

10

Would it work for your purposes if you merely checked whether the center of the node is inside or outside of the group?

11

yes it will work, do you have the code ?
imean atleast in canvas the user should understand that, whether the node is inside group or not, even if we do any work around.
And also mention how to change the size of group using transaction (or via programmatically)

12

That depends on how you have implemented the template. I assume you have a TwoWay Binding on the desiredSize property of group’s object that is being resized. If so, I guess the code should be something like:

myDiagram.commit(diag => {
  group.resizeObject.desiredSize = ...
});