Zoom Out Button Fails to Function Effectively in Playground

[msaini28r]

Description

During my exploration of Phoenix's playground, I encountered an issue with the zoom out button: it was not functioning properly. As a result, I had to manually zoom out using my mouse. This may be a bug that needs to be addressed.

Preview

screen-capture.webm

OS: Ubuntu 20.04.5 Node: 18.13.0 Browser: Google Chrome Yarn: 3.3.1

[EdwardMoyse]

Right, I think I see this too. And in the console I see:

Error: Can not call Tween.to() while Tween is already started or paused. Stop the Tween first

Investigating.

[EdwardMoyse]

Hmm. @9inpachi would you be free to chat about this at some point? I think you wrote it, and I'm a bit confused about the design - it kind of seems like tween and the following :

    this.zoomTimeout = setTimeout(() => {
      this.zoomTo(zoomFactor);
    }, this.zoomTime);

are clashing? Why do we need this callback, if tween is taking care of this?

Also, when I let go of zoom in, it seems like clearZoom() is called three times? Maybe it's one per camera, but I'm not sure.

[9inpachi]

Hey @EdwardMoyse,

Sorry for getting back so late on this.

it kind of seems like tween and the following :

    this.zoomTimeout = setTimeout(() => {
      this.zoomTo(zoomFactor);
    }, this.zoomTime);

are clashing? Why do we need this callback, if tween is taking care of this?

So it's coded this way because the tween doesn't run indefinitely with the mouse press. If we want to keep zooming in on the mouse's left button hold, then we need to create a tween for a smooth transition continuously until the user releases the mouse button. This is how it works.

1. The user holds the left mouse button.
2. A tween is created that lasts 200 ms. a. Now if it was only this tween, it will end in the first 200 ms of the mouse button hold..
3. Once the tween finishes, the setTimeout creates another tween right after which again starts the zoom animation.
4. This continues until the user releases the mouse button.
5. When the mouse button is released, the clearZoom method clears the timeout and stops the recursive timeout callbacks.

Also, when I let go of zoom in, it seems like clearZoom() is called three times? Maybe it's one per camera, but I'm not sure.

That should be because of the multiple events being called. These exists so all different scenarios can be handled and the zoom animation can be canceled.

[EdwardMoyse]

Hi @9inpachi - thanks for the explanation ... I'm confused then why it doesn't work (for me it just glitches back and forth). I'll try to have another look.

[EdwardMoyse]

Fixed in #678