How to prevent a particular node from getting out of group yet sill let nodes outside move freely

GoJS
1

I’m having a couple of nodes
category: “Blocks”, node
category: “Objects”, node
category: “pizza”, node
category: “Cell”, group

i want the blocks to move freely on the canvas but i dont want the blocks to get outside the group.

using the events mouseDragOver and mouseDrop from swim lane Swim Lanes (vertical) and planogram Planogram examples i am only able to move nodes inside group and nodes outside group are not moving at all, I only have Cell nodes inside Block Group and reaming are on canvas, i want remaining nodes to move freely.

2

Implement a Part.dragComputation function on your node template(s).
Search the samples for examples.

3

dragComputation: stayInGroup i’ve tried, but it still moves the node out on consecutive moment it allows the node to move outside group.

My group is having height and width definition in desiredSize.

4

Adapt the code to do what you want.

5

stayInGroup(part: any, pt: any, gridpt: any) {

// 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.resizeObject;

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.padding;

// now limit the location appropriately, assuming no grid-snapping

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);

}

this function works only when there is a placeholder in my groupTemplate

i’m not adding placeholder as i want to move nodes freely inside group with desiredSize

6

Ah, OK, so change the code to handle the case when there is no Group.placeholder.