@neo4j-nvl/react 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -2,7 +2,31 @@
 
 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/).
 
-## [2.0.0] - 2026-09-11
+## [2.1.0] - 2026-11-10
+
+This release adds keyboard actions for moving nodes, ships an agent skill for NVL, and makes all packages loadable as ESM in Node.js without a bundler.
+
+### Added
+
+* Keyboard interaction handler actions for moving nodes with the arrow keys, with a new `onNodeMove` callback.
+* Agent skill files for NVL, shipped with `@neo4j-nvl/base`.
+
+### Changed
+
+* `@neo4j-nvl/react` and `@neo4j-nvl/interaction-handlers` are now spec-compliant ESM with `"type": "module"` and an `exports` map. Note that deep imports into `lib/` will no longer work.
+* Replaced `lodash` with `lodash-es` in `@neo4j-nvl/react` and `@neo4j-nvl/interaction-handlers` (Jest users transforming `@neo4j-nvl/*` also need to transform `lodash-es`).
+* Type declarations of `@neo4j-nvl/base` now resolve correctly with `moduleResolution: "nodenext"`.
+* Container resizing uses the native `ResizeObserver` instead of the `resizelistener` dependency.
+* Default `height` and `outline` styles of NVL containers can now be overridden by stylesheets.
+
+### Fixed
+
+* `fit()` zooms out beyond `minZoom` when `allowDynamicMinZoom` is `true` and the graph does not fit the viewport.
+* `onHover` callback's `element` parameter is now typed as possibly `undefined`, matching the runtime behaviour.
+* Added missing caret for the React 18 peer dependency range in `@neo4j-nvl/react`.
+* Several dependency updates
+
+## [2.0.0] - 2026-09-15
 
 This 2.0.0 major release upgrades NVL to WebGL2 for both the renderer and physics engine, unlocking major performance improvements. It also adds new clustering capabilities with visual decorations to the force directed and hierarchical layouts.
 

package/README.md

