Interface Issue: Uncontrollably Fast Zoom In and Out

[superpowers]

Interface Issue: Uncontrollably Fast Zoom In and Out

[elisee]

Hi @ArgosOz, thanks for the bug report!

The editor camera controls are located in https://github.com/superpowers/superpowers-game/blob/master/SupEngine/src/components/Camera2DControls.ts and https://github.com/superpowers/superpowers-game/blob/master/SupEngine/src/components/Camera3DControls.ts

We don't have a Magic Trackpad so you're probably in the best position to diagnose and submit a fix, but we're willing to help if you have questions, of course.

Looking at this line, it looks like numpad plus and minus already allow zooming in and out.

[ArgosOz]

Hi @elisee,

Looking at this line, it looks like numpad plus and minus already allow zooming in and out.

Indeed it is :) Great.

I'd like to add an option for Mac users to use the function with cmd key, later sometime... Currently it uses control key and it works well enough.

I appreciate your work.
All the best.

[reece-bennett]

I am also having this issue on a Windows 10 laptop. Pinch to zoom however does work well, zooming at a much better speed. A workaround to this problem could be adding a toggle to make the two finger swipes pan the view rather than zooming? (Something I also noted is that horizontal two finger swipe also zooms rather than pans)

[MathieuLoutre]

I think I have a solution for this and happy to make a PR. The problem is twofolds:

• The trackpad can have a delta of 0 at the end of the scroll but still trigger an event
• The trackpad triggers 2 or 3 times more events than a mouse

A way to tackle this could be in Input.ts in SupEngine and replace the OnMouseWheel function with a throttled version as well as handling the delta === 0 case.

  private onMouseWheelRealTime = (event: MouseWheelEvent) => {
    event.preventDefault();
    this.newScrollDelta = 0;
    if ((event.wheelDelta || event.detail) !== 0) {
      this.newScrollDelta = (event.wheelDelta > 0 || event.detail < 0) ? 1 : -1;
    }
    return false;
  };

  private onMouseWheel = throttle(this.onMouseWheelRealTime, 100);

Ideally, this.newScrollDelta = Math.sign(event.wheelData || event.detail) but Math.sign is ES6 only.

This seems to work for me and doesn't seem to impact the mouse (the 100 value can be tweaked but I think not under 75 if it's a little more sluggish).

My concern was around modifying the Input not knowing the exact architecture of Superpowers. If that Input class is reused elsewhere than the editor, it could be a problem for games that rely on the wheel and want to handle the stream of events themselves.

Otherwise, in Camera2DControls we could throttle changeOrthographicScale (instead of going to Input directly). However it would still require to handle de 0 value case in onMouseWheel.

Let me know what you prefer and I can put together a PR.

[MathieuLoutre]

@elisee Hey! I'm keen to get this fixed quickly so I can really use the editor to its fullest. Is there anything I can do to speed up the process?
It seems like this is modifying superpowers-game which is the default game system, so I suspect the Input code is the one available under Sup.Input. If so it's probably to stick to Camera2DControls for the throttling and just fixed the 0 case in Input. I can put together a PR with this if that's easier.

[elisee]

@MathieuLoutre I will take a look at it soon. Feel free to submit a PR, even if we end up doing it differently, it's always useful to have a starting point!

[MathieuLoutre]

Great! Thanks! Will see if I can wrestle something this evening or tomorrow.

[MathieuLoutre]

@elisee I've made the PR on superpowers-game as I believe it needed to be done there: superpowers/superpowers-game#132
Let me know if that was the wrong place somehow.

[elisee]

Closing this in favor of superpowers/superpowers-game#123 and superpowers/superpowers-game#132 since this is related to Superpowers Game.