I have a panel with three objects laid out vertically. The middle objects (the green rectangles) are the primary objects, and so I want the user to have to click on these to select them. I don’t want clicks on the text blocks to cause selection of the parts. Setting pickable to false for the text blocks seems to address that issue well.
My problem now is that I want the drag selection tool to select my nodes with the same rules. I want to allow partial inclusion, but only for the green rectangles. I don’t want the text blocks to be considered at all in the drag selection behavior. If the drag box encompasses any part of a green box, then I want to select that node. If the box touches any text blocks, I don’t care about those.
In the current fiddle, when I drag the selection box as shown in the screenshot, I see both nodes Two and Three get selected, but I really want only node Three to become selected.
How can I ignore certain graphobjects in my panels in the drag selection behavior?
Is your green rectangle the Part.selectionObject, because you have named it as the Part.selectionObjectName?
If so, try this customization of DragSelectingTool:
myDiagram.toolManager.dragSelectingTool.selectInRect = function(r) {
var diagram = this.diagram;
if (diagram === null) return;
var e = diagram.lastInput;
diagram.raiseDiagramEvent('ChangingSelection');
var parts = /** @type {Iterable.<Part>} */ (diagram.findObjectsIn(r,
function(p) {
var part = p.part;
var selobj = part.selectionObject;
if (p === selobj || p.isContainedBy(selobj) || p instanceof go.Link) return part;
return null;
},
function(p) { return p.canSelect(); },
this.isPartialInclusion)); // TSType: as Set<Part>
if (e.control || e.meta) { // toggle or deselect
if (e.shift) { // deselect only
var it = parts.iterator;
while (it.next()) {
var p = it.value;
if (p.isSelected) p.isSelected = false;
}
} else { // toggle selectedness of parts
var it = parts.iterator;
while (it.next()) {
var tp = it.value;
tp.isSelected = !tp.isSelected;
}
}
} else if (e.shift) { // extend selection only
var it = parts.iterator;
while (it.next()) {
var ep = it.value;
if (!ep.isSelected) ep.isSelected = true;
}
} else { // select parts, and unselect all other previously selected parts
// this tries to avoid deselecting and then reselecting any Part
var tounselect = /** @type {List.<Part>} */ (new List(Part));
var sit = diagram.selection.iterator;
while (sit.next()) {
var sp = sit.value;
if (!parts.contains(sp)) tounselect.add(sp);
}
var uit = tounselect.iterator;
while (uit.next()) {
var up = uit.value;
up.isSelected = false;
}
var it = parts.iterator;
while (it.next()) {
var ps = it.value;
if (!ps.isSelected) ps.isSelected = true;
}
}
diagram.raiseDiagramEvent('ChangedSelection');
};
If the green Shape is not the selectionObject, you can adapt the code in the call to Diagram.findObjectsIn as you please.
