@neo4j-nvl/react 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.2.1] - 2026-07-28
+
+This 1.2.1 patch release contains several fixes and accessibility improvements.
+
+### Added
+* Outline when the canvas is focused while using the keyboard interaction handlers.
+
+### Changed
+* Renamed links in README from Explore to Neo4j Bloom.
+
+### Fixed
+* Aligned padding on svg and png export.
+* Aligned start behaviour of box and lasso select interaction handlers. 
+* Fixed static image wrapper React component returning incorrect height when using SVG format.
+* Fixed self-referencing relationship captions being misplaced on downward curves.
+
 ## [1.2.0] - 2026-05-27
 
 This 1.2.0 release introduces a new keyboard interaction handler and SVG support for the static image wrapper React component. It also includes several performance improvements for clustering and text/icon rendering, as well as several bug fixes.

package/README.md

@@ -1,6 +1,6 @@
 # Neo4j Visualization Library
 
-Welcome to the Neo4j Visualization Library, NVL for short. NVL is a collection of libraries that can be used to build custom graph visualizations like those used in [Neo4j Bloom and Explore(powered by Bloom)](https://neo4j.com/product/bloom/). NVL is written in TypeScript and can be used in any JavaScript project. This package contains React components that make it easier to use NVL within a React application. If you want to use NVL with a framework other than React or want to build your own React wrapper, you can do so by using the [NVL base library](https://www.npmjs.com/package/@neo4j-nvl/base).
+Welcome to the Neo4j Visualization Library, NVL for short. NVL is a collection of libraries that can be used to build custom graph visualizations like those used in [Neo4j Bloom](https://neo4j.com/product/bloom/). NVL is written in TypeScript and can be used in any JavaScript project. This package contains React components that make it easier to use NVL within a React application. If you want to use NVL with a framework other than React or want to build your own React wrapper, you can do so by using the [NVL base library](https://www.npmjs.com/package/@neo4j-nvl/base).
 
 ## Consuming the library
 

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

@@ -9,9 +9,15 @@ export interface BasicReactWrapperProps {
     nodes: Node[];
     /** The rels of the graph of type Relationship[] */
     rels: Relationship[];
-    /** The layout, can be 'forceDirected' or 'hierarchical' */
+    /**
+     * The layout, can be 'forceDirected' or 'hierarchical'
+     * @deprecated Use the layout property in nvlOptions instead. This property will be removed in a future version.
+     */
     layout?: Layout;
-    /** Options for the current layout */
+    /**
+     * Options for the current layout
+     * @deprecated Use the layoutOptions property in nvlOptions instead. This property will be removed in a future version.
+     */
     layoutOptions?: LayoutOptions;
     /** an Object containing functions for callbacks on certain actions */
     nvlCallbacks?: ExternalCallbacks;

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

@@ -24,8 +24,8 @@ export const StaticPictureWrapper = ({ nodes, rels, nvlOptions = {}, width = 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`;
+        div.style.width = `${width}px`;
+        div.style.height = `${height}px`;
         const myNvl = new NVL(div, nodes, rels, nvlOptions, {
             onLayoutDone: () => {
                 myNvl.fit(myNvl.getNodes().map((n) => n.id));
@@ -53,5 +53,5 @@ export const StaticPictureWrapper = ({ nodes, rels, nvlOptions = {}, width = 500
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [nodes, rels, width, height, format]);
-    return imgSrc !== undefined ? _jsx("img", { src: imgSrc, width: width, height: height, alt: "Graph" }) : null;
+    return imgSrc !== undefined ? (_jsx("img", { src: imgSrc, width: width, height: height, style: { display: 'block', width, height, objectFit: 'contain' }, alt: "Graph" })) : null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "lib/index.js",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -36,8 +36,8 @@
     "react-dom": "19.2.1"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "1.2.0",
-    "@neo4j-nvl/interaction-handlers": "1.2.0",
+    "@neo4j-nvl/base": "1.2.1",
+    "@neo4j-nvl/interaction-handlers": "1.2.1",
     "lodash": "4.18.1"
   },
   "peerDependencies": {