Hi, I have a problem checking the groups by adding a node from a palette, it works if I drag it from the diagram, but when I drag it from the palette it marks all the groups in green although I can only enter 1 group, I need to mark the group in green which can be accessed by dragging from the palette.
I used a mixture of these two examples.
https://gojs.net/latest/intro/palette.html
https://gojs.net/latest/intro/validation.html#GroupingValidation
In my test program, I do not seem to have that problem:
<!DOCTYPE html>
<html>
<head>
<title>Dropping into Groups</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script>
// control the overall behavior when dragging-over or dropping onto the diagram background
var AllowTopLevelDrops = true;
function init() {
var $ = go.GraphObject.make;
// Initialize the main Diagram
myDiagram =
$(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
// what to do when a drag-over occurs in the Diagram's background
mouseDragOver: function(e) {
if (AllowTopLevelDrops) {
myDiagram.currentCursor = "";
} else {
myDiagram.currentCursor = "not-allowed";
}
},
// what to do when a drag-drop occurs in the Diagram's background
mouseDrop: function(e) {
if (AllowTopLevelDrops) {
// when the selection is dropped in the diagram's background,
// make sure the selected Parts no longer belong to any Group
var ok = myDiagram.commandHandler.addTopLevelParts(myDiagram.selection, true);
if (!ok) myDiagram.currentTool.doCancel();
} else {
myDiagram.currentTool.doCancel();
}
},
// decide what kinds of Parts can be added to a Group or to top-level
"commandHandler.memberValidation": function(grp, node) {
if (grp === null) return AllowTopLevelDrops; // maybe allow dropping Nodes in diagram's background
if (node instanceof go.Group) return false; // cannot add Groups to Groups
return grp.data.color === node.data.color; // only OK if node's color matches the group's color
},
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$("Node", "Auto",
{ locationSpot: go.Spot.Center },
// mouseDragEnter, mouseDragLeave, and mouseDrop handled by the group template
// because Group.handlesDragDropForMembers is true
$("Shape", "RoundedRectangle",
{ fill: "white" },
new go.Binding("fill", "color")),
$("TextBlock",
{ margin: 4 }, // make some extra space for the shape around the text
new go.Binding("text", "key"))); // the label shows the node data's key
var groupFill = "rgba(128,128,128,0.2)";
var dropFill = "magenta";
myDiagram.groupTemplate =
$(go.Group, "Vertical",
{
handlesDragDropForMembers: true, // don't need to define handlers on Nodes and Links
computesBoundsAfterDrag: true, // allow dragging out of a Group that uses a Placeholder
selectionObjectName: "SHAPE" // selection handle goes around shape, not label
},
{ // what to do when a drag-over or a drag-drop occurs on a Group
mouseDragEnter: function(e, grp, prev) {
if (grp.canAddMembers(grp.diagram.toolManager.draggingTool.draggingParts)) {
var shape = grp.findObject("SHAPE");
if (shape) shape.fill = dropFill;
grp.diagram.currentCursor = "";
} else {
grp.diagram.currentCursor = "not-allowed";
}
},
mouseDragLeave: function(e, grp, next) {
var shape = grp.findObject("SHAPE");
if (shape) shape.fill = groupFill;
grp.diagram.currentCursor = "";
},
mouseDrop: function(e, grp) {
var ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
}
},
$(go.Panel, go.Panel.Horizontal,
{ alignment: go.Spot.Left },
$("SubGraphExpanderButton"),
$(go.TextBlock,
{ font: "bold 12pt sans-serif" },
new go.Binding("text", "key"),
new go.Binding("stroke", "color"))),
$(go.Panel, "Auto",
{ name: "BODY" },
$(go.Shape,
{ name: "SHAPE", fill: groupFill, stroke: "gray", strokeWidth: 3 },
new go.Binding("stroke", "color")),
$(go.Placeholder, { padding: 10, minSize: new go.Size(40, 40) })));
myDiagram.model.nodeDataArray = [
{ key: "Green1", isGroup: true, color: "green" },
{ key: "Orange1", isGroup: true, color: "orange" },
{ key: "Green2", isGroup: true, color: "green" },
{ key: "Orange2", isGroup: true, color: "orange" }
];
// initialize the Palette
myPalette =
$(go.Palette, "myPaletteDiv",
{
"layout.wrappingColumn": 1,
// share the templates with the main Diagram
nodeTemplate: myDiagram.nodeTemplate,
groupTemplate: myDiagram.groupTemplate
});
myPalette.model.nodeDataArray = [
{ key: "g", color: "green" },
{ key: "b", color: "orange" },
{ key: "y", color: "yellow" }
];
}
function toggleAllowTopLevelDrops() {
AllowTopLevelDrops = !AllowTopLevelDrops;
}
</script>
</head>
<body onload="init()">
<div style="width:100%; white-space:nowrap;">
<span style="display: inline-block; vertical-align: top; padding: 5px; width:100px">
<div id="myPaletteDiv" style="border: solid 1px black; height: 400px"></div>
</span>
<span style="display: inline-block; vertical-align: top; padding: 5px; width:80%">
<div id="myDiagramDiv" style="border: solid 1px black; height: 400px"></div>
</span>
</div>
<label><input type="checkbox" onclick="toggleAllowTopLevelDrops()" checked="checked"/>Allow Top-Level Drops</label>
<p>
The CommandHandler.memberValidation function only allows Nodes to be added to Groups of the same "color".
The Group.mouseDrop event handler calls Group.addMembers to add dropped nodes to that group.
If the add fails due the memberValidation predicate, the whole operation is cancelled and thus rolled-back.
</p>
<p>
The "Allow Top-Level Drops" checkbox controls whether or not the user may drop nodes onto the background of the diagram.
That applies to both external drag-and-drops, from the Palette, and internal drag-and-drops starting within the diagram.
The Diagram.mouseDrop event handler is similar to the Group.mouseDrop event handler,
except that it calls CommandHandler.addTopLevelParts.
</p>
<p>
The Group.mouseDragEnter and Group.mouseDragLeave event handlers change the appearance of the group if it is OK
to drop what the DraggingTool is dragging into that group.
There is similar behavior for the diagram background for top-level drops, implemented by Diagram.mouseDragOver.
</p>
</body>
</html>
Perfect! Thank you very much, the error was that selected me only from the diagram.
mouseDragEnter: ....
if (grp.canAddMembers(grp.diagram.selection)) {
.......
},
mouseDragEnter: …
if (grp.canAddMembers(grp.diagram.toolManager.draggingTool.draggingParts)) {
…
},