Merge pull request #4193 from xyflow/next

React Flow 12.0.0-next.15

examples/react/package.json

@@ -14,13 +14,16 @@
     "test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.3",
     "@xyflow/react": "workspace:*",
     "classcat": "^5.0.4",
     "dagre": "^0.8.5",
     "localforage": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.1.1",
     "react-router-dom": "^6.18.0",
+    "redux": "^5.0.1",
     "zustand": "^4.4.6"
   },
   "devDependencies": {

examples/react/src/App/routes.ts

@@ -51,6 +51,7 @@ import UseNodesData from '../examples/UseNodesData';
 import UseHandleConnections from '../examples/UseHandleConnections';
 import AddNodeOnEdgeDrop from '../examples/AddNodeOnEdgeDrop';
 import DevTools from '../examples/DevTools';
+import Redux from '../examples/Redux';
 
 export interface IRoute {
   name: string;
@@ -314,6 +315,11 @@ const routes: IRoute[] = [
     path: 'useupdatenodeinternals',
     component: UseUpdateNodeInternals,
   },
+  {
+    name: 'redux',
+    path: 'redux',
+    component: Redux,
+  },
   {
     name: 'Validation',
     path: 'validation',

examples/react/src/examples/NodeResizer/index.tsx

@@ -185,6 +185,7 @@ const CustomNodeFlow = () => {
       maxZoom={5}
       snapToGrid={snapToGrid}
       fitView
+      onlyRenderVisibleElements
     >
       <Controls />
       <Panel position="bottom-right">

examples/react/src/examples/Redux/index.tsx

@@ -0,0 +1,30 @@
+import { ReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+import { useDispatch, useSelector, Provider } from 'react-redux';
+
+import { onNodesChange, onEdgesChange, setSelectedNodesAndEdges, store } from './state';
+
+const OverviewFlow = () => {
+  const dispatch = useDispatch();
+  const nodes = useSelector((state) => state.myApplication.nodes);
+  const edges = useSelector((state) => state.myApplication.edges);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={(e) => dispatch(onNodesChange(e))}
+      onEdgesChange={(e) => dispatch(onEdgesChange(e))}
+      onSelectionChange={(e) => dispatch(setSelectedNodesAndEdges(e))}
+      fitView
+      attributionPosition="top-right"
+    />
+  );
+};
+
+export default () => (
+  <Provider store={store}>
+    <OverviewFlow />
+  </Provider>
+);

examples/react/src/examples/Redux/initial-elements.tsx

@@ -0,0 +1,98 @@
+import { MarkerType, type Node, type Edge } from '@xyflow/react';
+
+export const nodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: {
+      label: 'hey',
+    },
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    data: {
+      label: 'default node',
+    },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    data: {
+      label: 'custom style',
+    },
+    position: { x: 400, y: 100 },
+    style: {
+      background: '#D6D5E6',
+      color: '#333',
+      border: '1px solid #222138',
+      width: 180,
+    },
+  },
+  {
+    id: '4',
+    position: { x: 250, y: 200 },
+    data: {
+      label: 'Another default node',
+    },
+  },
+  {
+    id: '5',
+    data: {
+      label: 'Node id: 5',
+    },
+    position: { x: 250, y: 325 },
+  },
+  {
+    id: '6',
+    type: 'output',
+    data: {
+      label: 'output',
+    },
+    position: { x: 100, y: 480 },
+  },
+  {
+    id: '7',
+    type: 'output',
+    data: { label: 'Another output node' },
+    position: { x: 400, y: 450 },
+  },
+];
+
+export const edges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
+  { id: 'e1-3', source: '1', target: '3' },
+  {
+    id: 'e3-4',
+    source: '3',
+    target: '4',
+    animated: true,
+    label: 'animated edge',
+  },
+  {
+    id: 'e4-5',
+    source: '4',
+    target: '5',
+    label: 'edge with arrow head',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    type: 'smoothstep',
+    label: 'smooth step edge',
+  },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    type: 'step',
+    style: { stroke: '#f6ab6c' },
+    label: 'a step edge',
+    animated: true,
+    labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
+  },
+];

examples/react/src/examples/Redux/state.ts

@@ -0,0 +1,59 @@
+import { createSlice, configureStore } from '@reduxjs/toolkit';
+import { applyNodeChanges, applyEdgeChanges } from '@xyflow/react';
+import { nodes, edges } from './initial-elements';
+
+const initialState = {
+  nodes,
+  edges,
+  selectedNodes: [],
+  selectedEdges: [],
+};
+
+const setNodesReducer = (state, action) => {
+  state.nodes = action.payload;
+};
+
+const setEdgesReducer = (state, action) => {
+  state.edges = action.payload;
+};
+
+const onNodesChangeReducer = (state, action) => {
+  const a = applyNodeChanges(action.payload, state.nodes);
+  state.nodes = a;
+};
+
+const onEdgesChangeReducer = (state, action) => {
+  const a = applyEdgeChanges(action.payload, state.edges);
+  state.edges = a;
+};
+
+const setSelectedNodesAndEdgesReducer = (state, action) => {
+  state.selectedNodes = action.payload.nodes;
+  state.selectedEdges = action.payload.edges;
+};
+
+const setSelectedNodesReducer = (state, action) => {
+  state.selectedNodes = action.payload;
+};
+
+const MyApplicationSlice = createSlice({
+  name: 'MyApplication',
+  initialState,
+  reducers: {
+    setNodes: setNodesReducer,
+    setEdges: setEdgesReducer,
+    onNodesChange: onNodesChangeReducer,
+    onEdgesChange: onEdgesChangeReducer,
+    setSelectedNodesAndEdges: setSelectedNodesAndEdgesReducer,
+    setSelectedNodes: setSelectedNodesReducer,
+  },
+});
+
+export const { setNodes, setEdges, onNodesChange, onEdgesChange, setSelectedNodesAndEdges, setSelectedNodes } =
+  MyApplicationSlice.actions;
+
+export const store = configureStore({
+  reducer: {
+    myApplication: MyApplicationSlice.reducer,
+  },
+});

examples/svelte/src/routes/examples/reset/+page.svelte

@@ -1,14 +1,6 @@
 <script lang="ts">
 	import { writable } from 'svelte/store';
-	import {
+	import { SvelteFlow, Controls, Background, MiniMap, type Node, type Edge } from '@xyflow/svelte';
-		SvelteFlow,
-		Controls,
-		Background,
-		MiniMap,
-		type Node,
-		type Edge,
-		type NodeTypes
-	} from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 

packages/react/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @xyflow/react
 
+## 12.0.0-next.15
+
+## Patch changes
+
+- re-observe nodes when using `onlyRenderVisibleElements={true}`
+- use correct positions for intersection helpers
+- fix minimap interaction for touch devices
+- pass user nodes to `onSelectionChange` instead of internal ones to work with Redux
+- call `onEnd` in XYResizer thanks @tonyf
+- cleanup `getPositionWithOrigin` usage
+- use `setAttributes` flag for dimension change when `width`/`height` should be set
+- use `replace: false` as the default for `updateNode` function
+
 ## 12.0.0-next.14
 
 ## Patch changes

packages/react/package.json

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

packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx

