### Install Infinite Viewer via npm

Source: https://daybrush.com/infinite-viewer/release/latest/doc/index.html

Use this command to install the Infinite Viewer package using npm.

```bash
$ npm install infinite-viewer
```

--------------------------------

### OnDragStart

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Callback function for when dragging starts.

```APIDOC
## OnDragStart

### Description
Callback function for when dragging starts.
```

--------------------------------

### OnPinchStart Event Data

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Properties available when the pinch start event occurs.

```APIDIDOC
## OnPinchStart

### Description
Provides data when a pinch gesture starts.

### Properties
- **inputEvent** (any) - The original input event.
- **stop** (function) - A function to stop the pinch gesture.
```

--------------------------------

### InfiniteViewer pinch Event Example

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Listens for the 'pinch' event, which fires when two points pinch the viewer. The pinchStart and abortPinch events do not occur when pinching through the wheel. Logs the input event to the console. Requires usePinch option to be true.

```javascript
import InfiniteViewer from "infinite-viewer";

const viewer = new InfiniteViewer(
  document.querySelector(".container"),
  document.querySelector(".viewport"),
  {
    usePinch: true,
  }
);
```

--------------------------------

### Start Scroll Animation by Speed

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Calculates and starts a scroll animation based on a given speed. It determines the duration and destination position using helper functions 'getDuration' and 'getDestPos'.

```typescript
private _startScrollAnimationBySpeed(speed: number[]) {
        if (!speed || (!speed[0] && !speed[1])) {
            return;
        }
        const a = -0.0006;
        const duration = getDuration(speed, a);
        const destPos = getDestPos(speed, a);

        return this._startScrollAnimation(destPos, {
            duration,
        })

    }
```

--------------------------------

### Start Scroll Animation

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Initiates a scroll animation to a specified destination. Uses requestAnimationFrame for smooth transitions. Requires 'startAnimation' and 'DEFAULT_EASING' to be defined.

```typescript
private _startScrollAnimation(dest: number[], options: AnimationOptions) {
        if (!dest[0] && !dest[1]) {
            return;
        }
        const duration = options.duration;
        const easing = options.easing || DEFAULT_EASING;

        startAnimation(
            distRatio => this._scrollBy(
                dest[0] * distRatio,
                dest[1] * distRatio,
                options,
            ),
            next => {
                this._scrollTimer = requestAnimationFrame(next);
            },
            {
                easing,
                duration,
            },
        );
    }
```

--------------------------------

### Handle Gesture Start for Zooming

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Initializes zoom state when a gesture begins. It stores the current zoom levels and updates the client rect to prepare for gesture transformations.

```typescript
private onGestureStart = (e: any) => {
        this._tempScale = [this.zoomX, this.zoomY];
        this._setClientRect();
        e.preventDefault();
    }
```

--------------------------------

### getWrapper()

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Get the wrapper HTML element of the InfiniteViewer.

```APIDOC
## getWrapper()

### Description
Get the wrapper HTML element of the InfiniteViewer.

### Returns
- **HTMLElement** - The wrapper element.
```

--------------------------------

### getViewportHeight

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the current height of the viewport.

```APIDOC
## getViewportHeight

### Description
Gets the current height of the viewport.

### Method
public getViewportHeight(): number

### Returns
- (number) The height of the viewport.
```

--------------------------------

### getZoomY()

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Get viewer zoom on the Y axis.

```APIDOC
## getZoomY()

### Description
Get viewer zoom on the Y axis.

### Returns
- **number** - The current zoom level on the Y axis.
```

--------------------------------

### getViewportWidth

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the current width of the viewport.

```APIDOC
## getViewportWidth

### Description
Gets the current width of the viewport.

### Method
public getViewportWidth(): number

### Returns
- (number) The width of the viewport.
```

--------------------------------

### getViewport()

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Get the viewport HTML element of the InfiniteViewer.

```APIDOC
## getViewport()

### Description
Get the viewport HTML element of the InfiniteViewer.

### Returns
- **HTMLElement** - The viewport element.
```

--------------------------------

### getZoomX()

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Get viewer zoom on the X axis.

```APIDOC
## getZoomX()

### Description
Get viewer zoom on the X axis.

### Returns
- **number** - The current zoom level on the X axis.
```

--------------------------------

### getContainer()

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Get the container HTML element of the InfiniteViewer.

```APIDOC
## getContainer()

### Description
Get the container HTML element of the InfiniteViewer.

### Returns
- **HTMLElement** - The container element.
```

--------------------------------

### getZoom()

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Get the overall viewer zoom level.

```APIDOC
## getZoom()

### Description
Get the overall viewer zoom level.

### Returns
- **number** - The current zoom level.
```

--------------------------------

### getContainerHeight

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the current height of the container element.

```APIDOC
## getContainerHeight

### Description
Gets the current height of the container element.

### Method
public getContainerHeight(): number

### Returns
- (number) The height of the container.
```

--------------------------------

### getContainerWidth

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the current width of the container element.

```APIDOC
## getContainerWidth

### Description
Gets the current width of the container element.

### Method
public getContainerWidth(): number

### Returns
- (number) The width of the container.
```

--------------------------------

### Start Zoom Animation

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Initiates a zoom animation to a target zoom level. It uses a requestAnimationFrame loop to smoothly update the zoom values over a specified duration and easing function.

