daybrush / infinite-viewer

Infinite Viewer is Document Viewer Component with infinite scrolling.
https://daybrush.com/infinite-viewer/
MIT License
296 stars 33 forks source link

Scroll to with zoom #49

Open bytasv opened 1 year ago

bytasv commented 1 year ago

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?

daybrush commented 1 year ago

@bytasv okay.

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

daybrush commented 1 year ago

@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!.