How to avoid group node from repositioning on child node drag

GoJS
#1

In my case when I drag child node at the edge of group node, group node adjust its position. So to avoid that I set “computesBoundsAfterDrag: true” but by setting this to true it is still repositioning group node after drag.

When I set computesBoundsAfterDrag to false(default), group changes position while I drag child node.
When I set computesBoundsAfterDrag to true, group changes position after I drag child node.

What I want is that when I drag child node group should remain at its position. Can someone please help me this.

Example for your reference

#2

If you Group has a Placeholder, sooner or later the bounds of the Placeholder will necessarily include that moved Node.

So, don’t use a Placeholder, or don’t allow the node to be moved out of the Placeholder.

#3

After removing placeholder now group node is not moving on dragging child node, but now I am not able to drag group node by clicking at center.

#4

As https://gojs.net/latest/intro/sizedGroups.html discusses, you probably want to have some object in the visual tree of the Group cover the area of the group. Use a Shape whose Shape.fill is not null so that the Group is pickable by the user.

#5

yes it is working now properly, thank you so much.

#6

One issue that is occurring only for first load after removing placeholder and using shape instead of it i.e. child nodes are going outside, can we manage that.

You can check what I mean in below example.

#7

So you do depend on Placeholders after all. Maybe you want my other suggestion.
Try using some variation on the stayInGroup function used in the Swim Lanes samples or the example at https://gojs.net/latest/api/symbols/DraggingTool.html
You’ll want to adapt that code depending on your node template.

#8

I already using stayInGroup but for the first time I have to do it manually, after that all Childs stay inside the group properly.

#9

Did you adapt the stayInGroup to your app’s node and group templates?
What is the problem now?

#10

This is my stayInGroup method, I didn’t adapt any changes for this,

function stayInGroup(part, pt, gridpt) {

        // don't constrain top-level nodes

        var grp = part.containingGroup;

        if (grp === null) return pt;

        // try to stay within the background Shape of the Group

        var back = grp.findObject("ENTERPRISESHAPE");

        if (back === null) return pt;

        // allow dragging a Node out of a Group if the Shift key is down

        //if (part.diagram.lastInput.shift) return pt;

        var p1 = back.getDocumentPoint(go.Spot.TopLeft);

        var p2 = back.getDocumentPoint(go.Spot.BottomRight);

        var b = part.actualBounds;

        var loc = part.location;

        // find the padding inside the group's placeholder that is around the member parts

        var m = (grp.placeholder !== null ? grp.placeholder.padding : new go.Margin(0));

        // now limit the location appropriately

        var x = Math.max(p1.x + m.left, Math.min(pt.x, p2.x - m.right - b.width - 1)) + (loc.x - b.x);

        var y = Math.max(p1.y + m.top, Math.min(pt.y, p2.y - m.bottom - b.height - 1)) + (loc.y - b.y);

        return new go.Point(x, y);
    }
#11

Another issue occurring for child nodes on decreasing size of group node, child nodes not following group node. Same also occurring on sizedGroups Resizable Groups example

image
image968×419 25.9 KB

You can see in above image on decreasing size of group node “Omega”, child node “Gamma” goes outside.

Please help me with this as it is critical issue for us.

#12

What do you want to happen? There are many reasonable choices.

The member nodes could shift to stay inside. They could be scaled down too.

Or the resizing operation could limit where and how the user could resize. There are examples of this – look for customization of the DraggingTool.

Or some combination of both policies.

Note that you also have a choice whether to restrict the resizing continuously in real time or only at the end upon mouse-up, regardless of the above policies you choose.