@neo4j-nvl/interaction-handlers 0.3.9 → 1.0.0-2fc8e9f4

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to NVL will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [1.0.0] - 2025-09-30
+This 1.0.0 release is our first major release, with NVL's release strategy fully adopting semantic versioning going forward. Updates in this release include React 19 support for the React wrappers, a UI overhaul of the [examples app](https://neo4j.com/docs/api/nvl/current/examples.html).
+
+### Added
+* support for React 19 in Nvl React wrappers.
+* new prop to the React components to provde zoom and pan values.
+* extend return object of `.getZoomTargetForNodePositions` function to include pan values.
+
+### Changed
+* updated example application UI.
+
+### Fixed
+* display remaining captions when one of the values in the caption array is null or undefined.
+* ensure the computing state for the d3 layout is set correctly.
+* correctly process Right-to-Left (RTL) text for node captions.
+
+### Removed
+* `useWebGL` / `setUseWebGLRenderer`, please use [renderer](https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.NvlOptions.html#renderer) & [setRenderer](https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html#setRenderer) instead going forward.
+* `NvlOption.nodeDefaultBorderColor`, `NvlOption.selectedBorderColor`, `NvlOption.disabledItemColor`, `NvlOption.disabledItemFontColor`, please use properties with the same name in [NvlOptions.styling](https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.NvlOptions.html#styling) object going forward.
+
 ## [0.3.9] - 2025-07-23
 
 The 0.3.9 release contains several fixes for NVL's interaction handler and adds a new method to NVL to directly extract image data from an NVL instance:

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

@@ -3,6 +3,7 @@ import type { NVL } from '@neo4j-nvl/base';
  * Base class for all interactions.
  * @abstract
  * @internal
+ * @hidden
  */
 declare abstract class BaseInteraction<T extends Record<string, ((...args: unknown[]) => void) | boolean>, P extends Record<string, unknown>> {
     private readonly nvl;
@@ -10,52 +11,64 @@ declare abstract class BaseInteraction<T extends Record<string, ((...args: unkno
     private readonly container;
     /**
      * @internal
+     * @hidden
      */
     callbackMap: Map<keyof T, T[keyof T]>;
     /**
      * @internal
+     * @hidden
      */
     constructor(nvl: NVL, options: P);
     /**
      * @internal
+     * @hidden
      */
     get nvlInstance(): NVL;
+    /**
+     * Returns the current options of the interaction.
+     * @returns The current options of the interaction.
+     */
     get currentOptions(): P;
     /**
      * @internal
+     * @hidden
      */
     get containerInstance(): HTMLElement;
     /**
      * @internal
+     * @hidden
      */
     addEventListener: (type: keyof HTMLElementEventMap, listener: (event: Event) => void, options?: boolean | AddEventListenerOptions) => void;
     /**
      * @internal
+     * @hidden
      */
     removeEventListener: (type: keyof HTMLElementEventMap, listener: (event: Event) => void, options?: boolean | EventListenerOptions) => void;
     /**
      * @internal
+     * @hidden
      */
     callCallbackIfRegistered: (name: keyof T, ...args: unknown[]) => void;
     /**
      * Add or update a callback for a given event of type.
-     * @param name - The name of the event
-     * @param callback - The callback to be called when the event is triggered
+     * @param name - The name of the event.
+     * @param callback - The callback to be called when the event is triggered.
      */
     updateCallback: (name: keyof T | string, callback: T[keyof T]) => void;
     /**
      * Remove a callback for a given event of type.
-     * @param name - The name of the event
+     * @param name - The name of the event.
      */
     removeCallback: (name: keyof T | string) => void;
     /**
      * Enables or disables global text selection during a drag or pan operation.
-     * @param enable - Whether to enable or disable global text selection
-     * @param eventFunction - The event function to be added/removed when text selection is disabled/enabled
+     * @param enable - Whether to enable or disable global text selection.
+     * @param eventFunction - The event function to be added/removed when text selection is disabled/enabled.
      */
     toggleGlobalTextSelection: (enable: boolean, eventFunction?: ((this: HTMLElement, ev: MouseEvent) => void) | undefined) => void;
     /**
      * @internal
+     * @hidden
      */
     abstract destroy(): void;
 }

package/lib/interaction-handlers/base.js

@@ -2,6 +2,7 @@
  * Base class for all interactions.
  * @abstract
  * @internal
+ * @hidden
  */
 class BaseInteraction {
     nvl;
@@ -9,10 +10,12 @@ class BaseInteraction {
     container;
     /**
      * @internal
+     * @hidden
      */
     callbackMap;
     /**
      * @internal
+     * @hidden
      */
     constructor(nvl, options) {
         this.nvl = nvl;
@@ -22,33 +25,42 @@ class BaseInteraction {
     }
     /**
      * @internal
+     * @hidden
      */
     get nvlInstance() {
         return this.nvl;
     }
+    /**
+     * Returns the current options of the interaction.
+     * @returns The current options of the interaction.
+     */
     get currentOptions() {
         return this.options;
     }
     /**
      * @internal
+     * @hidden
      */
     get containerInstance() {
         return this.container;
     }
     /**
      * @internal
+     * @hidden
      */
     addEventListener = (type, listener, options) => {
         this.container?.addEventListener(type, listener, options);
     };
     /**
      * @internal
+     * @hidden
      */
     removeEventListener = (type, listener, options) => {
         this.container?.removeEventListener(type, listener, options);
     };
     /**
      * @internal
+     * @hidden
      */
     callCallbackIfRegistered = (name, ...args) => {
         const callback = this.callbackMap.get(name);
@@ -58,23 +70,23 @@ class BaseInteraction {
     };
     /**
      * Add or update a callback for a given event of type.
-     * @param name - The name of the event
-     * @param callback - The callback to be called when the event is triggered
+     * @param name - The name of the event.
+     * @param callback - The callback to be called when the event is triggered.
      */
     updateCallback = (name, callback) => {
         this.callbackMap.set(name, callback);
     };
     /**
      * Remove a callback for a given event of type.
-     * @param name - The name of the event
+     * @param name - The name of the event.
      */
     removeCallback = (name) => {
         this.callbackMap.delete(name);
     };
     /**
      * Enables or disables global text selection during a drag or pan operation.
-     * @param enable - Whether to enable or disable global text selection
-     * @param eventFunction - The event function to be added/removed when text selection is disabled/enabled
+     * @param enable - Whether to enable or disable global text selection.
+     * @param eventFunction - The event function to be added/removed when text selection is disabled/enabled.
      */
     toggleGlobalTextSelection = (enable, eventFunction) => {
         if (enable) {

package/lib/interaction-handlers/box-select-interaction.d.ts

@@ -10,16 +10,19 @@ export type BoxSelectInteractionOptions = {
      */
     selectOnRelease?: boolean;
 };
+/**
+ * Callbacks for the box select interaction handler.
+ */
 export type BoxSelectInteractionCallbacks = {
     /**
      * Called once when the user presses the mouse on the canvas, starting the box selection.
-     * @param event - The original mouse event
+     * @param event - The original mouse event.
      */
     onBoxStarted?: ((event: MouseEvent) => void) | boolean;
     /**
      * Called after once the user releases the mouse after multi-selecting.
-     * @param selectionObject - The selected nodes and relationships
-     * @param event - The original mouse event
+     * @param selectionObject - The selected nodes and relationships.
+     * @param event - The original mouse event.
      */
     onBoxSelect?: (({ nodes, rels }: {
         nodes: Node[];
@@ -39,8 +42,8 @@ export declare class BoxSelectInteraction extends BaseInteraction<BoxSelectInter
     private isBoxSelecting;
     /**
      * Creates a new instance of the multi-select interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
-     * @param options - Options for the multi-select interaction handler to customize its behavior
+     * @param nvl - The NVL instance to attach the interaction handler to.
+     * @param options - Options for the multi-select interaction handler to customize its behavior.
      */
     constructor(nvl: NVL, options?: BoxSelectInteractionOptions);
     private handleMouseDown;

package/lib/interaction-handlers/box-select-interaction.js

@@ -15,8 +15,8 @@ export class BoxSelectInteraction extends BaseInteraction {
     isBoxSelecting = false;
     /**
      * Creates a new instance of the multi-select interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
-     * @param options - Options for the multi-select interaction handler to customize its behavior
+     * @param nvl - The NVL instance to attach the interaction handler to.
+     * @param options - Options for the multi-select interaction handler to customize its behavior.
      */
     constructor(nvl, options = { selectOnRelease: false }) {
         super(nvl, options);

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

@@ -16,59 +16,59 @@ export type ClickInteractionOptions = {
 export type ClickInteractionCallbacks = {
     /**
      * Called when a node is clicked
-     * @param nodes - The node that was clicked
-     * @param hitElements - All elements that were hit by the click
-     * @param event - The original mouse event
+     * @param nodes - The node that was clicked.
+     * @param hitElements - All elements that were hit by the click.
+     * @param event - The original mouse event.
      */
     onNodeClick?: ((nodes: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
     /**
      * Called when a relationship is clicked
-     * @param relationship - The relationship that was clicked
-     * @param hitElements - All elements that were hit by the click
-     * @param event - The original mouse event
+     * @param relationship - The relationship that was clicked.
+     * @param hitElements - All elements that were hit by the click.
+     * @param event - The original mouse event.
      */
     onRelationshipClick?: ((relationship: Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
     /**
      * Called when the canvas is clicked
-     * @param event - The original mouse event
+     * @param event - The original mouse event.
      */
     onCanvasClick?: ((event: MouseEvent) => void) | boolean;
     /**
      * Called when a node is double clicked
-     * @param event - The original mouse event
+     * @param event - The original mouse event.
      */
     onCanvasDoubleClick?: ((event: MouseEvent) => void) | boolean;
     /**
      * Called when a relationship is right-clicked
-     * @param event - The original mouse event
+     * @param event - The original mouse event.
      */
     onCanvasRightClick?: ((event: MouseEvent) => void) | boolean;
     /**
      * Called when a node is double-clicked
-     * @param nodes - The node that was double-clicked
-     * @param hitElements - All elements that were hit by the double-click
-     * @param event - The original mouse event
+     * @param nodes - The node that was double-clicked.
+     * @param hitElements - All elements that were hit by the double-click.
+     * @param event - The original mouse event.
      */
     onNodeDoubleClick?: ((node: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
     /**
      * Called when a node is right-clicked
-     * @param nodes - The node that was right-clicked
-     * @param hitElements - All elements that were hit by the right-click
-     * @param event - The original mouse event
+     * @param nodes - The node that was right-clicked.
+     * @param hitElements - All elements that were hit by the right-click.
+     * @param event - The original mouse event.
      */
     onNodeRightClick?: ((node: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
     /**
      * Called when a relationship is double-clicked
-     * @param relationship - The relationship that was double-clicked
-     * @param hitElements - All elements that were hit by the double-click
-     * @param event - The original mouse event
+     * @param relationship - The relationship that was double-clicked.
+     * @param hitElements - All elements that were hit by the double-click.
+     * @param event - The original mouse event.
      */
     onRelationshipDoubleClick?: ((relationship: Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
     /**
      * Called when a relationship is right-clicked
-     * @param relationship - The relationship that was right-clicked
-     * @param hitElements - All elements that were hit by the right-click
-     * @param event - The original mouse event
+     * @param relationship - The relationship that was right-clicked.
+     * @param hitElements - All elements that were hit by the right-click.
+     * @param event - The original mouse event.
      */
     onRelationshipRightClick?: ((relationship: Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
 };
@@ -83,8 +83,8 @@ export declare class ClickInteraction extends BaseInteraction<ClickInteractionCa
     private mousePosition;
     /**
      * Creates a new click interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
-     * @param options - Options for the click interaction handler
+     * @param nvl - The NVL instance to attach the interaction handler to.
+     * @param options - Options for the click interaction handler.
      */
     constructor(nvl: NVL, options?: ClickInteractionOptions);
     private handleMouseDown;

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

@@ -11,8 +11,8 @@ export class ClickInteraction extends BaseInteraction {
     mousePosition = { x: 0, y: 0 };
     /**
      * Creates a new click interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
-     * @param options - Options for the click interaction handler
+     * @param nvl - The NVL instance to attach the interaction handler to.
+     * @param options - Options for the click interaction handler.
      */
     constructor(nvl, options = { selectOnClick: false }) {
         super(nvl, options);

package/lib/interaction-handlers/drag-node-interaction.d.ts

@@ -6,20 +6,20 @@ import { BaseInteraction } from './base';
 export type DragNodeInteractionCallbacks = {
     /**
      * Called when node(s) are dragged
-     * @param nodes - The node(s) being dragged
-     * @param event - The original mouse event
+     * @param nodes - The node(s) being dragged.
+     * @param event - The original mouse event.
      */
     onDrag?: ((nodes: Node[], evt: MouseEvent) => void) | boolean;
     /**
      * Called once when node(s) are started to being dragged
-     * @param nodes - The node(s) being dragged
-     * @param event - The original mouse event
+     * @param nodes - The node(s) being dragged.
+     * @param event - The original mouse event.
      */
     onDragStart?: ((nodes: Node[], evt: MouseEvent) => void) | boolean;
     /**
      * Called once when node(s) are finished being dragged
-     * @param nodes - The node(s) being dragged
-     * @param event - The original mouse event
+     * @param nodes - The node(s) being dragged.
+     * @param event - The original mouse event.
      */
     onDragEnd?: ((nodes: Node[], evt: MouseEvent) => void) | boolean;
 };
@@ -39,7 +39,7 @@ export declare class DragNodeInteraction extends BaseInteraction<DragNodeInterac
     private moveSelectedNodes;
     /**
      * Creates a new instance of the drag node interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
+     * @param nvl - The NVL instance to attach the interaction handler to.
      */
     constructor(nvl: NVL, options?: {});
     private handleMouseDown;

package/lib/interaction-handlers/drag-node-interaction.js

@@ -17,7 +17,7 @@ export class DragNodeInteraction extends BaseInteraction {
     moveSelectedNodes = false;
     /**
      * Creates a new instance of the drag node interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
+     * @param nvl - The NVL instance to attach the interaction handler to.
      */
     constructor(nvl, options = {}) {
         super(nvl, options);

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

@@ -2,20 +2,28 @@ import type { NVL, Node, Relationship } from '@neo4j-nvl/base';
 import { BaseInteraction } from './base';
 /**
  * @internal
+ * @hidden
  */
 export type DrawInteractionCallbacks = {
     onHoverNodeMargin?: ((hoveredNode: Node | null, evt: MouseEvent) => void) | boolean;
     onDrawEnded?: ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null, event: MouseEvent) => void) | boolean;
     onDrawStarted?: ((event: MouseEvent) => void) | boolean;
 };
+/**
+ * Options for the draw interaction handler.
+ */
 export type DrawInteractionOptions = {
+    /** Styling for the ghost graph that is shown when drawing. */
     ghostGraphStyling?: {
+        /** Styling for the ghost node. */
         node?: Pick<Node, 'color' | 'size'>;
+        /** Styling for the ghost relationship. */
         relationship?: Pick<Relationship, 'color' | 'width'>;
     };
 };
 /**
  * @internal
+ * @hidden
  */
 export declare class DrawInteraction extends BaseInteraction<DrawInteractionCallbacks, DrawInteractionOptions> {
     private isMoved;

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

@@ -14,6 +14,7 @@ const DefaultGhostGraphStyling = {
 };
 /**
  * @internal
+ * @hidden
  */
 export class DrawInteraction extends BaseInteraction {
     isMoved = false;

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

@@ -16,9 +16,9 @@ export type HoverInteractionOptions = {
 export type HoverInteractionCallbacks = {
     /**
      * Called when a node or relationship is hovered
-     * @param element - The node or relationship that was hovered
-     * @param hitElements - All elements that were hit by the hover
-     * @param event - The original mouse event
+     * @param element - The node or relationship that was hovered.
+     * @param hitElements - All elements that were hit by the hover.
+     * @param event - The original mouse event.
      * This callback is called every time the mouse moves,
      * even when no element is hovered or the current element is already hovered.
      */
@@ -36,7 +36,7 @@ export declare class HoverInteraction extends BaseInteraction<HoverInteractionCa
     constructor(nvl: NVL, options?: HoverInteractionOptions);
     /**
      * Handle mouse hover events
-     * @param {MouseEvent} event - The mouse event
+     * @param event - The mouse event.
      */
     handleHover: (event: MouseEvent) => void;
     private updateElementsInNVL;

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

@@ -17,7 +17,7 @@ export class HoverInteraction extends BaseInteraction {
     }
     /**
      * Handle mouse hover events
-     * @param {MouseEvent} event - The mouse event
+     * @param event - The mouse event.
      */
     handleHover = (event) => {
         const { nvlTargets } = this.nvlInstance.getHits(event);

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

@@ -10,16 +10,19 @@ export type LassoInteractionOptions = {
      */
     selectOnRelease?: boolean;
 };
+/**
+ * Callbacks for the lasso interaction handler.
+ */
 export type LassoInteractionCallbacks = {
     /**
      * Called once when the user presses the mouse on the canvas, starting the lasso.
-     * @param event - The original mouse event
+     * @param event - The original mouse event.
      */
     onLassoStarted?: ((event: MouseEvent) => void) | boolean;
     /**
      * Called once when the user releases the mouse after lasso selecting.
-     * @param selectionObject - The selected node and relationship ids
-     * @param event - The original mouse event
+     * @param selectionObject - The selected node and relationship ids.
+     * @param event - The original mouse event.
      */
     onLassoSelect?: (({ nodes, rels }: {
         nodes: Node[];
@@ -28,21 +31,25 @@ export type LassoInteractionCallbacks = {
 };
 /**
  * @internal
+ * @hidden
  */
 export type Coords = [number, number];
 /**
  * Checks if two lines defined by p1->p2 and p3->p4 are crossing.
  * @internal
+ * @hidden
  */
 export declare const checkLinesCrossing: (p1: Coords, p2: Coords, p3: Coords, p4: Coords) => boolean;
 /**
  * Checks if any line segments in the polygon intersect.
  * @internal
+ * @hidden
  */
 export declare const checkIntersection: (polygon: Coords[]) => boolean;
 /**
  * Checks if the point (x, y) is inside the polygon defined by vs.
  * @internal
+ * @hidden
  */
 export declare const checkPointInside: (x: number, y: number, vs: Point[]) => boolean;
 /**
@@ -57,8 +64,8 @@ export declare class LassoInteraction extends BaseInteraction<LassoInteractionCa
     private overlayRenderer;
     /**
      * Creates a new instance of the lasso interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
-     * @param options - Options for the lasso interaction handler to customize its behavior
+     * @param nvl - The NVL instance to attach the interaction handler to.
+     * @param options - Options for the lasso interaction handler to customize its behavior.
      */
     constructor(nvl: NVL, options?: LassoInteractionOptions);
     private startLasso;

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

@@ -8,6 +8,7 @@ const shapeShowTime = 500;
 /**
  * Checks if two lines defined by p1->p2 and p3->p4 are crossing.
  * @internal
+ * @hidden
  */
 export const checkLinesCrossing = (p1, p2, p3, p4) => {
     const denom = (p4[1] - p3[1]) * (p2[0] - p1[0]) - (p4[0] - p3[0]) * (p2[1] - p1[1]);
@@ -22,6 +23,7 @@ export const checkLinesCrossing = (p1, p2, p3, p4) => {
 /**
  * Checks if any line segments in the polygon intersect.
  * @internal
+ * @hidden
  */
 export const checkIntersection = (polygon) => {
     for (let i = 0; i < polygon.length - 1; i++) {
@@ -42,6 +44,7 @@ export const checkIntersection = (polygon) => {
 /**
  * Checks if the point (x, y) is inside the polygon defined by vs.
  * @internal
+ * @hidden
  */
 export const checkPointInside = (x, y, vs) => {
     // ray-casting algorithm based on
@@ -74,8 +77,8 @@ export class LassoInteraction extends BaseInteraction {
     overlayRenderer;
     /**
      * Creates a new instance of the lasso interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
-     * @param options - Options for the lasso interaction handler to customize its behavior
+     * @param nvl - The NVL instance to attach the interaction handler to.
+     * @param options - Options for the lasso interaction handler to customize its behavior.
      */
     constructor(nvl, options = { selectOnRelease: false }) {
         super(nvl, options);

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

@@ -16,8 +16,8 @@ export type PanInteractionOptions = {
 export type PanInteractionCallbacks = {
     /**
      * Called when the canvas is panned.
-     * @param panning - The panning coordinates
-     * @param event - The original mouse event
+     * @param panning - The panning coordinates.
+     * @param event - The original mouse event.
      */
     onPan?: ((panning: {
         x: number;
@@ -36,13 +36,13 @@ export declare class PanInteraction extends BaseInteraction<PanInteractionCallba
     private isPanning;
     /**
      * Creates a new instance of the pan interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
+     * @param nvl - The NVL instance to attach the interaction handler to.
      */
     constructor(nvl: NVL, options?: PanInteractionOptions);
     /**
      * 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
+     * @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

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

@@ -13,7 +13,7 @@ export class PanInteraction extends BaseInteraction {
     isPanning = false;
     /**
      * Creates a new instance of the pan interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
+     * @param nvl - The NVL instance to attach the interaction handler to.
      */
     constructor(nvl, options = { excludeNodeMargin: false }) {
         super(nvl, options);
@@ -23,8 +23,8 @@ export class PanInteraction extends BaseInteraction {
     }
     /**
      * 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
+     * @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

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

@@ -6,8 +6,8 @@ import { BaseInteraction } from './base';
 export type ZoomInteractionCallbacks = {
     /**
      * Called when the canvas is zoomed.
-     * @param zoomLevel - The zoom level
-     * @param event - The original mouse wheel event
+     * @param zoomLevel - The zoom level.
+     * @param event - The original mouse wheel event.
      */
     onZoom?: ((zoomLevel: number, event: WheelEvent) => void) | boolean;
 };
@@ -19,12 +19,14 @@ export type ZoomInteractionCallbacks = {
 export declare class ZoomInteraction extends BaseInteraction<ZoomInteractionCallbacks, Record<string, never>> {
     /**
      * Creates a new instance of the zoom interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
+     * @param nvl - The NVL instance to attach the interaction handler to.
      */
     constructor(nvl: NVL, options?: {});
     /**
      * Throttled zoom function to avoid events happening too fast.
-     * @param event - The original mouse wheel event
+     * @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.
@@ -36,8 +38,8 @@ export declare class ZoomInteraction extends BaseInteraction<ZoomInteractionCall
     private throttledZoom;
     /**
      * The function to be called on mouse wheel event on the canvas.
-     * @param evt - The mouse wheel event
-     * @note If the ctrl key or meta key is pressed, it does not zoom to avoid conflicts with default browser behavior.
+     * @param evt - The mouse wheel event.
+     * @remarks If the ctrl key or meta key is pressed, it does not zoom to avoid conflicts with default browser behavior.
      */
     private handleWheel;
     /**

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

@@ -9,7 +9,7 @@ import { getCanvasCenterOffset } from './utils';
 export class ZoomInteraction extends BaseInteraction {
     /**
      * Creates a new instance of the zoom interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to
+     * @param nvl - The NVL instance to attach the interaction handler to.
      */
     constructor(nvl, options = {}) {
         super(nvl, options);
@@ -17,7 +17,9 @@ export class ZoomInteraction extends BaseInteraction {
     }
     /**
      * Throttled zoom function to avoid events happening too fast.
-     * @param event - The original mouse wheel event
+     * @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.
@@ -40,8 +42,8 @@ export class ZoomInteraction extends BaseInteraction {
     }, 25, { leading: true });
     /**
      * The function to be called on mouse wheel event on the canvas.
-     * @param evt - The mouse wheel event
-     * @note If the ctrl key or meta key is pressed, it does not zoom to avoid conflicts with default browser behavior.
+     * @param evt - The mouse wheel event.
+     * @remarks If the ctrl key or meta key is pressed, it does not zoom to avoid conflicts with default browser behavior.
      */
     handleWheel = (evt) => {
         if (evt.ctrlKey || evt.metaKey) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.3.9",
+  "version": "1.0.0-2fc8e9f4",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "description": "Interaction handlers for the Neo4j Visualization Library",
@@ -27,14 +27,14 @@
     "eslint": "yarn global:eslint ./src/"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "0.3.9",
+    "@neo4j-nvl/base": "1.0.0-2fc8e9f4",
     "concaveman": "^1.2.1",
     "lodash": "4.17.21"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
     "@types/concaveman": "1.1.6",
     "@types/lodash": "4.14.202"
-  }
+  },
+  "stableVersion": "1.0.0"
 }