@@ -78,6 +78,14 @@ const [boxSelect, setBoxSelect] = useState(false)
 
 You can also find more instructions and examples on how to use the NVL React wrappers in the [docs](https://neo4j.com/docs/nvl/current/react-wrappers/).
 
+### Agent skills
+
+The agent skill for NVL (`neo4j-nvl-skill`) ships with `@neo4j-nvl/base`, which this package depends on. To make it available to your AI coding assistant, run the following with a recent version of the `skills` CLI:
+
+```bash
+npx skills experimental_sync
+```
+
 ### Product analytics
 
 In order to improve the library we are collecting some information about the usage of NVL. If you prefer to disable this behavior setting `disableTelemetry` to `true` in the `nvlOptions` property.

package/lib/basic-wrapper/BasicNvlWrapper.d.ts

@@ -1,44 +1,70 @@
-import type { ExternalCallbacks, Node, NvlOptions, Relationship } from '@neo4j-nvl/base';
-import NVL from '@neo4j-nvl/base';
-import { type HTMLProps } from 'react';
+import NVL, { ExternalCallbacks, Node, NvlOptions, Relationship } from "@neo4j-nvl/base";
+import { HTMLProps } from "react";
 /**
  * The properties that can be passed to the {@link BasicNvlWrapper} component.
  */
 export interface BasicReactWrapperProps {
-    /** The nodes of the graph of type Node[] */
-    nodes: Node[];
-    /** The rels of the graph of type Relationship[] */
-    rels: Relationship[];
-    /** an Object containing functions for callbacks on certain actions */
-    nvlCallbacks?: ExternalCallbacks;
-    /** An object containing options for the Nvl instance */
-    nvlOptions?: NvlOptions;
-    /** Sets the positions of the nodes in the graph using the setNodePositions method. */
-    positions?: Node[];
-    /**
-     * Sets the zoom level of the viewport using the setZoom method.
-     * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
-     */
-    zoom?: number;
-    /**
-     * Sets the pan coordinates of the viewport using the setPan method.
-     * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
-     */
-    pan?: {
-        /** The x coordinate of the pan. */
-        x: number;
-        /** The y coordinate of the pan. */
-        y: number;
-    };
-    /** A callback to handle any errors that happen during NVL initialization */
-    onInitializationError?: (error: unknown) => void;
+  /** The nodes of the graph of type Node[] */
+  nodes: Node[];
+  /** The rels of the graph of type Relationship[] */
+  rels: Relationship[];
+  /**
+   * An object containing functions for callbacks on certain actions.
+   * @remarks Passed to the NVL constructor once; later changes to this prop are ignored.
+   * Read changing state through a ref inside the callbacks instead of redefining them.
+   */
+  nvlCallbacks?: ExternalCallbacks;
+  /**
+   * An object containing options for the Nvl instance.
+   * @remarks
+   * If `minimapContainer` is present it must be a non-null element before NVL is created, otherwise
+   * creation is deferred until it is.
+   */
+  nvlOptions?: NvlOptions;
+  /**
+   * Sets the positions of the nodes in the graph using the setNodePositions method.
+   * @remarks Applied whenever the array reference changes and is non-empty. This is the way to
+   * position nodes.
+   * Do not set `x` and `y` on `nodes` directly.
+   */
+  positions?: Node[];
+  /**
+   * Sets the zoom level of the viewport using the setZoom method.
+   * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
+   */
+  zoom?: number;
+  /**
+   * Sets the pan coordinates of the viewport using the setPan method.
+   * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
+   */
+  pan?: {
+    /** The x coordinate of the pan. */
+    x: number;
+    /** The y coordinate of the pan. */
+    y: number;
+  };
+  /** A callback to handle any errors that happen during NVL initialization */
+  onInitializationError?: (error: unknown) => void;
 }
 /**
  *
  * A basic React wrapper that wraps the NVL base library within a React component.
  * It takes the class' arguments as properties, which are passed to the NVL constructor.
- * Any changes in properties will be reflected in the NVL instance by calling the corresponding methods.
+ *
+ * The `ref` exposes every NVL method. Calls made before the instance exists return `null`.
  *
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
+ * @example
+ * ```tsx
+ * const Graph = () => {
+ *   const nvlRef = useRef<NVL>(null)
+ *   return (
+ *     <>
+ *       <BasicNvlWrapper ref={nvlRef} nodes={nodes} rels={relationships} />
+ *       <button onClick={() => nvlRef.current?.fit(nodes.map((node) => node.id))}>Fit</button>
+ *     </>
+ *   )
+ * }
+ * ```
  */
-export declare const BasicNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<Partial<Pick<NVL, "restart" | "destroy" | "addAndUpdateElementsInGraph" | "getSelectedNodes" | "getSelectedRelationships" | "removeNodesWithIds" | "removeRelationshipsWithIds" | "getNodes" | "getRelationships" | "getNodeById" | "getRelationshipById" | "getPositionById" | "getCurrentOptions" | "deselectAll" | "fit" | "resetZoom" | "setRenderer" | "setDisableWebGL" | "pinNode" | "unPinNode" | "setLayout" | "setLayoutOptions" | "getNodesOnScreen" | "getNodePositions" | "setNodePositions" | "isLayoutMoving" | "saveToFile" | "saveToSvg" | "getImageDataUrl" | "getSvgDataUrl" | "saveFullGraphToLargeFile" | "getZoomLimits" | "setZoom" | "getScale" | "getPan" | "getHits" | "getContainer">>>>>;
+export declare const BasicNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<Partial<Pick<NVL, "restart" | "addAndUpdateElementsInGraph" | "getSelectedNodes" | "getSelectedRelationships" | "removeNodesWithIds" | "removeRelationshipsWithIds" | "getNodes" | "getRelationships" | "getNodeById" | "getRelationshipById" | "getPositionById" | "getCurrentOptions" | "destroy" | "deselectAll" | "fit" | "resetZoom" | "setRenderer" | "setDisableWebGL" | "pinNode" | "unPinNode" | "setLayout" | "setLayoutOptions" | "getNodesOnScreen" | "getNodePositions" | "setNodePositions" | "isLayoutMoving" | "saveToFile" | "saveToSvg" | "getImageDataUrl" | "getSvgDataUrl" | "saveFullGraphToLargeFile" | "getZoomLimits" | "setZoom" | "getScale" | "getPan" | "getHits" | "getContainer">>>>>;

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -1,145 +1,131 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import NVL from '@neo4j-nvl/base';
-import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { BASIC_WRAPPER_ID } from '../utils/constants';
-import { getMapDifferences, getNodeAttributeDifferences } from '../utils/graph-comparison';
-import { useDeepCompareEffect } from '../utils/hooks';
+import { BASIC_WRAPPER_ID } from "../utils/constants.js";
+import { getMapDifferences, getNodeAttributeDifferences } from "../utils/graph-comparison.js";
+import { useDeepCompareEffect } from "../utils/hooks.js";
+import NVL from "@neo4j-nvl/base";
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/basic-wrapper/BasicNvlWrapper.tsx
 /**
- *
- * A basic React wrapper that wraps the NVL base library within a React component.
- * It takes the class' arguments as properties, which are passed to the NVL constructor.
- * Any changes in properties will be reflected in the NVL instance by calling the corresponding methods.
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
- */
-export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, nvlCallbacks = {}, nvlOptions = {}, positions = [], zoom, pan, onInitializationError, ...nvlEvents }, ref) => {
-    const nvlRef = useRef(null);
-    const prevZoomRef = useRef(undefined);
-    const prevPanRef = useRef(undefined);
-    useImperativeHandle(ref, () => {
-        const nvlMethods = Object.getOwnPropertyNames(NVL.prototype);
-        return nvlMethods.reduce((current, method) => ({
-            ...current,
-            [method]: (...args) => {
-                if (nvlRef.current === null) {
-                    return null;
-                }
-                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                return nvlRef.current[method](...args);
-            }
-        }), {});
-    });
-    const containerRef = useRef(null);
-    const [currentNodes, setCurrentNodes] = useState(nodes);
-    const [currentRels, setCurrentRels] = useState(rels);
-    useEffect(() => {
-        return () => {
-            nvlRef.current?.destroy();
-            nvlRef.current = null;
-            prevZoomRef.current = undefined;
-            prevPanRef.current = undefined;
-        };
-    }, []);
-    useEffect(() => {
-        let newNvl = null;
-        const hasMinimap = 'minimapContainer' in nvlOptions;
-        const minimapContainerIsReady = hasMinimap ? nvlOptions.minimapContainer !== null : true;
-        const mainContainerIsReady = containerRef.current !== null;
-        if (mainContainerIsReady && minimapContainerIsReady) {
-            if (nvlRef.current === null) {
-                try {
-                    newNvl = new NVL(containerRef.current, currentNodes, currentRels, nvlOptions, nvlCallbacks);
-                    nvlRef.current = newNvl;
-                    setCurrentRels(rels);
-                    setCurrentNodes(nodes);
-                }
-                catch (e) {
-                    if (typeof onInitializationError === 'function') {
-                        onInitializationError(e);
-                    }
-                    else {
-                        throw e;
-                    }
-                }
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [containerRef.current, nvlOptions.minimapContainer]);
-    useEffect(() => {
-        if (nvlRef.current === null) {
-            return;
-        }
-        const nodeChanges = getMapDifferences(currentNodes, nodes);
-        const nodeDiff = getNodeAttributeDifferences(currentNodes, nodes);
-        const relChanges = getMapDifferences(currentRels, rels);
-        const graphIsUnchanged = nodeChanges.added.length === 0 &&
-            nodeChanges.removed.length === 0 &&
-            nodeDiff.length === 0 &&
-            relChanges.added.length === 0 &&
-            relChanges.removed.length === 0 &&
-            relChanges.updated.length === 0;
-        if (graphIsUnchanged) {
-            return;
-        }
-        setCurrentRels(rels);
-        setCurrentNodes(nodes);
-        const nodesToAddAndUpdate = [...nodeChanges.added, ...nodeDiff];
-        const relsToAddAndUpdate = [...relChanges.added, ...relChanges.updated];
-        nvlRef.current.addAndUpdateElementsInGraph(nodesToAddAndUpdate, relsToAddAndUpdate);
-        const relationshipsToRemove = relChanges.removed.map((r) => r.id);
-        const nodesToRemove = nodeChanges.removed.map((n) => n.id);
-        nvlRef.current.removeRelationshipsWithIds(relationshipsToRemove);
-        nvlRef.current.removeNodesWithIds(nodesToRemove);
-    }, [currentNodes, currentRels, nodes, rels]);
-    useEffect(() => {
-        if (nvlRef.current === null || nvlOptions.layout === undefined) {
-            return;
-        }
-        nvlRef.current.setLayout(nvlOptions.layout);
-    }, [nvlOptions.layout]);
-    useDeepCompareEffect(() => {
-        if (nvlRef.current === null || nvlOptions.layoutOptions === undefined) {
-            return;
-        }
-        nvlRef.current.setLayoutOptions(nvlOptions.layoutOptions);
-    }, [nvlOptions.layoutOptions]);
-    useEffect(() => {
-        if (nvlRef.current === null || nvlOptions.renderer === undefined) {
-            return;
-        }
-        nvlRef.current.setRenderer(nvlOptions.renderer);
-    }, [nvlOptions.renderer]);
-    useEffect(() => {
-        if (nvlRef.current === null || nvlOptions.disableWebGL === undefined) {
-            return;
-        }
-        nvlRef.current.setDisableWebGL(nvlOptions.disableWebGL);
-    }, [nvlOptions.disableWebGL]);
-    useEffect(() => {
-        if (nvlRef.current === null || positions.length === 0) {
-            return;
-        }
-        nvlRef.current.setNodePositions(positions);
-    }, [positions]);
-    useEffect(() => {
-        if (nvlRef.current === null) {
-            return;
-        }
-        const currentZoom = prevZoomRef.current;
-        const currentPan = prevPanRef.current;
-        const zoomHasChanged = zoom !== undefined && zoom !== currentZoom;
-        const panHasChanged = pan !== undefined && (pan.x !== currentPan?.x || pan.y !== currentPan.y);
-        if (zoomHasChanged && panHasChanged) {
-            nvlRef.current.setZoomAndPan(zoom, pan.x, pan.y);
-        }
-        else if (zoomHasChanged) {
-            nvlRef.current.setZoom(zoom);
-        }
-        else if (panHasChanged) {
-            nvlRef.current.setPan(pan.x, pan.y);
-        }
-        prevZoomRef.current = zoom;
-        prevPanRef.current = pan;
-    }, [zoom, pan]);
-    return _jsx("div", { id: BASIC_WRAPPER_ID, ref: containerRef, style: { height: '100%', outline: '0' }, ...nvlEvents });
+*
+* A basic React wrapper that wraps the NVL base library within a React component.
+* It takes the class' arguments as properties, which are passed to the NVL constructor.
+*
+* The `ref` exposes every NVL method. Calls made before the instance exists return `null`.
+*
+* For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
+* @example
+* ```tsx
+* const Graph = () => {
+*   const nvlRef = useRef<NVL>(null)
+*   return (
+*     <>
+*       <BasicNvlWrapper ref={nvlRef} nodes={nodes} rels={relationships} />
+*       <button onClick={() => nvlRef.current?.fit(nodes.map((node) => node.id))}>Fit</button>
+*     </>
+*   )
+* }
+* ```
+*/
+const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, nvlCallbacks = {}, nvlOptions = {}, positions = [], zoom, pan, onInitializationError, ...nvlEvents }, ref) => {
+	const nvlRef = useRef(null);
+	const prevZoomRef = useRef(void 0);
+	const prevPanRef = useRef(void 0);
+	useImperativeHandle(ref, () => {
+		return Object.getOwnPropertyNames(NVL.prototype).reduce((current, method) => ({
+			...current,
+			[method]: (...args) => {
+				if (nvlRef.current === null) return null;
+				return nvlRef.current[method](...args);
+			}
+		}), {});
+	});
+	const containerRef = useRef(null);
+	const [currentNodes, setCurrentNodes] = useState(nodes);
+	const [currentRels, setCurrentRels] = useState(rels);
+	useEffect(() => {
+		return () => {
+			nvlRef.current?.destroy();
+			nvlRef.current = null;
+			prevZoomRef.current = void 0;
+			prevPanRef.current = void 0;
+		};
+	}, []);
+	useEffect(() => {
+		let newNvl = null;
+		const minimapContainerIsReady = "minimapContainer" in nvlOptions ? nvlOptions.minimapContainer !== null : true;
+		if (containerRef.current !== null && minimapContainerIsReady) {
+			if (nvlRef.current === null) try {
+				newNvl = new NVL(containerRef.current, currentNodes, currentRels, nvlOptions, nvlCallbacks);
+				nvlRef.current = newNvl;
+				setCurrentRels(rels);
+				setCurrentNodes(nodes);
+			} catch (e) {
+				if (typeof onInitializationError === "function") onInitializationError(e);
+				else throw e;
+			}
+		}
+	}, [containerRef.current, nvlOptions.minimapContainer]);
+	useEffect(() => {
+		if (nvlRef.current === null) return;
+		const nodeChanges = getMapDifferences(currentNodes, nodes);
+		const nodeDiff = getNodeAttributeDifferences(currentNodes, nodes);
+		const relChanges = getMapDifferences(currentRels, rels);
+		if (nodeChanges.added.length === 0 && nodeChanges.removed.length === 0 && nodeDiff.length === 0 && relChanges.added.length === 0 && relChanges.removed.length === 0 && relChanges.updated.length === 0) return;
+		setCurrentRels(rels);
+		setCurrentNodes(nodes);
+		const nodesToAddAndUpdate = [...nodeChanges.added, ...nodeDiff];
+		const relsToAddAndUpdate = [...relChanges.added, ...relChanges.updated];
+		nvlRef.current.addAndUpdateElementsInGraph(nodesToAddAndUpdate, relsToAddAndUpdate);
+		const relationshipsToRemove = relChanges.removed.map((r) => r.id);
+		const nodesToRemove = nodeChanges.removed.map((n) => n.id);
+		nvlRef.current.removeRelationshipsWithIds(relationshipsToRemove);
+		nvlRef.current.removeNodesWithIds(nodesToRemove);
+	}, [
+		currentNodes,
+		currentRels,
+		nodes,
+		rels
+	]);
+	useEffect(() => {
+		if (nvlRef.current === null || nvlOptions.layout === void 0) return;
+		nvlRef.current.setLayout(nvlOptions.layout);
+	}, [nvlOptions.layout]);
+	useDeepCompareEffect(() => {
+		if (nvlRef.current === null || nvlOptions.layoutOptions === void 0) return;
+		nvlRef.current.setLayoutOptions(nvlOptions.layoutOptions);
+	}, [nvlOptions.layoutOptions]);
+	useEffect(() => {
+		if (nvlRef.current === null || nvlOptions.renderer === void 0) return;
+		nvlRef.current.setRenderer(nvlOptions.renderer);
+	}, [nvlOptions.renderer]);
+	useEffect(() => {
+		if (nvlRef.current === null || nvlOptions.disableWebGL === void 0) return;
+		nvlRef.current.setDisableWebGL(nvlOptions.disableWebGL);
+	}, [nvlOptions.disableWebGL]);
+	useEffect(() => {
+		if (nvlRef.current === null || positions.length === 0) return;
+		nvlRef.current.setNodePositions(positions);
+	}, [positions]);
+	useEffect(() => {
+		if (nvlRef.current === null) return;
+		const currentZoom = prevZoomRef.current;
+		const currentPan = prevPanRef.current;
+		const zoomHasChanged = zoom !== void 0 && zoom !== currentZoom;
+		const panHasChanged = pan !== void 0 && (pan.x !== currentPan?.x || pan.y !== currentPan.y);
+		if (zoomHasChanged && panHasChanged) nvlRef.current.setZoomAndPan(zoom, pan.x, pan.y);
+		else if (zoomHasChanged) nvlRef.current.setZoom(zoom);
+		else if (panHasChanged) nvlRef.current.setPan(pan.x, pan.y);
+		prevZoomRef.current = zoom;
+		prevPanRef.current = pan;
+	}, [zoom, pan]);
+	return /* @__PURE__ */ jsx("div", {
+		id: BASIC_WRAPPER_ID,
+		ref: containerRef,
+		style: {
+			height: "100%",
+			outline: "0"
+		},
+		...nvlEvents
+	});
 }));
