How to tweak drag selection behavior to require overlap with main part?

Here’s a fiddle that shows more or less what I’m trying to accomplish: Edit fiddle - JSFiddle - Code Playground

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;
      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 ( {
            var p = it.value;
            if (p.isSelected) p.isSelected = false;
        } else {  // toggle selectedness of parts
          var it = parts.iterator;
          while ( {
            var tp = it.value;
            tp.isSelected = !tp.isSelected;
      } else if (e.shift) {  // extend selection only
        var it = parts.iterator;
        while ( {
          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 ( {
          var sp = sit.value;
          if (!parts.contains(sp)) tounselect.add(sp);
        var uit = tounselect.iterator;
        while ( {
          var up = uit.value;
          up.isSelected = false;
        var it = parts.iterator;
        while ( {
          var ps = it.value;
          if (!ps.isSelected) ps.isSelected = true;

If the green Shape is not the selectionObject, you can adapt the code in the call to Diagram.findObjectsIn as you please.

This works nicely, and yes, I do want the green rect to be the selectionObject. Thanks!