Merge pull request #4358 from xyflow/next

React Flow 12.0.0-next.21 & Svelte Flow 0.1.6

examples/react/src/examples/DragNDrop/index.tsx

@@ -77,6 +77,7 @@ const DnDFlow = () => {
             onInit={onInit}
             onDrop={onDrop}
             onDragOver={onDragOver}
+            nodeOrigin={nodeOrigin}
           >
             <Controls />
           </ReactFlow>

packages/react/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @xyflow/react
 
+## 12.0.0-next.21
+
+- fix node origin bug
+
 ## 12.0.0-next.20
 
 - add `updateEdge` and `updateEdgeData` helpers to `useReactFlow`

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/react",
-  "version": "12.0.0-next.20",
+  "version": "12.0.0-next.21",
   "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
   "keywords": [
     "react",

packages/svelte/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @xyflow/svelte
 
+## 0.1.6
+
+- fix node origin bug
+
 ## 0.1.5
 
 - prevent zooming on mobile if zoomOnPinch is false

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "svelte",

packages/system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/system",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "xyflow core system that powers React Flow and Svelte Flow.",
   "keywords": [
     "node-based UI",

packages/system/src/utils/dom.ts

@@ -74,8 +74,8 @@ export const getHandleBounds = (
   const handlesArray = Array.from(handles) as HTMLDivElement[];
 
   const nodeOffset = {
-    x: nodeBounds.left - nodeBounds.width * nodeOrigin[0],
-    y: nodeBounds.top - nodeBounds.height * nodeOrigin[1],
+    x: nodeBounds.left + nodeBounds.width * nodeOrigin[0],
+    y: nodeBounds.top + nodeBounds.height * nodeOrigin[1],
   };
 
   return handlesArray.map((handle): HandleElement => {