@neo4j-nvl/interaction-handlers 2.0.0 → 2.1.0

package/lib/interaction-handlers/pan-interaction.js

@@ -1,101 +1,112 @@
-import { difference } from 'lodash';
-import { NODE_EDGE_WIDTH } from '../constants';
-import { BaseInteraction } from './base';
+import "../constants.js";
+import { BaseInteraction } from "./base.js";
+import { difference } from "lodash-es";
+// src/interaction-handlers/pan-interaction.ts
 /**
- * Interaction handler for panning the scene, which is achieved by clicking and moving the scene.
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_paninteraction Pan Interaction documentation page}.
- */
-export class PanInteraction extends BaseInteraction {
-    initialMousePosition = { x: 0, y: 0 };
-    initialPan = { x: 0, y: 0 };
-    targets = [];
-    shouldPan = false;
-    isPanning = false;
-    /**
-     * Creates a new instance of the pan interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to.
-     */
-    constructor(nvl, options = { excludeNodeMargin: false }) {
-        super(nvl, options);
-        this.addEventListener('mousedown', this.handleMouseDown, true);
-        this.addEventListener('mousemove', this.handleMouseMove, true);
-        this.addEventListener('mouseup', this.handleMouseUp, true);
-    }
-    /**
-     * Updates which type of graph elements should hinder panning.
-     * @param targets - The graph elements that should hinder panning.
-     * @param excludeNodeMargin - If true, the node margin will not hinder panning.
-     * By default, panning is hindered by nodes and relationships.
-     *
-     * @example
-     * ```js
-     * import { NVL } from '@neo4j-nvl/base'
-     * import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
-     *
-     * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
-     * const panInteraction = new PanInteraction(nvl)
-     *
-     * // Pan canvas even when dragging on nodes and relationships
-     * panInteraction.updateTargets([], true)
-     * ```
-     */
-    updateTargets = (targets, excludeNodeMargin) => {
-        this.targets = targets;
-        this.currentOptions.excludeNodeMargin = excludeNodeMargin;
-    };
-    handleMouseDown = (event) => {
-        const hits = this.nvlInstance.getHits(event, difference(['node', 'relationship'], this.targets), {
-            hitNodeMarginWidth: this.currentOptions.excludeNodeMargin === true ? NODE_EDGE_WIDTH : 0
-        });
-        if (hits.nvlTargets.nodes.length > 0 || hits.nvlTargets.relationships.length > 0) {
-            this.shouldPan = false;
-        }
-        else {
-            this.initialMousePosition = { x: event.clientX, y: event.clientY };
-            this.initialPan = this.nvlInstance.getPan();
-            this.shouldPan = true;
-        }
-    };
-    handleMouseMove = (evt) => {
-        if (!this.shouldPan || evt.buttons !== 1) {
-            return;
-        }
-        if (!this.isPanning) {
-            this.toggleGlobalTextSelection(false, this.handleMouseUp);
-            this.isPanning = true;
-        }
-        const zoom = this.nvlInstance.getScale();
-        const { x, y } = this.initialPan;
-        const dx = ((evt.clientX - this.initialMousePosition.x) / zoom) * window.devicePixelRatio;
-        const dy = ((evt.clientY - this.initialMousePosition.y) / zoom) * window.devicePixelRatio;
-        const newPanX = x - dx;
-        const newPanY = y - dy;
-        if (this.currentOptions.controlledPan !== true) {
-            this.nvlInstance.setPan(newPanX, newPanY);
-        }
-        this.callCallbackIfRegistered('onPan', { x: newPanX, y: newPanY }, evt);
-    };
-    handleMouseUp = () => {
-        if (this.isPanning) {
-            this.toggleGlobalTextSelection(true, this.handleMouseUp);
-        }
-        this.resetPanState();
-    };
-    resetPanState = () => {
-        this.isPanning = false;
-        this.shouldPan = false;
-        this.initialMousePosition = { x: 0, y: 0 };
-        this.initialPan = { x: 0, y: 0 };
-        this.targets = [];
-    };
-    /**
-     * Removes the related event listeners from the canvas.
-     */
-    destroy() {
-        this.toggleGlobalTextSelection(true, this.handleMouseUp);
-        this.removeEventListener('mousedown', this.handleMouseDown, true);
-        this.removeEventListener('mousemove', this.handleMouseMove, true);
-        this.removeEventListener('mouseup', this.handleMouseUp, true);
-    }
-}
+* Interaction handler for panning the scene, which is achieved by clicking and moving the scene.
+*
+* For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_paninteraction Pan Interaction documentation page}.
+*/
+var PanInteraction = class extends BaseInteraction {
+	initialMousePosition = {
+		x: 0,
+		y: 0
+	};
+	initialPan = {
+		x: 0,
+		y: 0
+	};
+	targets = [];
+	shouldPan = false;
+	isPanning = false;
+	/**
+	* Creates a new instance of the pan interaction handler.
+	* @param nvl - The NVL instance to attach the interaction handler to.
+	*/
+	constructor(nvl, options = { excludeNodeMargin: false }) {
+		super(nvl, options);
+		this.addEventListener("mousedown", this.handleMouseDown, true);
+		this.addEventListener("mousemove", this.handleMouseMove, true);
+		this.addEventListener("mouseup", this.handleMouseUp, true);
+	}
+	/**
+	* Updates which type of graph elements should hinder panning.
+	* @param targets - The graph elements that should hinder panning.
+	* @param excludeNodeMargin - If true, the node margin will not hinder panning.
+	* By default, panning is hindered by nodes and relationships.
+	*
+	* @example
+	* ```ts
+	* import { NVL } from '@neo4j-nvl/base'
+	* import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
+	*
+	* const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
+	*
+	* const panInteraction = new PanInteraction(nvl)
+	*
+	* // Pan canvas even when dragging on nodes and relationships
+	* panInteraction.updateTargets([], true)
+	* ```
+	*/
+	updateTargets = (targets, excludeNodeMargin) => {
+		this.targets = targets;
+		this.currentOptions.excludeNodeMargin = excludeNodeMargin;
+	};
+	handleMouseDown = (event) => {
+		const hits = this.nvlInstance.getHits(event, difference(["node", "relationship"], this.targets), { hitNodeMarginWidth: this.currentOptions.excludeNodeMargin === true ? 10 : 0 });
+		if (hits.nvlTargets.nodes.length > 0 || hits.nvlTargets.relationships.length > 0) this.shouldPan = false;
+		else {
+			this.initialMousePosition = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			this.initialPan = this.nvlInstance.getPan();
+			this.shouldPan = true;
+		}
+	};
+	handleMouseMove = (evt) => {
+		if (!this.shouldPan || evt.buttons !== 1) return;
+		if (!this.isPanning) {
+			this.toggleGlobalTextSelection(false, this.handleMouseUp);
+			this.isPanning = true;
+		}
+		const zoom = this.nvlInstance.getScale();
+		const { x, y } = this.initialPan;
+		const dx = (evt.clientX - this.initialMousePosition.x) / zoom * window.devicePixelRatio;
+		const dy = (evt.clientY - this.initialMousePosition.y) / zoom * window.devicePixelRatio;
+		const newPanX = x - dx;
+		const newPanY = y - dy;
+		if (this.currentOptions.controlledPan !== true) this.nvlInstance.setPan(newPanX, newPanY);
+		this.callCallbackIfRegistered("onPan", {
+			x: newPanX,
+			y: newPanY
+		}, evt);
+	};
+	handleMouseUp = () => {
+		if (this.isPanning) this.toggleGlobalTextSelection(true, this.handleMouseUp);
+		this.resetPanState();
+	};
+	resetPanState = () => {
+		this.isPanning = false;
+		this.shouldPan = false;
+		this.initialMousePosition = {
+			x: 0,
+			y: 0
+		};
+		this.initialPan = {
+			x: 0,
+			y: 0
+		};
+		this.targets = [];
+	};
+	/**
+	* Removes the related event listeners from the canvas.
+	*/
+	destroy() {
+		this.toggleGlobalTextSelection(true, this.handleMouseUp);
+		this.removeEventListener("mousedown", this.handleMouseDown, true);
+		this.removeEventListener("mousemove", this.handleMouseMove, true);
+		this.removeEventListener("mouseup", this.handleMouseUp, true);
+	}
+};
+export { PanInteraction };

