daybrush/infinite-viewer

Infinite Viewer is Document Viewer Component with infinite scrolling.

Infinite Viewer

Infinite Viewer is Document Viewer Component with infinite scrolling up, down, left and right.

Demo / API / Main Project

❗Changed❗

• Change name useForceWheel to useWheelScroll option

⚙️ Installation

npm

$ npm install infinite-viewer

scripts

<script src="//daybrush.com/infinite-viewer/release/latest/dist/infinite-viewer.min.js"></script>

🚀 How to use

• In chrome, the scroll event is used instead of the wheel event due to the backward and forward swipe gesture. If you set overscroll-behavior: none; on the body, you can use useWheelScroll option.

<div class="viewer">
    <div class="viewport">
        AAAA
    </div>
</div>

import InfiniteViewer from "infinite-viewer";

const infiniteViewer = new InfiniteViewer(
    document.querySelector(".viewer"),
    document.querySelector(".viewport"),
    {
        margin: 0,
        threshold: 0, 
        zoom: 1,
        rangeX: [0, 0],
        rangeY: [0, 0],
    },
);

infiniteViewer.on("scroll", () => {
    console.log(infiniteViewer.getScrollLeft(), infiniteViewer.getScrollTop());
});

Structure

• Before

<div class="viewer">
    <div class="viewport">
        AAAA
    </div>
</div>

• After

<div class="container">
    <div class="infinite-viewer-wrapper">
        <div class="infinite-viewer-scroll-area"></div>
        <div class="viewport">AAA</div>
    </div>
    <div class="infinite-viewer-scroll-bar infinite-viewer-vertical-scroll-bar">
        <div class="infinite-viewer-scroll-thumb"></div>
    </div>
    <div class="infinite-viewer-scroll-bar infinite-viewer-horizontal-scroll-bar">
        <div class="infinite-viewer-scroll-thumb"></div>
    </div>
</div>

📦 Packages

Package Name	Version	Description
react-infinite-viewer		A React Infinite Viewer Component that allows you to select elements in the drag area using the mouse or touch.
ngx-infinite-viewer		An Angular Infinite Viewer Component that allows you to select elements in the drag area using the mouse or touch.
vue-infinite-viewer		A Vue Infinite Viewer Component that allows you to select elements in the drag area using the mouse or touch.
vue3-infinite-viewer		A Vue 3 Infinite Viewer Component that allows you to select elements in the drag area using the mouse or touch.
preact-infinite-viewer		A Preact Infinite Viewer Component that allows you to select elements in the drag area using the mouse or touch.
svelte-infinite-viewer		A Svelte Infinite Viewer Component that allows you to select elements in the drag area using the mouse or touch.
lit-infinite-viewer		A Lit Infinite Viewer Component that allows you to select elements in the drag area using the mouse or touch.

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to infinite-viewer or other packages, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

📝 License

This project is MIT licensed.

MIT License

Copyright (c) 2020 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

infinite-viewer's Issues

Scroll to with zoom

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?

Can we support VUE 3.0

There is an offset in group drag when the zoom is not 1

Here is the steps:

1. zoom in or out (Just let the zoom is not equal to 1)
2. drag the group
3. you can find element get an offset with mouse

How to set Drag Event in react ?

angular v16 dropped view engine support - please upgrade to ivy

Thank you very much for all your libs and your effort.
angular v16 dropped view engine support - please upgrade to ivy.

Scroll wheel zoom accuracy error

There is a strange zoom accuracy problem when using the mouse wheel, but there is no such problem when using the touchpad.

MouseWheel

TouchPad

How to set the canvas fixed-point coordinates to (0, 0)

Hey there,

How to set the canvas fixed-point coordinates to (0, 0)

code

How to prevent negative scrolling

I am using Rule with Infinite-Viewer and would like to ensure that I can't move beyond the initial top/left coordinates. Currently when I do, the Rule shows negative. I wish to only allow scrolling in a positive direction for both horizontal and vertical scrolling.

Is this possible?

실례합니다. 스벨트용 인피니티 뷰를 써보고 싶은데.. 삼일동안 시도했는데 데모를 못만들겟습니다

스벨트에서는 컴포넌트 내부의 css를 css이름으로 접근할수가 없어서 내부의 css를 조작하지 못하고 있습니다.
예제대로 따라하면 css가 형성되지 않아 스크롤 이벤트가 작동하지않고.. 사용할 수 있는 방법을 알수있을까요?
감사합니다.

Question: Why is it scrolling with an "offset"?

Hey @daybrush - I know this isn't much, but maybe you have some ideas why this could be happening 👇

CleanShot.2023-03-27.at.23.38.21.mp4

