chore(node-resizer): cleanup

examples/svelte/src/components/Header/Header.svelte

@@ -15,6 +15,7 @@
 		'interaction',
 		'intersections',
 		'node-toolbar',
+		'node-resizer',
 		'overview',
 		'stress',
 		'subflows',
@@ -22,8 +23,7 @@
 		'usenodesdata',
 		'usesvelteflow',
 		'useupdatenodeinternals',
-		'validation',
+		'validation'
-		'node-resizer'
 	];
 
 	const onChange = (event: Event) => {

packages/react/package.json

@@ -48,7 +48,6 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@types/d3": "^7.4.0",
     "@xyflow/system": "workspace:*",
     "classcat": "^5.0.3",
     "zustand": "^4.4.0"
@@ -78,8 +77,6 @@
   "rollup": {
     "globals": {
       "classcat": "cc",
-      "d3-selection": "d3Selection",
-      "d3-drag": "d3Drag",
       "zustand": "zustand",
       "zustand/shallow": "zustandShallow"
     },

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

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

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

@@ -1,8 +1,9 @@
-import ResizeControl from './ResizeControl';
+import { ResizeControlVariant, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS } from '@xyflow/system';
-import { NodeResizerProps } from './types';
-import { ResizerControlVariant, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS } from '@xyflow/system';
 
-export default function NodeResizer({
+import { NodeResizeControl } from './NodeResizeControl';
+import type { NodeResizerProps } from './types';
+
+export function NodeResizer({
   nodeId,
   isVisible = true,
   handleClassName,
@@ -27,13 +28,13 @@ export default function NodeResizer({
   return (
     <>
       {XY_RESIZER_LINE_POSITIONS.map((position) => (
-        <ResizeControl
+        <NodeResizeControl
           key={position}
           className={lineClassName}
           style={lineStyle}
           nodeId={nodeId}
           position={position}
-          variant={ResizerControlVariant.Line}
+          variant={ResizeControlVariant.Line}
           color={color}
           minWidth={minWidth}
           minHeight={minHeight}
@@ -47,7 +48,7 @@ export default function NodeResizer({
         />
       ))}
       {XY_RESIZER_HANDLE_POSITIONS.map((position) => (
-        <ResizeControl
+        <NodeResizeControl
           key={position}
           className={handleClassName}
           style={handleStyle}

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

@@ -1,4 +1,4 @@
-export { default as NodeResizer } from './NodeResizer';
+export { NodeResizer } from './NodeResizer';
-export { default as NodeResizeControl } from './ResizeControl';
+export { NodeResizeControl } from './NodeResizeControl';
 
 export * from './types';

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

@@ -1,7 +1,7 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type {
-  XYResizeControlPosition,
+  ControlPosition,
-  XYResizeControlLinePosition,
+  ControlLinePosition,
   ResizeControlVariant,
   ShouldResize,
   OnResizeStart,
@@ -42,7 +42,7 @@ export type ResizeControlProps = Pick<
   | 'onResize'
   | 'onResizeEnd'
 > & {
-  position?: XYResizeControlPosition;
+  position?: ControlPosition;
   variant?: ResizeControlVariant;
   className?: string;
   style?: CSSProperties;
@@ -50,5 +50,5 @@ export type ResizeControlProps = Pick<
 };
 
 export type ResizeControlLineProps = ResizeControlProps & {
-  position?: XYResizeControlLinePosition;
+  position?: ControlLinePosition;
 };

packages/react/src/index.ts

@@ -81,6 +81,13 @@ export {
   type ColorModeClass,
   type HandleType,
   type OnBeforeDelete,
+  type ShouldResize,
+  type OnResizeStart,
+  type OnResize,
+  type OnResizeEnd,
+  type ControlPosition,
+  type ControlLinePosition,
+  type ResizeControlVariant,
 } from '@xyflow/system';
 
 // system utils

packages/svelte/src/lib/index.ts

@@ -90,7 +90,14 @@ export {
   type Transform,
   type CoordinateExtent,
   type ColorMode,
-  type ColorModeClass
+  type ColorModeClass,
+  type ShouldResize,
+  type OnResizeStart,
+  type OnResize,
+  type OnResizeEnd,
+  type ControlPosition,
+  type ControlLinePosition,
+  type ResizeControlVariant
 } from '@xyflow/system';
 
 // system utils

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

@@ -2,7 +2,7 @@
   import ResizeControl from './ResizeControl.svelte';
   import type { NodeResizerProps } from './types';
   import {
-    ResizerControlVariant,
+    ResizeControlVariant,
     XY_RESIZER_HANDLE_POSITIONS,
     XY_RESIZER_LINE_POSITIONS
   } from '@xyflow/system';
@@ -39,7 +39,7 @@
       style={lineStyle}
       {nodeId}
       {position}
-      variant={ResizerControlVariant.Line}
+      variant={ResizeControlVariant.Line}
       {color}
       minWidth={_minWidth}
       minHeight={_minHeight}

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

@@ -4,8 +4,8 @@
   import { useStore } from '$lib/store';
   import {
     XYResizer,
-    ResizerControlVariant,
+    ResizeControlVariant,
-    type XYResizerControlPosition,
+    type ControlPosition,
     type XYResizerInstance,
     type XYResizerChange
   } from '@xyflow/system';
@@ -15,7 +15,7 @@
 
   export let nodeId: $$Props['nodeId'] = undefined;
   export let position: $$Props['position'] = undefined;
-  export let variant: $$Props['variant'] = ResizerControlVariant.Handle;
+  export let variant: $$Props['variant'] = ResizeControlVariant.Handle;
   export let color: $$Props['color'] = undefined;
   export let minWidth: $$Props['minWidth'] = 10;
   $: _minWidth = minWidth ?? 10;
@@ -43,13 +43,13 @@
   let resizer: XYResizerInstance | null = null;
 
   $: defaultPosition = (
-    variant === ResizerControlVariant.Line ? 'right' : 'bottom-right'
+    variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'
-  ) as XYResizerControlPosition;
+  ) as ControlPosition;
   $: controlPosition = position ?? defaultPosition;
 
   $: positionClassNames = controlPosition.split('-');
 
-  $: colorStyleProp = variant === ResizerControlVariant.Line ? 'border-color' : 'background-color';
+  $: colorStyleProp = variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
   $: _style = style ?? '';
   $: controlStyle = !!color ? `${_style} ${colorStyleProp}: ${color};` : _style;
 

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

@@ -1,10 +1,10 @@
 import type {
-  XYResizeParams,
+  ControlPosition,
-  XYResizeParamsWithDirection,
-  XYResizeControlPosition,
   ResizeControlVariant,
-  D3DragEvent,
+  ShouldResize,
-  SubjectPosition
+  OnResizeStart,
+  OnResize,
+  OnResizeEnd
 } from '@xyflow/system';
 
 export type NodeResizerProps = {
@@ -40,18 +40,8 @@ export type ResizeControlProps = Pick<
   | 'onResize'
   | 'onResizeEnd'
 > & {
-  position?: XYResizeControlPosition;
+  position?: ControlPosition;
   variant?: ResizeControlVariant;
   class?: string;
   style?: string;
 };
-
-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;

packages/system/src/types/utils.ts

@@ -1,5 +1,3 @@
-import type { Optional } from '../utils/types';
-
 export enum Position {
   Left = 'left',
   Top = 'top',

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

packages/system/src/xyresizer/types.ts

@@ -11,27 +11,17 @@ export type XYResizerParamsWithDirection = XYResizerParams & {
   direction: number[];
 };
 
-export type XYResizerControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
+export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
 
-export type XYResizerControlPosition =
+export type ControlPosition = ControlLinePosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-  | XYResizerControlLinePosition
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
 
-export enum ResizerControlVariant {
+export enum ResizeControlVariant {
   Line = 'line',
   Handle = 'handle',
 }
 
-export const XY_RESIZER_HANDLE_POSITIONS: XYResizerControlPosition[] = [
+export const XY_RESIZER_HANDLE_POSITIONS: ControlPosition[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
-  'top-left',
+export const XY_RESIZER_LINE_POSITIONS: ControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
-  'top-right',
-  'bottom-left',
-  'bottom-right',
-];
-export const XY_RESIZER_LINE_POSITIONS: XYResizerControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
 
 type OnResizeHandler<Params = XYResizerParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
 export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;

packages/system/src/xyresizer/utils.ts

@@ -1,5 +1,5 @@
 import { clamp, getPointerPosition } from '../utils';
-import { XYResizerControlPosition } from './types';
+import { ControlPosition } 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: XYResizerControlPosition) {
+export function getControlDirection(controlPosition: ControlPosition) {
   const isHorizontal = controlPosition.includes('right') || controlPosition.includes('left');
   const isVertical = controlPosition.includes('bottom') || controlPosition.includes('top');
   const affectsX = controlPosition.includes('left');