Rubberband drag selection is not working in groups

We are having a diagram which contains groups with multiple nodes.
When i gave fill property of a group to null, Iam able to drag my mouse and the rubber band selection is visible,
but when I fill it with some color, then this operation is not working.
Is there any way to enable rubberband selection, when group’s fill property is not null ?

When your Group has no “fill”, the Group is not pickable at internal points, so the mouse events do not find any Parts at those points, which allows the DragSelectingTool to start.

When your Group has a “fill”, the Group is pickable, so a Tool that takes precedence over the DragSelectingTool can start instead. That’s normally the DraggingTool, but could also be the LinkingTool. I’ll assume you do not want users to draw new links from your group, because you have not set fromLinkable or toLinkable to true, so the LinkingTool will never start on your group. So I am guessing that it is the DraggingTool that you are starting.

One way to avoid the DraggingTool from starting is to set { selectable: false } on your Group.

If you really want your Group to be selectable, another solution would be to set { copyable: false, movable: false } on your Group. Those properties also prevent the DraggingTool from dragging the group.

If you really want your Group to be selectable and either copyable or movable (or both), then I hope you can see how the mouse-down-and-move gesture is ambiguous, since it could mean either starting the DragSelectingTool or the DraggingTool. This can be done by re-ordering the Diagram.toolManager.mouseMoveTools list and overriding DraggingTool.canStart() or DragSelectingTool.canStart().

Is this answer still correct with the current version? If I set selectable: false, drag selecting works but with selectable: true and copyable: false, movable: false, drag select doesn’t occur. It appears to be the panning tool which is taking precedence. If I override PanningTool.canStart to always return false, that no longer tries to start but nothing else happens.

You’re right – I was wrong about that particular case.

The issue is that DragSelectingTool.canStart checks to see if it finds a Part at the mouse down point, and if it does, it returns false.

So if you want to allow Parts, including Groups, to be selectable but not movable nor copyable to still allow the DragSelectingTool to start, you need to override DragSelectingTool.canStart to do what you want. Here’s the built-in definition of that method:

DragSelectingTool.prototype.canStart = function() {
  if (!this.isEnabled) return false;
  var diagram = this.diagram;
  if (diagram === null || !diagram.allowSelect) return false;
  var e = diagram.lastInput;
  // require left button & that it has moved far enough away from the mouse down point, so it isn't a click
  if (!e.left) return false;
  // don't include the following checks when this tool is running modally
  if (diagram.currentTool !== this) {
    if (!this.isBeyondDragSize()) return false;
    // must wait for "delay" milliseconds before that tool can run
    if (e.timestamp - diagram.firstInput.timestamp < this.delay) return false;
    // don't start if we're over a selectable part
    if (diagram.findPartAt(e.documentPoint, true) !== null) return false;
  }
  return true;
};

You might want to use an override such as this initialization of the Diagram:

            "dragSelectingTool.canStart": function() {
              if (!this.isEnabled) return false;
              var diagram = this.diagram;
              if (diagram === null || !diagram.allowSelect) return false;
              var e = diagram.lastInput;
              // require left button & that it has moved far enough away from the mouse down point, so it isn't a click
              if (!e.left) return false;
              // don't include the following checks when this tool is running modally
              if (diagram.currentTool !== this) {
                if (!this.isBeyondDragSize()) return false;
                // must wait for "delay" milliseconds before that tool can run
                if (e.timestamp - diagram.firstInput.timestamp < this.delay) return false;
              }
              return true;
            }

I simply removed the call to Diagram.findPartAt.

That’s brilliant, thanks. For some reason I also had to remove the call to isBeyondDragSize but then it worked perfectly