Why do I get jittering with custom panning implementation using JointJS native events?

[ryan-nebulock]

Introduction

So while I know that there is a JointJS+ implementation of panning / zooming, want to try JointJS out and without this functionality, it is really hard for me to evaluate it so I wanted to add a basic implementation to fully try out JointJS. Zooming was pretty simple to implement however panning was a bit more difficult.

This was my original implementation:

let panning: {
  clientX: number;
  clientY: number;
  startTX: number;
  startTY: number;
} | null = null;

paper.on('blank:pointerdown', (evt, x, y) => {
  const { tx, ty } = paper.translate();

  panData = { startX: x, startY: y, startTX: tx, startTY: ty };

  paper.on('blank:pointermove', handlePanning);
  paper.on('blank:pointerup', stopPanning);
});

function handlePanning(evt: joint.dia.Event, x: number, y: number) {
  if (!panData) {
    return;
  }

  const deltaX = x - panData.startX;
  const deltaY = y - panData.startY;

  paper.translate(panData.startTX + deltaX, panData.startTY + deltaY);
}

function stopPanning() {
  paper.off('blank:pointermove', handlePanning);
  paper.off('blank:pointerup', stopPanning);
  panData = null;
}

I ran into two issues. One what it was not accounting for the scale of the paper but I know with is just a calculation issue so was not worried about that.

The other issue was a bigger one which was getting a jittering effect when panning. I did some logging and it seems like the pointermove event was triggering to new value and then an old value too and basically was going back and forth like that. When I went to claude with this issue, it suggested that for the move, I just use native document mousemove since when doing a translate in a JointJS event, it can cause weird effects with how it works so I updated the implementation to:

let panning: {
  clientX: number;
  clientY: number;
  startTX: number;
  startTY: number;
} | null = null;

paper.on('blank:pointerdown', (event) => {
  const { tx, ty } = paper.translate();

  panning = {
    clientX: event.clientX,
    clientY: event.clientY,
    startTX: tx,
    startTY: ty,
  };

  document.addEventListener('mousemove', onPanMove);
  paper.on('blank:pointerup', onPanEnd);
});

function onPanMove(event: MouseEvent) {
  if (!panning) {
    return;
  }

  const deltaX = event.clientX - panning.clientX;
  const deltaY = event.clientY - panning.clientY;

  paper.translate(panning.startTX + deltaX, panning.startTY + deltaY);
}

function onPanEnd() {
  paper.off('blank:pointerup', onPanEnd);
  document.removeEventListener('mousemove', onPanMove);
  panning = null;
}

and this implementation works as expected (it even accounts for the zoom level).

Is there a reason why the implementation only using the JointJS event was causing this jittering effect? Is there a way to use JointJS events only to create a pan effect in the free version of JointJS?

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

The issue isn't with using the blank:pointermove and blank:pointerdown events but with reading the x and y values, which are already snapped to the grid and converted to graph coordinates. Instead, you should use the client coordinates from the dia.Event.

[ryan-nebulock]

@kumilingus You are correct, swapping back to just jointjs events work fine, thanks.