Move location of DragSelectingTool box on keydown?

GoJS
1

I am using the RealtimeDragSelectingTool as such

'toolManager.dragSelectingTool': GraphObject.make(
        RealtimeDragSelectingTool,
        {
          isPartialInclusion: true,
        },
        {
          box: GraphObject.make(
            Part,
            { layerName: 'Tool', selectable: false },
            GraphObject.make(go.Shape, 'RoundedRectangle', {
              name: 'SHAPE',
              fill: '#007DBC1A',
              stroke: '#007DBC',
              strokeWidth: 1,
              strokeDashArray: [10, 5],
              parameter1: 12,
            }),
          ),
        },
      ),

I’m curious how I would go about implementing the following user interaction: While the box is being dragged, the user can press and hold the spacebar to enable the mouse to move the entire box. Once they let off the spacebar, the box should continue to draw as normal.

I imagine you would utilize the doKeyDown() and doKeyUp() methods of RealtimeDragSelectingTool but any ideas for how I could implement this behavior? Thanks in advance for any help!

2

This will get you started. In trying it I think it has some bugs, which you’ll need to figure out.

class CustomRTDSTool extends RealtimeDragSelectingTool {
  doActivate() {
    this._space = false;
    super.doActivate();
  }
  doKeyDown() {
    const e = this.diagram.lastInput;
    if (!this._space && e.key === " ") {
      this._space = true;
      this._boxSize = this.box.findObject("SHAPE").actualBounds.size;
    }
    super.doKeyDown();
  }
  doKeyUp() {
    this._space = false;
    super.doKeyUp();
  }
  doMouseMove() {
    if (this._space) {
      const p = this.diagram.lastInput.documentPoint;
      // ??? assume bottom-right corner
      this.box.position = new go.Point(p.x - this._boxSize.width, p.y - this._boxSize.height);
    } else {
      super.doMouseMove();
    }
  }
  doDeactivate() {
    this._space = false;
    super.doDeactivate();
  }
}