feat(svelte): add node option 'origin'

packages/svelte/src/lib/actions/drag/utils.ts

@@ -73,6 +73,7 @@ export function calcNextPosition(
   if (node.extent === 'parent') {
     if (node.parentNode && node.width && node.height) {
       const parent = nodes.find((n) => n.id === node.parentNode)!;
+      const parentOrigin = parent.origin || nodeOrigin;
       const { x: parentX, y: parentY } = parent.positionAbsolute!;
       currentExtent =
         parent &&
@@ -81,10 +82,10 @@ export function calcNextPosition(
         isNumeric(parent.width) &&
         isNumeric(parent.height)
           ? [
-              [parentX + node.width * nodeOrigin[0], parentY + node.height * nodeOrigin[1]],
+              [parentX + node.width * parentOrigin[0], parentY + node.height * parentOrigin[1]],
               [
-                parentX + parent.width! - node.width + node.width * nodeOrigin[0],
+                parentX + parent.width! - node.width + node.width * parentOrigin[0],
-                parentY + parent.height! - node.height + node.height * nodeOrigin[1]
+                parentY + parent.height! - node.height + node.height * parentOrigin[1]
               ]
             ]
           : currentExtent;

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -5,10 +5,10 @@
   import { Selection } from '$lib/components/Selection';
   import drag from '$lib/actions/drag';
 
-  const { selectionRectMode, nodes, nodeOrigin, transform, updateNodePositions } = useStore();
+  const { selectionRectMode, nodes, transform, updateNodePositions } = useStore();
 
   $: selectedNodes = $nodes.filter((n) => n.selected);
-  $: rect = getRectOfNodes(selectedNodes, $nodeOrigin);
+  $: rect = getRectOfNodes(selectedNodes);
 </script>
 
 {#if selectedNodes && $selectionRectMode === 'nodes'}

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -5,7 +5,7 @@
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
 
-  const { nodes, nodeOrigin, updateNodeDimensions } = useStore();
+  const { nodes, updateNodeDimensions } = useStore();
 
   const resizeObserver: ResizeObserver | null =
     typeof ResizeObserver === 'undefined'
@@ -31,7 +31,7 @@
       y: node.positionAbsolute?.y ?? 0,
       width: node.width ?? 0,
       height: node.height ?? 0,
-      origin: $nodeOrigin
+      origin: node.origin
     })}
     <NodeWrapper
       id={node.id}

packages/svelte/src/lib/store/edges-layouted.ts

@@ -1,7 +1,8 @@
 import { derived } from 'svelte/store';
 import { Position } from '@reactflow/system';
+import { getHandle } from '@reactflow/edge-utils';
 
-import { getEdgePositions, getHandle, getNodeData } from '$lib/container/EdgeRenderer/utils';
+import { getEdgePositions, getNodeData } from '$lib/container/EdgeRenderer/utils';
 import type { EdgeLayouted } from '$lib/types';
 import type { SvelteFlowStoreState } from './types';
 
@@ -26,6 +27,8 @@ export function getEdgesLayouted(store: SvelteFlowStoreState) {
         const sourcePosition = sourceHandle?.position || Position.Bottom;
         const targetPosition = targetHandle?.position || Position.Top;
 
+        console.log(sourceNodeRect);
+
         if (!sourceHandle || !targetHandle) {
           return null;
         }

packages/svelte/src/lib/store/index.ts

@@ -14,10 +14,11 @@ import {
   fitView as fitViewUtil,
   getD3Transition,
   getDimensions,
-  getElementsToRemove
+  getElementsToRemove,
+  getHandleBounds
 } from '@reactflow/utils';
 
-import { getHandleBounds, addEdge as addEdgeUtil } from '$lib/utils';
+import { addEdge as addEdgeUtil } from '$lib/utils';
 import type { EdgeTypes, NodeTypes, Node, Edge, ConnectionData } from '$lib/types';
 import { getEdgesLayouted } from './edges-layouted';
 import { getConnectionPath } from './connection-path';
@@ -104,8 +105,8 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
           node[internalsSymbol] = {
             ...node[internalsSymbol],
             handleBounds: {
-              source: getHandleBounds('.source', update.nodeElement, zoom),
+              source: getHandleBounds('.source', update.nodeElement, zoom, node.origin),
-              target: getHandleBounds('.target', update.nodeElement, zoom)
+              target: getHandleBounds('.target', update.nodeElement, zoom, node.origin)
             }
           };
           node.width = dimensions.width;
@@ -176,7 +177,7 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
         maxZoom: 2,
         d3Selection,
         d3Zoom,
-        nodeOrigin: get(store.nodeOrigin)
+        nodeOrigin: [0, 0]
       },
       {}
     );

packages/svelte/src/lib/store/initial-store.ts

@@ -6,8 +6,7 @@ import {
   ConnectionMode,
   ConnectionLineType,
   type SelectionRect,
-  type Transform,
+  type Transform
-  type NodeOrigin
 } from '@reactflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -49,7 +48,6 @@ export const initialStoreState = {
   maxZoom: writable<number>(2),
   fitViewOnInit: writable<boolean>(false),
   fitViewOnInitDone: writable<boolean>(false),
-  nodeOrigin: writable<NodeOrigin>([0, 0]),
   d3: writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>({
     zoom: null,
     selection: null

packages/svelte/src/routes/usesvelteflow/+page.svelte

@@ -26,7 +26,7 @@
       data: { label: 'Output Node' },
       position: { x: 300, y: 150 }
     }
-  ]);
+  ], { origin: [0.5, 0.5] });
 
   const edges = createEdges([
     {