@neo4j-nvl/react 0.3.8-e5dee203 → 0.3.9-381e4a0c

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 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/).
 
+## [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:
+
+### Added
+
+* new export method for image data url called `.getImageDataUrl`
+* new callback triggered when NVL is fully initialized called `onInitialization`.
+
+### Changed
+
+* updated license agreement in `LICENSE.txt`.
+* prevent zoom interaction handler to zoom in NVL when ctrl or meta key is pressed.
+* improve handling of leaving NVL container while performing selection using the lasso and box interaction handlers.
+
+### Fixed
+
+* fix error on onDragEnd callback.
+* fix race condition when hovering over an element that is being dismissed.
+* fix nodes moving on clicks.
+* prevent crash when providing non-existent node ids to `.setNodePositions` method.
+* fix slow zoom speed for touchpads in zoom interaction handler.
+* Ensure interaction handlers in react component waits for NVL to be initialised first.
+
 ## [0.3.8] - 2025-03-18
 
 This release contains a fix for the [NVL result transformer](https://neo4j.com/docs/api/nvl/current/functions/_neo4j_nvl_base.nvlResultTransformer.html).

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -23,7 +23,7 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
                 if (nvlRef.current === null) {
                     return null;
                 }
-                // @ts-ignore suppress the type casting error on spreading
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
                 return nvlRef.current[method](...args);
             }
         }), 

package/lib/index.d.ts

@@ -2,5 +2,7 @@ import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
 import type { BasicReactWrapperProps } from './basic-wrapper/BasicNvlWrapper';
 import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
 import type { InteractionOptions, InteractiveNvlWrapperProps, MouseEvent, MouseEventCallbacks } from './interactive-nvl-wrapper/types';
-export { BasicNvlWrapper, InteractiveNvlWrapper };
-export type { MouseEventCallbacks, MouseEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps };
+import type { StaticPictureWrapperProps } from './static-picture-wrapper/StaticPictureWrapper';
+import { StaticPictureWrapper } from './static-picture-wrapper/StaticPictureWrapper';
+export { BasicNvlWrapper, InteractiveNvlWrapper, StaticPictureWrapper };
+export type { MouseEventCallbacks, MouseEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps, StaticPictureWrapperProps };

package/lib/index.js

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

package/lib/static-picture-wrapper/StaticPictureWrapper.d.ts

@@ -0,0 +1,22 @@
+import type { Node, NvlOptions, Relationship } from '@neo4j-nvl/base';
+/**
+ * The properties that can be passed to the StaticPictureWrapper component.
+ */
+export type StaticPictureWrapperProps = {
+    /** The nodes to be displayed in the graph. */
+    nodes: Node[];
+    /** The relationships to be displayed in the graph. */
+    rels: Relationship[];
+    /** Options to customize the NVL instance. */
+    nvlOptions?: NvlOptions;
+    /** The width of the static picture. */
+    width?: number;
+    /** The height of the static picture. */
+    height?: number;
+};
+/**
+ * A React component that creates a static picture of a graph using NVL.
+ * This component is useful for generating static visualizations of graphs without requiring user interaction.
+ * NVL is destroyed after capturing the image to free up resources.
+ */
+export declare const StaticPictureWrapper: ({ nodes, rels, nvlOptions, width, height }: StaticPictureWrapperProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/static-picture-wrapper/StaticPictureWrapper.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NVL from '@neo4j-nvl/base';
+import { useEffect, useState } from 'react';
+/**
+ * A React component that creates a static picture of a graph using NVL.
+ * This component is useful for generating static visualizations of graphs without requiring user interaction.
+ * NVL is destroyed after capturing the image to free up resources.
+ */
+export const StaticPictureWrapper = ({ nodes, rels, nvlOptions = {}, width = 500, height = 500 }) => {
+    const [imgSrc, setImgSrc] = useState();
+    useEffect(() => {
+        const div = document.createElement('div');
+        div.style.width = `${width / window.devicePixelRatio}px`;
+        div.style.height = `${height / window.devicePixelRatio}px`;
+        const myNvl = new NVL(div, nodes, rels, nvlOptions, {
+            onLayoutDone: () => {
+                myNvl.fit(myNvl.getNodes().map((n) => n.id));
+            },
+            onZoomTransitionDone: () => {
+                setImgSrc(myNvl.getImageDataUrl());
+                setTimeout(() => {
+                    myNvl.destroy();
+                });
+            }
+        });
+        return () => {
+            myNvl?.destroy();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [nodes, rels, width, height]);
+    return imgSrc !== undefined ? _jsx("img", { src: imgSrc, width: width, height: height, alt: "Graph" }) : null;
+};

package/lib/utils/hooks.js

@@ -1,15 +1,15 @@
 import { isEqual } from 'lodash';
 import { useEffect, useRef } from 'react';
-function deepCompareEquals(a, b) {
+const deepCompareEquals = (a, b) => {
     return isEqual(a, b);
-}
-function useDeepCompareMemoize(value) {
+};
+const useDeepCompareMemoize = (value) => {
     const ref = useRef();
     if (!deepCompareEquals(value, ref.current)) {
         ref.current = value;
     }
     return ref.current;
-}
+};
 export const useDeepCompareEffect = (callback, dependencies) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(callback, dependencies.map(useDeepCompareMemoize));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "0.3.8-e5dee203",
+  "version": "0.3.9-381e4a0c",
   "main": "lib/index.js",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -27,18 +27,22 @@
     "lib"
   ],
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^16.3.0",
     "@types/lodash": "4.14.202",
     "@types/react": "^18.2.58",
-    "babel-eslint": "^10.1.0"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "0.3.8-e5dee203",
-    "@neo4j-nvl/interaction-handlers": "0.3.8-e5dee203",
-    "lodash": "4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@neo4j-nvl/base": "0.3.9-381e4a0c",
+    "@neo4j-nvl/interaction-handlers": "0.3.9-381e4a0c",
+    "lodash": "4.17.21"
   },
-  "stableVersion": "0.3.8"
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "stableVersion": "0.3.9"
 }