When I scroll it doesn't "stick" to the point where the cursor is and starts slowly moving away.
This is my config:

	<InfiniteViewer
        ref={viewerRef}
        useWheelScroll
        wheelPinchKey='meta'
        useAutoZoom
        zoomRange={[CANVAS_VIEWER_MIN_SCALE, CANVAS_VIEWER_MAX_SCALE]}
        wheelScale={0.005}
        threshold={100}
        onPinch={(event) => {
          const { zoom: newZoom } = event

          viewerRef.current?.setZoom(newZoom)
        }}
      >
        {children}
      </InfiniteViewer>

I can see it's working in your demo, so it must be something on my end. I know it's tough without actual reproduction, but MAYBE you already see what might be causing that.

Thank you

Can't get right value for rangeX

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.

---

infinite-viewer/src/InfiniteViewerManager.tsx

Line 353 in 64b7ea3

Math.max(this.viewportWidth * zoom - this.containerWidth, range[1] * zoom),

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

---

infinite-viewer/src/InfiniteViewerManager.tsx

Line 137 in 64b7ea3

return this.containerWidth + abs(range[0]) + abs(range[1]);

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).

there is no way to find viewer's relative position at current mouse pos.

there is no way to find viewer's relative position at current mouse pos. is there any way to find it that i don't know?

Question: Is it possible to use single finger scrolling on touch devices?

Is there a way to change the scrolling on mobile devices to use single finger?

At the moment it is 2 finger scrolling and I couldn't figure out how to change that behaviour.

How to obtain the relative coordinates of a dragged element (relative to its parent element)

problem

Hey, author

When dropping the drag item, obtain its relative coordinates。

operation

Code structure

Looking forward to your reply，thank you

Firefox only: Infiniteviewer scrollbar shows up along with native scrollbar

Environments

• Testable Address: Infinite Viewer Demo Page

Description

While using Firefox I noticed that the native scrollbars still show up within the infinite-viewer.

Scrollbars break if the starting point of rangeX/rangeY is larger than 0

They also break if the ending point of a rangeX/rangeY is lesser than 0.

Example: https://codesandbox.io/s/selecto-116-forked-260hw0?file=/src/InfiniteViewer.ts

Notice the range being:

rangeX: [-2000, -1000],
rangeY: [-2000, -1000]

The scroll area gets constrained correctly, but the scrollbars stop covering the whole width/height of the page.
The image shows the problem: I cannot scroll further right or further down.

How can I get the infinite-viewer instance in vue3-infinite-viewer? I need invoke its method but I can't do it.

The code just like this. Now I want to call scrollCenter(). But I can't do it.

<template>
  <vue-infinite-viewer class="viewer">
    <div class="viewport">AA</div>
  </vue-infinite-viewer>
</template>
<script>
import { VueInfiniteViewer } from "vue3-infinite-viewer";

export default {
  components: {
    VueInfiniteViewer
  },
};
</script>

Scroll Issues on Windows with a Custom Browser Zoom Level

When a Windows > Chrome user zooms their browser out (e.g. to 90%) or in (e.g. to 110%), the scroll functionality of this library no longer works.

This issue is reproduce-able on the demo page for this library: https://daybrush.com/infinite-viewer/

How to Reproduce

1. Open the Chrome browser on a Windows 10 device
2. Navigate to the demo page for this library: https://daybrush.com/infinite-viewer/
3. Zoom your browser out to 90%, or in to 110%
4. Notice that the scroll behavior no longer works. You cannot scroll up or down via mousewheel, or drag either of the scroll bars.

Register VueInfiniteViewer in Vue typescript decorator report error

Hi, @daybrush

Vue 2.6.13
vue-infinite-viewer 0.12.0

When VueInfiniteViewer component in such as usage, vscode report error, look the follow image...

console.log(this.$refs.infiniteViewerRefs.getScrollTop()) is undefined in Vue 2.x.

How can vue-infinite-viewer scroll when it used with vue-selecto?

The vue-infinite-viewer cannot scroll when it used with vue-selecto, and it did not show any warn in console.

Here is my code screenshot.
html:

js:

This is my version number:
"vue": "^2.6.11",
"vue-infinite-viewer": "^0.13.0",
"vue-selecto": "^1.15.1",
Can someone give me a help? Thanks.

The attribute "scrollTo" on type "NgxInfiniteViewerComponent" does not exist

import { NgxInfiniteViewerComponent } from 'ngx-infinite-viewer';

@ViewChild('InfiniteViewer', { static: false }) InfiniteViewer: NgxInfiniteViewerComponent;

guidesReset() {
this.InfiniteViewer.scrollTo(0, 0);
console.log(this.InfiniteViewer, 'this.InfiniteViewer');
}

How to add events to infinite-viewer-scroll-area element ?

The trackpad can be dragged quickly on the mac, and only the scroll bar can be used on the PC. I need to add events in places other than ViewerContainer, such as on the infinite-viewer-scroll-area element