```typescript
private _startZoomAnimation(dest: number[], options: ZoomOptions) {
        if (!dest) {
            return;
        }
        const duration = options.duration;
        const easing = options.easing || DEFAULT_EASING;
  
        startAnimation(
            distRatio => this._setZoom(
                [
                    this.zoomX + dest[0] * distRatio,
                    this.zoomY + dest[1] * distRatio,
                ],
                options,
            ),
            next => {
                this._zoomTimer = requestAnimationFrame(next);
            },
            {
                easing,
                duration,
            },
        );
    }
```

--------------------------------

### geScrollArea()

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Get the scroll area HTML element of the InfiniteViewer.

```APIDOC
## geScrollArea()

### Description
Get the scroll area HTML element of the InfiniteViewer.

### Returns
- **HTMLElement** - The scroll area element.
```

--------------------------------

### getWheelContainer()

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Get the HTML element used for wheel events within the InfiniteViewer.

```APIDOC
## getWheelContainer()

### Description
Get the HTML element used for wheel events within the InfiniteViewer.

### Returns
- **HTMLElement** - The wheel container element.
```

--------------------------------

### Get Viewer Zoom

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Retrieves the current zoom level of the viewer.

```typescript
public getZoom() {
    return (this.zoomX + this.zoomY) / 2;
}
```

--------------------------------

### Get Viewer Zoom X

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Retrieves the current zoom level along the X-axis. Available since version 0.20.0.

```typescript
public getZoomX() {
    return this.zoomX;
}
```

--------------------------------

### Remove Event Listeners

Source: https://daybrush.com/infinite-viewer/release/latest/doc/EventEmitter.html

Provides examples of removing event listeners. This includes removing all listeners, removing all listeners for a specific event, and removing a specific listener function from a specific event.

```typescript
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Remove all listeners.
emitter.off();

// Remove all listeners in "A" event.
emitter.off("a");


// Remove "listener" listener in "a" event.
emitter.off("a", listener);
```

--------------------------------

### Get Range Y

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the range of the viewer along the Y-axis. Can optionally consider zoom and real dimensions.

```typescript
public getRangeY(isZoom?: boolean, isReal?: boolean) {
    return this._getRangeCoord("vertical", isZoom, isReal);
}
```

--------------------------------

### Initialize ResizeObserver for Responsive Resizing

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Sets up a ResizeObserver to monitor the viewport and container elements for size changes. When a resize occurs, it calls the `resize` method to update the viewer. This is the preferred method for handling resizes.

```typescript
const observer = new win.ResizeObserver(() => {
                this.resize();
            });
  
            observer.observe(this._viewportElement);
            observer.observe(this._containerElement);
  
            this._onDestroys.push(() => {
                observer.disconnect();
            });
```

--------------------------------

### Get Range X

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the range of the viewer along the X-axis. Can optionally consider zoom and real dimensions.

```typescript
public getRangeX(isZoom?: boolean, isReal?: boolean) {
    return this._getRangeCoord("horizontal", isZoom, isReal);
}
```

--------------------------------

### Instantiate and Emit Event

Source: https://daybrush.com/infinite-viewer/release/latest/doc/EventEmitter.html

Shows how to instantiate an EventEmitter, attach a listener, and then emit an event with data. Note the use of `emit` instead of `trigger`.

```typescript
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
     
```

--------------------------------

### Handle dragStart Event in InfiniteViewer

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Listen for the 'dragStart' event to detect the beginning of a touch-based drag interaction. This is useful for initiating actions when a drag begins.

```typescript
import InfiniteViewer from "infinite-viewer";

const viewer = new InfiniteViewer(
  document.querySelector(".container"),
  document.querySelector(".viewport")
).on("dragStart", e => {
  console.log(e.inputEvent);
});
```

--------------------------------

### Initialize InfiniteViewer

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Instantiate InfiniteViewer by providing the container and viewport elements, along with optional configuration options.

```typescript
import InfiniteViewer from "./InfiniteViewer";

const viewer = new InfiniteViewer(containerElement, viewportElement, {
    // options
});
```

--------------------------------

### Initialize Infinite Viewer with JavaScript

Source: https://daybrush.com/infinite-viewer/release/latest/doc/index.html

Initialize the Infinite Viewer component and set up a scroll event listener. Ensure 'overscroll-behavior: none;' is set on the body for wheel event compatibility in Chrome.

```javascript
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());
});
```

--------------------------------

### InfiniteViewer Constructor

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Initializes a new instance of the InfiniteViewer. It requires a container element and optionally accepts a viewport element and options.

```APIDOC
## new InfiniteViewer(_containerElement, viewportElement?, options?)

### Description
Initializes a new instance of the InfiniteViewer.

### Parameters
#### Path Parameters
- **_containerElement** (HTMLElement) - The main container element for the viewer.
- **viewportElement**? (HTMLElement) - Optional viewport element.
- **options**? (Partial<InfiniteViewerOptions>) - Optional configuration options for the viewer.
```

--------------------------------

### Infinite Viewer Options

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_consts.ts.html

Lists the available options for configuring the Infinite Viewer, including properties and additional settings for scroll and gesture handling.

```typescript
export const OPTIONS = [
    // ignore target, container, 
    ...PROPERTIES,
    "preventWheelClick",
    "useWheelPinch",
    "useWheelScroll",
    "useGesture",
    "cspNonce",
    "wrapperElement",
    "scrollAreaElement",
    "verticalScrollElement",
    "horizontalScrollElement",
    "useResizeObserver",
    "wheelContainer",
    "useBounceScrollBar",
] as const;
```

--------------------------------

### getViewportScrollHeight

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the total scrollable height of the viewport.

