daybrush / infinite-viewer

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

Can't get right value for rangeX #11

Open iofjuupasli opened 3 years ago

iofjuupasli commented 3 years ago

I have container of size (it's dynamic and depends on layout) containerWidth === 816 Viewport width is: viewportWidth === 1920 No zoom: zoom === 1

I want to have 100px overscroll on all sides. I use

        rangeX={[-100, 100]}
        rangeY={[-100, 100]}

It may be either 100px before or after zoom, it doesn't matter.


https://github.com/daybrush/infinite-viewer/blob/64b7ea3601abdf4373381ac662c8818e54280f48/src/InfiniteViewerManager.tsx#L353

On this line of the library it gets the first value for max: this.viewportWidth * zoom - this.containerWidth === 1104 range[1] * zoom === 100


https://github.com/daybrush/infinite-viewer/blob/64b7ea3601abdf4373381ac662c8818e54280f48/src/InfiniteViewerManager.tsx#L137

The result is used here. this.containerWidth + abs(range[0]) + abs(range[1]) === 2020 But should be 2120 (1920 + 100 + 100) (size of viewport + left overscroll + right overscroll).

daybrush commented 2 years ago

@iofjuupasli

getScrollWidth(isZoom) Returns the total size affected by zoom. getRangeX(isZoom) Returns the range affected by zoom.

I'll think about it.

daybrush commented 2 years ago

@iofjuupasli

infinite-viewer's new version is released.

you can use rangeOffsetX, rangeOffsetY

rangeX={[0, 0]} rangeOffsetX{[-100, 100]}