+export { BasicNvlWrapper };

package/lib/index.d.ts

@@ -1,8 +1,5 @@
-import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
-import type { BasicReactWrapperProps } from './basic-wrapper/BasicNvlWrapper';
-import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
-import type { InteractionOptions, InteractiveNvlWrapperProps, KeyboardEvent, KeyboardEventCallbacks, MouseEvent, MouseEventCallbacks } from './interactive-nvl-wrapper/types';
-import type { StaticPictureWrapperProps } from './static-picture-wrapper/StaticPictureWrapper';
-import { StaticPictureWrapper } from './static-picture-wrapper/StaticPictureWrapper';
-export { BasicNvlWrapper, InteractiveNvlWrapper, StaticPictureWrapper };
-export type { MouseEventCallbacks, KeyboardEventCallbacks, MouseEvent, KeyboardEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps, StaticPictureWrapperProps };
+import { BasicNvlWrapper, BasicReactWrapperProps } from "./basic-wrapper/BasicNvlWrapper.js";
+import { InteractionOptions, InteractiveNvlWrapperProps, KeyboardEvent, KeyboardEventCallbacks, MouseEvent, MouseEventCallbacks } from "./interactive-nvl-wrapper/types.js";
+import { InteractiveNvlWrapper } from "./interactive-nvl-wrapper/InteractiveNvlWrapper.js";
+import { StaticPictureWrapper, StaticPictureWrapperProps } from "./static-picture-wrapper/StaticPictureWrapper.js";
+export { BasicNvlWrapper, type BasicReactWrapperProps, type InteractionOptions, InteractiveNvlWrapper, type InteractiveNvlWrapperProps, type KeyboardEvent, type KeyboardEventCallbacks, type MouseEvent, type MouseEventCallbacks, StaticPictureWrapper, type StaticPictureWrapperProps };