```APIDOC
## getViewportScrollHeight

### Description
Gets the total scrollable height of the viewport.

### Method
public getViewportScrollHeight(): number

### Returns
- (number) The scrollable height of the viewport.
```

--------------------------------

### getViewportScrollWidth

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the total scrollable width of the viewport.

```APIDOC
## getViewportScrollWidth

### Description
Gets the total scrollable width of the viewport.

### Method
public getViewportScrollWidth(): number

### Returns
- (number) The scrollable width of the viewport.
```

--------------------------------

### Instantiate and Trigger Event

Source: https://daybrush.com/infinite-viewer/release/latest/doc/EventEmitter.html

Demonstrates how to create an EventEmitter instance, register a listener for an event, and then trigger that event with parameters.

```typescript
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});

// emit
emitter.trigger("a", {
  a: 1,
});
```

--------------------------------

### Initialize Gesto for Drag and Pinch

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Initializes the Gesto library to handle drag and pinch gestures on the container element. It configures event listeners for touch and mouse, and defines callbacks for dragStart, drag, dragEnd, pinchStart, and pinch events. It also includes logic to pause scroll animations and trigger custom events.

```typescript
this.gesto = new Gesto(containerElement, {
            container: getWindow(containerElement),
            events: ["touch", "mouse"],
            preventWheelClick: this.options.preventWheelClick ?? true,
        }).on("dragStart", e => {
            const {
                inputEvent,
                stop,
                datas,
            } = e;
            if (!this.useMouseDrag && e.isMouseEvent) {
                stop();
                return;
            }
            this._pauseScrollAnimation();
            this.dragFlag = false;
            const result = this.trigger("dragStart", e);
  
            if (result === false) {
                stop();
                return;
            }
            inputEvent.preventDefault();
            datas.startEvent = inputEvent;
        }).on("drag", e => {
            if (!this.options.usePinch || e.isPinch || (this.useMouseDrag && e.isMouseEvent)) {
                this.trigger("drag", {
                    ...e,
                    inputEvent: e.inputEvent,
                });
                measureSpeed(e);
                this.scrollBy(-e.deltaX / this.zoomX, -e.deltaY / this.zoomY);
            } else if (!this.dragFlag && e.movement > options.pinchThreshold) {
                this.dragFlag = true;
  
                this.trigger("abortPinch", {
                    inputEvent: e.datas.startEvent || e.inputEvent,
                });
            }
        }).on("dragEnd", e => {
            this.trigger("dragEnd", {
                isDrag: e.isDrag,
                isDouble: e.isDouble,
                inputEvent: e.inputEvent,
            });
            this._startScrollAnimationBySpeed(e.datas.speed);
        }).on("pinchStart", ({ inputEvent, datas, stop }) => {
            inputEvent.preventDefault();
            this._pauseScrollAnimation();
            datas.startZoom = [this.zoomX, this.zoomY];
  
            const result = this.trigger("pinchStart", {
                inputEvent,
            });
            if (result === false) {
                stop();
            }
            this._setClientRect();
        }).on("pinch", e => {
            const scale = e.scale;
            const pinchDirection = this.options.pinchDirection;
  
            this._triggerPinch({
                rotation: e.rotation,
                distance: e.distance,
                scale: e.scale,
                inputEvent: e.inputEvent,
                isWheel: false,
                zoom: e.datas.startZoom * scale,
                zoomX: this.zoomX * (pinchDirection === "vertical" ? 1 : scale),
                zoomY: this.zoomY * (pinchDirection === "horizontal" ? 1 : scale),
                clientX: e.clientX,
                clientY: e.clientY,
                ratioX: 0,
                ratioY: 0,
            });
        }).on("pinchEnd", () => {
            this._tempRect = null;
        });
```

--------------------------------

### getRangeY

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the scrollable range along the Y-axis.

```APIDOC
## getRangeY

### Description
Gets the scrollable range along the Y-axis.

### Method
public getRangeY(isZoom?: boolean, isReal?: boolean): number[]

### Parameters
- **isZoom** (boolean, optional) - If true, returns the zoom-adjusted range.
- **isReal** (boolean, optional) - If true, returns the actual scrollable range.

### Returns
- (number[]) An array containing the start and end of the Y-axis range.
```

--------------------------------

### SetOptions

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Options for setting various properties of the viewer.

```APIDOC
## SetOptions

### Description
Options for setting various properties of the viewer. (Since: 0.25.0)

### Properties
- **easing** (function) - Optional. A function to define the easing curve for animations.
- **duration** (number) - Optional. The duration of animations in milliseconds.
- **x** (number) - Optional. The target X coordinate to move to.
- **y** (number) - Optional. The target Y coordinate to move to.
- **zoom** (number | number[]) - Optional. The target zoom level or an array of [zoomX, zoomY].
- **zoomOffsetX** (number | string) - Optional. The X coordinate of the zoom operation relative to the viewport.
- **zoomOffsetY** (number | string) - Optional. The Y coordinate of the zoom operation relative to the viewport.
```

--------------------------------

### getRangeX

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the scrollable range along the X-axis.

```APIDOC
## getRangeX

### Description
Gets the scrollable range along the X-axis.

### Method
public getRangeX(isZoom?: boolean, isReal?: boolean): number[]

### Parameters
- **isZoom** (boolean, optional) - If true, returns the zoom-adjusted range.
- **isReal** (boolean, optional) - If true, returns the actual scrollable range.

### Returns
- (number[]) An array containing the start and end of the X-axis range.
```

