How to avoid overlapping of groups

Hi… all

I am trying to avoid overlapping of group. and i used content from dragUnoccupied . It is working well for collapsed group. but when group is expanded it is not working well i.e. sometime movement of group not working properly (delay in move/no movement). In case of expanded group it has some content in it i.e. node data.

Anybody can help me why this is happening

Could you tell us more? A screenshot would help, along with your dragComputation function.

below code is for groupTemplate

ns.groupTemplateForTable = function () {
return goJs(go.Group, “Auto”,
dragComputation: avoidNodeOverlap,
background: “transparent”,
ungroupable: true,
// highlight when dragging into the Group
mouseDragEnter: function (e, grp, prev) { Ciel.Process.ProcessDesign.CreateJob.highlightGroup(e, grp, true); },
mouseDragLeave: function (e, grp, next) { Ciel.Process.ProcessDesign.CreateJob.highlightGroup(e, grp, false); },
wrappingColumn: 1, alignment: go.GridLayout.Position,
cellSize: new go.Size(0, 0), spacing: new go.Size(0, 0)
new go.Binding(“background”, “isHighlighted”, function (h) { return h ? “rgba(255,0,0,0.2)” : “transparent”; }).ofObject(),
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
goJs(go.Shape, “Rectangle”,
{ fill: null, stroke: “#ccc” }),
goJs(go.Panel, “Vertical”, // title above Placeholder
goJs(go.Panel, “Horizontal”, // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: “#ccc” },
{ alignment: go.Spot.Right, margin: 5 }),
alignment: go.Spot.Left,
editable: false,
margin: 5,
font: “bold 16px sans-serif”,
opacity: 0.75,
stroke: “#404040
new go.Binding(“text”, “WorkspaceTableName”).makeTwoWay())
), // end Horizontal Panel
{ padding: 6, alignment: go.Spot.TopLeft })
) // end Vertical Panel

// R is a Rect in document coordinates
// NODE is the Node being moved – ignore when looking for Parts intersecting the Rect
function isUnoccupied(r, node) {
var diagram = node.diagram;
// debugger;
// nested function used by Layer.findObjectsIn, below
// only consider Parts, and ignore the given Node and any Links
function navig(obj) {
var part = obj.part;
if (part === node) return null;
if (part instanceof go.Link) return null;
return part;

    // only consider non-temporary Layers
    var lit = diagram.layers;
    while ( {
        var lay = lit.value;
        if (lay.isTemporary) continue;
        if (lay.findObjectsIn(r, navig, null, true).count > 0) return false;
    return true;

function avoidNodeOverlap(node, pt, gridpt) {
    // this assumes each node is fully rectangular
    var bnds = node.actualBounds;
    var loc = node.location;
    // see if the area at the proposed location is unoccupied
    // use PT instead of GRIDPT if you want to ignore any grid snapping behavior
    var x = gridpt.x - (loc.x - bnds.x);
    var y = gridpt.y - (loc.y - bnds.y);
    var r = new go.Rect(x, y, bnds.width, bnds.height);
    // maybe inflate R if you want some space between the node and any other nodes
    if (isUnoccupied(r, node)) {
        return pt;
    }// OK
    return loc;  // give up -- don't allow the node to be moved to the new location

Ah, you’ll need to make the check for overlapping with existing Nodes smarter to recognize that members of a selected Group should not count. You do not want to avoid overlapping a Group with its own member Nodes!

In above case drag drop works smoothly

In above case drag and drop not working properly i.e. late reponse or no reponse

Thanks for the screenshots, but my previous reply is your answer.

2 posts were split to a new topic: Sorting the Nodes in a Group

can you @walter highlight which code area we need to focus in above code for avoid overlapping of group
can you refer any sample

The navig function.

thank you for solution :)

A post was split to a new topic: How to avoid overlapping groups after expanding a group