@@ -86,7 +86,7 @@ function NodeComponentWrapperInner<NodeType extends Node>({
 }) {
   const { node, x, y } = useStore((s) => {
     const node = s.nodeLookup.get(id) as InternalNode<NodeType>;
-    const { x, y } = getNodePositionWithOrigin(node, node?.origin || nodeOrigin).positionAbsolute;
+    const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
 
     return {
       node,

packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx

@@ -9,6 +9,10 @@ import {
   type NodeChange,
   type NodeDimensionChange,
   type NodePositionChange,
+  handleExpandParent,
+  evaluateAbsolutePosition,
+  ParentExpandChild,
+  XYPosition,
 } from '@xyflow/system';
 
 import { useStoreApi } from '../../hooks/useStore';
@@ -62,28 +66,54 @@ function ResizeControl({
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
-          const { triggerNodeChanges } = store.getState();
+          const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState();
 
           const changes: NodeChange[] = [];
+          const nextPosition = { x: change.x, y: change.y };
 
-          if (change.isXPosChange || change.isYPosChange) {
+          const node = nodeLookup.get(id);
-            const positionChange: NodePositionChange = {
+          if (node && node.expandParent && node.parentId) {
-              id,
+            const child: ParentExpandChild = {
-              type: 'position',
+              id: node.id,
-              position: {
+              parentId: node.parentId,
-                x: change.x,
+              rect: {
-                y: change.y,
+                width: change.width ?? node.measured.width!,
+                height: change.height ?? node.measured.height!,
+                ...evaluateAbsolutePosition(
+                  {
+                    x: change.x ?? node.position.x,
+                    y: change.y ?? node.position.y,
+                  },
+                  node.parentId,
+                  nodeLookup,
+                  node.origin ?? nodeOrigin
+                ),
               },
             };
 
+            const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
+            changes.push(...parentExpandChanges);
+
+            // when the parent was expanded by the child node, its position will be clamped at 0,0
+            nextPosition.x = change.x ? Math.max(0, change.x) : undefined;
+            nextPosition.y = change.y ? Math.max(0, change.y) : undefined;
+          }
+
+          if (nextPosition.x !== undefined && nextPosition.y !== undefined) {
+            const positionChange: NodePositionChange = {
+              id,
+              type: 'position',
+              position: { ...(nextPosition as XYPosition) },
+            };
             changes.push(positionChange);
           }
 
-          if (change.isWidthChange || change.isHeightChange) {
+          if (change.width !== undefined && change.height !== undefined) {
             const dimensionChange: NodeDimensionChange = {
               id,
               type: 'dimensions',
               resizing: true,
+              setAttributes: true,
               dimensions: {
                 width: change.width,
                 height: change.height,

packages/react/src/components/NodeWrapper/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type MouseEvent, type KeyboardEvent } from 'react';
+import { type MouseEvent, type KeyboardEvent } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import {
@@ -18,6 +18,7 @@ import { useDrag } from '../../hooks/useDrag';
 import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
 import { handleNodeClick } from '../Nodes/utils';
 import { arrowKeyDiffs, builtinNodeTypes, getNodeInlineStyleDimensions } from './utils';
+import { useNodeObserver } from './useNodeObserver';
 import type { InternalNode, Node, NodeWrapperProps } from '../../types';
 
 export function NodeWrapper<NodeType extends Node>({
@@ -42,21 +43,14 @@ export function NodeWrapper<NodeType extends Node>({
   nodeOrigin,
   onError,
 }: NodeWrapperProps<NodeType>) {
-  const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
+  const { node, internals, isParent } = useStore((s) => {
     const node = s.nodeLookup.get(id)! as InternalNode<NodeType>;
-
+    const isParent = s.parentLookup.has(id);
-    const positionAbsolute = nodeExtent
-      ? clampPosition(node.internals.positionAbsolute, nodeExtent)
-      : node.internals.positionAbsolute || { x: 0, y: 0 };
 
     return {
       node,
-      // we are mutating positionAbsolute, z and isParent attributes for sub flows
+      internals: node.internals,
-      // so we we need to force a re-render when some change
+      isParent,
-      positionAbsoluteX: positionAbsolute.x,
-      positionAbsoluteY: positionAbsolute.y,
-      zIndex: node.internals.z,
-      isParent: node.internals.isParent,
     };
   }, shallow);
 
@@ -75,58 +69,8 @@ export function NodeWrapper<NodeType extends Node>({
   const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
 
   const store = useStoreApi();
-  const nodeRef = useRef<HTMLDivElement>(null);
+  const hasDimensions = nodeHasDimensions(node);
-  const prevSourcePosition = useRef(node.sourcePosition);
+  const nodeRef = useNodeObserver({ node, nodeType, hasDimensions, resizeObserver });
-  const prevTargetPosition = useRef(node.targetPosition);
-  const prevType = useRef(nodeType);
-
-  const nodeDimensions = getNodeDimensions(node);
-  const inlineDimensions = getNodeInlineStyleDimensions(node);
-  const initialized = nodeHasDimensions(node);
-  const hasHandleBounds = !!node.internals.handleBounds;
-
-  const moveSelectedNodes = useMoveSelectedNodes();
-
-  useEffect(() => {
-    const currNode = nodeRef.current;
-
-    return () => {
-      if (currNode) {
-        resizeObserver?.unobserve(currNode);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (nodeRef.current && !node.hidden) {
-      const currNode = nodeRef.current;
-      if (!initialized || !hasHandleBounds) {
-        resizeObserver?.unobserve(currNode);
-        resizeObserver?.observe(currNode);
-      }
-    }
-  }, [node.hidden, initialized, hasHandleBounds]);
-
-  useEffect(() => {
-    // when the user programmatically changes the source or handle position, we re-initialize the node
-    const typeChanged = prevType.current !== nodeType;
-    const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
-    const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
-
-    if (nodeRef.current && (typeChanged || sourcePosChanged || targetPosChanged)) {
-      if (typeChanged) {
-        prevType.current = nodeType;
-      }
-      if (sourcePosChanged) {
-        prevSourcePosition.current = node.sourcePosition;
-      }
-      if (targetPosChanged) {
-        prevTargetPosition.current = node.targetPosition;
-      }
-      store.getState().updateNodeInternals(new Map([[id, { id, nodeElement: nodeRef.current, force: true }]]));
-    }
-  }, [id, nodeType, node.sourcePosition, node.targetPosition]);
-
   const dragging = useDrag({
     nodeRef,
     disabled: node.hidden || !isDraggable,
@@ -135,14 +79,20 @@ export function NodeWrapper<NodeType extends Node>({
     nodeId: id,
     isSelectable,
   });
+  const moveSelectedNodes = useMoveSelectedNodes();
 
   if (node.hidden) {
     return null;
   }
 
-  const positionAbsoluteOrigin = getPositionWithOrigin({
+  const nodeDimensions = getNodeDimensions(node);
-    x: positionAbsoluteX,
+  const inlineDimensions = getNodeInlineStyleDimensions(node);
-    y: positionAbsoluteY,
+  const clampedPosition = nodeExtent
+    ? clampPosition(internals.positionAbsolute, nodeExtent)
+    : internals.positionAbsolute;
+
+  const positionWithOrigin = getPositionWithOrigin({
+    ...clampedPosition,
     ...nodeDimensions,
     origin: node.origin || nodeOrigin,
   });
@@ -190,7 +140,7 @@ export function NodeWrapper<NodeType extends Node>({
       store.setState({
         ariaLiveMessage: `Moved selected node ${event.key
           .replace('Arrow', '')
-          .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
+          .toLowerCase()}. New position, x: ${~~clampedPosition.x}, y: ${~~clampedPosition.y}`,
       });
 
       moveSelectedNodes({
@@ -220,10 +170,10 @@ export function NodeWrapper<NodeType extends Node>({
       ])}
       ref={nodeRef}
       style={{
-        zIndex,
+        zIndex: internals.z,
-        transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
+        transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
         pointerEvents: hasPointerEvents ? 'all' : 'none',
-        visibility: initialized ? 'visible' : 'hidden',
+        visibility: hasDimensions ? 'visible' : 'hidden',
         ...node.style,
         ...inlineDimensions,
       }}
@@ -246,15 +196,15 @@ export function NodeWrapper<NodeType extends Node>({
           id={id}
           data={node.data}
           type={nodeType}
-          positionAbsoluteX={positionAbsoluteX}
+          positionAbsoluteX={clampedPosition.x}
-          positionAbsoluteY={positionAbsoluteY}
+          positionAbsoluteY={clampedPosition.y}
           selected={node.selected}
           isConnectable={isConnectable}
           sourcePosition={node.sourcePosition}
           targetPosition={node.targetPosition}
           dragging={dragging}
           dragHandle={node.dragHandle}
-          zIndex={zIndex}
+          zIndex={internals.z}
           {...nodeDimensions}
         />
       </Provider>

packages/react/src/components/NodeWrapper/useNodeObserver.ts

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from 'react';
+
+import type { InternalNode } from '../../types';
+import { useStoreApi } from '../../hooks/useStore';
+
+/**
+ * Hook to handle the resize observation + internal updates for the passed node.
+ *
+ * @internal
+ * @returns nodeRef - reference to the node element
+ */
+export function useNodeObserver({
+  node,
+  nodeType,
+  hasDimensions,
+  resizeObserver,
+}: {
+  node: InternalNode;
+  nodeType: string;
+  hasDimensions: boolean;
+  resizeObserver: ResizeObserver | null;
+}) {
+  const store = useStoreApi();
+  const nodeRef = useRef<HTMLDivElement | null>(null);
+  const observedNode = useRef<HTMLDivElement | null>(null);
+  const prevSourcePosition = useRef(node.sourcePosition);
+  const prevTargetPosition = useRef(node.targetPosition);
+  const prevType = useRef(nodeType);
+  const isInitialized = hasDimensions && !!node.internals.handleBounds && !node.hidden;
+
+  useEffect(() => {
+    if (nodeRef.current && (!isInitialized || observedNode.current !== nodeRef.current)) {
+      if (observedNode.current) {
+        resizeObserver?.unobserve(observedNode.current);
+      }
+      resizeObserver?.observe(nodeRef.current);
+      observedNode.current = nodeRef.current;
+    }
+  }, [isInitialized]);
+
+  useEffect(() => {
+    return () => {
+      if (observedNode.current) {
+        resizeObserver?.unobserve(observedNode.current);
+        observedNode.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (nodeRef.current) {
+      // when the user programmatically changes the source or handle position, we need to update the internals
+      // to make sure the edges are updated correctly
+      const typeChanged = prevType.current !== nodeType;
+      const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
+      const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
+
+      if (typeChanged || sourcePosChanged || targetPosChanged) {
+        prevType.current = nodeType;
+        prevSourcePosition.current = node.sourcePosition;
+        prevTargetPosition.current = node.targetPosition;
+
+        store
+          .getState()
+          .updateNodeInternals(new Map([[node.id, { id: node.id, nodeElement: nodeRef.current, force: true }]]));
+      }
+    }
+  }, [node.id, nodeType, node.sourcePosition, node.targetPosition]);
+
+  return nodeRef;
+}

packages/react/src/components/NodesSelection/index.tsx

@@ -5,13 +5,13 @@
 import { useRef, useEffect, type MouseEvent, type KeyboardEvent } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { getNodesBounds } from '@xyflow/system';
+import { getInternalNodesBounds } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useDrag } from '../../hooks/useDrag';
 import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
 import { arrowKeyDiffs } from '../NodeWrapper/utils';
-import type { InternalNode, Node, ReactFlowState } from '../../types';
+import type { Node, ReactFlowState } from '../../types';
 
 export type NodesSelectionProps<NodeType> = {
   onSelectionContextMenu?: (event: MouseEvent, nodes: NodeType[]) => void;
@@ -20,14 +20,10 @@ export type NodesSelectionProps<NodeType> = {
 };
 
 const selector = (s: ReactFlowState) => {
-  const selectedNodes: InternalNode[] = [];
+  const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
-  for (const [, node] of s.nodeLookup) {
+    nodeOrigin: s.nodeOrigin,
-    if (node.selected) {
+    filter: (node) => !!node.selected,
-      selectedNodes.push(node);
+  });
-    }
-  }
-
-  const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
 
   return {
     width,

packages/react/src/components/ReactFlowProvider/index.tsx

@@ -1,22 +1,10 @@
-import { useRef, type ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
-import { type StoreApi } from 'zustand';
-import { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
 
-import { Provider } from '../../contexts/RFStoreContext';
+import { Provider } from '../../contexts/StoreContext';
-import { createRFStore } from '../../store';
+import { createStore } from '../../store';
-import type { ReactFlowState, Node, Edge } from '../../types';
+import type { Node, Edge } from '../../types';
 
-export function ReactFlowProvider({
+export type ReactFlowProviderProps = {
-  children,
-  initialNodes,
-  initialEdges,
-  defaultNodes,
-  defaultEdges,
-  initialWidth,
-  initialHeight,
-  fitView,
-}: {
-  children: ReactNode;
   initialNodes?: Node[];
   initialEdges?: Edge[];
   defaultNodes?: Node[];
@@ -24,19 +12,30 @@ export function ReactFlowProvider({
   initialWidth?: number;
   initialHeight?: number;
   fitView?: boolean;
-}) {
+  children: ReactNode;
-  const storeRef = useRef<UseBoundStoreWithEqualityFn<StoreApi<ReactFlowState>> | null>(null);
+};
-  if (!storeRef.current) {
+
-    storeRef.current = createRFStore({
+export function ReactFlowProvider({
-      nodes: initialNodes,
+  initialNodes: nodes,
-      edges: initialEdges,
+  initialEdges: edges,
+  defaultNodes,
+  defaultEdges,
+  initialWidth: width,
+  initialHeight: height,
+  fitView,
+  children,
+}: ReactFlowProviderProps) {
+  const [store] = useState(() =>
+    createStore({
+      nodes,
+      edges,
       defaultNodes,
       defaultEdges,
-      width: initialWidth,
+      width,
-      height: initialHeight,
+      height,
       fitView,
-    });
+    })
-  }
+  );
 
-  return <Provider value={storeRef.current}>{children}</Provider>;
+  return <Provider value={store}>{children}</Provider>;
 }

packages/react/src/components/SelectionListener/index.tsx

@@ -14,10 +14,24 @@ type SelectionListenerProps = {
   onSelectionChange?: OnSelectionChangeFunc;
 };
 
-const selector = (s: ReactFlowState) => ({
+const selector = (s: ReactFlowState) => {
-  selectedNodes: Array.from(s.nodeLookup.values()).filter((n) => n.selected),
+  const selectedNodes = [];
-  selectedEdges: s.edges.filter((e) => e.selected),
+  const selectedEdges = [];
-});
+
+  for (const [, node] of s.nodeLookup) {
+    if (node.selected) {
+      selectedNodes.push(node.internals.userNode);
+    }
+  }
+
+  for (const [, edge] of s.edgeLookup) {
+    if (edge.selected) {
+      selectedEdges.push(edge);
+    }
+  }
+
+  return { selectedNodes, selectedEdges };
+};
 
 type SelectorSlice = ReturnType<typeof selector>;
 

packages/react/src/container/NodeRenderer/useResizeObserver.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useState } from 'react';
 
 import { ReactFlowState } from '../../types';
 import { useStore } from '../../hooks/useStore';
@@ -8,16 +8,13 @@ const selector = (s: ReactFlowState) => s.updateNodeInternals;
 
 export function useResizeObserver() {
   const updateNodeInternals = useStore(selector);
-  const resizeObserverRef = useRef<ResizeObserver>();
+  const [resizeObserver] = useState(() => {
-
-  const resizeObserver = useMemo(() => {
     if (typeof ResizeObserver === 'undefined') {
       return null;
     }
 
-    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+    return new ResizeObserver((entries: ResizeObserverEntry[]) => {
       const updates = new Map<string, InternalNodeUpdate>();
-
       entries.forEach((entry: ResizeObserverEntry) => {
         const id = entry.target.getAttribute('data-id') as string;
         updates.set(id, {
@@ -28,17 +25,13 @@ export function useResizeObserver() {
 
       updateNodeInternals(updates);
     });
-
+  });
-    resizeObserverRef.current = observer;
-
-    return observer;
-  }, []);
 
   useEffect(() => {
     return () => {
-      resizeObserverRef?.current?.disconnect();
+      resizeObserver?.disconnect();
     };
-  }, []);
+  }, [resizeObserver]);
 
   return resizeObserver;
 }

packages/react/src/container/Pane/index.tsx

@@ -69,6 +69,8 @@ export function Pane({
   const prevSelectedNodesCount = useRef<number>(0);
   const prevSelectedEdgesCount = useRef<number>(0);
   const containerBounds = useRef<DOMRect>();
+  const edgeIdLookup = useRef<Map<string, Set<string>>>(new Map());
+
   const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow);
 
   const resetUserSelection = () => {
@@ -96,7 +98,7 @@ export function Pane({
   const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined;
 
   const onMouseDown = (event: ReactMouseEvent): void => {
-    const { resetSelectedElements, domNode } = store.getState();
+    const { resetSelectedElements, domNode, edgeLookup } = store.getState();
     containerBounds.current = domNode?.getBoundingClientRect();
 
     if (
@@ -109,6 +111,13 @@ export function Pane({
       return;
     }
 
+    edgeIdLookup.current = new Map();
+
+    for (const [id, edge] of edgeLookup) {
+      edgeIdLookup.current.set(edge.source, edgeIdLookup.current.get(edge.source)?.add(id) || new Set([id]));
+      edgeIdLookup.current.set(edge.target, edgeIdLookup.current.get(edge.target)?.add(id) || new Set([id]));
+    }
+
     const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
 
     resetSelectedElements();
@@ -130,22 +139,21 @@ export function Pane({
   const onMouseMove = (event: ReactMouseEvent): void => {
     const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
       store.getState();
+
     if (!isSelecting || !containerBounds.current || !userSelectionRect) {
       return;
     }
 
-    store.setState({ userSelectionActive: true, nodesSelectionActive: false });
+    const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
-
+    const { startX, startY } = userSelectionRect;
-    const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
-    const startX = userSelectionRect.startX ?? 0;
-    const startY = userSelectionRect.startY ?? 0;
 
     const nextUserSelectRect = {
-      ...userSelectionRect,
+      startX,
-      x: mousePos.x < startX ? mousePos.x : startX,
+      startY,
-      y: mousePos.y < startY ? mousePos.y : startY,
+      x: mouseX < startX ? mouseX : startX,
-      width: Math.abs(mousePos.x - startX),
+      y: mouseY < startY ? mouseY : startY,
-      height: Math.abs(mousePos.y - startY),
+      width: Math.abs(mouseX - startX),
+      height: Math.abs(mouseY - startY),
     };
 
     const selectedNodes = getNodesInside(
@@ -163,8 +171,10 @@ export function Pane({
     for (const selectedNode of selectedNodes) {
       selectedNodeIds.add(selectedNode.id);
 
-      for (const [edgeId, edge] of edgeLookup) {
+      const edgeIds = edgeIdLookup.current.get(selectedNode.id);
-        if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
+
+      if (edgeIds) {
+        for (const edgeId of edgeIds) {
           selectedEdgeIds.add(edgeId);
         }
       }
@@ -184,6 +194,8 @@ export function Pane({
 
     store.setState({
       userSelectionRect: nextUserSelectRect,
+      userSelectionActive: true,
+      nodesSelectionActive: false,
     });
   };
 

packages/react/src/container/ReactFlow/Wrapper.tsx

@@ -1,6 +1,6 @@
 import { useContext, type ReactNode } from 'react';
 
-import StoreContext from '../../contexts/RFStoreContext';
+import StoreContext from '../../contexts/StoreContext';
 import { ReactFlowProvider } from '../../components/ReactFlowProvider';
 import type { Node, Edge } from '../../types';
 

packages/react/src/contexts/RFStoreContext.ts

@@ -1,8 +0,0 @@
-import { createContext } from 'react';
-
-import { createRFStore } from '../store';
-
-const StoreContext = createContext<ReturnType<typeof createRFStore> | null>(null);
-
-export const Provider = StoreContext.Provider;
-export default StoreContext;

packages/react/src/contexts/StoreContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+import { createStore } from '../store';
+
+const StoreContext = createContext<ReturnType<typeof createStore> | null>(null);
+
+export const Provider = StoreContext.Provider;
+export default StoreContext;

packages/react/src/hooks/useMoveSelectedNodes.ts

@@ -19,7 +19,7 @@ export function useMoveSelectedNodes() {
   const moveSelectedNodes = useCallback((params: { direction: XYPosition; factor: number }) => {
     const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } =
       store.getState();
-    const nodeUpdates = [];
+    const nodeUpdates = new Map();
     const isSelected = selectedAndDraggable(nodesDraggable);
 
     // by default a node moves 5px on each key press
@@ -56,7 +56,7 @@ export function useMoveSelectedNodes() {
       node.position = position;
       node.internals.positionAbsolute = positionAbsolute;
 
-      nodeUpdates.push(node);
+      nodeUpdates.set(node.id, node);
     }
 
     updateNodePositions(nodeUpdates);

packages/react/src/hooks/useReactFlow.ts

@@ -1,5 +1,12 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { getElementsToRemove, getOverlappingArea, isRectObject, nodeToRect, type Rect } from '@xyflow/system';
+import {
+  evaluateAbsolutePosition,
+  getElementsToRemove,
+  getOverlappingArea,
+  isRectObject,
+  nodeToRect,
+  type Rect,
+} from '@xyflow/system';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from './useStore';
@@ -40,10 +47,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
     return edges.map((e) => ({ ...e })) as EdgeType[];
   }, []);
 
-  const getEdge = useCallback<Instance.GetEdge<EdgeType>>((id) => {
+  const getEdge = useCallback<Instance.GetEdge<EdgeType>>((id) => store.getState().edgeLookup.get(id) as EdgeType, []);
-    const { edges = [] } = store.getState();
-    return edges.find((e) => e.id === id) as EdgeType;
-  }, []);
 
   type SetElementsQueue = {
     nodes: (NodeType[] | ((nodes: NodeType[]) => NodeType[]))[];
@@ -223,15 +227,30 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
     []
   );
 
-  const getNodeRect = useCallback(({ id }: { id: string }): Rect | null => {
+  const getNodeRect = useCallback((node: NodeType | { id: string }): Rect | null => {
-    const internalNode = store.getState().nodeLookup.get(id);
+    const { nodeLookup, nodeOrigin } = store.getState();
-    return internalNode ? nodeToRect(internalNode) : null;
+
+    const nodeToUse = isNode<NodeType>(node) ? node : nodeLookup.get(node.id)!;
+    const position = nodeToUse.parentId
+      ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin)
+      : nodeToUse.position;
+
+    const nodeWithPosition = {
+      id: nodeToUse.id,
+      position,
+      width: nodeToUse.measured?.width ?? nodeToUse.width,
+      height: nodeToUse.measured?.height ?? nodeToUse.height,
+      data: nodeToUse.data,
+    };
+
+    return nodeToRect(nodeWithPosition);
   }, []);
 
   const getIntersectingNodes = useCallback<Instance.GetIntersectingNodes<NodeType>>(
     (nodeOrRect, partially = true, nodes) => {
       const isRect = isRectObject(nodeOrRect);
       const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+      const hasNodesOption = nodes !== undefined;
 
       if (!nodeRect) {
         return [];
@@ -244,7 +263,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
           return false;
         }
 
-        const currNodeRect = nodeToRect(n);
+        const currNodeRect = nodeToRect(hasNodesOption ? n : internalNode!);
         const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
         const partiallyVisible = partially && overlappingArea > 0;
 
@@ -272,7 +291,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
   );
 
   const updateNode = useCallback<Instance.UpdateNode<NodeType>>(
-    (id, nodeUpdate, options = { replace: true }) => {
+    (id, nodeUpdate, options = { replace: false }) => {
       setNodes((prevNodes) =>
         prevNodes.map((node) => {
           if (node.id === id) {

packages/react/src/hooks/useStore.ts

@@ -1,10 +1,10 @@
 import { useContext, useMemo } from 'react';
 import { UseBoundStoreWithEqualityFn, useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional';
+import { StoreApi } from 'zustand';
 import { errorMessages } from '@xyflow/system';
 
-import StoreContext from '../contexts/RFStoreContext';
+import StoreContext from '../contexts/StoreContext';
 import type { Edge, Node, ReactFlowState } from '../types';
-import { StoreApi } from 'zustand';
 
 const zustandErrorMessage = errorMessages['error001']();
 
@@ -47,7 +47,6 @@ function useStoreApi<NodeType extends Node = Node, EdgeType extends Edge = Edge>
       getState: store.getState,
       setState: store.setState,
       subscribe: store.subscribe,
-      destroy: store.destroy,
     }),
     [store]
   );

packages/react/src/store/index.ts

@@ -7,17 +7,18 @@ import {
   panBy as panBySystem,
   updateNodeInternals as updateNodeInternalsSystem,
   updateConnectionLookup,
-  handleParentExpand,
+  handleExpandParent,
   NodeChange,
   EdgeSelectionChange,
   NodeSelectionChange,
+  ParentExpandChild,
 } from '@xyflow/system';
 
 import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
 import getInitialState from './initialState';
-import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions, InternalNode } from '../types';
+import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions } from '../types';
 
-const createRFStore = ({
+const createStore = ({
   nodes,
   edges,
   defaultNodes,
@@ -38,14 +39,14 @@ const createRFStore = ({
     (set, get) => ({
       ...getInitialState({ nodes, edges, width, height, fitView, defaultNodes, defaultEdges }),
       setNodes: (nodes: Node[]) => {
-        const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
+        const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
         // setNodes() is called exclusively in response to user actions:
         // - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
         // - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
         //
         // When this happens, we take the note objects passed by the user and extend them with fields
         // relevant for internal React Flow operations.
-        adoptUserNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
+        adoptUserNodes(nodes, nodeLookup, parentLookup, { nodeOrigin, elevateNodesOnSelect, checkEquality: true });
 
         set({ nodes });
       },
@@ -76,6 +77,7 @@ const createRFStore = ({
           onNodesChange,
           fitView,
           nodeLookup,
+          parentLookup,
           fitViewOnInit,
           fitViewDone,
           fitViewOnInitOptions,
@@ -84,7 +86,13 @@ const createRFStore = ({
           debug,
         } = get();
 
-        const { changes, updatedInternals } = updateNodeInternalsSystem(updates, nodeLookup, domNode, nodeOrigin);
+        const { changes, updatedInternals } = updateNodeInternalsSystem(
+          updates,
+          nodeLookup,
+          parentLookup,
+          domNode,
+          nodeOrigin
+        );
 
         if (!updatedInternals) {
           return;
@@ -116,26 +124,26 @@ const createRFStore = ({
         }
       },
       updateNodePositions: (nodeDragItems, dragging = false) => {
-        const { nodeLookup } = get();
+        const parentExpandChildren: ParentExpandChild[] = [];
-        const triggerChangeNodes: InternalNode[] = [];
+        const changes = [];
 
-        const changes: NodeChange[] = nodeDragItems.map((node) => {
+        for (const [id, dragItem] of nodeDragItems) {
           // @todo add expandParent to drag item so that we can get rid of the look up here
-          const internalNode = nodeLookup.get(node.id);
           const change: NodeChange = {
-            id: node.id,
+            id,
             type: 'position',
-            position: node.position,
+            position: dragItem.position,
             dragging,
           };
 
-          if (internalNode?.expandParent && change.position) {
+          if (dragItem?.expandParent && dragItem?.parentId && change.position) {
-            triggerChangeNodes.push({
+            parentExpandChildren.push({
-              ...internalNode,
+              id,
-              position: change.position,
+              parentId: dragItem.parentId,
-              internals: {
+              rect: {
-                ...internalNode.internals,
+                ...dragItem.internals.positionAbsolute,
-                positionAbsolute: node.internals.positionAbsolute,
+                width: dragItem.measured.width!,
+                height: dragItem.measured.height!,
               },
             });
 
@@ -143,11 +151,12 @@ const createRFStore = ({
             change.position.y = Math.max(0, change.position.y);
           }
 
-          return change;
+          changes.push(change);
-        });
+        }
 
-        if (triggerChangeNodes.length > 0) {
+        if (parentExpandChildren.length > 0) {
-          const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
+          const { nodeLookup, parentLookup } = get();
+          const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
           changes.push(...parentExpandChanges);
         }
 
@@ -320,4 +329,4 @@ const createRFStore = ({
     Object.is
   );
 
-export { createRFStore };
+export { createStore };

packages/react/src/store/initialState.ts

@@ -2,14 +2,14 @@ import {
   infiniteExtent,
   ConnectionMode,
   adoptUserNodes,
-  getNodesBounds,
   getViewportForBounds,
   Transform,
   updateConnectionLookup,
   devWarn,
+  getInternalNodesBounds,
 } from '@xyflow/system';
 
-import type { Edge, Node, ReactFlowStore } from '../types';
+import type { Edge, InternalNode, Node, ReactFlowStore } from '../types';
 
 const getInitialState = ({
   nodes,
@@ -28,14 +28,15 @@ const getInitialState = ({
   height?: number;
   fitView?: boolean;
 } = {}): ReactFlowStore => {
-  const nodeLookup = new Map();
+  const nodeLookup = new Map<string, InternalNode>();
+  const parentLookup = new Map();
   const connectionLookup = new Map();
   const edgeLookup = new Map();
   const storeEdges = defaultEdges ?? edges ?? [];
   const storeNodes = defaultNodes ?? nodes ?? [];
 
   updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
-  adoptUserNodes(storeNodes, nodeLookup, {
+  adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false,
   });
@@ -43,11 +44,11 @@ const getInitialState = ({
   let transform: Transform = [0, 0, 1];
 
   if (fitView && width && height) {
-    const nodesWithDimensions = storeNodes.filter(
-      (node) => (node.width || node.initialWidth) && (node.height || node.initialHeight)
-    );
     // @todo users nodeOrigin should be used here
-    const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
+    const bounds = getInternalNodesBounds(nodeLookup, {
+      nodeOrigin: [0, 0],
+      filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
+    });
     const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
     transform = [x, y, zoom];
   }
@@ -59,6 +60,7 @@ const getInitialState = ({
     transform,
     nodes: storeNodes,
     nodeLookup,
+    parentLookup,
     edges: storeEdges,
     edgeLookup,
     connectionLookup,

packages/react/src/types/store.ts

@@ -54,6 +54,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
   transform: Transform;
   nodes: NodeType[];
   nodeLookup: NodeLookup<InternalNode<NodeType>>;
+  parentLookup: Map<string, InternalNode<NodeType>[]>;
   edges: Edge[];
   edgeLookup: EdgeLookup<EdgeType>;
   connectionLookup: ConnectionLookup;

packages/react/src/utils/changes.ts

@@ -100,7 +100,7 @@ function applyChange(change: any, element: any): any {
         element.measured.width = change.dimensions.width;
         element.measured.height = change.dimensions.height;
 
-        if (change.resizing) {
+        if (change.setAttributes) {
           element.width = change.dimensions.width;
           element.height = change.dimensions.height;
         }
@@ -184,8 +184,8 @@ export function getSelectionChanges(
 ): NodeSelectionChange[] | EdgeSelectionChange[] {
   const changes: NodeSelectionChange[] | EdgeSelectionChange[] = [];
 
-  for (const [, item] of items) {
+  for (const [id, item] of items) {
-    const willBeSelected = selectedIds.has(item.id);
+    const willBeSelected = selectedIds.has(id);
 
     // we don't want to set all items to selected=false on the first selection
     if (!(item.selected === undefined && !willBeSelected) && item.selected !== willBeSelected) {

packages/svelte/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @xyflow/svelte
 
+## 0.0.41
+
+- fix: re-observe nodes when not initialized
+
 ## 0.0.40
 
 - add `orientation` ('horizontal' or 'vertical'), `style` and `class` prop for `Controls` component

packages/svelte/package.json

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

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -121,7 +121,7 @@
   setContext('svelteflow__node_connectable', connectableStore);
 
   $: {
-    if (resizeObserver && nodeRef !== prevNodeRef) {
+    if (resizeObserver && (nodeRef !== prevNodeRef || !initialized)) {
       prevNodeRef && resizeObserver.unobserve(prevNodeRef);
       nodeRef && resizeObserver.observe(nodeRef);
       prevNodeRef = nodeRef;

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

@@ -10,7 +10,8 @@
     nodesDraggable,
     nodesConnectable,
     elementsSelectable,
-    updateNodeInternals
+    updateNodeInternals,
+    parentLookup
   } = useStore();
 
   const resizeObserver: ResizeObserver | null =
@@ -65,7 +66,7 @@
       positionY={node.internals.positionAbsolute.y}
       positionOriginX={posOrigin.x ?? 0}
       positionOriginY={posOrigin.y ?? 0}
-      isParent={!!node.internals.isParent}
+      isParent={$parentLookup.has(node.id)}
       style={node.style}
       class={node.class}
       type={node.type ?? 'default'}

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -70,23 +70,27 @@
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
           const node = $nodeLookup.get(id)?.internals.userNode;
-          if (node) {
+          if (!node) {
-            node.height = change.isHeightChange ? change.height : node.height;
+            return;
-            node.width = change.isWidthChange ? change.width : node.width;
-            node.position =
-              change.isXPosChange || change.isYPosChange
-                ? { x: change.x, y: change.y }
-                : node.position;
-
-            for (const childChange of childChanges) {
-              const childNode = $nodeLookup.get(childChange.id)?.internals.userNode;
-              if (childNode) {
-                childNode.position = childChange.position;
-              }
-            }
-
-            $nodes = $nodes;
           }
+
+          if (change.x !== undefined && change.y !== undefined) {
+            node.position = { x: change.x, y: change.y };
+          }
+
+          if (change.width !== undefined && change.height !== undefined) {
+            node.width = change.width;
+            node.height = change.height;
+          }
+
+          for (const childChange of childChanges) {
+            const childNode = $nodeLookup.get(childChange.id)?.internals.userNode;
+            if (childNode) {
+              childNode.position = childChange.position;
+            }
+          }
+
+          $nodes = $nodes;
         }
       });
     }

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

@@ -64,14 +64,14 @@ export function createStore({
   const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
     const nodeLookup = get(store.nodeLookup);
 
-    for (const nodeDragItem of nodeDragItems) {
+    for (const [id, dragItem] of nodeDragItems) {
-      const node = nodeLookup.get(nodeDragItem.id)?.internals.userNode;
+      const node = nodeLookup.get(id)?.internals.userNode;
 
       if (!node) {
         continue;
       }
 
-      node.position = nodeDragItem.position;
+      node.position = dragItem.position;
       node.dragging = dragging;
     }
 
@@ -83,6 +83,7 @@ export function createStore({
     const { changes, updatedInternals } = updateNodeInternalsSystem(
       updates,
       nodeLookup,
+      get(store.parentLookup),
       get(store.domNode),
       get(store.nodeOrigin)
     );

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

@@ -81,7 +81,8 @@ export const getInitialStore = ({
   fitView?: boolean;
 }) => {
   const nodeLookup: NodeLookup = new Map();
-  adoptUserNodes(nodes, nodeLookup, {
+  const parentLookup = new Map();
+  adoptUserNodes(nodes, nodeLookup, parentLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false,
     checkEquality: false
@@ -104,8 +105,9 @@ export const getInitialStore = ({
 
   return {
     flowId: writable<string | null>(null),
-    nodes: createNodesStore(nodes, nodeLookup),
+    nodes: createNodesStore(nodes, nodeLookup, parentLookup),
     nodeLookup: readable<NodeLookup<InternalNode>>(nodeLookup),
+    parentLookup: readable<Map<string, InternalNode[]>>(parentLookup),
     edgeLookup: readable<EdgeLookup<Edge>>(edgeLookup),
     visibleNodes: readable<InternalNode[]>([]),
     edges: createEdgesStore(edges, connectionLookup, edgeLookup),

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

@@ -127,7 +127,8 @@ export type NodeStoreOptions = {
 // The user only passes in relative positions, so we need to calculate the absolute positions based on the parent nodes.
 export const createNodesStore = (
   nodes: Node[],
-  nodeLookup: NodeLookup<InternalNode>
+  nodeLookup: NodeLookup<InternalNode>,
+  parentLookup: Map<string, InternalNode[]>
 ): {
   subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
   update: (this: void, updater: Updater<Node[]>) => void;
@@ -141,7 +142,7 @@ export const createNodesStore = (
   let elevateNodesOnSelect = true;
 
   const _set = (nds: Node[]): Node[] => {
-    adoptUserNodes(nds, nodeLookup, {
+    adoptUserNodes(nds, nodeLookup, parentLookup, {
       elevateNodesOnSelect,
       defaults,
       checkEquality: false

packages/system/package.json

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

packages/system/src/types/changes.ts

@@ -4,7 +4,10 @@ export type NodeDimensionChange = {
   id: string;
   type: 'dimensions';
   dimensions?: Dimensions;
+  /* if this is true, the node is currently being resized via the NodeResizer */
   resizing?: boolean;
+  /* if this is true, we will set width and height of the node and not just the measured dimensions */
+  setAttributes?: boolean;
 };
 
 export type NodePositionChange = {

packages/system/src/types/general.ts

@@ -127,7 +127,7 @@ export type SelectionRect = Rect & {
 
 export type OnError = (id: string, message: string) => void;
 
-export type UpdateNodePositions = (dragItems: NodeDragItem[] | InternalNodeBase[], dragging?: boolean) => void;
+export type UpdateNodePositions = (dragItems: Map<string, NodeDragItem | InternalNodeBase>, dragging?: boolean) => void;
 export type PanBy = (delta: XYPosition) => boolean;
 
 export type UpdateConnection = (params: {

packages/system/src/types/nodes.ts

@@ -73,8 +73,6 @@ export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType &
   internals: {
     positionAbsolute: XYPosition;
     z: number;
-    // @todo should we rename this to "handles" and use same type as node.handles?
-    isParent: boolean;
     /** Holds a reference to the original node object provided by the user.
      * Used as an optimization to avoid certain operations. */
     userNode: NodeType;
@@ -122,8 +120,8 @@ export type NodeDragItem = {
   // distance from the mouse cursor to the node when start dragging
   distance: XYPosition;
   measured: {
-    width: number | null;
+    width: number;
-    height: number | null;
+    height: number;
   };
   internals: {
     positionAbsolute: XYPosition;
@@ -144,3 +142,4 @@ export type NodeHandle = Optional<HandleElement, 'width' | 'height'>;
 export type Align = 'center' | 'start' | 'end';
 
 export type NodeLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType>;
+export type ParentLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType[]>;

packages/system/src/utils/general.ts

@@ -9,6 +9,7 @@ import type {
   SnapGrid,
   Transform,
   InternalNodeBase,
+  NodeLookup,
 } from '../types';
 import { type Viewport } from '../types';
 import { getNodePositionWithOrigin } from './graph';
@@ -67,22 +68,24 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
 });
 
 export const nodeToRect = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rect => {
-  const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
+  const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
 
   return {
-    ...positionAbsolute,
+    x,
+    y,
     width: node.measured?.width ?? node.width ?? 0,
     height: node.measured?.height ?? node.height ?? 0,
   };
 };
 
 export const nodeToBox = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box => {
-  const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
+  const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
 
   return {
-    ...positionAbsolute,
+    x,
-    x2: positionAbsolute.x + (node.measured?.width ?? node.width ?? 0),
+    y,
-    y2: positionAbsolute.y + (node.measured?.height ?? node.height ?? 0),
+    x2: x + (node.measured?.width ?? node.width ?? 0),
+    y2: y + (node.measured?.height ?? node.height ?? 0),
   };
 };
 
@@ -204,9 +207,13 @@ export function isCoordinateExtent(extent?: CoordinateExtent | 'parent'): extent
   return extent !== undefined && extent !== 'parent';
 }
 
-export function getNodeDimensions<NodeType extends NodeBase = NodeBase>(
+export function getNodeDimensions(node: {
-  node: NodeType
+  measured?: { width?: number; height?: number };
-): { width: number; height: number } {
+  width?: number;
+  height?: number;
+  initialWidth?: number;
+  initialHeight?: number;
+}): { width: number; height: number } {
   return {
     width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,
     height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,
@@ -219,3 +226,38 @@ export function nodeHasDimensions<NodeType extends NodeBase = NodeBase>(node: No
     (node.measured?.height ?? node.height ?? node.initialHeight) !== undefined
   );
 }
+
+/**
+ * Convert child position to aboslute position
+ *
+ * @internal
+ * @param position
+ * @param parentId
+ * @param nodeLookup
+ * @param nodeOrigin
+ * @returns an internal node with an absolute position
+ */
+export function evaluateAbsolutePosition(
+  position: XYPosition,
+  parentId: string,
+  nodeLookup: NodeLookup,
+  nodeOrigin: NodeOrigin = [0, 0]
+): XYPosition {
+  let nextParentId: string | undefined = parentId;
+  const positionAbsolute = { ...position };
+
+  while (nextParentId) {
+    const parent = nodeLookup.get(parentId);
+    nextParentId = parent?.parentId;
+
+    if (parent) {
+      const origin = parent.origin || nodeOrigin;
+      const xOffset = (parent.measured.width ?? 0) * origin[0];
+      const yOffset = (parent.measured.height ?? 0) * origin[1];
+      positionAbsolute.x += parent.position.x - xOffset;
+      positionAbsolute.y += parent.position.y - yOffset;
+    }
+  }
+
+  return positionAbsolute;
+}

packages/system/src/utils/graph.ts

@@ -4,12 +4,12 @@ import {
   clampPosition,
   getBoundsOfBoxes,
   getOverlappingArea,
-  rectToBox,
   nodeToRect,
   pointToRendererPoint,
   getViewportForBounds,
   isCoordinateExtent,
   getNodeDimensions,
+  nodeToBox,
 } from './general';
 import {
   type Transform,
@@ -25,6 +25,7 @@ import {
   OnBeforeDeleteBase,
   NodeLookup,
   InternalNodeBase,
+  NodeDragItem,
 } from '../types';
 import { errorMessages } from '../constants';
 
@@ -106,46 +107,29 @@ export const getIncomers = <NodeType extends NodeBase = NodeBase, EdgeType exten
 };
 
 export const getNodePositionWithOrigin = (
-  node: InternalNodeBase | NodeBase | undefined,
+  node: InternalNodeBase | NodeBase,
   nodeOrigin: NodeOrigin = [0, 0]
 ): { position: XYPosition; positionAbsolute: XYPosition } => {
-  if (!node) {
-    return {
-      position: {
-        x: 0,
-        y: 0,
-      },
-      positionAbsolute: {
-        x: 0,
-        y: 0,
-      },
-    };
-  }
-
   const { width, height } = getNodeDimensions(node);
-  const offsetX = width * nodeOrigin[0];
+  const positionAbsolute = 'internals' in node ? node.internals.positionAbsolute : node.position;
-  const offsetY = height * nodeOrigin[1];
+  const origin = node.origin || nodeOrigin;
-
+  const offsetX = width * origin[0];
-  const position: XYPosition = {
+  const offsetY = height * origin[1];
-    x: node.position.x - offsetX,
-    y: node.position.y - offsetY,
-  };
 
   return {
-    position,
+    position: {
-    positionAbsolute:
+      x: node.position.x - offsetX,
-      'internals' in node
+      y: node.position.y - offsetY,
-        ? {
+    },
-            x: node.internals.positionAbsolute.x - offsetX,
+    positionAbsolute: {
-            y: node.internals.positionAbsolute.y - offsetY,
+      x: positionAbsolute.x - offsetX,
-          }
+      y: positionAbsolute.y - offsetY,
-        : position,
+    },
   };
 };
 
 export type GetNodesBoundsParams = {
   nodeOrigin?: NodeOrigin;
-  useRelativePosition?: boolean;
 };
 
 /**
@@ -154,28 +138,17 @@ export type GetNodesBoundsParams = {
  * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
  * @param nodes - Nodes to calculate the bounds for
  * @param params.nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
- * @param params.useRelativePosition - Whether to use the relative or absolute node positions
  * @returns Bounding box enclosing all nodes
  */
-// @todo how to handle this if users do not have absolute positions?
+export const getNodesBounds = (nodes: NodeBase[], params: GetNodesBoundsParams = { nodeOrigin: [0, 0] }): Rect => {
-export const getNodesBounds = (
-  nodes: NodeBase[],
-  params: GetNodesBoundsParams = { nodeOrigin: [0, 0], useRelativePosition: false }
-): Rect => {
   if (nodes.length === 0) {
     return { x: 0, y: 0, width: 0, height: 0 };
   }
 
   const box = nodes.reduce(
     (currBox, node) => {
-      const nodePos = getNodePositionWithOrigin(node, node.origin || params.nodeOrigin);
+      const nodeBox = nodeToBox(node, params.nodeOrigin);
-      return getBoundsOfBoxes(
+      return getBoundsOfBoxes(currBox, nodeBox);
-        currBox,
-        rectToBox({
-          ...nodePos[params.useRelativePosition ? 'position' : 'positionAbsolute'],
-          ...getNodeDimensions(node),
-        })
-      );
     },
     { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
   );
@@ -183,21 +156,20 @@ export const getNodesBounds = (
   return boxToRect(box);
 };
 
-export type GetInternalNodesBoundsParams = {
+export type GetInternalNodesBoundsParams<NodeType> = {
   nodeOrigin?: NodeOrigin;
   useRelativePosition?: boolean;
-  filter?: (node: NodeBase) => boolean;
+  filter?: (node: NodeType) => boolean;
 };
 
 /**
  * Determines a bounding box that contains all given nodes in an array
  * @internal
  */
-export const getInternalNodesBounds = (
+export const getInternalNodesBounds = <NodeType extends InternalNodeBase | NodeDragItem>(
-  nodeLookup: NodeLookup,
+  nodeLookup: Map<string, NodeType>,
-  params: GetInternalNodesBoundsParams = {
+  params: GetInternalNodesBoundsParams<NodeType> = {
     nodeOrigin: [0, 0],
-    useRelativePosition: false,
   }
 ): Rect => {
   if (nodeLookup.size === 0) {
@@ -208,14 +180,8 @@ export const getInternalNodesBounds = (
 
   nodeLookup.forEach((node) => {
     if (params.filter == undefined || params.filter(node)) {
-      const nodePos = getNodePositionWithOrigin(node, node.origin || params.nodeOrigin);
+      const nodeBox = nodeToBox(node as InternalNodeBase, params.nodeOrigin);
-      box = getBoundsOfBoxes(
+      box = getBoundsOfBoxes(box, nodeBox);
-        box,
-        rectToBox({
-          ...nodePos[params.useRelativePosition ? 'position' : 'positionAbsolute'],
-          ...getNodeDimensions(node),
-        })
-      );
     }
   });
 
@@ -223,7 +189,7 @@ export const getInternalNodesBounds = (
 };
 
 export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
-  nodeLookup: Map<string, InternalNodeBase<NodeType>>,
+  nodes: Map<string, InternalNodeBase<NodeType>>,
   rect: Rect,
   [tx, ty, tScale]: Transform = [0, 0, 1],
   partially = false,
@@ -239,7 +205,7 @@ export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
 
   const visibleNodes: InternalNodeBase<NodeType>[] = [];
 
-  for (const [, node] of nodeLookup) {
+  for (const [, node] of nodes) {
     const { measured, selectable = true, hidden = false } = node;
     const width = measured.width ?? node.width ?? node.initialWidth ?? null;
     const height = measured.height ?? node.height ?? node.initialHeight ?? null;
@@ -286,15 +252,12 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
   options?: Options
 ) {
   const filteredNodes: InternalNodeBase[] = [];
+  const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node) => node.id)) : null;
 
   nodeLookup.forEach((n) => {
     const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);
 
-    // TODO: this remove options.nodes.some with a Set
+    if (isVisible && (!optionNodeIds || optionNodeIds.has(n.id))) {
-    if (
-      isVisible &&
-      (!options?.nodes || (options?.nodes.length && options?.nodes.some((optionNode) => optionNode.id === n.id)))
-    ) {
       filteredNodes.push(n);
     }
   });

packages/system/src/utils/store.ts

@@ -15,10 +15,12 @@ import {
   Rect,
   NodeDimensionChange,
   NodePositionChange,
+  ParentLookup,
 } from '../types';
 import { getDimensions, getHandleBounds } from './dom';
 import { getBoundsOfRects, getNodeDimensions, isNumeric, nodeToRect } from './general';
 import { getNodePositionWithOrigin } from './graph';
+import { ParentExpandChild } from './types';
 
 export function updateAbsolutePositions<NodeType extends NodeBase>(
   nodeLookup: Map<string, InternalNodeBase<NodeType>>,
@@ -26,41 +28,41 @@ export function updateAbsolutePositions<NodeType extends NodeBase>(
     nodeOrigin: [0, 0] as NodeOrigin,
     elevateNodesOnSelect: true,
     defaults: {},
-  },
+  }
-  parentNodeIds?: Set<string>
 ) {
   const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
 
-  for (const [id, node] of nodeLookup) {
+  for (const [, node] of nodeLookup) {
     const parentId = node.parentId;
 
-    if (parentId && !nodeLookup.has(parentId)) {
+    if (!parentId) {
+      continue;
+    }
+
+    if (!nodeLookup.has(parentId)) {
       throw new Error(`Parent node ${parentId} not found`);
     }
 
-    if (parentId || node.internals.isParent || parentNodeIds?.has(id)) {
+    const parentNode = nodeLookup.get(parentId);
-      const parentNode = parentId ? nodeLookup.get(parentId) : null;
+    const { x, y, z } = calculateXYZPosition(
-      const { x, y, z } = calculateXYZPosition(
+      node,
-        node,
+      nodeLookup,
-        nodeLookup,
+      {
-        {
+        ...node.position,
-          ...node.position,
+        z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
-          z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
+      },
-        },
+      parentNode?.origin ?? options.nodeOrigin
-        parentNode?.origin || options.nodeOrigin
+    );
-      );
 
-      const currPosition = node.internals.positionAbsolute;
+    const currPosition = node.internals.positionAbsolute;
-      const positionChanged = x !== currPosition.x || y !== currPosition.y;
+    const positionChanged = x !== currPosition.x || y !== currPosition.y;
 
-      node.internals.positionAbsolute = positionChanged ? { x, y } : currPosition;
+    if (positionChanged || z !== node.internals.z) {
-      node.internals.z = z;
+      node.internals = {
-
+        ...node.internals,
-      if (parentNodeIds !== undefined) {
+        positionAbsolute: positionChanged ? { x, y } : currPosition,
-        node.internals.isParent = !!parentNodeIds?.has(id);
+        z,
-      }
+      };
-
-      nodeLookup.set(id, node);
     }
   }
 }
@@ -75,6 +77,7 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {
 export function adoptUserNodes<NodeType extends NodeBase>(
   nodes: NodeType[],
   nodeLookup: Map<string, InternalNodeBase<NodeType>>,
+  parentLookup: Map<string, InternalNodeBase<NodeType>[]>,
   options: UpdateNodesOptions<NodeType> = {
     nodeOrigin: [0, 0] as NodeOrigin,
     elevateNodesOnSelect: true,
@@ -84,20 +87,17 @@ export function adoptUserNodes<NodeType extends NodeBase>(
 ) {
   const tmpLookup = new Map(nodeLookup);
   nodeLookup.clear();
+  parentLookup.clear();
+
   const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
-  const parentNodeIds = new Set<string>();
 
   nodes.forEach((userNode) => {
-    const currentStoreNode = tmpLookup.get(userNode.id);
+    let internalNode = tmpLookup.get(userNode.id);
 
-    if (userNode.parentId) {
+    if (options.checkEquality && userNode === internalNode?.internals.userNode) {
-      parentNodeIds.add(userNode.parentId);
+      nodeLookup.set(userNode.id, internalNode);
-    }
-
-    if (options.checkEquality && userNode === currentStoreNode?.internals.userNode) {
-      nodeLookup.set(userNode.id, currentStoreNode);
     } else {
-      nodeLookup.set(userNode.id, {
+      internalNode = {
         ...options.defaults,
         ...userNode,
         measured: {
@@ -106,17 +106,26 @@ export function adoptUserNodes<NodeType extends NodeBase>(
         },
         internals: {
           positionAbsolute: userNode.position,
-          handleBounds: currentStoreNode?.internals.handleBounds,
+          handleBounds: internalNode?.internals.handleBounds,
           z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
           userNode,
-          isParent: false,
         },
-      });
+      };
+      nodeLookup.set(userNode.id, internalNode);
+    }
+
+    if (userNode.parentId) {
+      const childNodes = parentLookup.get(userNode.parentId);
+      if (childNodes) {
+        childNodes.push(internalNode);
+      } else {
+        parentLookup.set(userNode.parentId, [internalNode]);
+      }
     }
   });
 
-  if (parentNodeIds.size > 0) {
+  if (parentLookup.size > 0) {
-    updateAbsolutePositions(nodeLookup, options, parentNodeIds);
+    updateAbsolutePositions(nodeLookup, options);
   }
 }
 
@@ -130,53 +139,56 @@ function calculateXYZPosition<NodeType extends NodeBase>(
     return result;
   }
 
-  const parentNode = nodeLookup.get(node.parentId)!;
+  const parent = nodeLookup.get(node.parentId)!;
-  const { position: parentNodePosition } = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
+  const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin).position;
 
   return calculateXYZPosition(
-    parentNode,
+    parent,
     nodeLookup,
     {
-      x: (result.x ?? 0) + parentNodePosition.x,
+      x: (result.x ?? 0) + parentPosition.x,
-      y: (result.y ?? 0) + parentNodePosition.y,
+      y: (result.y ?? 0) + parentPosition.y,
-      z: (parentNode.internals.z ?? 0) > (result.z ?? 0) ? parentNode.internals.z ?? 0 : result.z ?? 0,
+      z: (parent.internals.z ?? 0) > (result.z ?? 0) ? parent.internals.z ?? 0 : result.z ?? 0,
     },
-    parentNode.origin || nodeOrigin
+    parent.origin || nodeOrigin
   );
 }
 
-export function handleParentExpand(
+export function handleExpandParent(
-  nodes: InternalNodeBase[],
+  children: ParentExpandChild[],
-  nodeLookup: NodeLookup
+  nodeLookup: NodeLookup,
+  parentLookup: ParentLookup,
+  nodeOrigin?: NodeOrigin
 ): (NodeDimensionChange | NodePositionChange)[] {
   const changes: (NodeDimensionChange | NodePositionChange)[] = [];
-  const chilNodeRects = new Map<string, Rect>();
+  const parentExpansions = new Map<string, { expandedRect: Rect; parent: InternalNodeBase }>();
 
-  nodes.forEach((node) => {
+  // determine the expanded rectangle the child nodes would take for each parent
-    const parentId = node.parentId;
+  for (const child of children) {
-    if (node.expandParent && parentId) {
+    const parent = nodeLookup.get(child.parentId);
-      const parentNode = nodeLookup.get(parentId);
+    if (!parent) {
-
+      continue;
-      if (parentNode) {
-        const parentRect = chilNodeRects.get(parentId) || nodeToRect(parentNode, node.origin);
-        const expandedRect = getBoundsOfRects(parentRect, nodeToRect(node, node.origin));
-        chilNodeRects.set(parentId, expandedRect);
-      }
     }
-  });
 
-  if (chilNodeRects.size > 0) {
+    const parentRect =
-    chilNodeRects.forEach((rect, id) => {
+      parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent, parent.origin ?? nodeOrigin);
-      const origParent = nodeLookup.get(id)!;
+    const expandedRect = getBoundsOfRects(parentRect, child.rect);
-      const { position } = getNodePositionWithOrigin(origParent, origParent.origin);
+    parentExpansions.set(child.parentId, { expandedRect, parent });
-      const dimensions = getNodeDimensions(origParent);
+  }
 
-      if (rect.x < position.x || rect.y < position.y) {
+  if (parentExpansions.size > 0) {
-        const xChange = Math.round(Math.abs(position.x - rect.x));
+    parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
-        const yChange = Math.round(Math.abs(position.y - rect.y));
+      // determine the position & dimensions of the parent
+      const { position } = getNodePositionWithOrigin(parent, parent.origin);
+      const dimensions = getNodeDimensions(parent);
 
+      // determine how much the parent expands by moving the position
+      const xChange = expandedRect.x < position.x ? Math.round(Math.abs(position.x - expandedRect.x)) : 0;
+      const yChange = expandedRect.y < position.y ? Math.round(Math.abs(position.y - expandedRect.y)) : 0;
+
+      if (xChange > 0 || yChange > 0) {
         changes.push({
-          id,
+          id: parentId,
           type: 'position',
           position: {
             x: position.x - xChange,
@@ -184,25 +196,31 @@ export function handleParentExpand(
           },
         });
 
-        changes.push({
+        // We move all child nodes in the oppsite direction
-          id,
+        // so the x,y changes of the parent do not move the children
-          type: 'dimensions',
+        const childNodes = parentLookup.get(parentId);
-          resizing: true,
+        childNodes?.forEach((childNode) => {
-          dimensions: {
+          if (!children.some((child) => child.id === childNode.id)) {
-            width: dimensions.width + xChange,
+            changes.push({
-            height: dimensions.height + yChange,
+              id: childNode.id,
-          },
+              type: 'position',
+              position: {
+                x: childNode.position.x + xChange,
+                y: childNode.position.y + yChange,
+              },
+            });
+          }
         });
+      }
 
-        // @todo we need to reset child node positions if < 0
+      if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height) {
-      } else if (dimensions.width < rect.width || dimensions.height < rect.height) {
         changes.push({
-          id,
+          id: parentId,
           type: 'dimensions',
-          resizing: true,
+          setAttributes: true,
           dimensions: {
-            width: Math.max(dimensions.width, rect.width),
+            width: Math.max(dimensions.width, Math.round(expandedRect.width)),
-            height: Math.max(dimensions.height, rect.height),
+            height: Math.max(dimensions.height, Math.round(expandedRect.height)),
           },
         });
       }
@@ -214,7 +232,8 @@ export function handleParentExpand(
 
 export function updateNodeInternals<NodeType extends InternalNodeBase>(
   updates: Map<string, InternalNodeUpdate>,
-  nodeLookup: Map<string, NodeType>,
+  nodeLookup: NodeLookup<NodeType>,
+  parentLookup: ParentLookup<NodeType>,
   domNode: HTMLElement | null,
   nodeOrigin?: NodeOrigin
 ): { changes: (NodeDimensionChange | NodePositionChange)[]; updatedInternals: boolean } {
@@ -229,7 +248,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
   const style = window.getComputedStyle(viewportNode);
   const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
   // in this array we collect nodes, that might trigger changes (like expanding parent)
-  const triggerChangeNodes: NodeType[] = [];
+  const parentExpandChildren: ParentExpandChild[] = [];
 
   updates.forEach((update) => {
     const node = nodeLookup.get(update.id);
@@ -275,16 +294,20 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
             dimensions,
           });
 
-          if (newNode.expandParent) {
+          if (newNode.expandParent && newNode.parentId) {
-            triggerChangeNodes.push(newNode);
+            parentExpandChildren.push({
+              id: newNode.id,
+              parentId: newNode.parentId,
+              rect: nodeToRect(newNode, newNode.origin || nodeOrigin),
+            });
           }
         }
       }
     }
   });
 
-  if (triggerChangeNodes.length > 0) {
+  if (parentExpandChildren.length > 0) {
-    const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
+    const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
     changes.push(...parentExpandChanges);
   }
 

packages/system/src/utils/types.ts

@@ -1 +1,5 @@
+import { Rect } from '../types';
+
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export type ParentExpandChild = { id: string; parentId: string; rect: Rect };

packages/system/src/xydrag/XYDrag.ts

@@ -7,10 +7,10 @@ import {
   getPointerPosition,
   calculateNodePosition,
   snapPosition,
-  getNodesBounds,
+  getInternalNodesBounds,
   rectToBox,
 } from '../utils';
-import { getDragItems, getEventHandlerParams, hasSelector, wrapSelectionDragFunc } from './utils';
+import { getDragItems, getEventHandlerParams, hasSelector } from './utils';
 import type {
   NodeBase,
   NodeDragItem,
@@ -29,7 +29,12 @@ import type {
   InternalNodeBase,
 } from '../types';
 
-export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBase, nodes: NodeBase[]) => void;
+export type OnDrag = (
+  event: MouseEvent,
+  dragItems: Map<string, NodeDragItem>,
+  node: NodeBase,
+  nodes: NodeBase[]
+) => void;
 
 type StoreItems<OnNodeDrag> = {
   nodes: NodeBase[];
@@ -89,7 +94,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
 }: XYDragParams<OnNodeDrag>): XYDragInstance {
   let lastPos: { x: number | null; y: number | null } = { x: null, y: null };
   let autoPanId = 0;
-  let dragItems: NodeDragItem[] = [];
+  let dragItems = new Map<string, NodeDragItem>();
   let autoPanStarted = false;
   let mousePosition: XYPosition = { x: 0, y: 0 };
   let containerBounds: DOMRect | null = null;
@@ -117,13 +122,13 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
       let hasChange = false;
       let nodesBox: Box = { x: 0, y: 0, x2: 0, y2: 0 };
 
-      if (dragItems.length > 1 && nodeExtent) {
+      if (dragItems.size > 1 && nodeExtent) {
-        const rect = getNodesBounds(dragItems as unknown as NodeBase[], { nodeOrigin });
+        const rect = getInternalNodesBounds(dragItems, { nodeOrigin });
         nodesBox = rectToBox(rect);
       }
 
-      dragItems = dragItems.map((n) => {
+      for (const [id, dragItem] of dragItems) {
-        let nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
+        let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
 
         if (snapToGrid) {
           nextPosition = snapPosition(nextPosition, snapGrid);
@@ -136,13 +141,13 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
           [nodeExtent[1][0], nodeExtent[1][1]],
         ];
 
-        if (dragItems.length > 1 && nodeExtent && !n.extent) {
+        if (dragItems.size > 1 && nodeExtent && !dragItem.extent) {
-          const { positionAbsolute } = n.internals;
+          const { positionAbsolute } = dragItem.internals;
           const x1 = positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
-          const x2 = positionAbsolute.x + (n.measured?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
+          const x2 = positionAbsolute.x + dragItem.measured.width - nodesBox.x2 + nodeExtent[1][0];
 
           const y1 = positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
-          const y2 = positionAbsolute.y + (n.measured?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
+          const y2 = positionAbsolute.y + dragItem.measured.height - nodesBox.y2 + nodeExtent[1][1];
 
           adjustedNodeExtent = [
             [x1, y1],
@@ -151,7 +156,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         }
 
         const { position, positionAbsolute } = calculateNodePosition({
-          nodeId: n.id,
+          nodeId: id,
           nextPosition,
           nodeLookup,
           nodeExtent: adjustedNodeExtent,
@@ -160,13 +165,11 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         });
 
         // we want to make sure that we only fire a change event when there is a change
-        hasChange = hasChange || n.position.x !== position.x || n.position.y !== position.y;
+        hasChange = hasChange || dragItem.position.x !== position.x || dragItem.position.y !== position.y;
 
-        n.position = position;
+        dragItem.position = position;
-        n.internals.positionAbsolute = positionAbsolute;
+        dragItem.internals.positionAbsolute = positionAbsolute;
-
+      }
-        return n;
-      });
 
       if (!hasChange) {
         return;
@@ -185,8 +188,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         onNodeDrag?.(dragEvent, currentNode, currentNodes);
 
         if (!nodeId) {
-          const _onSelectionDrag = wrapSelectionDragFunc(onSelectionDrag);
+          onSelectionDrag?.(dragEvent, currentNodes);
-          _onSelectionDrag(dragEvent, currentNode, currentNodes);
         }
       }
     }
@@ -242,7 +244,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
       lastPos = pointerPos;
       dragItems = getDragItems(nodeLookup, nodesDraggable, pointerPos, nodeId);
 
-      if (dragItems.length > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {
+      if (dragItems.size > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {
         const [currentNode, currentNodes] = getEventHandlerParams({
           nodeId,
           dragItems,
@@ -253,8 +255,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         onNodeDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
 
         if (!nodeId) {
-          const _onSelectionDragStart = wrapSelectionDragFunc(onSelectionDragStart);
+          onSelectionDragStart?.(event.sourceEvent as MouseEvent, currentNodes);
-          _onSelectionDragStart(event.sourceEvent as MouseEvent, currentNode, currentNodes);
         }
       }
     }
@@ -308,7 +309,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         dragStarted = false;
         cancelAnimationFrame(autoPanId);
 
-        if (dragItems.length > 0) {
+        if (dragItems.size > 0) {
           const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
 
           updateNodePositions(dragItems, false);
@@ -324,8 +325,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
             onNodeDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
 
             if (!nodeId) {
-              const _onSelectionDragStop = wrapSelectionDragFunc(onSelectionDragStop);
+              onSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNodes);
-              _onSelectionDragStop(event.sourceEvent as MouseEvent, currentNode, currentNodes);
             }
           }
         }

packages/system/src/xydrag/utils.ts

@@ -1,9 +1,5 @@
 import { type NodeDragItem, type XYPosition, InternalNodeBase, NodeBase, NodeLookup } from '../types';
 
-export function wrapSelectionDragFunc(selectionFunc?: (event: MouseEvent, nodes: NodeBase[]) => void) {
-  return (event: MouseEvent, _: NodeBase, nodes: NodeBase[]) => selectionFunc?.(event, nodes);
-}
-
 export function isParentSelected<NodeType extends NodeBase>(node: NodeType, nodeLookup: NodeLookup): boolean {
   if (!node.parentId) {
     return false;
@@ -40,8 +36,8 @@ export function getDragItems<NodeType extends NodeBase>(
   nodesDraggable: boolean,
   mousePos: XYPosition,
   nodeId?: string
-): NodeDragItem[] {
+): Map<string, NodeDragItem> {
-  const dragItems: NodeDragItem[] = [];
+  const dragItems = new Map<string, NodeDragItem>();
 
   for (const [id, node] of nodeLookup) {
     if (
@@ -49,29 +45,32 @@ export function getDragItems<NodeType extends NodeBase>(
       (!node.parentId || !isParentSelected(node, nodeLookup)) &&
       (node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'))
     ) {
-      const internalNode = nodeLookup.get(id)!;
+      const internalNode = nodeLookup.get(id);
 
-      dragItems.push({
+      if (internalNode) {
-        id: internalNode.id,
+        dragItems.set(id, {
-        position: internalNode.position || { x: 0, y: 0 },
+          id,
-        distance: {
+          position: internalNode.position || { x: 0, y: 0 },
-          x: mousePos.x - internalNode.internals.positionAbsolute.x,
+          distance: {
-          y: mousePos.y - internalNode.internals.positionAbsolute.y,
+            x: mousePos.x - internalNode.internals.positionAbsolute.x,
-        },
+            y: mousePos.y - internalNode.internals.positionAbsolute.y,
-        extent: internalNode.extent,
+          },
-        parentId: internalNode.parentId,
+          extent: internalNode.extent,
-        origin: internalNode.origin,
+          parentId: internalNode.parentId,
-        expandParent: internalNode.expandParent,
+          origin: internalNode.origin,
-        internals: {
+          expandParent: internalNode.expandParent,
-          positionAbsolute: internalNode.internals.positionAbsolute || { x: 0, y: 0 },
+          internals: {
-        },
+            positionAbsolute: internalNode.internals.positionAbsolute || { x: 0, y: 0 },
-        measured: {
+          },
-          width: internalNode.measured.width || 0,
+          measured: {
-          height: internalNode.measured.height || 0,
+            width: internalNode.measured.width ?? 0,
-        },
+            height: internalNode.measured.height ?? 0,
-      });
+          },
+        });
+      }
     }
   }
+
   return dragItems;
 }
 
@@ -84,20 +83,32 @@ export function getEventHandlerParams<NodeType extends NodeBase>({
   nodeLookup,
 }: {
   nodeId?: string;
-  dragItems: NodeDragItem[];
+  dragItems: Map<string, NodeDragItem>;
   nodeLookup: Map<string, NodeType>;
 }): [NodeType, NodeType[]] {
-  const nodesFromDragItems: NodeType[] = dragItems.map((n) => {
+  const nodesFromDragItems: NodeType[] = [];
-    const node = nodeLookup.get(n.id)!;
 
-    return {
+  for (const [id, dragItem] of dragItems) {
+    const node = nodeLookup.get(id);
+
+    if (node) {
+      nodesFromDragItems.push({
+        ...node,
+        position: dragItem.position,
+      });
+    }
+  }
+
+  if (!nodeId) {
+    return [nodesFromDragItems[0], nodesFromDragItems];
+  }
+
+  const node = nodeLookup.get(nodeId)!;
+  return [
+    {
       ...node,
-      position: n.position,
+      position: dragItems.get(nodeId)?.position || node.position,
-      measured: {
+    },
-        ...n.measured,
+    nodesFromDragItems,
-      },
+  ];
-    };
-  });
-
-  return [nodeId ? nodesFromDragItems.find((n) => n.id === nodeId)! : nodesFromDragItems[0], nodesFromDragItems];
 }

packages/system/src/xyminimap/index.ts

@@ -54,17 +54,34 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
       panZoom.scaleTo(nextZoom);
     };
 
+    let panStart = [0, 0];
+    const panStartHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
+      if (event.sourceEvent.type === 'mousedown' || event.sourceEvent.type === 'touchstart') {
+        panStart = [
+          event.sourceEvent.clientX ?? event.sourceEvent.touches[0].clientX,
+          event.sourceEvent.clientY ?? event.sourceEvent.touches[0].clientY,
+        ];
+      }
+    };
+
     const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
       const transform = getTransform();
 
-      if (event.sourceEvent.type !== 'mousemove' || !panZoom) {
+      if ((event.sourceEvent.type !== 'mousemove' && event.sourceEvent.type !== 'touchmove') || !panZoom) {
         return;
       }
 
+      const panCurrent = [
+        event.sourceEvent.clientX ?? event.sourceEvent.touches[0].clientX,
+        event.sourceEvent.clientY ?? event.sourceEvent.touches[0].clientY,
+      ];
+      const panDelta = [panCurrent[0] - panStart[0], panCurrent[1] - panStart[1]];
+      panStart = panCurrent;
+
       const moveScale = getViewScale() * Math.max(transform[2], Math.log(transform[2])) * (inversePan ? -1 : 1);
       const position = {
-        x: transform[0] - event.sourceEvent.movementX * moveScale,
+        x: transform[0] - panDelta[0] * moveScale,
-        y: transform[1] - event.sourceEvent.movementY * moveScale,
+        y: transform[1] - panDelta[1] * moveScale,
       };
       const extent: CoordinateExtent = [
         [0, 0],
@@ -83,6 +100,7 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
     };
 
     const zoomAndPanHandler = zoom()
+      .on('start', panStartHandler)
       // @ts-ignore
       .on('zoom', pannable ? panHandler : null)
       // @ts-ignore

packages/system/src/xyresizer/XYResizer.ts

@@ -15,19 +15,13 @@ const initStartValues = {
   aspectRatio: 1,
 };
 
-const initChange = {
+export type XYResizerChange = {
-  x: 0,
+  x?: number;
-  y: 0,
+  y?: number;
-  width: 0,
+  width?: number;
-  height: 0,
+  height?: number;
-  isXPosChange: false,
-  isYPosChange: false,
-  isWidthChange: false,
-  isHeightChange: false,
 };
 
-export type XYResizerChange = typeof initChange;
-
 export type XYResizerChildChange = {
   id: string;
   position: XYPosition;
@@ -89,7 +83,7 @@ function nodeToChildExtent(child: NodeBase, parent: NodeBase, nodeOrigin: NodeOr
   ];
 }
 
-export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResizerParams): XYResizerInstance {
+export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: XYResizerParams): XYResizerInstance {
   const selection = select(domNode);
 
   function update({
@@ -117,161 +111,161 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
         const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
         node = nodeLookup.get(nodeId);
 
-        if (node) {
+        if (!node) {
-          const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+          return;
+        }
 
-          prevValues = {
+        const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-            width: node.measured?.width ?? 0,
-            height: node.measured?.height ?? 0,
-            x: node.position.x ?? 0,
-            y: node.position.y ?? 0,
-          };
 
-          startValues = {
+        prevValues = {
-            ...prevValues,
+          width: node.measured?.width ?? 0,
-            pointerX: xSnapped,
+          height: node.measured?.height ?? 0,
-            pointerY: ySnapped,
+          x: node.position.x ?? 0,
-            aspectRatio: prevValues.width / prevValues.height,
+          y: node.position.y ?? 0,
-          };
+        };
 
-          parentNode = undefined;
+        startValues = {
-          if (node.extent === 'parent' || node.expandParent) {
+          ...prevValues,
-            parentNode = nodeLookup.get(node.parentId!);
+          pointerX: xSnapped,
-            if (parentNode && node.extent === 'parent') {
+          pointerY: ySnapped,
-              parentExtent = nodeToParentExtent(parentNode);
+          aspectRatio: prevValues.width / prevValues.height,
-            }
+        };
+
+        parentNode = undefined;
+        if (node.extent === 'parent' || node.expandParent) {
+          parentNode = nodeLookup.get(node.parentId!);
+          if (parentNode && node.extent === 'parent') {
+            parentExtent = nodeToParentExtent(parentNode);
           }
+        }
 
-          // Collect all child nodes to correct their relative positions when top/left changes
+        // Collect all child nodes to correct their relative positions when top/left changes
-          // Determine largest minimal extent the parent node is allowed to resize to
+        // Determine largest minimal extent the parent node is allowed to resize to
-          childNodes = [];
+        childNodes = [];
-          childExtent = undefined;
+        childExtent = undefined;
 
-          for (const [childId, child] of nodeLookup) {
+        for (const [childId, child] of nodeLookup) {
-            if (child.parentId === nodeId) {
+          if (child.parentId === nodeId) {
-              childNodes.push({
+            childNodes.push({
-                id: childId,
+              id: childId,
-                position: { ...child.position },
+              position: { ...child.position },
-                extent: child.extent,
+              extent: child.extent,
-              });
+            });
 
-              if (child.extent === 'parent' || child.expandParent) {
+            if (child.extent === 'parent' || child.expandParent) {
-                const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
+              const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
 
-                if (childExtent) {
+              if (childExtent) {
-                  childExtent = [
+                childExtent = [
-                    [Math.min(extent[0][0], childExtent[0][0]), Math.min(extent[0][1], childExtent[0][1])],
+                  [Math.min(extent[0][0], childExtent[0][0]), Math.min(extent[0][1], childExtent[0][1])],
-                    [Math.max(extent[1][0], childExtent[1][0]), Math.max(extent[1][1], childExtent[1][1])],
+                  [Math.max(extent[1][0], childExtent[1][0]), Math.max(extent[1][1], childExtent[1][1])],
-                  ];
+                ];
-                } else {
+              } else {
-                  childExtent = extent;
+                childExtent = extent;
-                }
               }
             }
           }
-
-          onResizeStart?.(event, { ...prevValues });
         }
+
+        onResizeStart?.(event, { ...prevValues });
       })
       .on('drag', (event: ResizeDragEvent) => {
         const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems();
         const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
         const childChanges: XYResizerChildChange[] = [];
 
-        if (node) {
+        if (!node) {
-          const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
+          return;
-          const change = { ...initChange };
-          const nodeOrigin = node.origin ?? storeNodeOrigin;
-
-          const { width, height, x, y } = getDimensionsAfterResize(
-            startValues,
-            controlDirection,
-            pointerPosition,
-            boundaries,
-            keepAspectRatio,
-            nodeOrigin,
-            parentExtent,
-            childExtent
-          );
-
-          const isWidthChange = width !== prevWidth;
-          const isHeightChange = height !== prevHeight;
-
-          const isXPosChange = x !== prevX && isWidthChange;
-          const isYPosChange = y !== prevY && isHeightChange;
-
-          if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
-            change.isXPosChange = isXPosChange;
-            change.isYPosChange = isYPosChange;
-            change.x = isXPosChange ? x : prevX;
-            change.y = isYPosChange ? y : prevY;
-
-            prevValues.x = change.x;
-            prevValues.y = change.y;
-
-            // Fix expandParent when resizing from top/left
-            if (parentNode && node.expandParent) {
-              if (change.x < 0) {
-                prevValues.x = 0;
-                startValues.x = startValues.x - change.x;
-              }
-
-              if (change.y < 0) {
-                prevValues.y = 0;
-                startValues.y = startValues.y - change.y;
-              }
-            }
-
-            if (childNodes.length > 0) {
-              const xChange = x - prevX;
-              const yChange = y - prevY;
-
-              for (const childNode of childNodes) {
-                childNode.position = {
-                  x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth),
-                  y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight),
-                };
-                childChanges.push(childNode);
-              }
-            }
-          }
-
-          if (isWidthChange || isHeightChange) {
-            change.isWidthChange = isWidthChange;
-            change.isHeightChange = isHeightChange;
-            change.width = width;
-            change.height = height;
-            prevValues.width = change.width;
-            prevValues.height = change.height;
-          }
-
-          if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) {
-            return;
-          }
-
-          const direction = getResizeDirection({
-            width: prevValues.width,
-            prevWidth,
-            height: prevValues.height,
-            prevHeight,
-            affectsX: controlDirection.affectsX,
-            affectsY: controlDirection.affectsY,
-          });
-
-          const nextValues = { ...prevValues, direction };
-
-          const callResize = shouldResize?.(event, nextValues);
-
-          if (callResize === false) {
-            return;
-          }
-
-          onResize?.(event, nextValues);
-          onChange(change, childChanges);
         }
+        const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
+        const change: XYResizerChange = {};
+        const nodeOrigin = node.origin ?? storeNodeOrigin;
+
+        const { width, height, x, y } = getDimensionsAfterResize(
+          startValues,
+          controlDirection,
+          pointerPosition,
+          boundaries,
+          keepAspectRatio,
+          nodeOrigin,
+          parentExtent,
+          childExtent
+        );
+
+        const isWidthChange = width !== prevWidth;
+        const isHeightChange = height !== prevHeight;
+
+        const isXPosChange = x !== prevX && isWidthChange;
+        const isYPosChange = y !== prevY && isHeightChange;
+
+        if (!isXPosChange && !isYPosChange && !isWidthChange && !isHeightChange) {
+          return;
+        }
+
+        if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
+          change.x = isXPosChange ? x : prevValues.x;
+          change.y = isYPosChange ? y : prevValues.y;
+
+          prevValues.x = change.x;
+          prevValues.y = change.y;
+
+          // Fix expandParent when resizing from top/left
+          if (parentNode && node.expandParent) {
+            if (change.x && change.x < 0) {
+              prevValues.x = 0;
+              startValues.x = startValues.x - change.x;
+            }
+
+            if (change.y && change.y < 0) {
+              prevValues.y = 0;
+              startValues.y = startValues.y - change.y;
+            }
+          }
+
+          if (childNodes.length > 0) {
+            const xChange = x - prevX;
+            const yChange = y - prevY;
+
+            for (const childNode of childNodes) {
+              childNode.position = {
+                x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth),
+                y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight),
+              };
+              childChanges.push(childNode);
+            }
+          }
+        }
+
+        if (isWidthChange || isHeightChange) {
+          change.width = isWidthChange ? width : prevValues.width;
+          change.height = isHeightChange ? height : prevValues.height;
+          prevValues.width = change.width;
+          prevValues.height = change.height;
+        }
+
+        const direction = getResizeDirection({
+          width: prevValues.width,
+          prevWidth,
+          height: prevValues.height,
+          prevHeight,
+          affectsX: controlDirection.affectsX,
+          affectsY: controlDirection.affectsY,
+        });
+
+        const nextValues = { ...prevValues, direction };
+
+        const callResize = shouldResize?.(event, nextValues);
+
+        if (callResize === false) {
+          return;
+        }
+
+        onResize?.(event, nextValues);
+        onChange(change, childChanges);
       })
       .on('end', (event: ResizeDragEvent) => {
         onResizeEnd?.(event, { ...prevValues });
+        onEnd?.();
       });
     selection.call(dragHandler);
   }

pnpm-lock.yaml

@@ -92,6 +92,9 @@ importers:
 
   examples/react:
     dependencies:
+      '@reduxjs/toolkit':
+        specifier: ^2.2.3
+        version: 2.2.3(react-redux@9.1.1)(react@18.2.0)
       '@xyflow/react':
         specifier: workspace:*
         version: link:../../packages/react
@@ -110,9 +113,15 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-redux:
+        specifier: ^9.1.1
+        version: 9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1)
       react-router-dom:
         specifier: ^6.18.0
         version: 6.18.0(react-dom@18.2.0)(react@18.2.0)
+      redux:
+        specifier: ^5.0.1
+        version: 5.0.1
       zustand:
         specifier: ^4.4.6
         version: 4.4.6(@types/react@18.2.36)(react@18.2.0)
@@ -2120,6 +2129,25 @@ packages:
     resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
     dev: true
 
+  /@reduxjs/toolkit@2.2.3(react-redux@9.1.1)(react@18.2.0):
+    resolution: {integrity: sha512-76dll9EnJXg4EVcI5YNxZA/9hSAmZsFqzMmNRHvIlzw2WS/twfcVX3ysYrWGJMClwEmChQFC4yRq74tn6fdzRA==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+    dependencies:
+      immer: 10.0.4
+      react: 18.2.0
+      react-redux: 9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1)
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.0
+    dev: false
+
   /@remix-run/router@1.11.0:
     resolution: {integrity: sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==}
     engines: {node: '>=14.0.0'}
@@ -3067,6 +3095,10 @@ packages:
     resolution: {integrity: sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==}
     dev: false
 
+  /@types/use-sync-external-store@0.0.3:
+    resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==}
+    dev: false
+
   /@types/yauzl@2.10.3:
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
     requiresBuild: true
@@ -6373,6 +6405,10 @@ packages:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
     dev: false
 
+  /immer@10.0.4:
+    resolution: {integrity: sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==}
+    dev: false
+
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -9057,6 +9093,28 @@ packages:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true
 
+  /react-redux@9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1):
+    resolution: {integrity: sha512-5ynfGDzxxsoV73+4czQM56qF43vsmgJsO22rmAvU5tZT2z5Xow/A2uhhxwXuGTxgdReF3zcp7A80gma2onRs1A==}
+    peerDependencies:
+      '@types/react': ^18.2.25
+      react: ^18.0
+      react-native: '>=0.69'
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react-native:
+        optional: true
+      redux:
+        optional: true
+    dependencies:
+      '@types/react': 18.2.36
+      '@types/use-sync-external-store': 0.0.3
+      react: 18.2.0
+      redux: 5.0.1
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
   /react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
@@ -9148,6 +9206,18 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /redux-thunk@3.1.0(redux@5.0.1):
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+    dependencies:
+      redux: 5.0.1
+    dev: false
+
+  /redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+    dev: false
+
   /reflect.getprototypeof@1.0.4:
     resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
     engines: {node: '>= 0.4'}
@@ -9265,6 +9335,10 @@ packages:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: true
 
+  /reselect@5.1.0:
+    resolution: {integrity: sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==}
+    dev: false
+
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}