--------------------------------

### on

Source: https://daybrush.com/infinite-viewer/release/latest/doc/EventEmitter.html

Adds a listener to an event or multiple listeners to multiple events.

```APIDOC
## on(eventName, listener?) → this

### Description

Adds a listener function to be executed when a specific event is triggered. This method can also be used to add multiple event listeners at once by passing an object of event names and their corresponding listeners.

### Method

`on(eventName, listener?)` or `on(events)`

### Parameters

#### Path Parameters

* **eventName** (string | object) - Required - The name of the event to add a listener to, or an object mapping event names to listener functions.
* **listener**? (EventListener<Events[any], this>) - Optional - The listener function to be executed when the event is triggered. This parameter is only used when `eventName` is a string.

### Example

```javascript
import EventEmitter from "@scena/event-emitter";

const emitter = new EventEmitter();

// Add listener for a single event
emitter.on("a", () => {
  console.log("Event 'a' triggered");
});

// Add listeners for multiple events
emitter.on({
  a: () => console.log("Event 'a' triggered again"),
  b: () => console.log("Event 'b' triggered"),
});
```

### Returns

* **this** - Returns the EventEmitter instance for chaining.
```

--------------------------------

### InfiniteViewerOptions

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Configuration options for the InfiniteViewer component.

```APIDOC
## InfiniteViewerOptions

### Description
Configuration options for the InfiniteViewer component.

### Properties

*   **zoom** (number) - Optional - Default Value: 1. Viewer's zoom. If you use the zoomX and zoomY properties, don't use the zoom property.
*   **rangeX** (number[]) - Optional - Default Value: [-Infinity, Infinity]. Horizontal scroll range [Left, Right].
*   **rangeY** (number[]) - Optional - Default Value: [-Infinity, Infinity]. Vertical scroll range [Top, Bottom].
*   **rangeOffsetX** (number[]) - Optional - Default Value: [0, 0]. Horizontal scroll range offset not affected by zoom [Left, Right].
*   **rangeOffsetY** (number[]) - Optional - Default Value: [0, 0]. Vertical scroll range offset not affected by zoom [Top, Bottom].
*   **zoomOffsetX** (number | string) - Optional - Default Value: "50%". Offset left position for zoom operation.
*   **zoomOffsetY** (number | string) - Optional - Default Value: "50%". Offset top position for zoom operation.
*   **usePinch** (boolean) - Optional - Default Value: false. Whether to pinch the scroll motion when the touch event is activated.
*   **useMouseDrag** (boolean) - Optional. Whether to use mouse drag.
*   **pinchThreshold** (number) - Optional - Default Value: 50. Threshold at which pinch can be operated when the usePinch option is used.
*   **useAutoZoom** (boolean) - Optional - Default Value: false. Whether zoom automatically updates when pinch occurs through wheel, gesture, or touch.
*   **zoomRange** (number[]) - Optional - Default Value: [0.001, Infinity]. Set the zoom range.
*   **zoomRangeX** (number[]) - Optional. Use either zoomRange or zoomRangeX.
*   **zoomRangeY** (number[]) - Optional. Use either zoomRange or zoomRangeY.
*   **useWheelPinch** (boolean) - Optional - Default Value: true. Whether to use wheel pinch. you can pinch using the ctrl key.
*   **wheelPinchKey** ("ctrl" | "meta" | "alt" | "shift") - Optional - Default Value: "ctrl". Key to use wheel pinch.
*   **useWheelScroll** (boolean) - Optional - Default Value: IS_SAFARI. Whether to use wheel scroll. You can scroll smoothly by using the wheel.
*   **useBounceScrollBar** (boolean) - Optional - Default Value: false. Whether or not to use a scroll bar in the form of a bounce An early version of InfiniteViewer's scroll bar.
*   **useOverflowScroll** (boolean) - Optional - Default Value: false. Whether to scroll when the content is larger than the screen even if the range is limited.
*   **useGesture** (boolean) - Optional - Default Value: true. Whether to use gestures using trackpad or magic mouse.
*   **maxPinchWheel** (number) - Optional - Default Value: Infinity. The max value of the wheel for pinch. If the wheel weight is too large, it can be adjusted.
*   **wheelScale** (number) - Optional - Default Value: 0.01. Wheel of the delta scale.
*   **wheelContainer** (HTMLElement | string | {current?: HTMLElement | undefined | null, value?: HTMLElement | undefined | null}) - Optional - Default Value: containerElement. The container element to which the wheel event applies.
*   **cspNonce** (string) - Optional - Default Value: "". Add nonce property to style for CSP.
*   **displayVerticalScroll** (boolean) - Optional - Default Value: true. Whether to show vertical scroll bar.
*   **displayHorizontalScroll** (boolean) - Optional - Default Value: true. Whether to show horizontal scroll bar.
*   **margin** (number) - Optional - Default Value: 500. Margin to determine the scroll area.
*   **threshold** (number) - Optional - Default Value: 100. The size of the area to be infinite scrolled.
*   **useTransform** (boolean) - Optional - Default Value: true. Whether to use the transform property. If you don't use it, you can't use zoom.
*   **translateZ** (number) - Optional - Default Value: 0. Set translateZ transform.
*   **useResizeObserver** (boolean) - Optional - Default Value: false. Whether to use the resize observer.
*   **preventWheelClick** (boolean) - Optional - Default Value: true. Whether to prevent dragging through the wheel button.
*   **zoomX** (number) - Optional - Since: 0.20.0. Viewer's zoomX. If you use the zoom property, don't use the zoomX and zoomY properties.
*   **zoomY** (number) - Optional - Since: 0.20.0. Viewer's zoomY. If you use the zoom property, don't use the zoomX and zoomY properties.
*   **pinchDirection** ("all" | "horizontal" | "vertical") - Optional - Since: 0.20.0 - Default Value: "all". Pinch direction. If only one direction is set, only the zoom value in that direction is changed.
```

