extract all logic to system

packages/react/package.json

@@ -49,12 +49,8 @@
   },
   "dependencies": {
     "@types/d3": "^7.4.0",
-    "@types/d3-drag": "^3.0.1",
-    "@types/d3-selection": "^3.0.3",
     "@xyflow/system": "workspace:*",
     "classcat": "^5.0.3",
-    "d3-drag": "^3.0.0",
-    "d3-selection": "^3.0.0",
     "zustand": "^4.4.0"
   },
   "peerDependencies": {

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

@@ -1,28 +1,11 @@
 import { useRef, useEffect, memo } from 'react';
 import cc from 'classcat';
-import { drag } from 'd3-drag';
+import { XYResizerInstance, XYResizer, XYResizeChange } from '@xyflow/system';
-import { select } from 'd3-selection';
+import { ResizeControlVariant } from '@xyflow/system';
-import {
-  getPointerPosition,
-  getControlDirection,
-  getDimensionsAfterResize,
-  getPositionAfterResize,
-} from '@xyflow/system';
-
 import { useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import type { NodeChange, NodeDimensionChange, NodePositionChange } from '../../types';
-import { type ResizeDragEvent, type ResizeControlProps, type ResizeControlLineProps } from './types';
+import { type ResizeControlProps, type ResizeControlLineProps } from './types';
-import { getResizeDirection, ResizeControlVariant } from '@xyflow/system';
-
-const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
-
-const initStartValues = {
-  ...initPrevValues,
-  pointerX: 0,
-  pointerY: 0,
-  aspectRatio: 1,
-};
 
 function ResizeControl({
   nodeId,
@@ -46,146 +29,93 @@ function ResizeControl({
   const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
   const store = useStoreApi();
   const resizeControlRef = useRef<HTMLDivElement>(null);
-  const startValues = useRef<typeof initStartValues>(initStartValues);
-  const prevValues = useRef<typeof initPrevValues>(initPrevValues);
   const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
   const controlPosition = position ?? defaultPosition;
 
+  const resizer = useRef<XYResizerInstance | null>(null);
+
   useEffect(() => {
     if (!resizeControlRef.current || !id) {
       return;
     }
 
-    const selection = select(resizeControlRef.current);
+    if (!resizer.current) {
+      resizer.current = XYResizer({
+        domNode: resizeControlRef.current,
+        nodeId: id,
+        getStoreItems: () => {
+          const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState();
+          return {
+            nodeLookup,
+            transform,
+            snapGrid,
+            snapToGrid,
+          };
+        },
+        onChange: (change: XYResizeChange) => {
+          const { triggerNodeChanges } = store.getState();
 
-    const controlDirection = getControlDirection(controlPosition);
-
-    const dragHandler = drag<HTMLDivElement, unknown>()
-      .on('start', (event: ResizeDragEvent) => {
-        const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState();
-        const node = nodeLookup.get(id);
-        const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-
-        prevValues.current = {
-          width: node?.computed?.width ?? 0,
-          height: node?.computed?.height ?? 0,
-          x: node?.position.x ?? 0,
-          y: node?.position.y ?? 0,
-        };
-
-        startValues.current = {
-          ...prevValues.current,
-          pointerX: xSnapped,
-          pointerY: ySnapped,
-          aspectRatio: prevValues.current.width / prevValues.current.height,
-        };
-
-        onResizeStart?.(event, { ...prevValues.current });
-      })
-      .on('drag', (event: ResizeDragEvent) => {
-        const { nodeLookup, transform, snapGrid, snapToGrid, triggerNodeChanges } = store.getState();
-        const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-        const node = nodeLookup.get(id);
-
-        if (node) {
           const changes: NodeChange[] = [];
 
-          const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues.current;
+          if (change.isXPosChange || change.isYPosChange) {
+            const positionChange: NodePositionChange = {
+              id,
+              type: 'position',
+              position: {
+                x: change.x,
+                y: change.y,
+              },
+            };
 
-          const { width, height } = getDimensionsAfterResize(
+            changes.push(positionChange);
-            startValues.current,
-            controlDirection,
-            pointerPosition,
-            { minWidth, minHeight, maxWidth, maxHeight },
-            keepAspectRatio
-          );
-
-          const isWidthChange = width !== prevWidth;
-          const isHeightChange = height !== prevHeight;
-
-          if (controlDirection.affectsX || controlDirection.affectsY) {
-            const { x, y } = getPositionAfterResize(startValues.current, controlDirection, width, height);
-
-            // only transform the node if the width or height changes
-            const isXPosChange = x !== prevX && isWidthChange;
-            const isYPosChange = y !== prevY && isHeightChange;
-
-            if (isXPosChange || isYPosChange) {
-              const positionChange: NodePositionChange = {
-                id: node.id,
-                type: 'position',
-                position: {
-                  x: isXPosChange ? x : prevX,
-                  y: isYPosChange ? y : prevY,
-                },
-              };
-
-              changes.push(positionChange);
-              prevValues.current.x = positionChange.position!.x;
-              prevValues.current.y = positionChange.position!.y;
-            }
           }
 
-          if (isWidthChange || isHeightChange) {
+          if (change.isWidthChange || change.isHeightChange) {
             const dimensionChange: NodeDimensionChange = {
-              id: id,
+              id,
               type: 'dimensions',
               updateStyle: true,
               resizing: true,
               dimensions: {
-                width: width,
+                width: change.width,
-                height: height,
+                height: change.height,
               },
             };
 
             changes.push(dimensionChange);
-            prevValues.current.width = width;
-            prevValues.current.height = height;
           }
-
-          if (changes.length === 0) {
-            return;
-          }
-
-          const direction = getResizeDirection({
-            width: prevValues.current.width,
-            prevWidth,
-            height: prevValues.current.height,
-            prevHeight,
-            affectsX: controlDirection.affectsX,
-            affectsY: controlDirection.affectsY,
-          });
-
-          const nextValues = { ...prevValues.current, direction };
-
-          const callResize = shouldResize?.(event, nextValues);
-
-          if (callResize === false) {
-            return;
-          }
-
-          onResize?.(event, nextValues);
           triggerNodeChanges(changes);
-        }
+        },
-      })
+        onEnd: () => {
-      .on('end', (event: ResizeDragEvent) => {
+          const dimensionChange: NodeDimensionChange = {
-        const dimensionChange: NodeDimensionChange = {
+            id: id,
-          id: id,
+            type: 'dimensions',
-          type: 'dimensions',
+            resizing: false,
-          resizing: false,
+          };
-        };
+          store.getState().triggerNodeChanges([dimensionChange]);
-
+        },
-        onResizeEnd?.(event, { ...prevValues.current });
-        store.getState().triggerNodeChanges([dimensionChange]);
       });
+    }
 
-    selection.call(dragHandler);
+    resizer.current.update({
+      controlPosition,
+      boundries: {
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+      },
+      keepAspectRatio,
+      onResizeStart,
+      onResize,
+      onResizeEnd,
+      shouldResize,
+    });
 
     return () => {
-      selection.on('.drag', null);
+      resizer.current?.destroy();
     };
   }, [
-    id,
     controlPosition,
     minWidth,
     minHeight,
@@ -195,6 +125,7 @@ function ResizeControl({
     onResizeStart,
     onResize,
     onResizeEnd,
+    shouldResize,
   ]);
 
   const positionClassNames = controlPosition.split('-');

packages/react/src/additional-components/NodeResizer/types.ts

@@ -1,21 +1,14 @@
 import type { CSSProperties, ReactNode } from 'react';
-import type { D3DragEvent, SubjectPosition } from 'd3-drag';
 import type {
-  XYResizeParams,
-  XYResizeParamsWithDirection,
   XYResizeControlPosition,
   XYResizeControlLinePosition,
   ResizeControlVariant,
+  ShouldResize,
+  OnResizeStart,
+  OnResize,
+  OnResizeEnd,
 } from '@xyflow/system';
 
-type OnResizeHandler<Params = XYResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
-export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
-
-export type ShouldResize = OnResizeHandler<XYResizeParamsWithDirection, boolean>;
-export type OnResizeStart = OnResizeHandler;
-export type OnResize = OnResizeHandler<XYResizeParamsWithDirection>;
-export type OnResizeEnd = OnResizeHandler;
-
 export type NodeResizerProps = {
   nodeId?: string;
   color?: string;

packages/svelte/package.json

@@ -42,12 +42,8 @@
   },
   "dependencies": {
     "@svelte-put/shortcut": "^3.1.0",
-    "@types/d3-drag": "^3.0.1",
-    "@types/d3-selection": "^3.0.3",
     "@xyflow/system": "workspace:*",
-    "classcat": "^5.0.4",
+    "classcat": "^5.0.4"
-    "d3-drag": "^3.0.0",
-    "d3-selection": "^3.0.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",

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

@@ -1,17 +1,14 @@
 <script lang="ts">
   import { getContext, onMount } from 'svelte';
-  import { drag } from 'd3-drag';
+  import { get } from 'svelte/store';
-  import { select } from 'd3-selection';
   import cc from 'classcat';
-  import type { ResizeControlProps, ResizeDragEvent } from './types';
+  import type { ResizeControlProps } from './types';
   import {
     ResizeControlVariant,
-    getPointerPosition,
-    getResizeDirection,
-    getControlDirection,
     type XYResizeControlPosition,
-    getDimensionsAfterResize,
+    type XYResizerInstance,
-    getPositionAfterResize
+    XYResizer,
+    type XYResizeChange
   } from '@xyflow/system';
   import { useStore } from '$lib/store';
 
@@ -38,22 +35,13 @@
   let className: $$Props['class'] = '';
   export { className as class };
 
-  const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
-
-  const initStartValues = {
-    ...initPrevValues,
-    pointerX: 0,
-    pointerY: 0,
-    aspectRatio: 1
-  };
-
   const { nodeLookup, snapGrid, viewport, nodes } = useStore();
+
   const contextNodeId = getContext<string>('svelteflow__node_id');
   $: id = typeof nodeId === 'string' ? nodeId : contextNodeId;
-  let resizeControlRef: HTMLDivElement;
 
-  let startValues = { ...initStartValues };
+  let resizeControlRef: HTMLDivElement;
-  let prevValues = { ...initPrevValues };
+  let resizer: XYResizerInstance | null = null;
 
   $: defaultPosition = (
     variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'
@@ -61,133 +49,75 @@
   $: controlPosition = position ?? defaultPosition;
 
   $: positionClassNames = controlPosition.split('-');
-  $: colorStyleProp = variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
 
+  $: colorStyleProp = variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
   $: _style = style ?? '';
   $: controlStyle = !!color ? `${_style} ${colorStyleProp}: ${color};` : _style;
 
+  function updateNodes() {
+    $nodes = $nodes;
+  }
+
   onMount(() => {
-    if (!resizeControlRef || !id) {
-      return;
-    }
-    const selection = select(resizeControlRef);
-
-    const controlDirection = getControlDirection(controlPosition);
-
-    const dragHandler = drag<HTMLDivElement, unknown>()
-      .on('start', (event: ResizeDragEvent) => {
-        const node = $nodeLookup.get(id);
-        const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, {
-          transform: [$viewport.x, $viewport.y, $viewport.zoom],
-          snapGrid: $snapGrid ?? undefined,
-          snapToGrid: !!$snapGrid
-        });
-
-        prevValues = {
-          width: node?.computed?.width ?? 0,
-          height: node?.computed?.height ?? 0,
-          x: node?.position.x ?? 0,
-          y: node?.position.y ?? 0
-        };
-
-        startValues = {
-          ...prevValues,
-          pointerX: xSnapped,
-          pointerY: ySnapped,
-          aspectRatio: prevValues.width / prevValues.height
-        };
-
-        onResizeStart?.(event, { ...prevValues });
-      })
-      .on('drag', (event: ResizeDragEvent) => {
-        const pointerPosition = getPointerPosition(event.sourceEvent, {
-          transform: [$viewport.x, $viewport.y, $viewport.zoom],
-          snapGrid: $snapGrid ?? undefined,
-          snapToGrid: !!$snapGrid
-        });
-        const node = $nodeLookup.get(id);
-
-        if (node) {
-          const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
-
-          const { width, height } = getDimensionsAfterResize(
-            startValues,
-            controlDirection,
-            pointerPosition,
-            {
-              minWidth: _minWidth,
-              minHeight: _minHeight,
-              maxWidth: _maxWidth,
-              maxHeight: _maxHeight
-            },
-            !!keepAspectRatio
-          );
-          const isWidthChange = width !== prevWidth;
-          const isHeightChange = height !== prevHeight;
-
-          let changes = false;
-
-          if (controlDirection.affectsX || controlDirection.affectsY) {
-            const { x, y } = getPositionAfterResize(startValues, controlDirection, width, height);
-
-            // only transform the node if the width or height changes
-            const isXPosChange = x !== prevX && isWidthChange;
-            const isYPosChange = y !== prevY && isHeightChange;
-
-            if (isXPosChange || isYPosChange) {
-              let newX = isXPosChange ? x : prevX;
-              let newY = isYPosChange ? y : prevY;
-
-              node.position = { x: newX, y: newY };
-              prevValues.x = newX;
-              prevValues.y = newY;
-
-              changes = true;
-            }
-          }
-
-          if (isWidthChange || isHeightChange) {
-            node.width = width;
-            node.height = height;
-            prevValues.width = width;
-            prevValues.height = height;
-
-            changes = true;
-          }
-
-          if (!changes) {
-            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);
-
-          $nodes = $nodes;
-        }
-      });
-
-    selection.call(dragHandler);
-
     return () => {
-      selection.on('.drag', null);
+      resizer?.destroy();
     };
   });
+
+  $: {
+    if (resizeControlRef) {
+      if (!resizer) {
+        const _snapGrid = get(snapGrid);
+        const _viewport = get(viewport);
+        resizer = XYResizer({
+          domNode: resizeControlRef,
+          nodeId: id,
+          getStoreItems: () => {
+            return {
+              nodeLookup: get(nodeLookup),
+              transform: [_viewport.x, _viewport.y, _viewport.zoom],
+              snapGrid: _snapGrid ?? undefined,
+              snapToGrid: !!_snapGrid
+            };
+          },
+          onChange: (change: XYResizeChange) => {
+            const _nodeLookup = get(nodeLookup);
+            const node = _nodeLookup.get(id);
+            if (node) {
+              if (change.isHeightChange) {
+                node.height = change.height;
+              }
+
+              if (change.isWidthChange) {
+                node.width = change.width;
+              }
+
+              if (change.isXPosChange || change.isYPosChange) {
+                node.position = { x: change.x, y: change.y };
+              }
+              // This needs to be a function to prevent unnecessary updates
+              updateNodes();
+            }
+          }
+        });
+      }
+
+      resizer.update({
+        controlPosition,
+        boundries: {
+          minWidth: _minWidth,
+          minHeight: _minHeight,
+          maxWidth: _maxWidth,
+          maxHeight: _maxHeight
+        },
+        keepAspectRatio: !!keepAspectRatio,
+        onResizeStart,
+        onResize,
+        onResizeEnd,
+        shouldResize
+      });
+    }
+  }
 </script>
 
 <div

packages/system/src/xyresizer/XYResizer.ts

@@ -0,0 +1,199 @@
+import { drag } from 'd3-drag';
+import { select } from 'd3-selection';
+
+import { NodeLookup, Transform } from '../types';
+import { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, XYResizeControlPosition } from './types';
+import { getControlDirection, getDimensionsAfterResize, getPositionAfterResize, getResizeDirection } from './utils';
+import { getPointerPosition } from '../utils';
+
+const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
+
+const initStartValues = {
+  ...initPrevValues,
+  pointerX: 0,
+  pointerY: 0,
+  aspectRatio: 1,
+};
+
+const initChange = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  isXPosChange: false,
+  isYPosChange: false,
+  isWidthChange: false,
+  isHeightChange: false,
+};
+
+export type XYResizeChange = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  isXPosChange: boolean;
+  isYPosChange: boolean;
+  isWidthChange: boolean;
+  isHeightChange: boolean;
+};
+
+type XYResizerParams = {
+  domNode: HTMLDivElement;
+  nodeId: string;
+  getStoreItems: () => {
+    nodeLookup: NodeLookup;
+    transform: Transform;
+    snapGrid?: [number, number];
+    snapToGrid: boolean;
+  };
+  onChange: (changes: XYResizeChange) => void;
+  onEnd?: () => void;
+};
+
+type XYResizerUpdateParams = {
+  controlPosition: XYResizeControlPosition;
+  boundries: {
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+  };
+  keepAspectRatio: boolean;
+  onResizeStart: OnResizeStart | undefined;
+  onResize: OnResize | undefined;
+  onResizeEnd: OnResizeEnd | undefined;
+  shouldResize: ShouldResize | undefined;
+};
+
+export type XYResizerInstance = {
+  update: (params: XYResizerUpdateParams) => void;
+  destroy: () => void;
+};
+
+export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResizerParams): XYResizerInstance {
+  const selection = select(domNode);
+
+  function update({
+    controlPosition,
+    boundries,
+    keepAspectRatio,
+    onResizeStart,
+    onResize,
+    onResizeEnd,
+    shouldResize,
+  }: XYResizerUpdateParams) {
+    console.log('updated');
+    let prevValues = { ...initPrevValues };
+    let startValues = { ...initStartValues };
+
+    const controlDirection = getControlDirection(controlPosition);
+
+    const dragHandler = drag<HTMLDivElement, unknown>()
+      .on('start', (event: ResizeDragEvent) => {
+        const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+        const node = nodeLookup.get(nodeId);
+        const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+
+        prevValues = {
+          width: node?.computed?.width ?? 0,
+          height: node?.computed?.height ?? 0,
+          x: node?.position.x ?? 0,
+          y: node?.position.y ?? 0,
+        };
+
+        startValues = {
+          ...prevValues,
+          pointerX: xSnapped,
+          pointerY: ySnapped,
+          aspectRatio: prevValues.width / prevValues.height,
+        };
+
+        onResizeStart?.(event, { ...prevValues });
+      })
+      .on('drag', (event: ResizeDragEvent) => {
+        const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+        const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+        const node = nodeLookup.get(nodeId);
+
+        if (node) {
+          const change = { ...initChange };
+
+          const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
+
+          const { width, height } = getDimensionsAfterResize(
+            startValues,
+            controlDirection,
+            pointerPosition,
+            boundries,
+            keepAspectRatio
+          );
+
+          const isWidthChange = width !== prevWidth;
+          const isHeightChange = height !== prevHeight;
+
+          if (controlDirection.affectsX || controlDirection.affectsY) {
+            const { x, y } = getPositionAfterResize(startValues, controlDirection, width, height);
+
+            // only transform the node if the width or height changes
+            const isXPosChange = x !== prevX && isWidthChange;
+            const isYPosChange = y !== prevY && isHeightChange;
+
+            if (isXPosChange || isYPosChange) {
+              change.isXPosChange = isXPosChange;
+              change.isYPosChange = isYPosChange;
+              change.x = isXPosChange ? x : prevX;
+              change.y = isYPosChange ? y : prevY;
+
+              prevValues.x = change.x;
+              prevValues.y = change.y;
+            }
+          }
+
+          if (isWidthChange || isHeightChange) {
+            change.isWidthChange = isWidthChange;
+            change.isHeightChange = isHeightChange;
+            change.width = width;
+            change.height = height;
+            prevValues.width = width;
+            prevValues.height = 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);
+        }
+      })
+      .on('end', (event: ResizeDragEvent) => {
+        onResizeEnd?.(event, { ...prevValues });
+      });
+    selection.call(dragHandler);
+  }
+  function destroy() {
+    selection.on('.drag', null);
+  }
+
+  return {
+    update,
+    destroy,
+  };
+}

packages/system/src/xyresizer/index.ts

@@ -1,2 +1,2 @@
 export * from './types';
-export * from './utils';
+export * from './XYResizer';

packages/system/src/xyresizer/types.ts

@@ -1,4 +1,4 @@
-export type { D3DragEvent, SubjectPosition } from 'd3-drag';
+import type { D3DragEvent, SubjectPosition } from 'd3-drag';
 
 export type XYResizeParams = {
   x: number;
@@ -32,3 +32,11 @@ export const XY_RESIZER_HANDLE_CONTROLS: XYResizeControlPosition[] = [
   'bottom-right',
 ];
 export const XY_RESIZER_LINE_CONTROLS: XYResizeControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
+
+type OnResizeHandler<Params = XYResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
+export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
+
+export type ShouldResize = OnResizeHandler<XYResizeParamsWithDirection, boolean>;
+export type OnResizeStart = OnResizeHandler;
+export type OnResize = OnResizeHandler<XYResizeParamsWithDirection>;
+export type OnResizeEnd = OnResizeHandler;

pnpm-lock.yaml

@@ -208,24 +208,12 @@ importers:
       '@types/d3':
         specifier: ^7.4.0
         version: 7.4.0
-      '@types/d3-drag':
-        specifier: ^3.0.1
-        version: 3.0.1
-      '@types/d3-selection':
-        specifier: ^3.0.3
-        version: 3.0.3
       '@xyflow/system':
         specifier: workspace:*
         version: link:../system
       classcat:
         specifier: ^5.0.3
         version: 5.0.4
-      d3-drag:
-        specifier: ^3.0.0
-        version: 3.0.0
-      d3-selection:
-        specifier: ^3.0.0
-        version: 3.0.0
       react-dom:
         specifier: '>=17'
         version: 18.2.0(react@18.2.0)
@@ -287,31 +275,19 @@ importers:
       '@svelte-put/shortcut':
         specifier: ^3.1.0
         version: 3.1.0
-      '@types/d3-drag':
-        specifier: ^3.0.1
-        version: 3.0.1
-      '@types/d3-selection':
-        specifier: ^3.0.3
-        version: 3.0.3
       '@xyflow/system':
         specifier: workspace:*
         version: link:../system
       classcat:
         specifier: ^5.0.4
         version: 5.0.4
-      d3-drag:
-        specifier: ^3.0.0
-        version: 3.0.0
-      d3-selection:
-        specifier: ^3.0.0
-        version: 3.0.0
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^2.1.0
         version: 2.1.0(@sveltejs/kit@1.22.6)
       '@sveltejs/kit':
         specifier: ^1.22.6
-        version: 1.22.6(svelte@4.2.1)(vite@4.5.0)
+        version: 1.22.6(svelte@4.2.1)(vite@4.5.1)
       '@sveltejs/package':
         specifier: ^2.2.1
         version: 2.2.1(svelte@4.2.1)(typescript@5.1.3)
@@ -1656,7 +1632,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       espree: 9.6.1
       globals: 13.23.0
       ignore: 5.2.4
@@ -1714,7 +1690,7 @@ packages:
     engines: {node: '>=10.10.0'}
     dependencies:
       '@humanwhocodes/object-schema': 2.0.1
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -1980,7 +1956,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.22.6(svelte@4.2.1)(vite@4.5.0)
+      '@sveltejs/kit': 1.22.6(svelte@4.2.1)(vite@4.5.1)
       import-meta-resolve: 3.0.0
     dev: true
 
@@ -1993,7 +1969,7 @@ packages:
       import-meta-resolve: 4.0.0
     dev: true
 
-  /@sveltejs/kit@1.22.6(svelte@4.2.1)(vite@4.5.0):
+  /@sveltejs/kit@1.22.6(svelte@4.2.1)(vite@4.5.1):
     resolution: {integrity: sha512-SDKxI/QpsReCwIn5czjT53fKlPBybbmMk67d317gUqfeORroBAFN1Z6s/x0E1JYi+04i7kKllS+Sz9wVfmUkAQ==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
@@ -2002,7 +1978,7 @@ packages:
       svelte: ^3.54.0 || ^4.0.0-next.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.4.6(svelte@4.2.1)(vite@4.5.0)
+      '@sveltejs/vite-plugin-svelte': 2.4.6(svelte@4.2.1)(vite@4.5.1)
       '@types/cookie': 0.5.3
       cookie: 0.5.0
       devalue: 4.3.2
@@ -2015,7 +1991,7 @@ packages:
       sirv: 2.0.3
       svelte: 4.2.1
       undici: 5.23.0
-      vite: 4.5.0(@types/node@18.7.16)
+      vite: 4.5.1
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2079,6 +2055,23 @@ packages:
       vite: 4.5.0(@types/node@18.7.16)
     transitivePeerDependencies:
       - supports-color
+    dev: false
+
+  /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.4.6)(svelte@4.2.1)(vite@4.5.1):
+    resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==}
+    engines: {node: ^14.18.0 || >= 16}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^2.2.0
+      svelte: ^3.54.0 || ^4.0.0
+      vite: ^4.0.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 2.4.6(svelte@4.2.1)(vite@4.5.1)
+      debug: 4.3.4
+      svelte: 4.2.1
+      vite: 4.5.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
   /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.4.6)(svelte@4.2.2)(vite@4.5.0):
     resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==}
@@ -2114,6 +2107,27 @@ packages:
       vitefu: 0.2.5(vite@4.5.0)
     transitivePeerDependencies:
       - supports-color
+    dev: false
+
+  /@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.1)(vite@4.5.1):
+    resolution: {integrity: sha512-zO79p0+DZnXPnF0ltIigWDx/ux7Ni+HRaFOw720Qeivc1azFUrJxTl0OryXVibYNx1hCboGia1NRV3x8RNv4cA==}
+    engines: {node: ^14.18.0 || >= 16}
+    peerDependencies:
+      svelte: ^3.54.0 || ^4.0.0
+      vite: ^4.0.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.4.6)(svelte@4.2.1)(vite@4.5.1)
+      debug: 4.3.4
+      deepmerge: 4.3.1
+      kleur: 4.1.5
+      magic-string: 0.30.5
+      svelte: 4.2.1
+      svelte-hmr: 0.15.3(svelte@4.2.1)
+      vite: 4.5.1
+      vitefu: 0.2.5(vite@4.5.1)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
   /@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.2)(vite@4.5.0):
     resolution: {integrity: sha512-zO79p0+DZnXPnF0ltIigWDx/ux7Ni+HRaFOw720Qeivc1azFUrJxTl0OryXVibYNx1hCboGia1NRV3x8RNv4cA==}
@@ -2691,7 +2705,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.60.0
       '@typescript-eslint/type-utils': 5.60.0(eslint@8.43.0)(typescript@5.1.3)
       '@typescript-eslint/utils': 5.60.0(eslint@8.43.0)(typescript@5.1.3)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       eslint: 8.43.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.4
@@ -2774,7 +2788,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.60.0
       '@typescript-eslint/types': 5.60.0
       '@typescript-eslint/typescript-estree': 5.60.0(typescript@5.1.3)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       eslint: 8.43.0
       typescript: 5.1.3
     transitivePeerDependencies:
@@ -2859,7 +2873,7 @@ packages:
     dependencies:
       '@typescript-eslint/typescript-estree': 5.60.0(typescript@5.1.3)
       '@typescript-eslint/utils': 5.60.0(eslint@8.43.0)(typescript@5.1.3)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       eslint: 8.43.0
       tsutils: 3.21.0(typescript@5.1.3)
       typescript: 5.1.3
@@ -2933,7 +2947,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.60.0
       '@typescript-eslint/visitor-keys': 5.60.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
@@ -4260,6 +4274,18 @@ packages:
       ms: 2.1.3
       supports-color: 8.1.1
 
+  /debug@4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
   /debug@4.3.4(supports-color@8.1.1):
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -4768,7 +4794,7 @@ packages:
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
       '@jridgewell/sourcemap-codec': 1.4.15
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       eslint: 8.43.0
       esutils: 2.0.3
       known-css-properties: 0.27.0
@@ -4858,7 +4884,7 @@ packages:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -7872,7 +7898,6 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: false
 
   /prebuild-install@7.1.1:
     resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==}
@@ -9943,6 +9968,41 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
+  /vite@4.5.1:
+    resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.18.20
+      postcss: 8.4.32
+      rollup: 3.29.4
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
   /vite@4.5.1(@types/node@18.7.16):
     resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -9989,6 +10049,17 @@ packages:
     dependencies:
       vite: 4.5.0(@types/node@18.7.16)
 
+  /vitefu@0.2.5(vite@4.5.1):
+    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      vite: 4.5.1
+    dev: true
+
   /vscode-oniguruma@1.7.0:
     resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
     dev: false