package/lib/index.js

@@ -1,4 +1,4 @@
-import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
-import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
-import { StaticPictureWrapper } from './static-picture-wrapper/StaticPictureWrapper';
+import { BasicNvlWrapper } from "./basic-wrapper/BasicNvlWrapper.js";
+import { InteractiveNvlWrapper } from "./interactive-nvl-wrapper/InteractiveNvlWrapper.js";
+import { StaticPictureWrapper } from "./static-picture-wrapper/StaticPictureWrapper.js";
 export { BasicNvlWrapper, InteractiveNvlWrapper, StaticPictureWrapper };

package/lib/interactive-nvl-wrapper/InteractionHandlers.d.ts

@@ -1,11 +1,11 @@
-import type NVL from '@neo4j-nvl/base';
-import type { MutableRefObject } from 'react';
-import type { InteractionOptions, KeyboardEventCallbacks, MouseEventCallbacks } from './types';
+import { InteractionOptions, KeyboardEventCallbacks, MouseEventCallbacks } from "./types.js";
+import NVL from "@neo4j-nvl/base";
+import { MutableRefObject } from "react";
 interface InteractionHandlersProps {
-    nvlRef: MutableRefObject<NVL | null>;
-    mouseEventCallbacks: MouseEventCallbacks;
-    keyboardEventCallbacks: KeyboardEventCallbacks;
-    interactionOptions: InteractionOptions;
+  nvlRef: MutableRefObject<NVL | null>;
+  mouseEventCallbacks: MouseEventCallbacks;
+  keyboardEventCallbacks: KeyboardEventCallbacks;
+  interactionOptions: InteractionOptions;
 }
 export declare const InteractionHandlers: React.FC<InteractionHandlersProps>;
