snap / snapZoom waits until center / width / height change before start

[davidfig]

snap / snapZoom waits until center / width / height change before start

[davidfig]

Wheel should trigger options.removeOnInterrupt in v.1.6.2.

[alexeymolchan]

@davidfig Thanks, works great! I think we can close this issue

[davidfig]

Not sure I understand. Why would it snap if the center is the same before and after? Maybe a video of the behavior would help.

[alexeymolchan]

@davidfig https://monosnap.com/file/2f4ENvkm2F2FLaEOmZ4rKjBqcPgZZf

you can see behavior on the video when i click second time on the green button and then scroll mouse wheel

[davidfig]

Thanks for the video. What are your viewport settings? There may be a conflict when snap and snapZoom are running simultaneously (just a theory).

[alexeymolchan]

const worldWidth = 2398;
const worldHeight = 3602;
    
const viewport = new Viewport({
  screenWidth: window.innerWidth,
  screenHeight: window.innerHeight,
  worldWidth: worldWidth,
  worldHeight: worldHeight,
});

viewport.fitWorld();
const maxWidth = this.viewport.worldScreenWidth;
const maxHeight = this.viewport.worldScreenHeight;
 
viewport
  .drag()
  .pinch({noDrag: true})
  .wheel()
  .clampZoom({
     minWidth: this.viewport.screenWidth / 4,
     minHeight: this.viewport.screenHeight / 4,
     maxWidth: maxWidth,
     maxHeight: maxHeight,
  })
  .clamp()
  .decelerate();

//Snap and SnapZoom settings plus my workaround

const snapHandler = (x, y,) => {
  if (Math.floor(viewport.center.x) !== Math.floor(x) && Math.floor(viewport.center.y) !== Math.floor(y)){
     viewport.snap(x, y, {removeOnComplete: true, interrupt: false, center: true, time: 1000});
  }
    
  if (Math.floor(viewport.worldScreenWidth) !== Math.floor(viewport.screenWidth / 4)) {
    viewport.snapZoom({removeOnComplete: true, width: viewport.screenWidth / 4, interrupt: false, time: 1500});
  }
};

@davidfig yeah actually on video im triggering snap and snapZoom simultaneously to achieve smooth transition to the point

upd: checked snapZoom without snap - same behavior as on video

[davidfig]

Hmm . . . Thanks for the information. snap and snapZoom were designed to wait until they are triggered before starting. (Sorry it took me a while to figure out what's going on. If I had just read your title, I could saved you lots of follow up.)

Here's the relevant code from snapZoom.update() function:

        if (!this.snapping)
        {
            if (this.parent.scale.x !== this.x_scale || this.parent.scale.y !== this.y_scale)
            {
               // snapping starts here

Would it be helpful if I added an option (maybe options.forceStart) that when set to true starts the ease regardless of current conditions?

[alexeymolchan]

@davidfig Yeah, it will, but maybe add options.forceStart for snap also ?
Also i think something like options.removeOnInterrupt will be helpful

[davidfig]

v.1.6.0 includes the changes. snap and snapZoom have new options:

options.removeOnInterrupt - removes this plugin if interrupted by any user input
options.forceStart - starts the snap immediately regardless of whether the viewport is at the desired location

Let me know if you have any problems.

[alexeymolchan]

@davidfig I tried removeOnInterrupt and it seems like this doesn't work - i'm triggering snapZoom + snap both have removeOnInterrupt: true, but plugin still works until the end of animation (used pinch, drag to force removeOnInterrupt on mobile, and drag / wheel on pc, same result).

forceStart - works, but without removeOnInterrupt while animation time isn't finished any interrupt will be forced back to position of the snap / snapZoom.

update: just checked source of the snapZoom/ snap and console logged part with removeOnInterrupt - no fires in snapZoom at all when interrupting, in snap works as expected. Even tried to call snapZoom without concurrency with snap, still no removeOnInterrupt

[davidfig]

Try v1.6.1. snapZoom's options.removeOnInterrupt had a bug.

[alexeymolchan]

@davidfig works great on mobile with pinch / drag, on pc with drag.

should wheel removeOnInterrupt ? (right now it doesn't)