How to avoid overlapping of groups

[pratap]

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

[walter]

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

[pratap]

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); },
layout:
goJs(go.GridLayout,
{
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” },
goJs(“SubGraphExpanderButton”,
{ alignment: go.Spot.Right, margin: 5 }),
goJs(go.TextBlock,
{
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
goJs(go.Placeholder,
{ 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 (lit.next()) {
        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);
    console.log(bnds);
    console.log(gridpt);
    console.log(node);
    // 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
}

[walter]

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!

[pratap]

In above case drag drop works smoothly

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

[walter]

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

[pratap]

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

[walter]

The navig function.

[pratap]

thank you for solution :)