Enable/Disable scroll

It'll be nice to be able to enable/disable scroll. What do you think ?

btw, thx for your awesome work 👍

Performance: translate3d, backface-visibility, will-change

Can we translate the element in the infinite viewer using translate3d rather than the normal translate, to improve performance?

See: https://stackoverflow.com/a/12643404

Infinite - Viewer ，when the form component is selected Will automatically scroll, centering the current component

component: infinite-viewer
version: ^0.14.3

Infinite - Viewer ，when the form component is selected
Will automatically scroll, centering the current component

Is there a way to use the dragging instead of scrolling to move around board/document.

Hi!

I looked inside and saw that you are using another of your libraries for this component called Gesto. You only react to the "touch" event, skip "mouse". And this causes a problem, I cannot do something like the Miro move tool. Sometimes, this movement is much more convenient than using a scroll.

I would like to enable document navigation by dragging the mouse on the board / document.

Would you consider introducing such an option? Otherwise, I will probably have to do my version via fork :( and I believe many people could use it!

How to hide the scroll bars if there is no content outside of the current viewing area?

Testable Address: https://codesandbox.io/s/zoom-2t797o?file=/src/App.js

I am hoping to toggle displayHorizontalScroll and displayVerticalScroll based on whether there is content in the current viewing area. Is there any way to do this?

For example:

In the photo below, all of the content is inside the current viewing area. In this case I would want the scroll bars to be hidden.

In this photo, there is some content outside of the current viewing area. In this case I would want the scroll bars to be visible.

Is there a way to void scrolling when press space key?

I'm using the react package, and I want to make user can pan the div while holding the Space key and drag the div element. but the infinite-viewer just scrolls.
Is there a way to make the viewer do not scroll when the space key is pressed?

[react-infinite-viewer] The scrollbar is displayed abnormally when content exists on the left side.

Example :

https://codesandbox.io/s/react-infinite-viewer-left-content-bug-7btcsj?file=/src/App.js

Mouse wheel scroll too fast

When I use the mouse wheel to scroll the page, it would scroll too fast and be hard to control.

How can I fix this problem?

Wrong position when zoom value different from 100%

I'm working on a canvas-like editor. I want to load the position with zoom level what the user previously saved.
Loading the position works perfectly with 100% zoom level. When the zoom level is different than 100% it miscalculates.

What do you recommend to solve this?

const save = () => {
      const left = viewerRef.current.getScrollLeft()
      const top = viewerRef.current.getScrollTop()
      const zoom = viewerRef.current.getZoom()
}

const load = () => {
      viewerRef.current.scrollTo(layout.left, layout.top)
      // Works correctly if zoom = 1
      viewerRef.current.setZoom(layout.zoom)
}
 
<InfiniteViewer
        ref={viewerRef}
        useMouseDrag
        onScroll={handleOnScroll}
        ...
>

The `pinchStart` and `abortPinch` events are invalid.

const infiniteViewer = new InfiniteViewer(this.$refs.viewer, this.$refs.viewport, {
  usePinch: false,
  useForceWheel: true,
  pinchThreshold: 50,
  displayVerticalScroll: false,
  displayHorizontalScroll: false,
  zoom: 1
});
infiniteViewer.on("pinchStart", e => {
  console.log("pinchStart");
});
infiniteViewer.on("pinch", e => {
  console.log("pinch");
});
infiniteViewer.on("abortPinch", e => {
  console.log("abortPinch");
});

result

Question: How to use scroll zoom?

I'm using react-infinite-viewer and having issue with getting zoom to work with scroll. I can manually zoom by changing the zoom prop. However, in the demo I can zoom using mouse scroll + ctrl. I tried setting useWheelScroll to true but that doesn't work.

Is there an example to use scroll zoom with react?

transform: translate3d on ViewPort messes up fixed position child elements

I am having an issue integrating a Drag/Drop framework within the ViewPort of the infinite-viewer. When I drag an element it creates a temporary ghost element that moves with the mouse, zindex of 1000, and uses Fixed positioning to move the image with the mouse as the element is dragged to a target.

Within Infinite (when the transform:translate3d in play), the position of this ghost-element is way-off from the dragged mouse position.

When I manually set transform:none on the ViewPort element, effectively removing the translate3d, then the ghost child element positions correctly to the mouse pointer.

1. What is the purpose for the transform:translate3d within Infinite-viewer?
2. Can it be disable?
3. Or if not - How can I alter the ghost child element such that it works with the translate3d in play on the ViewPort?

Thanks in advance!

Question: How to prevent scroll from keyboard?

Hi,
I wanted to move an element with the keyboard but it affects the infinite scroll.
I was wondering how to prevent the infinite scroll to moved while clicking up/down/left/right on the keyboard?

Thanks

"Wobble" effect when slowly scrolling

Hello,

I'm currently on:

"react-infinite-viewer": "^0.16.4",

and I noticed a weird behaviour (I don't think it's versions specific though), wondering if there is a way to solve that. When I try to pinch/scroll zoom and I do it slowly the viewer seems to kinda "wobble" in all directions. It can also be seen on the demo page here: https://daybrush.com/infinite-viewer/

My assumption is that there might be some dimension rounding happening when scroll calculations are performed and because of that the viewer might be "jumping a pixel" back and forth which creates that wobble effect.

Lemme know if you can reproduce it as well and if you have any ideas what might be causing this? I'm happy to open PR if you could share the place that might be responsible for this. Thank you

Question: How to use VueInfiniteViewer in Vue 2.x ？

Hi, @daybrush
When i use VueInfiniteViewer component in Vue 2.6 according by your demo, appera these warn in console.

and the scrollbar is not visable, scrollbar position is bottom and right, but scrollbar tick is not show

My vue version is Vue 2.6.13, vue-infinite-viewer version is 0.12.1
Can you give me a help? Thank you

svelte-infinite-viewer won't compile

When adding this to a Svelte project, it fails with the error:

[ERROR] No matching export in "node_modules/svelte/internal/index.mjs" for import "get_slot_context"

    node_modules/svelte-infinite-viewer/dist/infinite-viewer.esm.js:9:99`

You can see the error in this REPL which uses only the example code:

https://svelte.dev/repl/fd7afb013a0540b58154d153580cda02?version=3.50.0

new InfiniteViewer will empty the iframe

There is an iframe in the viewport, and the content of the iframe will be cleared after the new InfiniteViewer

Question: How do i use ctrl + mouse wheel for zoom in and out?

I tried to remove the e.preventDefault from your code but it does not seem to work.

at InfiniteViewerManager:

• onWheel
• onGestureStart
• onGestureChange

I need to have this option to be enabled on and off.
how do i do this?

Zooming is not working for Lit element

Unfortunately, zooming isn't working for Lit-element. I tried using the already available lit-infinite-viewer package as well as my own implementation. In both cases holding ctrl while scolling does nothing (the scale value in transform doesn't change). Am I doing something wrong?
I tried Firefox and Chromium.

I have created a Codesandbox:
https://codesandbox.io/s/broken-rain-cq8ei5?file=/src/my-component.ts

How to synchronize the scrolling of multiple `infinite-viewers` instance?

Update DEMO link

Can you please update the demo page?
I've tried to do a little demo myself but I didn't reached the expected results.

Thank you in advance

Question: can we animate programatic change of zoom/position?

Hey there,

I was wondering if it is possible to animate somehow the transition between whatever zoom and canvas position we currently have new values that I'd like to set?

I.e.: I want to reset the zoom to 100% and center canvas on some keyboard press, right now it immediately jumps to that setting, but I thought it would be nice to see even the quick transition in between. I could probably try to animate it with setTimout/raf but don't think it's gonna be a good result and maybe it wouldn't be too difficult to add some line in the code to have this functionality. 🤔

is there a way to zoom only the X axis?

I need to create a timeline with infinite scroll and ability to zoom. but the zoom is only needed for the x direction so all the components height will be kept. is there a way to do it?

Example how to get to the scroll elements to change styling

Hi,
I'm got my react app in darkmode which makes the default color of the vertical/horizontal scroll elements hard to see.
I think there's a means to get to to them but have been unable to find a way to override the color. Could you show an example?

Scrollbar regression?

Hey there, I noticed that scrollbars started to behave weird, I'm suspecting there might have been a regression introduced at some point?

(Latest version, react) as well as in your live demo: https://daybrush.com/infinite-viewer/

CleanShot.2023-05-29.at.22.17.40.mp4

If I'm not mistaken this worked fine in the past 🤔

Zoom centering

Dear Younkue! Thanks for a lovely component!
I was wondering if it's possible to center zoom to mouse coordinates?

   <InfiniteViewer
 
    className="viewer"
    margin={1}
    threshold={1}
    rangeX={[100000000, 100000000]}
    rangeY={[100000000, 100000000]}
    pinchThreshold = {1}
    zoom = {zoom}

    onPinch={e => {
    setZoom(e.zoom) 
    }}

    >

   "Cool zoomable text"

    </InfiniteViewer>

If I do like this, it zooms well but it would be so nice to have something like:

<InfiniteViewer
...
zoomCenterX = {cursorX}
zoomCenterY = {cursorY}

Is it achievable that way? (I might be missing something from the docs) Many thanks!

Change dragging method

useMouseDrag prop is great but I should do the same if the middle mouse button pressed. How can I do this?