Changes to DragSelectingTool Not Working with the Swimlane Template

GoJS
#1

I have built my own swimlane following the swimlane template and have two questions regarding the dragSelectingTool:

  1. I am trying to change the fill, stroke, and stroke width of the drag selecting tool. However, the behavior is not working as expected. Either I don’t see the box at all or it jumps around on the screen. What am I missing? This is the code I am adding to the template above:

.

myDiagram.toolManager.dragSelectingTool.box =
    $(go.Part,
        $(go.Shape,
            {
                fill: 'rgba(78,115,223,0.15)',
                stroke: '#4e73df',
                strokeWidth: 2
            }
        )
    );
  1. Additionally, I would like to activate the drag selecting tool when click-holding on a swimlane. How do I make this possible?

Thanks in advance for your help.

#2

  1. Maybe you need to set the layerName and give the Shape a name of “SHAPE”. Explanation is at:
    https://gojs.net/latest/intro/tools.html#DragSelectingTool

  2. The DragSelectingTool might not be getting a chance to run because the lanes are selectable and movable. Or, at least, in the Swim Lanes sample, that is the case, and that prevents drag selecting from happening. So you could make all the Groups not pickable.

#3

Thank you. That solved #1.

For #2, this works, however, I would still like to be able to drag swimlanes. Maybe only drag them when the swimlane header is clicked. I am at a loss on how to do this. Any thoughts?

#4

Then leave the header as normal, but make the rest of the group not pickable. That means not setting the whole group’s background to “transparent” in the groupStyle function. And setting the “Auto” Panel’s pickable to false.

#5

This doesn’t seem to be working. Additionally, when changing a swimlane to not be pickable, it also means that I can’t drop nodes in the swimlane. Is there a way to do something like changing movable to false on mouse down unless shift or control are typed while a group is selected (i.e. [groupSelected])?

$(go.Group, 'Vertical', groupStyle(),
    {
       ...,
       mouseDown: function(e) {
            [groupSelected].movable = e.shift || e.control ? true : false;
       }
    }
);
#6

Ah, that is true. OK, forget about pickable.

Just set Group.movable to false and override DragSelectingTool.canStart to return true when you want:

    $(go.Diagram, "myDiagramDiv",
      {
        "dragSelectingTool.canStart": function() {
          if (!this.isEnabled) return false;
          const diagram = this.diagram;
          if (!diagram.allowSelect) return false;
          const 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;
        },
        . . .
#7

Awesome! That worked. I added this part before the line if (diagram.currentTool !=== this) {...

var object = diagram.findObjectAt(e.documentPoint);
if (object.name === 'SWIMLANE_HEADER' || object.name === 'SWIMLANE_TEXT') { 
    object.part.movable = true;
    return false;
} else if (object.name === 'SWIMLANE') {
    object.part.movable = false;
}