Zoom Behaviour Issue: Clicking Plus Button Resets Zoom Level Before Gradually Increasing

In uiSlice.ts we have

export const scaleValues: ScaleValue[] = [
  { scale: 0.25, percent: '25%' },
  { scale: 0.33, percent: '33%' },
  { scale: 0.5, percent: '50%' },
  { scale: 0.67, percent: '67%' },
  { scale: 0.75, percent: '75%' },
  { scale: 0.8, percent: '80%' },
  { scale: 0.9, percent: '90%' },
  { scale: 1, percent: '100%' },
  { scale: 1.1, percent: '110%' },
  { scale: 1.25, percent: '125%' },
  { scale: 1.5, percent: '150%' },
  { scale: 1.75, percent: '175%' },
  { scale: 2, percent: '200%' },
  { scale: 2.5, percent: '250%' },
  { scale: 3, percent: '300%' },
  { scale: 4, percent: '400%' },
  { scale: 5, percent: '500%' },
]; 

If the current scale does not match any of the above values it just resets to 1st value. i.e 25%.

In ZoomControl.tsx

  const handleIncrement = () => {
    const currentScaleIndex = scaleValues.findIndex(
      (sv) => sv.scale === canvasViewPort.scale,
    );
    const nextScale =
      scaleValues[currentScaleIndex + 1]?.scale || scaleValues.at(-1)!.scale;
    dispatch(setCanvasViewPort({ scale: nextScale }));
  };

  const handleDecrement = () => {
    const currentScaleIndex = scaleValues.findIndex(
      (sv) => sv.scale === canvasViewPort.scale,
    );
    const prevScale =
      scaleValues[currentScaleIndex - 1]?.scale || scaleValues.at(0)!.scale;

    dispatch(setCanvasViewPort({ scale: prevScale }));
  };

@omkar-pd I have checked the "MR !218" in my local, and the issue still exists. Clicking the plus button after setting the zoom level to more than 25% causes the zoom level to reset to 25% before gradually increasing and the same with the minus button.

I have added the "merge request !257" to fix the issue, after adding this patch the viewport will gradually increase and decrease by clicking the plus and minus buttons.

As it stands I think both MR's for this issue have solved (not solved) slightly different variations of this problem.

To break things down I think part of the challenge here is that there are several different ways in which Zoom can happen and those are possibly being discussed/fixed interchangeably.

The actions that can change the zoom are as follows (and in brackets is the action those things firein uiSlice reducer).

1) You can zoom by clicking on and dragging the slider at the bottom (setCanvasViewPort)
2) You can zoom by clicking the blue + and - buttons either side of the slider (setCanvasViewPort)
3) You can zoom by holding down CTRL and rolling the wheel on a mouse (canvasViewPortZoomDelta)
4) You can zoom by using the pinch gesture on a laptop trackpad (canvasViewPortZoomDelta)
5) You can zoom by pressing = and - or numpad + and numpad - on the keyboard (canvasViewPortZoomIn/canvasViewPortZoomOut)

In cases 3,4 and 5 there is additional complexity introduced by the fact that when focused in (or with your mouse pointer over) the preview iFrame the event listeners are inside the iFrame and are passing on those events to the parent document via postMessages.

Regarding this specific problem, it seems to me that the reported issue is occuring in 2) and 5) in the above list.

Finally, at this point, through my testing, I can see that MR257 addresses 2) but not 5). I don't think MR218 addresses either issue and the bug still seems present on that branch.

@jessebaker issues 2) and 5) from the above list, were resolved in the MR257. Please check the image below.

The code changed in MR257 isn't called when zooming using the + and - keyboard keys so issue 5 is still a problem even on that branch.

In Devtools place a breakpoint on the first line of the handleIncrement function in ZoomControl.tsx
Set the zoom to a "irregular" value like 118%
Click a component in the preview to ensure your focus is inside iFrame
Press the + or - keys

Note the breakpoint is not hit.

The code where the issue described in 5) occurs is in canvasViewPortZoomIn/canvasViewPortZoomOut in uiSlice (called in two places in Canvas.tsx)

This is now ~1 week behind commits, so I'm not sure I can trust the green CI anymore 😅

Can you do:

git checkout …
git fetch origin
git merge origin/0.x
git push …

to update this MR's branch to be tested against latest 0.x? 🙏

I have checked the code after rebasing the latest code. The #13 scenario is fixed on the MR !257.

Thanks!

Approved and merged.