PanningTool active when holding space

GoJS
1

Hi,

How can I activate the panning tool when holding space (like in inkscape, gimp)? I added the following for activating the panning tool on middle mouse button:

this.toolManager.panningTool.canStart = () => this.lastInput.middle; // Pan with middle mouse button

I tried adding the space key here but apparently, this method does not get called on key down. Thanks!

2 
  $(go.Diagram, . . .,
    {
      "commandHandler.doKeyDown": function() {
        // override normal behavior on Space key
        if (this.diagram.lastInput.key === ' ') {  // Space
          this.diagram.firstInput.documentPoint = this.diagram.lastInput.documentPoint;
          this.diagram.firstInput.viewPoint = this.diagram.lastInput.viewPoint;
          this.diagram.currentTool = this.diagram.toolManager.panningTool;
          this.diagram.currentTool.doActivate(); 
          return;
        }
        go.CommandHandler.prototype.doKeyDown.call(this);
      },
      "panningTool.doKeyUp": function() { this.diagram.currentTool.stopTool(); }

The override of CommandHandler.doKeyDown, when it sees the Space key, starts the PanningTool, but other keys it handles normally.

The behavior is that once the PanningTool is running, CommandHandler.doKeyDown and doKeyUp are no longer called, because the ToolManager, which calls the CommandHandler for keyboard events, is not running. And PanningTool.doKeyDown and PanningTool.doKeyUp don’t do anything. So the override of PanningTool.doKeyUp is all that is needed to get the Space key up to stop that tool.

3

Thanks. I tried your approach but the doKeyDown keeps getting fired. Also, when I also register doKeyUp, it does not get fired consistently.

However, when I register on the document:

document.body.onkeydown = (e) => {
      if (e.key === ' ') { // space
        console.log('down')
      }
    };
    document.body.onkeyup = (e) => {
      console.log('up')
    };

this seems to work nicely. However, when the diagram is clicked, these events are not fired anymore. Any ideas?

4

Ah, I was confused. I updated the code in my post above and added an explanation for what I got (embarrassingly) wrong.

And yes, I don’t think we can avoid all of the auto-repeating key-down events when the user holds down a key. But I’m not sure it matters.

5

Thanks! I tried your solution and it works nicely except for when you start panning at a different position than your last pan finish. Then it jumps to the position where you’ve left off:

vokoscreen-2021-09-27_14-49-25

Any ideas how this can be resolved?

6

I didn’t notice that. Normal PanningTool.move behavior shifts the Diagram.position by the distance between the mouse-down point and the current mouse point. So each time the tool is started requires updating the (normal) mouse-down point.

I have updated the code above.

7

Works perfectly, thanks!