-export {};
+export {};

package/lib/interactive-nvl-wrapper/InteractionHandlers.js

@@ -1,60 +1,63 @@
-import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, KeyboardInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
-import { useEffect, useRef } from 'react';
-import { destroyInteraction, useInteraction } from './hooks';
-export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, keyboardEventCallbacks, interactionOptions }) => {
-    const hoverInteraction = useRef(null);
-    const clickInteraction = useRef(null);
-    const panInteraction = useRef(null);
-    const zoomInteraction = useRef(null);
-    const dragNodeInteraction = useRef(null);
-    const drawInteraction = useRef(null);
-    const multiSelectInteraction = useRef(null);
-    const lassoInteraction = useRef(null);
-    const keyboardInteraction = useRef(null);
-    useInteraction(HoverInteraction, hoverInteraction, mouseEventCallbacks.onHover, 'onHover', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeClick, 'onNodeClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeDoubleClick, 'onNodeDoubleClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeRightClick, 'onNodeRightClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipClick, 'onRelationshipClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipDoubleClick, 'onRelationshipDoubleClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipRightClick, 'onRelationshipRightClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasClick, 'onCanvasClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasDoubleClick, 'onCanvasDoubleClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasRightClick, 'onCanvasRightClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterClick, 'onClusterClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterDoubleClick, 'onClusterDoubleClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterRightClick, 'onClusterRightClick', nvlRef, interactionOptions);
-    useInteraction(PanInteraction, panInteraction, mouseEventCallbacks.onPan, 'onPan', nvlRef, interactionOptions);
-    useInteraction(ZoomInteraction, zoomInteraction, mouseEventCallbacks.onZoomAndPan, 'onZoomAndPan', nvlRef, interactionOptions);
-    useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDrag, 'onDrag', nvlRef, interactionOptions);
-    useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDragStart, 'onDragStart', nvlRef, interactionOptions);
-    useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDragEnd, 'onDragEnd', nvlRef, interactionOptions);
-    useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onHoverNodeMargin, 'onHoverNodeMargin', nvlRef, interactionOptions);
-    useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onDrawStarted, 'onDrawStarted', nvlRef, interactionOptions);
-    useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onDrawEnded, 'onDrawEnded', nvlRef, interactionOptions);
-    useInteraction(BoxSelectInteraction, multiSelectInteraction, mouseEventCallbacks.onBoxStarted, 'onBoxStarted', nvlRef, interactionOptions);
-    useInteraction(BoxSelectInteraction, multiSelectInteraction, mouseEventCallbacks.onBoxSelect, 'onBoxSelect', nvlRef, interactionOptions);
-    useInteraction(LassoInteraction, lassoInteraction, mouseEventCallbacks.onLassoStarted, 'onLassoStarted', nvlRef, interactionOptions);
-    useInteraction(LassoInteraction, lassoInteraction, mouseEventCallbacks.onLassoSelect, 'onLassoSelect', nvlRef, interactionOptions);
-    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onKeyDown, 'onKeyDown', nvlRef, interactionOptions);
-    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onKeyUp, 'onKeyUp', nvlRef, interactionOptions);
-    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onNodeFocus, 'onNodeFocus', nvlRef, interactionOptions);
-    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onNodeBlur, 'onNodeBlur', nvlRef, interactionOptions);
-    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onRelationshipFocus, 'onRelationshipFocus', nvlRef, interactionOptions);
-    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onRelationshipBlur, 'onRelationshipBlur', nvlRef, interactionOptions);
-    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onCanvasFocus, 'onCanvasFocus', nvlRef, interactionOptions);
-    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onCanvasBlur, 'onCanvasBlur', nvlRef, interactionOptions);
-    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onContextMenu, 'onContextMenu', nvlRef, interactionOptions);
-    useEffect(() => () => {
-        destroyInteraction(hoverInteraction);
-        destroyInteraction(clickInteraction);
-        destroyInteraction(panInteraction);
-        destroyInteraction(zoomInteraction);
-        destroyInteraction(dragNodeInteraction);
-        destroyInteraction(drawInteraction);
-        destroyInteraction(multiSelectInteraction);
-        destroyInteraction(lassoInteraction);
-        destroyInteraction(keyboardInteraction);
-    }, []);
-    return null;
+import { destroyInteraction, useInteraction } from "./hooks.js";
+import { useEffect, useRef } from "react";
+import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, KeyboardInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from "@neo4j-nvl/interaction-handlers";
+// src/interactive-nvl-wrapper/InteractionHandlers.tsx
+const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, keyboardEventCallbacks, interactionOptions }) => {
+	const hoverInteraction = useRef(null);
+	const clickInteraction = useRef(null);
+	const panInteraction = useRef(null);
+	const zoomInteraction = useRef(null);
+	const dragNodeInteraction = useRef(null);
+	const drawInteraction = useRef(null);
+	const multiSelectInteraction = useRef(null);
+	const lassoInteraction = useRef(null);
+	const keyboardInteraction = useRef(null);
+	useInteraction(HoverInteraction, hoverInteraction, mouseEventCallbacks.onHover, "onHover", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeClick, "onNodeClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeDoubleClick, "onNodeDoubleClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeRightClick, "onNodeRightClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipClick, "onRelationshipClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipDoubleClick, "onRelationshipDoubleClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipRightClick, "onRelationshipRightClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasClick, "onCanvasClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasDoubleClick, "onCanvasDoubleClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasRightClick, "onCanvasRightClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterClick, "onClusterClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterDoubleClick, "onClusterDoubleClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterRightClick, "onClusterRightClick", nvlRef, interactionOptions);
+	useInteraction(PanInteraction, panInteraction, mouseEventCallbacks.onPan, "onPan", nvlRef, interactionOptions);
+	useInteraction(ZoomInteraction, zoomInteraction, mouseEventCallbacks.onZoomAndPan, "onZoomAndPan", nvlRef, interactionOptions);
+	useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDrag, "onDrag", nvlRef, interactionOptions);
+	useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDragStart, "onDragStart", nvlRef, interactionOptions);
+	useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDragEnd, "onDragEnd", nvlRef, interactionOptions);
+	useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onHoverNodeMargin, "onHoverNodeMargin", nvlRef, interactionOptions);
+	useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onDrawStarted, "onDrawStarted", nvlRef, interactionOptions);
+	useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onDrawEnded, "onDrawEnded", nvlRef, interactionOptions);
+	useInteraction(BoxSelectInteraction, multiSelectInteraction, mouseEventCallbacks.onBoxStarted, "onBoxStarted", nvlRef, interactionOptions);
+	useInteraction(BoxSelectInteraction, multiSelectInteraction, mouseEventCallbacks.onBoxSelect, "onBoxSelect", nvlRef, interactionOptions);
+	useInteraction(LassoInteraction, lassoInteraction, mouseEventCallbacks.onLassoStarted, "onLassoStarted", nvlRef, interactionOptions);
+	useInteraction(LassoInteraction, lassoInteraction, mouseEventCallbacks.onLassoSelect, "onLassoSelect", nvlRef, interactionOptions);
+	useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onKeyDown, "onKeyDown", nvlRef, interactionOptions);
+	useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onKeyUp, "onKeyUp", nvlRef, interactionOptions);
+	useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onNodeFocus, "onNodeFocus", nvlRef, interactionOptions);
+	useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onNodeBlur, "onNodeBlur", nvlRef, interactionOptions);
+	useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onRelationshipFocus, "onRelationshipFocus", nvlRef, interactionOptions);
+	useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onRelationshipBlur, "onRelationshipBlur", nvlRef, interactionOptions);
+	useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onCanvasFocus, "onCanvasFocus", nvlRef, interactionOptions);
+	useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onCanvasBlur, "onCanvasBlur", nvlRef, interactionOptions);
+	useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onContextMenu, "onContextMenu", nvlRef, interactionOptions);
+	useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onNodeMove, "onNodeMove", nvlRef, interactionOptions);
+	useEffect(() => () => {
+		destroyInteraction(hoverInteraction);
+		destroyInteraction(clickInteraction);
+		destroyInteraction(panInteraction);
+		destroyInteraction(zoomInteraction);
+		destroyInteraction(dragNodeInteraction);
+		destroyInteraction(drawInteraction);
+		destroyInteraction(multiSelectInteraction);
+		destroyInteraction(lassoInteraction);
+		destroyInteraction(keyboardInteraction);
+	}, []);
+	return null;
 };
+export { InteractionHandlers };