--------------------------------

### Initialize Infinite Viewer

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Initializes the Infinite Viewer by creating and appending necessary DOM elements if they are not provided in the options. It also sets up horizontal and vertical scrollbars.

```typescript
private init() {
    // infinite-viewer(container)
    // viewport
    // children
    const containerElement = this._containerElement;
    const options = this.options;
    const doc = getDocument(containerElement);
    const win = getWindow(containerElement);

    // vanilla
    let wrapperElement = options.wrapperElement
        || containerElement.querySelector(`.${WRAPPER_CLASS_NAME}`);
    let scrollAreaElement = options.scrollAreaElement
        || containerElement.querySelector(`.${SCROLL_AREA_CLASS_NAME}`);
    const horizontalScrollElement = options.horizontalScrollElement
        || containerElement.querySelector(`.${HORIZONTAL_SCROLL_BAR_CLASS_NAME}`);
    const verticalScrollElement = options.verticalScrollElement
        || containerElement.querySelector(`.${VERTICAL_SCROLL_BAR_CLASS_NAME}`);

    if (!wrapperElement) {
        wrapperElement = doc.createElement("div");
        wrapperElement.insertBefore(this._viewportElement, null);
        containerElement.insertBefore(wrapperElement, null);
    }
    this.wrapperElement = wrapperElement;

    if (!scrollAreaElement) {
        scrollAreaElement = doc.createElement("div");

        wrapperElement.insertBefore(scrollAreaElement, wrapperElement.firstChild);
    }
    this.scrollAreaElement = scrollAreaElement;

    addClass(containerElement, CLASS_NAME);
    addClass(wrapperElement, WRAPPER_CLASS_NAME);
    // addClass(restrictElement, RESTRICT_WRAPPER_CLASS_NAME);
    addClass(scrollAreaElement, SCROLL_AREA_CLASS_NAME);

    const horizontalBar = new ScrollBar(
        containerElement,
        "horizontal",
        horizontalScrollElement,
    );
    const verticalBar = new ScrollBar(
        containerElement,
        "vertical",
        verticalScrollElement,
    );

    this.horizontalScrollbar = horizontalBar;
    this.verticalScrollbar = verticalBar;
    horizontalBar.on("scroll", e => {

```

--------------------------------

### Infinite Viewer Methods

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_consts.ts.html

Lists the methods available for controlling and querying the state of the Infinite Viewer programmatically.

```typescript
export const METHODS = [
    "getScrollLeft",
    "getScrollTop",
    "getScrollWidth",
    "getScrollHeight",
    "getContainerWidth",
    "getContainerHeight",
    "getViewportWidth",
    "getViewportHeight",
    "getViewportScrollWidth",
    "getViewportScrollHeight",
    "scrollTo",
    "scrollBy",
    "zoomBy",
    "scrollCenter",
    "getContainer",
    "getViewport",
    "getWrapper",
    "setZoom",
    "getRangeX",
    "getRangeY",
    "resize",
    "getZoom",
    "getZoomX",
    "getZoomY",
    "getWheelContainer",
    "setTo",
    "setBy",
] as const;
```

--------------------------------

### Handle Gesture Events

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Adds gesture event listeners for `gesturestart` and `gesturechange` if `useGesture` option is enabled. This is typically used for handling multi-touch gestures on devices that support them.

```typescript
addEvent(containerElement, "gesturestart", this.onGestureStart, {
                passive: false,
            });
            addEvent(containerElement, "gesturechange", this.onGestureChange, {
                passive: false,
            });
```

--------------------------------

### OnPinch Event Data

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Properties available when the pinch event occurs.

```APIDOC
## OnPinch

### Description
Provides data about the pinch gesture.

### Properties
- **rotation** (number) - The rotation value of the pinch.
- **distance** (number) - The distance value of the pinch.
- **scale** (number) - The scale value of the pinch.
- **zoom** (number) - The zoom value of the pinch.
- **zoomX** (number) - The zoom value along the X-axis. (Since: 0.20.0)
- **zoomY** (number) - The zoom value along the Y-axis. (Since: 0.20.0)
- **isWheel** (boolean) - Indicates if the pinch was triggered by a wheel event.
- **inputEvent** (any) - The original input event.
- **clientX** (number) - The client X coordinate of the input event.
- **clientY** (number) - The client Y coordinate of the input event.
- **ratioX** (number) - The ratio value along the X-axis.
- **ratioY** (number) - The ratio value along the Y-axis.
```

--------------------------------

### ZoomOptions

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_types.ts.html

Options for configuring zoom behavior, extending AnimationOptions.

```APIDOC
## Interface: ZoomOptions

### Description
Options for configuring zoom behavior, extending AnimationOptions.

### Extends
InfiniteViewer.AnimationOptions

### Properties
* **zoomBase** ("screen" | "viewport" | "fixed") - Optional - How to calculate zoom offset. Defaults to `"screen"`.
* **zoomOffsetX** (number | string) - Optional - The x-coordinate of the zoom operation.
* **zoomOffsetY** (number | string) - Optional - The y-coordinate of the zoom operation.
```

