@reactflow/node-toolbar - npm Package Compare versions

Comparing version 1.1.11 to 1.2.0

dist/esm/index.js

@@ -31,29 +31,41 @@ import { jsx } from 'react/jsx-runtime';
 });
-function getTransform(nodeRect, transform, position, offset) {
+function getTransform(nodeRect, transform, position, offset, align) {
+    let alignmentOffset = 0.5;
+    if (align === 'start') {
+        alignmentOffset = 0;
+    }
+    else if (align === 'end') {
+        alignmentOffset = 1;
+    }
     // position === Position.Top
-    let xPos = (nodeRect.x + nodeRect.width / 2) * transform[2] + transform[0];
-    let yPos = nodeRect.y * transform[2] + transform[1] - offset;
-    let xShift = -50;
-    let yShift = -100;
+    // we set the x any y position of the toolbar based on the nodes position
+    let pos = [
+        (nodeRect.x + nodeRect.width * alignmentOffset) * transform[2] + transform[0],
+        nodeRect.y * transform[2] + transform[1] - offset,
+    ];
+    // and than shift it based on the alignment. The shift values are in %.
+    let shift = [-100 * alignmentOffset, -100];
     switch (position) {
         case Position.Right:
-            xPos = (nodeRect.x + nodeRect.width) * transform[2] + transform[0] + offset;
-            yPos = (nodeRect.y + nodeRect.height / 2) * transform[2] + transform[1];
-            xShift = 0;
-            yShift = -50;
+            pos = [
+                (nodeRect.x + nodeRect.width) * transform[2] + transform[0] + offset,
+                (nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
+            ];
+            shift = [0, -100 * alignmentOffset];
             break;
         case Position.Bottom:
-            yPos = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset;
-            yShift = 0;
+            pos[1] = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset;
+            shift[1] = 0;
             break;
         case Position.Left:
-            xPos = nodeRect.x * transform[2] + transform[0] - offset;
-            yPos = (nodeRect.y + nodeRect.height / 2) * transform[2] + transform[1];
-            xShift = -100;
-            yShift = -50;
+            pos = [
+                nodeRect.x * transform[2] + transform[0] - offset,
+                (nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
+            ];
+            shift = [-100, -100 * alignmentOffset];
             break;
     }
-    return `translate(${xPos}px, ${yPos}px) translate(${xShift}%, ${yShift}%)`;
+    return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
 }
-function NodeToolbar({ nodeId, children, className, style, isVisible, position = Position.Top, offset = 10, ...rest }) {
+function NodeToolbar({ nodeId, children, className, style, isVisible, position = Position.Top, offset = 10, align = 'center', ...rest }) {
     const contextNodeId = useNodeId();
@@ -80,3 +92,3 @@ const nodesSelector = useCallback((state) => {
         position: 'absolute',
-        transform: getTransform(nodeRect, transform, position, offset),
+        transform: getTransform(nodeRect, transform, position, offset, align),
         zIndex,
@@ -83,0 +95,0 @@ ...style,

dist/esm/NodeToolbar.d.ts

 /// <reference types="react" />
 import { NodeToolbarProps } from './types';
-declare function NodeToolbar({ nodeId, children, className, style, isVisible, position, offset, ...rest }: NodeToolbarProps): JSX.Element | null;
+declare function NodeToolbar({ nodeId, children, className, style, isVisible, position, offset, align, ...rest }: NodeToolbarProps): JSX.Element | null;
 export default NodeToolbar;
 //# sourceMappingURL=NodeToolbar.d.ts.map

dist/esm/types.d.ts

@@ -8,3 +8,5 @@ import { Position } from '@reactflow/core';
     offset?: number;
+    align?: Align;
 };
+export type Align = 'center' | 'start' | 'end';
 //# sourceMappingURL=types.d.ts.map

dist/umd/NodeToolbar.d.ts

 /// <reference types="react" />
 import { NodeToolbarProps } from './types';
-declare function NodeToolbar({ nodeId, children, className, style, isVisible, position, offset, ...rest }: NodeToolbarProps): JSX.Element | null;
+declare function NodeToolbar({ nodeId, children, className, style, isVisible, position, offset, align, ...rest }: NodeToolbarProps): JSX.Element | null;
 export default NodeToolbar;
 //# sourceMappingURL=NodeToolbar.d.ts.map

dist/umd/types.d.ts

@@ -8,3 +8,5 @@ import { Position } from '@reactflow/core';
     offset?: number;
+    align?: Align;
 };
+export type Align = 'center' | 'start' | 'end';
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@reactflow/node-toolbar",
-  "version": "1.1.11",
+  "version": "1.2.0",
   "description": "A toolbar component for React Flow that can be attached to a node.",
@@ -33,3 +33,3 @@ "keywords": [
   "dependencies": {
-    "@reactflow/core": "11.7.0",
+    "@reactflow/core": "11.7.1",
     "classcat": "^5.0.3",
@@ -36,0 +36,0 @@ "zustand": "^4.3.1"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

143493

increased by0.73%

Lines of code

652

increased by2.68%

Dependency changes

• + Added@reactflow/core@11.7.1(transitive)

• - Removed@reactflow/core@11.7.0(transitive)

• Updated@reactflow/core@11.7.1