Space key and move tool

[brauliodiez]

In many design tools, you can move the canvas while working by using the spacebar. Here's how it works:

Activate the Move Tool (temporarily):

While using any tool (e.g., the cursor, text tool, or shape tool), press and hold the spacebar. This temporarily switches your cursor to the "Hand" tool for moving the canvas.
Drag the Canvas:

With the spacebar pressed, click and drag on the canvas with the left mouse button. The canvas will move in the direction you drag.
Release the Spacebar:

Once you release the spacebar, you’ll automatically return to the tool you were using before.

[borxdev]

Superb feature!

[borxdev]

In plain JavaScript maybe it can be something like this:

It would be necessary to disable the eventListeners that are listening and may conflict, such as the selection of elements...

class CanvasPanner {
  constructor(container) {
    this.container = container;
    this.isDragging = false;
    this.isSpacePressed = false;
    this.startX = 0;
    this.startY = 0;
    this.scrollLeft = 0;
    this.scrollTop = 0;

    this.initEvents();
  }

  initEvents() {
    document.addEventListener('keydown', (e) => this.handleKeyDown(e));
    document.addEventListener('keyup', (e) => this.handleKeyUp(e));

    this.container.addEventListener('mousedown', (e) => this.startDrag(e));
    this.container.addEventListener('mousemove', (e) => this.doDrag(e));
    this.container.addEventListener('mouseup', () => this.stopDrag());
    this.container.addEventListener('mouseleave', () => this.stopDrag());
  }

  handleKeyDown(e) {
    if (e.code === 'Space') {
      e.preventDefault();
      if (!this.isSpacePressed) {
        this.isSpacePressed = true;
        this.container.style.cursor = 'grab';
      }
    }
  }

  handleKeyUp(e) {
    if (e.code === 'Space') {
      this.isSpacePressed = false;
      this.container.style.cursor = 'default';
    }
  }

  startDrag(e) {
    if (this.isSpacePressed) {
      e.preventDefault();
      this.isDragging = true;
      this.container.style.cursor = 'grabbing';
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.scrollLeft = this.container.scrollLeft;
      this.scrollTop = this.container.scrollTop;
    }
  }

  doDrag(e) {
    if (this.isDragging) {
      const dx = e.clientX - this.startX;
      const dy = e.clientY - this.startY;
      this.container.scrollLeft = this.scrollLeft - dx;
      this.container.scrollTop = this.scrollTop - dy;
    }
  }

  stopDrag() {
    if (this.isDragging) {
      this.isDragging = false;
      this.container.style.cursor = 'grab';
    }
  }
}


const container = $0; // put the right selector here. Use $0 by selecting the container in the DOM to try with devtools.
const canvasPanner = new CanvasPanner(container);