I am using the Org Hierarchy in the modal. I have a Cascade Toggle button in the screen and based on the toggle the selection should happen. If the toggle is true I should be select only parent-child nodes relationship and if false then only single node selection. Below is the design and code I am using.
$(go.Diagram, . . .,
{
. . .,
"clickSelectingTool.standardMouseSelect": function() {
const diagram = this.diagram;
if (!diagram.allowSelect) return;
const e = diagram.lastInput;
const node = diagram.findPartAt(e.documentPoint);
if (node instanceof go.Node && node.canSelect()) {
const includeDescendants = document.getElementById("myTestButton").checked;
if (e.control || e.meta) { // toggle the part's selection
diagram.raiseDiagramEvent('ChangingSelection', diagram.selection);
node.isSelected = !node.isSelected;
if (includeDescendants) {
node.findTreeParts().each(part => {
if (part instanceof go.Node) part.isSelected = node.isSelected;
});
}
diagram.raiseDiagramEvent('ChangedSelection', diagram.selection);
} else if (e.shift) { // add the part to the selection
if (!node.isSelected) {
diagram.raiseDiagramEvent('ChangingSelection', diagram.selection);
node.isSelected = true;
if (includeDescendants) {
node.findTreeParts().each(part => {
if (part instanceof go.Node) part.isSelected = true;
});
}
diagram.raiseDiagramEvent('ChangedSelection', diagram.selection);
}
} else {
if (!node.isSelected) {
diagram.raiseDiagramEvent('ChangingSelection', diagram.selection);
node.isSelected = true;
if (includeDescendants) {
node.findTreeParts().each(part => {
if (part instanceof go.Node) part.isSelected = true;
});
}
diagram.raiseDiagramEvent('ChangedSelection', diagram.selection);
}
}
} else if (e.left && !(e.control || e.meta) && !e.shift) {
// left click on background with no modifier: clear selection
diagram.clearSelection(); // also raises ChangingSelection/Finished
}
}
})
Like Jon’s solution, this was adapted from the implementation of Tool.standardMouseSelect. I simplified it to ignore unselectable Nodes and only select Nodes (not any Links).
I’ve modified the CodeSandbox. It now uses modelData to keep track of whether to cascade the selection. This is similar to what gojs-react-basic does with its “Allow Relinking?” checkbox.
I have implemented the given code. One issue I am facing when I toggle each time the nodes are getting doubled 13, 26, 39, etc. as attached screenshot. May I know what will be the issue?
I have debug the code and below is the method is getting loop and creating duplicate nodes. Actually I have 13 nodes but you can see in the screenshot that the key is increased from 14 -26 and keep increasing. I feel the “insertedNodeKeys” is adding more nodes. Please let me know. Also, I have not added “handleDiagramEvent” in my code. Please let me know if it require to add.
You will need handleDiagramEvent if you want the diagram selection to be saved in your state.
How does your toggle work? It sounds like something in your code is creating duplicate nodes. Take a close look at the sandbox and determine what you are doing differently.