cleaned up some things

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

@@ -1,6 +1,6 @@
 import ResizeControl from './ResizeControl';
 import { NodeResizerProps } from './types';
-import { XY_RESIZER_HANDLE_CONTROLS, XY_RESIZER_LINE_CONTROLS, ResizeControlVariant } from '@xyflow/system';
+import { ResizerControlVariant, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS } from '@xyflow/system';
 
 export default function NodeResizer({
   nodeId,
@@ -26,14 +26,14 @@ export default function NodeResizer({
 
   return (
     <>
-      {XY_RESIZER_LINE_CONTROLS.map((c) => (
+      {XY_RESIZER_LINE_POSITIONS.map((position) => (
         <ResizeControl
-          key={c}
+          key={position}
           className={lineClassName}
           style={lineStyle}
           nodeId={nodeId}
-          position={c}
+          position={position}
-          variant={ResizeControlVariant.Line}
+          variant={ResizerControlVariant.Line}
           color={color}
           minWidth={minWidth}
           minHeight={minHeight}
@@ -46,13 +46,13 @@ export default function NodeResizer({
           onResizeEnd={onResizeEnd}
         />
       ))}
-      {XY_RESIZER_HANDLE_CONTROLS.map((c) => (
+      {XY_RESIZER_HANDLE_POSITIONS.map((position) => (
         <ResizeControl
-          key={c}
+          key={position}
           className={handleClassName}
           style={handleStyle}
           nodeId={nodeId}
-          position={c}
+          position={position}
           color={color}
           minWidth={minWidth}
           minHeight={minHeight}

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

@@ -1,7 +1,7 @@
 import { useRef, useEffect, memo } from 'react';
 import cc from 'classcat';
 import { XYResizerInstance, XYResizer, XYResizeChange } from '@xyflow/system';
-import { ResizeControlVariant } from '@xyflow/system';
+import { ResizerControlVariant } from '@xyflow/system';
 import { useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import type { NodeChange, NodeDimensionChange, NodePositionChange } from '../../types';
@@ -10,7 +10,7 @@ import { type ResizeControlProps, type ResizeControlLineProps } from './types';
 function ResizeControl({
   nodeId,
   position,
-  variant = ResizeControlVariant.Handle,
+  variant = ResizerControlVariant.Handle,
   className,
   style = {},
   children,
@@ -29,7 +29,7 @@ function ResizeControl({
   const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
   const store = useStoreApi();
   const resizeControlRef = useRef<HTMLDivElement>(null);
-  const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
+  const defaultPosition = variant === ResizerControlVariant.Line ? 'right' : 'bottom-right';
   const controlPosition = position ?? defaultPosition;
 
   const resizer = useRef<XYResizerInstance | null>(null);
@@ -129,7 +129,7 @@ function ResizeControl({
   ]);
 
   const positionClassNames = controlPosition.split('-');
-  const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor';
+  const colorStyleProp = variant === ResizerControlVariant.Line ? 'borderColor' : 'backgroundColor';
   const controlStyle = color ? { ...style, [colorStyleProp]: color } : style;
 
   return (
@@ -144,7 +144,7 @@ function ResizeControl({
 }
 
 export function ResizeControlLine(props: ResizeControlLineProps) {
-  return <ResizeControl {...props} variant={ResizeControlVariant.Line} />;
+  return <ResizeControl {...props} variant={ResizerControlVariant.Line} />;
 }
 
 export default memo(ResizeControl);

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

@@ -2,9 +2,9 @@
   import ResizeControl from './ResizeControl.svelte';
   import type { NodeResizerProps } from './types';
   import {
-    XY_RESIZER_HANDLE_CONTROLS,
+    ResizerControlVariant,
-    XY_RESIZER_LINE_CONTROLS,
+    XY_RESIZER_HANDLE_POSITIONS,
-    ResizeControlVariant
+    XY_RESIZER_LINE_POSITIONS
   } from '@xyflow/system';
 
   type $$Props = NodeResizerProps;
@@ -33,13 +33,13 @@
 </script>
 
 {#if isVisible}
-  {#each XY_RESIZER_LINE_CONTROLS as c (c)}
+  {#each XY_RESIZER_LINE_POSITIONS as position (position)}
     <ResizeControl
       class={lineClass}
       style={lineStyle}
       {nodeId}
-      position={c}
+      {position}
-      variant={ResizeControlVariant.Line}
+      variant={ResizerControlVariant.Line}
       {color}
       minWidth={_minWidth}
       minHeight={_minHeight}
@@ -52,12 +52,12 @@
       {onResizeEnd}
     />
   {/each}
-  {#each XY_RESIZER_HANDLE_CONTROLS as c (c)}
+  {#each XY_RESIZER_HANDLE_POSITIONS as position (position)}
     <ResizeControl
       class={handleClass}
       style={handleStyle}
       {nodeId}
-      position={c}
+      {position}
       {color}
       minWidth={_minWidth}
       minHeight={_minHeight}

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

@@ -1,11 +1,10 @@
 <script lang="ts">
   import { getContext, onMount } from 'svelte';
-  import { get } from 'svelte/store';
   import cc from 'classcat';
   import type { ResizeControlProps } from './types';
   import {
-    ResizeControlVariant,
+    ResizerControlVariant,
-    type XYResizeControlPosition,
+    type XYResizerControlPosition,
     type XYResizerInstance,
     XYResizer,
     type XYResizeChange
@@ -16,7 +15,7 @@
 
   export let nodeId: $$Props['nodeId'] = undefined;
   export let position: $$Props['position'] = undefined;
-  export let variant: $$Props['variant'] = ResizeControlVariant.Handle;
+  export let variant: $$Props['variant'] = ResizerControlVariant.Handle;
   export let color: $$Props['color'] = undefined;
   export let minWidth: $$Props['minWidth'] = 10;
   $: _minWidth = minWidth ?? 10;
@@ -44,79 +43,64 @@
   let resizer: XYResizerInstance | null = null;
 
   $: defaultPosition = (
-    variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'
+    variant === ResizerControlVariant.Line ? 'right' : 'bottom-right'
-  ) as XYResizeControlPosition;
+  ) as XYResizerControlPosition;
   $: controlPosition = position ?? defaultPosition;
 
   $: positionClassNames = controlPosition.split('-');
 
-  $: colorStyleProp = variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
+  $: colorStyleProp = variant === ResizerControlVariant.Line ? 'border-color' : 'background-color';
   $: _style = style ?? '';
   $: controlStyle = !!color ? `${_style} ${colorStyleProp}: ${color};` : _style;
 
-  function updateNodes() {
-    $nodes = $nodes;
-  }
-
   onMount(() => {
+    if (resizeControlRef) {
+      resizer = XYResizer({
+        domNode: resizeControlRef,
+        nodeId: id,
+        getStoreItems: () => {
+          return {
+            nodeLookup: $nodeLookup,
+            transform: [$viewport.x, $viewport.y, $viewport.zoom],
+            snapGrid: $snapGrid ?? undefined,
+            snapToGrid: !!$snapGrid
+          };
+        },
+        onChange: (change: XYResizeChange) => {
+          const node = $nodeLookup.get(id);
+          if (node) {
+            node.height = change.isHeightChange ? change.height : node.height;
+            node.width = change.isWidthChange ? change.width : node.width;
+            node.position =
+              change.isXPosChange || change.isYPosChange
+                ? { x: change.x, y: change.y }
+                : node.position;
+
+            $nodes = $nodes;
+          }
+        }
+      });
+    }
     return () => {
       resizer?.destroy();
     };
   });
 
   $: {
-    if (resizeControlRef) {
+    resizer?.update({
-      if (!resizer) {
+      controlPosition,
-        const _snapGrid = get(snapGrid);
+      boundries: {
-        const _viewport = get(viewport);
+        minWidth: _minWidth,
-        resizer = XYResizer({
+        minHeight: _minHeight,
-          domNode: resizeControlRef,
+        maxWidth: _maxWidth,
-          nodeId: id,
+        maxHeight: _maxHeight
-          getStoreItems: () => {
+      },
-            return {
+      keepAspectRatio: !!keepAspectRatio,
-              nodeLookup: get(nodeLookup),
+      onResizeStart,
-              transform: [_viewport.x, _viewport.y, _viewport.zoom],
+      onResize,
-              snapGrid: _snapGrid ?? undefined,
+      onResizeEnd,
-              snapToGrid: !!_snapGrid
+      shouldResize
-            };
+    });
-          },
-          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>
 

packages/system/src/xyresizer/XYResizer.ts

@@ -2,7 +2,7 @@ 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 { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, XYResizerControlPosition } from './types';
 import { getControlDirection, getDimensionsAfterResize, getPositionAfterResize, getResizeDirection } from './utils';
 import { getPointerPosition } from '../utils';
 
@@ -51,7 +51,7 @@ type XYResizerParams = {
 };
 
 type XYResizerUpdateParams = {
-  controlPosition: XYResizeControlPosition;
+  controlPosition: XYResizerControlPosition;
   boundries: {
     minWidth: number;
     minHeight: number;

packages/system/src/xyresizer/types.ts

@@ -1,42 +1,42 @@
 import type { D3DragEvent, SubjectPosition } from 'd3-drag';
 
-export type XYResizeParams = {
+export type XYResizerParams = {
   x: number;
   y: number;
   width: number;
   height: number;
 };
 
-export type XYResizeParamsWithDirection = XYResizeParams & {
+export type XYResizerParamsWithDirection = XYResizerParams & {
   direction: number[];
 };
 
-export type XYResizeControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
+export type XYResizerControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
 
-export type XYResizeControlPosition =
+export type XYResizerControlPosition =
-  | XYResizeControlLinePosition
+  | XYResizerControlLinePosition
   | 'top-left'
   | 'top-right'
   | 'bottom-left'
   | 'bottom-right';
 
-export enum ResizeControlVariant {
+export enum ResizerControlVariant {
   Line = 'line',
   Handle = 'handle',
 }
 
-export const XY_RESIZER_HANDLE_CONTROLS: XYResizeControlPosition[] = [
+export const XY_RESIZER_HANDLE_POSITIONS: XYResizerControlPosition[] = [
   'top-left',
   'top-right',
   'bottom-left',
   'bottom-right',
 ];
-export const XY_RESIZER_LINE_CONTROLS: XYResizeControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
+export const XY_RESIZER_LINE_POSITIONS: XYResizerControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
 
-type OnResizeHandler<Params = XYResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
+type OnResizeHandler<Params = XYResizerParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
 export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
 
-export type ShouldResize = OnResizeHandler<XYResizeParamsWithDirection, boolean>;
+export type ShouldResize = OnResizeHandler<XYResizerParamsWithDirection, boolean>;
 export type OnResizeStart = OnResizeHandler;
-export type OnResize = OnResizeHandler<XYResizeParamsWithDirection>;
+export type OnResize = OnResizeHandler<XYResizerParamsWithDirection>;
 export type OnResizeEnd = OnResizeHandler;

packages/system/src/xyresizer/utils.ts

@@ -1,5 +1,5 @@
 import { clamp, getPointerPosition } from '../utils';
-import { XYResizeControlPosition } from './types';
+import { XYResizerControlPosition } from './types';
 
 type GetResizeDirectionParams = {
   width: number;
@@ -48,7 +48,7 @@ export function getResizeDirection({
  * @param controlPosition - position of the control that is being dragged
  * @returns isHorizontal, isVertical, affectsX, affectsY,
  */
-export function getControlDirection(controlPosition: XYResizeControlPosition) {
+export function getControlDirection(controlPosition: XYResizerControlPosition) {
   const isHorizontal = controlPosition.includes('right') || controlPosition.includes('left');
   const isVertical = controlPosition.includes('bottom') || controlPosition.includes('top');
   const affectsX = controlPosition.includes('left');