--------------------------------

### setTo

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Moves the viewer to a specified position or zoom level.

```APIDOC
## setTo(options)

### Description
Move to that position or zoom.

### Parameters
#### Path Parameters
- **options** (SetOptions) - The target position and/or zoom options.
```

--------------------------------

### getScrollLeft(optionsopt)

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Gets the number of pixels that an element's content is scrolled horizontally.

```APIDOC
## getScrollLeft(optionsopt)

### Description
Gets the number of pixels that an element's content is scrolled vertically.

### Parameters
#### Path Parameters
- **options**? (GetScollPosOptions | boolean) - Optional - Options for getting scroll position. Defaults to `{}`.
```

--------------------------------

### getScrollTop(optionsopt)

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Gets the number of pixels that an element's content is scrolled vertically.

```APIDOC
## getScrollTop(optionsopt)

### Description
Gets the number of pixels that an element's content is scrolled vertically.

### Parameters
#### Path Parameters
- **options**? (GetScollPosOptions | boolean) - Optional - Options for getting scroll position. Defaults to `{}`.
```

--------------------------------

### Basic Infinite Viewer HTML Structure

Source: https://daybrush.com/infinite-viewer/release/latest/doc/index.html

This is the basic HTML structure required for the Infinite Viewer component.

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

--------------------------------

### getScrollHeight(isZoomopt)

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Gets the measurement of the height of an element's content, considering overflow and zoom.

```APIDOC
## getScrollHeight(isZoomopt)

### Description
Gets measurement of the height of an element's content with overflow.

### Parameters
#### Path Parameters
- **isZoom**? (boolean) - Optional - Whether to consider zoom level in the measurement.
```

--------------------------------

### on(events)

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Adds multiple event listeners using an object hash. This is a convenient way to register several listeners at once.

```APIDOC
## on(events)

### Description
Add listeners.

### Parameters
#### Path Parameters
- **events** (EventHash<Events, this>) - Required - An object where keys are event names and values are listener functions.

### Example
```javascript
import EventEmitter from "@scena/event-emitter";
const emitter = new EventEmitter();

// Add listeners
emitter.on({
  a: () => { /* listener for event a */ },
  b: () => { /* listener for event b */ },
});
```

### Returns
- **this**
```

--------------------------------

### getScrollWidth(isZoomopt)

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Gets the measurement of the width of an element's content, considering overflow and zoom.

```APIDOC
## getScrollWidth(isZoomopt)

### Description
Gets measurement of the width of an element's content with overflow.

### Parameters
#### Path Parameters
- **isZoom**? (boolean) - Optional - Whether to consider zoom level in the measurement.
```

--------------------------------

### Add Disposable Listener and Use Promise

Source: https://daybrush.com/infinite-viewer/release/latest/doc/EventEmitter.html

Illustrates adding a listener that will only be called once using `once`. It also shows how to use the promise-based return value of `once` to handle events asynchronously.

```typescript
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add a disposable listener in "a" event
emitter.once("a", () => {
});

// Use Promise
emitter.once("a").then(e => {
});
```

--------------------------------

### SetOptions

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_types.ts.html

Options for setting the viewer's position and zoom level, extending AnimationOptions.

```APIDOC
## Interface: SetOptions

### Description
Options for setting the viewer's position and zoom level, extending AnimationOptions.

### Extends
InfiniteViewer.AnimationOptions

### Properties
* **x** (number) - Optional - The target x-coordinate to move to.
* **y** (number) - Optional - The target y-coordinate to move to.
* **zoom** (number | number[]) - Optional - The target zoom level or an array of zoom levels for x and y axes.
* **zoomOffsetX** (number | string) - Optional - The x-coordinate of the zoom operation based on the viewport.
* **zoomOffsetY** (number | string) - Optional - The y-coordinate of the zoom operation based on the viewport.
```

--------------------------------

### Get Viewer Zoom Y

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Retrieves the current zoom level along the Y-axis. Available since version 0.20.0.

```typescript
public getZoomY() {
    return this.zoomY;
}
```

--------------------------------

### getRangeY(isZoomopt, isRealopt)

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Gets the range of scrollable values on the Y axis, optionally considering zoom and real dimensions.

```APIDOC
## getRangeY(isZoomopt, isRealopt)

### Description
Get y ranges.

### Parameters
#### Path Parameters
- **isZoom**? (boolean) - Optional - Whether to consider zoom level.
- **isReal**? (boolean) - Optional - Whether to get the real dimensions.
```

--------------------------------

### Emitting an Event with Parameters

Source: https://daybrush.com/infinite-viewer/release/latest/doc/EventEmitter.html

This snippet demonstrates how to emit an event named 'a' with an associated parameter object. It also shows how to set up a listener for this event.

```typescript
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
```

--------------------------------

### Handle Window Resize Events

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Adds a window resize event listener as a fallback if ResizeObserver is not available or not enabled. It calls the `resize` method when the window is resized. This method is less performant than ResizeObserver.

```typescript
addEvent(win, "resize", this.resize);
  
            this._onDestroys.push(() => {
                removeEvent(win, "resize", this.resize);
            })
```

--------------------------------

### AnimationOptions

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_types.ts.html

Options for configuring animations, including easing function and duration.

```APIDOC
## Interface: AnimationOptions

### Description
Options for configuring animations, including easing function and duration.

### Properties
* **easing** (function) - Optional - A function that defines the easing curve for the animation.
* **duration** (number) - Optional - The duration of the animation in milliseconds.
```

--------------------------------

