Here’s a modification of the standardMouseSelect override that I posted earlier in this thread. It also selects children nodes in addition to not deselecting on background click and toggling selection on click instead of always selecting the clicked Part.
It’s been incorporated into the CodeSandbox as well. Note that there’s no need for the click handler function when using this override.
// Override the ClickSelectingTool.standardMouseSelect
// Unless shift is held, toggle the selection when clicking
// Clicks on diagram background do not deselect
diagram.toolManager.clickSelectingTool.standardMouseSelect = function() {
const diagram = this.diagram;
if (diagram === null || !diagram.allowSelect) return;
var e = diagram.lastInput;
var curobj = diagram.findPartAt(e.documentPoint, false);
if (curobj !== null) {
if (e.shift) { // add the part to the selection
if (!curobj.isSelected) {
diagram.raiseDiagramEvent('ChangingSelection', diagram.selection);
let part = curobj;
while (part !== null && !part.canSelect()) part = part.containingGroup;
if (part !== null) {
part.isSelected = true;
if (part instanceof go.Node) {
part.findTreeChildrenNodes().each(n => {
n.isSelected = true;
});
}
}
diagram.raiseDiagramEvent('ChangedSelection', diagram.selection);
}
} else { // otherwise, toggle the selection
diagram.raiseDiagramEvent('ChangingSelection', diagram.selection);
let part = curobj;
while (part !== null && !part.canSelect()) part = part.containingGroup;
if (part !== null) {
part.isSelected = !part.isSelected;
if (part instanceof go.Node) {
part.findTreeChildrenNodes().each(n => {
n.isSelected = part.isSelected;
});
}
}
diagram.raiseDiagramEvent('ChangedSelection', diagram.selection);
}
}
// don't clear selection on background click
}
Thanks and it’s working without click event. One last thing is to persist the selected nodes. I select some nodes and I click apply button, modal will close. So next when I open the model , whatever the selected nodes before it should persist and selected.
As long as you have the isSelected binding and are properly updating the “sel” property on your node data objects via a “ChangedSelection” listener, that should work. The code for this is already in the sandbox.
ok, let me check. So initially by default without clicking when the modal opens all the nodes should be selected. How can I implement that? Can you please add that logic in codesandbox.
@jhardy You have shared the below code to select the parent and the childrens but it selects only immediate childrens. Is there any method to select all the childrens and grandchildrens of that parent node.
// Override the ClickSelectingTool.standardMouseSelect
// Unless shift is held, toggle the selection when clicking
// Clicks on diagram background do not deselect
diagram.toolManager.clickSelectingTool.standardMouseSelect = function() {
const diagram = this.diagram;
if (diagram === null || !diagram.allowSelect) return;
var e = diagram.lastInput;
var curobj = diagram.findPartAt(e.documentPoint, false);
if (curobj !== null) {
if (e.shift) { // add the part to the selection
if (!curobj.isSelected) {
diagram.raiseDiagramEvent(‘ChangingSelection’, diagram.selection);
let part = curobj;
while (part !== null && !part.canSelect()) part = part.containingGroup;
if (part !== null) {
part.isSelected = true;
if (part instanceof go.Node) {
part.findTreeChildrenNodes().each(n => {
n.isSelected = true;
});
}
}
diagram.raiseDiagramEvent(‘ChangedSelection’, diagram.selection);
}
} else { // otherwise, toggle the selection
diagram.raiseDiagramEvent(‘ChangingSelection’, diagram.selection);
let part = curobj;
while (part !== null && !part.canSelect()) part = part.containingGroup;
if (part !== null) {
part.isSelected = !part.isSelected;
if (part instanceof go.Node) {
part.findTreeChildrenNodes().each(n => {
n.isSelected = part.isSelected;
});
}
}
diagram.raiseDiagramEvent(‘ChangedSelection’, diagram.selection);
}
}
// don’t clear selection on background click
}
How to check for nodes in Node.findTreeParts. I have not got any examples. Could you please add that in CodeSandbox. In the above sample as @jhardy mentioned I am using “part” instead of “node”.
There’s an example right there in the code you pasted. Use instanceof.
I suggest you read the GoJS intro pages to get a better grasp of some of the core concepts in GoJS. You should also become familiar with searching the samples for functionality that you want. We can’t provide code samples for everything you want to do.