package/lib/interaction-handlers/utils.d.ts

@@ -1,7 +1,7 @@
-import type { NVL, Point } from '@neo4j-nvl/base';
+import { NVL, Point } from "@neo4j-nvl/base";
 export declare const generateUniqueId: (digit: number) => string;
 export declare const isDraggingDistance: (startPoint: Point, endPoint: Point) => boolean;
 export declare const isDraggingMovement: (event: MouseEvent, point: Point) => boolean;
 export declare const getCanvasPosition: (canvas: HTMLElement, mouseEvent: MouseEvent) => Point;
 export declare const getCanvasCenterOffset: (canvas: HTMLElement, mouseEvent: MouseEvent) => Point;
-export declare const getWorldPosition: (nvl: NVL, pos: Point) => Point;
+export declare const getWorldPosition: (nvl: NVL, pos: Point) => Point;

package/lib/interaction-handlers/utils.js

@@ -1,43 +1,44 @@
-import { DRAG_THRESHOLD } from '../constants';
-export const generateUniqueId = (digit) => Math.floor(Math.random() * Math.pow(10, digit)).toString();
-export const isDraggingDistance = (startPoint, endPoint) => {
-    const diffX = Math.abs(endPoint.x - startPoint.x);
-    const diffY = Math.abs(endPoint.y - startPoint.y);
-    if (diffX > DRAG_THRESHOLD || diffY > DRAG_THRESHOLD) {
-        return true;
-    }
-    const distanceSquared = Math.pow(diffX, 2) + Math.pow(diffY, 2);
-    return distanceSquared > DRAG_THRESHOLD;
+import "../constants.js";
+// src/interaction-handlers/utils.ts
+const generateUniqueId = (digit) => Math.floor(Math.random() * Math.pow(10, digit)).toString();
+const isDraggingDistance = (startPoint, endPoint) => {
+	const diffX = Math.abs(endPoint.x - startPoint.x);
+	const diffY = Math.abs(endPoint.y - startPoint.y);
+	if (diffX > 10 || diffY > 10) return true;
+	return Math.pow(diffX, 2) + Math.pow(diffY, 2) > 10;
 };
-export const isDraggingMovement = (event, point) => {
-    return isDraggingDistance(point, { x: event.clientX, y: event.clientY });
+const isDraggingMovement = (event, point) => {
+	return isDraggingDistance(point, {
+		x: event.clientX,
+		y: event.clientY
+	});
 };
-export const getCanvasPosition = (canvas, mouseEvent) => {
-    const rect = canvas.getBoundingClientRect();
-    const devicePixelRatio = window.devicePixelRatio || 1;
-    return {
-        x: (mouseEvent.clientX - rect.left) * devicePixelRatio,
-        y: (mouseEvent.clientY - rect.top) * devicePixelRatio
-    };
+const getCanvasPosition = (canvas, mouseEvent) => {
+	const rect = canvas.getBoundingClientRect();
+	const devicePixelRatio = window.devicePixelRatio || 1;
+	return {
+		x: (mouseEvent.clientX - rect.left) * devicePixelRatio,
+		y: (mouseEvent.clientY - rect.top) * devicePixelRatio
+	};
 };
-export const getCanvasCenterOffset = (canvas, mouseEvent) => {
-    const rect = canvas.getBoundingClientRect();
-    const devicePixelRatio = window.devicePixelRatio || 1;
-    return {
-        x: (mouseEvent.clientX - rect.left - rect.width * 0.5) * devicePixelRatio,
-        y: (mouseEvent.clientY - rect.top - rect.height * 0.5) * devicePixelRatio
-    };
+const getCanvasCenterOffset = (canvas, mouseEvent) => {
+	const rect = canvas.getBoundingClientRect();
+	const devicePixelRatio = window.devicePixelRatio || 1;
+	return {
+		x: (mouseEvent.clientX - rect.left - rect.width * .5) * devicePixelRatio,
+		y: (mouseEvent.clientY - rect.top - rect.height * .5) * devicePixelRatio
+	};
 };
-export const getWorldPosition = (nvl, pos) => {
-    const scale = nvl.getScale();
-    const pan = nvl.getPan();
-    const container = nvl.getContainer();
-    const { width, height } = container.getBoundingClientRect();
-    const devicePixelRatio = window.devicePixelRatio || 1;
-    const x = pos.x - width * 0.5 * devicePixelRatio;
-    const y = pos.y - height * 0.5 * devicePixelRatio;
-    return {
-        x: pan.x + x / scale,
-        y: pan.y + y / scale
-    };
+const getWorldPosition = (nvl, pos) => {
+	const scale = nvl.getScale();
+	const pan = nvl.getPan();
+	const { width, height } = nvl.getContainer().getBoundingClientRect();
+	const devicePixelRatio = window.devicePixelRatio || 1;
+	const x = pos.x - width * .5 * devicePixelRatio;
+	const y = pos.y - height * .5 * devicePixelRatio;
+	return {
+		x: pan.x + x / scale,
+		y: pan.y + y / scale
+	};
 };
+export { generateUniqueId, getCanvasCenterOffset, getCanvasPosition, getWorldPosition, isDraggingDistance, isDraggingMovement };

package/lib/interaction-handlers/zoom-interaction.d.ts

@@ -1,66 +1,70 @@
-import type { NVL } from '@neo4j-nvl/base';
-import { BaseInteraction } from './base';
+import { BaseInteraction } from "./base.js";
+import { NVL } from "@neo4j-nvl/base";
 /**
  * Options for the zoom interaction handler to customize its behavior.
  */
 export type ZoomInteractionOptions = {
-    /**
-     * If true, the interaction handler will not update the NVL instance directly.
-     * Instead, it will only call the onZoomAndPan callback with the calculated values,
-     * allowing the parent application to control when and how to apply the zoom update.
-     * @defaultValue false
-     */
-    controlledZoom?: boolean;
+  /**
+   * If true, the interaction handler will not update the NVL instance directly.
+   * Instead, it will only call the onZoomAndPan callback with the calculated values,
+   * allowing the parent application to control when and how to apply the zoom update.
+   * @defaultValue false
+   */
+  controlledZoom?: boolean;
 };
 /**
  * Callbacks for the zoom interaction handler.
  */
 export type ZoomInteractionCallbacks = {
-    /**
-     * Called when the canvas is zoomed and panned.
-     * @param zoomLevel - The zoom level.
-     * @param panX - The new pan X coordinate.
-     * @param panY - The new pan Y coordinate.
-     * @param event - The original mouse wheel event.
-     */
-    onZoomAndPan?: ((zoomLevel: number, panX: number, panY: number, event: WheelEvent) => void) | boolean;
+  /**
+   * Called when the canvas is zoomed and panned.
+   * @param zoomLevel - The zoom level.
+   * @param panX - The new pan X coordinate.
+   * @param panY - The new pan Y coordinate.
+   * @param event - The original mouse wheel event.
+   */
+  onZoomAndPan?: ((zoomLevel: number, panX: number, panY: number, event: WheelEvent) => void) | boolean;
 };
 /**
  * Interaction handler for zooming the canvas, which is achieved by:
  * - Scrolling the mouse wheel on the canvas
  * - Using trackpad pinch gestures (equivalent to Ctrl/Cmd + scroll)
  *
+ * @remarks
+ * {@link ZoomInteractionCallbacks.onZoomAndPan} is the only callback. Zooming also changes the pan so the
+ * point under the pointer stays fixed. Zoom limits come from {@link NVL.getZoomLimits}.
+ *
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_zoominteraction Zoom Interaction documentation page}.
  */
 export declare class ZoomInteraction extends BaseInteraction<ZoomInteractionOptions> {
-    private zoomLimits;
-    /**
-     * Creates a new instance of the zoom interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to.
-     * @param options - Options to customize the zoom interaction behavior.
-     */
-    constructor(nvl: NVL, options?: ZoomInteractionOptions);
-    /**
-     * The function to be called on mouse wheel event on the canvas.
-     * @param evt - The mouse wheel event.
-     */
-    private handleWheel;
-    /**
-     * Throttled zoom function to avoid events happening too fast.
-     * @param event - The original mouse wheel event.
-     *
-     * @remarks
-     * "Wheel" with a touchpad, the wheel is triggered event a lot,
-     * especially a lot of very small values.
-     * However, updating values in NVL instance takes time.
-     * Sometimes it lost the track of multiple events happening too soon.
-     * As a result, the zoom might lose its anchor point under touch pad.
-     * Therefore, the throttle is needed to avoid events happening too fast.
-     * The throttle is set to 25ms.
-     */
-    private throttledZoom;
-    /**
-     * Removes the relevant event listeners from the canvas.
-     */
-    destroy: () => void;
-}
+  private zoomLimits;
+  /**
+   * Creates a new instance of the zoom interaction handler.
+   * @param nvl - The NVL instance to attach the interaction handler to.
+   * @param options - Options to customize the zoom interaction behavior.
+   */
+  constructor(nvl: NVL, options?: ZoomInteractionOptions);
+  /**
+   * The function to be called on mouse wheel event on the canvas.
+   * @param evt - The mouse wheel event.
+   */
+  private handleWheel;
+  /**
+   * Throttled zoom function to avoid events happening too fast.
+   * @param event - The original mouse wheel event.
+   *
+   * @remarks
+   * "Wheel" with a touchpad, the wheel is triggered event a lot,
+   * especially a lot of very small values.
+   * However, updating values in NVL instance takes time.
+   * Sometimes it lost the track of multiple events happening too soon.
+   * As a result, the zoom might lose its anchor point under touch pad.
+   * Therefore, the throttle is needed to avoid events happening too fast.
+   * The throttle is set to 25ms.
+   */
+  private throttledZoom;
+  /**
+   * Removes the relevant event listeners from the canvas.
+   */
+  destroy: () => void;
+}

package/lib/interaction-handlers/zoom-interaction.js

@@ -1,72 +1,74 @@
-import { throttle } from 'lodash';
-import { BaseInteraction } from './base';
-import { getCanvasCenterOffset } from './utils';
+import { BaseInteraction } from "./base.js";
+import { getCanvasCenterOffset } from "./utils.js";
+import { throttle } from "lodash-es";
+// src/interaction-handlers/zoom-interaction.ts
 /**
- * Interaction handler for zooming the canvas, which is achieved by:
- * - Scrolling the mouse wheel on the canvas
- * - Using trackpad pinch gestures (equivalent to Ctrl/Cmd + scroll)
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_zoominteraction Zoom Interaction documentation page}.
- */
-export class ZoomInteraction extends BaseInteraction {
-    zoomLimits;
-    /**
-     * Creates a new instance of the zoom interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to.
-     * @param options - Options to customize the zoom interaction behavior.
-     */
-    constructor(nvl, options = {}) {
-        super(nvl, options);
-        this.zoomLimits = nvl.getZoomLimits();
-        this.addEventListener('wheel', this.handleWheel);
-    }
-    /**
-     * The function to be called on mouse wheel event on the canvas.
-     * @param evt - The mouse wheel event.
-     */
-    handleWheel = (evt) => {
-        evt.preventDefault();
-        this.throttledZoom(evt);
-    };
-    /**
-     * Throttled zoom function to avoid events happening too fast.
-     * @param event - The original mouse wheel event.
-     *
-     * @remarks
-     * "Wheel" with a touchpad, the wheel is triggered event a lot,
-     * especially a lot of very small values.
-     * However, updating values in NVL instance takes time.
-     * Sometimes it lost the track of multiple events happening too soon.
-     * As a result, the zoom might lose its anchor point under touch pad.
-     * Therefore, the throttle is needed to avoid events happening too fast.
-     * The throttle is set to 25ms.
-     */
-    throttledZoom = throttle((event) => {
-        const zoom = this.nvlInstance.getScale();
-        const { x, y } = this.nvlInstance.getPan();
-        this.zoomLimits = this.nvlInstance.getZoomLimits();
-        const isPincehZoom = event.ctrlKey || event.metaKey;
-        const speedFactor = isPincehZoom ? 75 : 500;
-        const baseSpeed = event.deltaY / speedFactor;
-        const scaleFactor = zoom >= 1 ? baseSpeed * zoom : baseSpeed;
-        const newZoomTarget = zoom - scaleFactor * Math.min(1, zoom);
-        const zoomIsAtLimit = newZoomTarget > this.zoomLimits.maxZoom || newZoomTarget < this.zoomLimits.minZoom;
-        const offs = getCanvasCenterOffset(this.containerInstance, event);
-        let newPanX = x;
-        let newPanY = y;
-        if (!zoomIsAtLimit) {
-            newPanX = x + (offs.x / zoom - offs.x / newZoomTarget);
-            newPanY = y + (offs.y / zoom - offs.y / newZoomTarget);
-        }
-        if (this.currentOptions.controlledZoom !== true) {
-            this.nvlInstance.setZoomAndPan(newZoomTarget, newPanX, newPanY);
-        }
-        this.callCallbackIfRegistered('onZoomAndPan', newZoomTarget, newPanX, newPanY, event);
-    }, 25, { leading: true });
-    /**
-     * Removes the relevant event listeners from the canvas.
-     */
-    destroy = () => {
-        this.removeEventListener('wheel', this.handleWheel);
-    };
-}
+* Interaction handler for zooming the canvas, which is achieved by:
+* - Scrolling the mouse wheel on the canvas
+* - Using trackpad pinch gestures (equivalent to Ctrl/Cmd + scroll)
+*
+* @remarks
+* {@link ZoomInteractionCallbacks.onZoomAndPan} is the only callback. Zooming also changes the pan so the
+* point under the pointer stays fixed. Zoom limits come from {@link NVL.getZoomLimits}.
+*
+* For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_zoominteraction Zoom Interaction documentation page}.
+*/
+var ZoomInteraction = class extends BaseInteraction {
+	zoomLimits;
+	/**
+	* Creates a new instance of the zoom interaction handler.
+	* @param nvl - The NVL instance to attach the interaction handler to.
+	* @param options - Options to customize the zoom interaction behavior.
+	*/
+	constructor(nvl, options = {}) {
+		super(nvl, options);
+		this.zoomLimits = nvl.getZoomLimits();
+		this.addEventListener("wheel", this.handleWheel);
+	}
+	/**
+	* The function to be called on mouse wheel event on the canvas.
+	* @param evt - The mouse wheel event.
+	*/
+	handleWheel = (evt) => {
+		evt.preventDefault();
+		this.throttledZoom(evt);
+	};
+	/**
+	* Throttled zoom function to avoid events happening too fast.
+	* @param event - The original mouse wheel event.
+	*
+	* @remarks
+	* "Wheel" with a touchpad, the wheel is triggered event a lot,
+	* especially a lot of very small values.
+	* However, updating values in NVL instance takes time.
+	* Sometimes it lost the track of multiple events happening too soon.
+	* As a result, the zoom might lose its anchor point under touch pad.
+	* Therefore, the throttle is needed to avoid events happening too fast.
+	* The throttle is set to 25ms.
+	*/
+	throttledZoom = throttle((event) => {
+		const zoom = this.nvlInstance.getScale();
+		const { x, y } = this.nvlInstance.getPan();
+		this.zoomLimits = this.nvlInstance.getZoomLimits();
+		const speedFactor = event.ctrlKey || event.metaKey ? 75 : 500;
+		const baseSpeed = event.deltaY / speedFactor;
+		const newZoomTarget = zoom - (zoom >= 1 ? baseSpeed * zoom : baseSpeed) * Math.min(1, zoom);
+		const zoomIsAtLimit = newZoomTarget > this.zoomLimits.maxZoom || newZoomTarget < this.zoomLimits.minZoom;
+		const offs = getCanvasCenterOffset(this.containerInstance, event);
+		let newPanX = x;
+		let newPanY = y;
+		if (!zoomIsAtLimit) {
+			newPanX = x + (offs.x / zoom - offs.x / newZoomTarget);
+			newPanY = y + (offs.y / zoom - offs.y / newZoomTarget);
+		}
+		if (this.currentOptions.controlledZoom !== true) this.nvlInstance.setZoomAndPan(newZoomTarget, newPanX, newPanY);
+		this.callCallbackIfRegistered("onZoomAndPan", newZoomTarget, newPanX, newPanY, event);
+	}, 25, { leading: true });
+	/**
+	* Removes the relevant event listeners from the canvas.
+	*/
+	destroy = () => {
+		this.removeEventListener("wheel", this.handleWheel);
+	};
+};
+export { ZoomInteraction };

package/lib/overlay-renderer/overlay-renderer.d.ts

@@ -1,14 +1,14 @@
 export declare class OverlayRenderer {
-    private ctx;
-    private canvas;
-    private removeResizeListener;
-    constructor(canvasParent: HTMLElement);
-    private fixCanvasSize;
-    drawBox(startX: number, startY: number, endX: number, endY: number): void;
-    drawLasso(points: {
-        x: number;
-        y: number;
-    }[], stroke: boolean, fill: boolean): void;
-    clear(): void;
-    destroy(): void;
-}
+  private ctx;
+  private canvas;
+  private removeResizeListener;
+  constructor(canvasParent: HTMLElement);
+  private fixCanvasSize;
+  drawBox(startX: number, startY: number, endX: number, endY: number): void;
+  drawLasso(points: {
+    x: number;
+    y: number;
+  }[], stroke: boolean, fill: boolean): void;
+  clear(): void;
+  destroy(): void;
+}