### getScrollHeight

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the measurement of the height of an element's content, including any overflow. Optionally returns the size with zoom applied.

```APIDOC
## getScrollHeight

### Description

Gets the measurement of the height of an element's content with overflow. The `isZoom` parameter determines if the returned value should include the zoom factor.

### Method

public getScrollHeight(isZoom?: boolean): number

### Parameters

#### Query Parameters

- **isZoom** (boolean) - Optional - If true, returns the size including the zoom factor.
```

--------------------------------

### Default Infinite Viewer Options

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_consts.ts.html

Defines the default configuration object for the Infinite Viewer. These options control various aspects of the viewer's behavior, including margins, zoom, ranges, and event handling.

```typescript
export const DEFAULT_OPTIONS = {
    margin: 500,
    threshold: 100,
    zoom: 1,
    zoomX: 1,
    zoomY: 1,
    rangeX: [-Infinity, Infinity],
    rangeY: [-Infinity, Infinity],
    rangeOffsetX: [0, 0],
    rangeOffsetY: [0, 0],
    wrapperElement: null,
    scrollAreaElement: null,
    horizontalScrollElement: null,
    verticalScrollElement: null,
    usePinch: false,
    useAutoZoom: false,
    useMouseDrag: false,
    pinchThreshold: 30,
    cspNonce: "",
    maxPinchWheel: Infinity,
    wheelScale: 0.01,
    displayHorizontalScroll: true,
    displayVerticalScroll: true,
    useTransform: true,
    useWheelPinch: true,
    zoomRange: [0.001, Infinity],
    wheelPinchKey: "ctrl" as const,
    useWheelScroll: IS_SAFARI,
    zoomOffsetX: "50%",
    zoomOffsetY: "50%",
    translateZ: 0,
    useGesture: true,
    useResizeObserver: false,
    pinchDirection: "all" as const,
    preventWheelClick: true,
    useBounceScrollBar: false,
    useOverflowScroll: false,
};

```

--------------------------------

### getScrollWidth

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the measurement of the width of an element's content, including any overflow. Optionally returns the size with zoom applied.

```APIDOC
## getScrollWidth

### Description

Gets the measurement of the width of an element's content with overflow. The `isZoom` parameter determines if the returned value should include the zoom factor.

### Method

public getScrollWidth(isZoom?: boolean): number

### Parameters

#### Query Parameters

- **isZoom** (boolean) - Optional - If true, returns the size including the zoom factor.
```

--------------------------------

### getRangeX(isZoomopt, isRealopt)

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Gets the range of scrollable values on the X axis, optionally considering zoom and real dimensions.

```APIDOC
## getRangeX(isZoomopt, isRealopt)

### Description
Get x ranges.

### Parameters
#### Path Parameters
- **isZoom**? (boolean) - Optional - Whether to consider zoom level.
- **isReal**? (boolean) - Optional - Whether to get the real dimensions.
```

--------------------------------

### ScrollOptions

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_types.ts.html

Options for configuring scroll behavior, extending AnimationOptions.

```APIDOC
## Interface: ScrollOptions

### Description
Options for configuring scroll behavior, extending AnimationOptions.

### Extends
InfiniteViewer.AnimationOptions

### Properties
* **absolute** (boolean) - Optional - Whether to calculate scroll amount based on screen (client). Defaults to `false`.
```

--------------------------------

### Get Scroll Area Height

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Calculates the height of the scrollable area. Returns twice the margin if scroll ranges are defined, otherwise 0.

```typescript
private getScrollAreaHeight() {
        const [min, max] = this.getRangeY(true);
        return min || max ? this.margin * 2 : 0;
    }
```

--------------------------------

### Get Scroll Area Width

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Calculates the width of the scrollable area. Returns twice the margin if scroll ranges are defined, otherwise 0.

```typescript
private getScrollAreaWidth() {
        const [min, max] = this.getRangeX(true);
        return min || max ? this.margin * 2 : 0;
    }
```

--------------------------------

### ZoomOptions

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Options for controlling the zoom behavior.

```APIDOC
## ZoomOptions

### Description
Options for controlling the zoom behavior.

### Properties
- **easing** (function) - Optional. A function to define the easing curve for the zoom animation.
- **duration** (number) - Optional. The duration of the zoom animation in milliseconds.
- **zoomBase** (string) - Optional. Default: `"screen"`. Specifies how to calculate the zoom offset. Possible values: `"screen"`, `"viewport"`, `"fixed"`.
- **zoomOffsetX** (number | string) - Optional. The X coordinate of the zoom operation.
- **zoomOffsetY** (number | string) - Optional. The Y coordinate of the zoom operation.
```

--------------------------------

### once

Source: https://daybrush.com/infinite-viewer/release/latest/doc/EventEmitter.html

Adds a disposable listener to an event and returns a Promise that resolves with the event arguments when the event is triggered.

```APIDOC
## once<Name extends keyof Events & string, Param = Events[Name]>(eventName, listener?) → Promise<OnEvent<Param, this>>

### Description

Adds a listener that will be called only once for the specified event. It returns a Promise that resolves with the event arguments when the event is triggered. The listener is automatically removed after being called.

### Method

`once(eventName, listener?)`

### Parameters

#### Path Parameters

* **eventName** (Name) - Required - The name of the event to listen for.
* **listener**? (EventListener<Param, this>) - Optional - The listener function to be called once. If not provided, a Promise is returned that resolves when the event is triggered.

### Response

#### Success Response

* **Return Value** (Promise<OnEvent<Param, this>>) - A Promise that resolves with the event arguments when the event is triggered.

### Example

```javascript
import EventEmitter from "@scena/event-emitter";

