I have a diagram in which i have context menu for each node and there are go js pallete from which i can drag and drop the node in the diagram.
Now what’s happening is if the context menu is opened and i drag and drop then the dragged node is getting added to the diagram. Node should be dropped in the group and if it’s dropped outside the we call the e.currentTool.doCancel();
and it doesn’t allow to add. but if the context menu is opened the dragged node is getting added.
So we need to hide the context menu if it is opened.
<!DOCTYPE html>
<html>
<head>
<title>Simple Table with Empty Slots</title>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<textarea id="mySavedModel" style="width:100%;height:400px">
{ "class": "GraphLinksModel",
"nodeDataArray": [
{"key":1,"text":"Alpha","color":"lightblue","row":0,"col":0},
{"key":2,"text":"Beta","color":"orange","row":0,"col":1},
{"key":3,"text":"Gamma","color":"lightgreen","row":1,"col":0},
{"key":4,"text":"Delta","color":"pink","row":1,"col":1},
{"key":5,"text":"Epsilon","color":"lightblue","row":1,"col":3},
{"key":6,"text":"Zeta","color":"orange","row":2,"col":2},
{"key":7,"text":"Eta","color":"lightgreen","row":0,"col":3},
{"key":8,"text":"Theta","color":"pink","row":3,"col":1},
{"key":9,"text":"Iota","color":"lightblue","row":3,"col":3},
{"key":10,"text":"Kappa","color":"orange","row":2,"col":5},
{"key":11,"text":"Lambda","color":"lightgreen","row":2,"col":4},
{"key":12,"text":"Mu","color":"pink","row":2,"col":0},
{"category":"Empty","row":0,"col":2},
{"category":"Empty","row":0,"col":4},
{"category":"Empty","row":0,"col":5},
{"category":"Empty","row":1,"col":2},
{"category":"Empty","row":1,"col":4},
{"category":"Empty","row":1,"col":5},
{"category":"Empty","row":2,"col":1},
{"category":"Empty","row":2,"col":3},
{"category":"Empty","row":3,"col":0},
{"category":"Empty","row":3,"col":2},
{"category":"Empty","row":3,"col":4},
{"category":"Empty","row":3,"col":5}
]}
</textarea>
<script src="https://cdn.jsdelivr.net/npm/gojs/release/go.js"></script>
<script src="https://cdn.jsdelivr.net/npm/create-gojs-kit/dist/extensions/TableLayout.js"></script>
<script id="code">
const CELLW = 120;
const CELLH = 120;
const TABLEW = 6;
const TABLEH = 4;
const myDiagram =
new go.Diagram("myDiagramDiv", {
layout: new TableLayout(),
"draggingTool.isGridSnapEnabled": true,
"draggingTool.gridSnapCellSize": new go.Size(CELLW, CELLH),
"draggingTool.gridSnapCellSpot": go.Spot.Center,
"SelectionMoved": e => { // update the data.row and .col
e.subject.each(node => {
const oldrow = node.data.row || 0;
const oldcol = node.data.col || 0;
const row = Math.floor(node.location.y / CELLH);
const col = Math.floor(node.location.x / CELLW);
const oldpart = findPartAt(row, col);
const m = e.diagram.model;
if (oldpart && oldpart.category === "Empty") {
m.set(node.data, "row", row);
m.set(node.data, "col", col);
m.set(oldpart.data, "row", oldrow);
m.set(oldpart.data, "col", oldcol);
}
// else don't move this node! the layout will move it back
});
e.diagram.layout.invalidateLayout();
},
"SelectionCopied": e => { // update the data.row and .col
e.subject.each(node => {
const row = Math.floor(node.location.y / CELLH);
const col = Math.floor(node.location.x / CELLW);
const oldpart = findPartAt(row, col);
const m = e.diagram.model;
if (oldpart && oldpart.category === "Empty") {
m.removeNodeData(oldpart.data);
m.set(node.data, "row", row);
m.set(node.data, "col", col);
} else {
m.removeNodeData(node.data); // undo copy of this node
}
});
e.diagram.layout.invalidateLayout();
},
"undoManager.isEnabled": true,
"ModelChanged": e => { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
document.getElementById("mySavedModel").textContent = e.model.toJson();
}
}
});
// don't use the infinite Diagram.grid, but just a fixed, limited grid in the "Grid" layer
myDiagram.add(
new go.Part("Auto", {
layerName: "Grid",
location: new go.Point(0, 0), locationObjectName: "GRID"
})
.add(
new go.Shape({ fill: null, stroke: "blue", strokeWidth: 2 }),
new go.Panel("Grid", {
name: "GRID",
width: TABLEW * CELLW + 1, height: TABLEH * CELLH + 1,
gridCellSize: new go.Size(CELLW, CELLH),
margin: 4
})
.add(
new go.Shape("LineH", { stroke: "gray" }),
new go.Shape("LineV", { stroke: "gray" })
)
));
// look up the Node or Empty Part that is at a particular row/column
function findPartAt(r, c) {
const a = myDiagram.model.nodeDataArray;
for (let i = 0; i < a.length; i++) {
if (a[i].row === r && a[i].col === c) return myDiagram.findPartForData(a[i]);
}
return null;
}
myDiagram.nodeTemplate =
new go.Node("Auto", {
width: CELLW, height: CELLH,
locationSpot: go.Spot.Center,
minLocation: new go.Point(CELLW / 2, CELLH / 2), // don't let nodes be moved beyond the table
maxLocation: new go.Point(TABLEW * CELLW - CELLW / 2, TABLEH * CELLH - CELLH / 2)
})
.bind("row")
.bind("column", "col")
.bindObject("layerName", "isSelected", s => s ? "Foreground" : "")
.add(
new go.Shape({ fill: "white", stroke: null })
.bind("fill", "color"),
new go.TextBlock()
.bind("text")
);
myDiagram.nodeTemplateMap.add("Empty",
new go.Part("Auto", {
width: CELLW, height: CELLH,
locationSpot: go.Spot.Center,
layerName: "Background",
selectable: false, movable: false, copyable: false, deletable: false
})
.bind("row")
.bind("column", "col")
.add(
new go.Shape({ fill: "white", stroke: null, pickable: false }),
new go.TextBlock("Drag & Drop\nSKU / Bin", {
stroke: "gray", font: "italic 12pt sans-serif", textAlign: "center"
})
));
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").textContent);
</script>
</body>
</html>
here is the group template.