infinite-viewer icon indicating copy to clipboard operation
infinite-viewer copied to clipboard

Scroll to with zoom

Open bytasv opened this issue 1 year ago • 2 comments

Hello,

I'm trying to implement logic which would store scroll top/left and zoom values and then restore that setting later on. For this I'm using onScroll (to store left/top) and onPinch (to store zoom). Storing part works ok, however when I want to restore that setting, I need to call two methods:

viewerRef.current.scrollTo(left, top)
viewerRef.current.setZoom(newZoom)

I noticed that when setZoom is called, onScroll is also triggered - which makes sense because left/top changes, I have a suspicion that because of that sometimes race condition happens and restoration messes up.

I was wondering:

  1. Could scrollTo method be extended to include zoom value in the options?
  2. Maybe it wouldn't be too hard and could be useful if there was methods for reading and restoring viewer zoom/position, i.e.:
interface Position {
  top: number
  left: number
  zoom: number
}
viewer.getPosition: () => Position
viewer.setPosition: (position: Position) => void

Basically I'd like to have a "stable" way to retrieve current position of viewer and later set that position without causing side effects like accidentally triggering and overwriting top/left

What do you think about that?

bytasv avatar Apr 28 '23 16:04 bytasv

@bytasv okay.

i’ll test it internally. and add method soon.

daybrush avatar Apr 29 '23 11:04 daybrush

@bytasv

* `infinite-viewer` 0.25.0
* `lit-infinite-viewer` 0.24.0
* `preact-infinite-viewer` 0.22.0
* `react-infinite-viewer` 0.25.0
* `svelte-infinite-viewer` 0.24.0
* `vue-infinite-viewer` 0.24.0
* `vue3-infinite-viewer` 0.14.0
* `ngx-infinite-viewer` 0.24.0

infinite-viewer's new version is released.

and .setTo, .setBy methods are added.

.setTo({
    x: 0,
    y: 0,
    zoom: 1,
   duration: 1000,
});

Try it!.

daybrush avatar May 18 '23 14:05 daybrush