const emitter = new EventEmitter();

// Add a disposable listener
emitter.once("a", () => {
  console.log("Event 'a' triggered once");
});

// Use Promise to handle the event
emitter.once("a").then(e => {
  console.log("Event 'a' triggered via Promise", e);
});

emitter.trigger("a");
```
```

--------------------------------

### on(eventName, listeneropt)

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Adds a listener to a registered event. This method can be used to subscribe to specific events emitted by the InfiniteViewer.

```APIDOC
## on(eventName, listeneropt)

### Description
Add a listener to the registered event.

### Parameters
#### Path Parameters
- **eventName** (string) - Required - Name of the event to be added.
- **listener**? (EventListener<Events[any], this>) - Optional - listener function of the event to be added.

### Example
```javascript
import EventEmitter from "@scena/event-emitter";
const emitter = new EventEmitter();

// Add listener in "a" event
emitter.on("a", () => {
  // listener function
});
```

### Returns
- **this**
```

--------------------------------

### getScrollLeft

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the number of pixels that an element's content is scrolled horizontally. It can return the scroll position relative to the content or the absolute scroll position, and can also account for ranges.

```APIDOC
## getScrollLeft

### Description

Gets the number of pixels that an element's content is scrolled horizontally. Options can specify whether to return a value relative to a range or an absolute value.

### Method

public getScrollLeft(options: GetScollPosOptions | boolean = {}): number

### Parameters

#### Query Parameters

- **options** (GetScollPosOptions | boolean) - Optional - An object with `range` and `absolute` properties, or a boolean indicating `range`.
  - **range** (boolean) - Optional - Whether to account for the scrollable range.
  - **absolute** (boolean) - Optional - Whether to return the absolute scroll position.
```

--------------------------------

### Include Infinite Viewer via Script Tag

Source: https://daybrush.com/infinite-viewer/release/latest/doc/index.html

Include the Infinite Viewer script in your HTML to use it directly.

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

--------------------------------

### getScrollTop

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Gets the number of pixels that an element's content is scrolled vertically. It can return the scroll position relative to the content or the absolute scroll position, and can also account for ranges.

```APIDOC
## getScrollTop

### Description

Gets the number of pixels that an element's content is scrolled vertically. Options can specify whether to return a value relative to a range or an absolute value.

### Method

public getScrollTop(options: GetScollPosOptions | boolean = {}): number

### Parameters

#### Query Parameters

- **options** (GetScollPosOptions | boolean) - Optional - An object with `range` and `absolute` properties, or a boolean indicating `range`.
  - **range** (boolean) - Optional - Whether to account for the scrollable range.
  - **absolute** (boolean) - Optional - Whether to return the absolute scroll position.
```

--------------------------------

### Properties Array for Infinite Viewer

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_consts.ts.html

Lists the configurable properties for the Infinite Viewer. This array is likely used for internal management or configuration binding.

```typescript
export const PROPERTIES = [
    "margin",
    "threshold",
    "zoomOffsetX",
    "zoomOffsetY",
    "zoom",
    "zoomX",
    "zoomY",
    "rangeX",
    "rangeY",
];

```

--------------------------------

### Get Scroll Range (Zoomed/Real)

Source: https://daybrush.com/infinite-viewer/release/latest/doc/packages_infinite-viewer_src_InfiniteViewerManager.tsx.html

Calculates the scrollable range for a given direction, optionally considering zoom levels and real scrollable dimensions. It uses helper functions to determine the range based on margins and thresholds.

```typescript
private _getRangeCoord(type: "vertical" | "horizontal", isZoom?: boolean, isReal?: boolean) {
        const {
            margin = DEFAULT_OPTIONS.margin,
            threshold,
        } = this;
  
        const names = NAMES[type];
        const rangeCoord = checkDefault(
            this[`range${names.coord}`],
            DEFAULT_OPTIONS[`range${names.coord}`],
        );
        const rangeOffsetCoord = checkDefault(
            this[`rangeOffset${names.coord}`],
            DEFAULT_OPTIONS[`rangeOffset${names.coord}`],
        );
        const zoom = this[`zoom${names.coord}`];
        const range = getRange(
            this[`getScroll${names.pos}`](),
            margin,
            rangeCoord,
            threshold,
            isReal,
        );
  
        if (!isZoom) {
            return [
                range[0] + rangeOffsetCoord[0],
                range[1] + rangeOffsetCoord[1],
            ];
        }
        return [
            range[0] * zoom + rangeOffsetCoord[0],
            this.options.useOverflowScroll
                ? Math.max(this[`viewport${names.size}`] * zoom - this[`container${names.size}`], range[1] * zoom + rangeOffsetCoord[1])
                : range[1] * zoom + rangeOffsetCoord[1],
        ];
    }
```

--------------------------------

### Handle pinch Event in InfiniteViewer

Source: https://daybrush.com/infinite-viewer/release/latest/doc/InfiniteViewer.html

Respond to the 'pinch' event when two points pinch the viewer. This event is crucial for implementing zoom functionality. Requires `usePinch: true` option.

```typescript
import InfiniteViewer from "infinite-viewer";

const viewer = new InfiniteViewer(
  document.querySelector(".container"),
  document.querySelector(".viewport"),
  {
    usePinch: true,
  }
).on("pinch", e => {
  console.log(e.zoom, e.inputEvent);
});
```