diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte index a6f046d5..90cdc62b 100644 --- a/examples/svelte/src/components/Header/Header.svelte +++ b/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', - 'node-resizer' + 'validation' ]; const onChange = (event: Event) => { diff --git a/packages/react/package.json b/packages/react/package.json index 45e3f98d..03cd3802 100644 --- a/packages/react/package.json +++ b/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" }, diff --git a/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx similarity index 86% rename from packages/react/src/additional-components/NodeResizer/ResizeControl.tsx rename to packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx index 5a3b06e7..f5378689 100644 --- a/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx +++ b/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(null); - const defaultPosition = variant === ResizerControlVariant.Line ? 'right' : 'bottom-right'; + const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'; const controlPosition = position ?? defaultPosition; const resizer = useRef(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 ; + return ; } -export default memo(ResizeControl); +export const NodeResizeControl = memo(ResizeControl); diff --git a/packages/react/src/additional-components/NodeResizer/NodeResizer.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizer.tsx index 764c1a8c..6f481865 100644 --- a/packages/react/src/additional-components/NodeResizer/NodeResizer.tsx +++ b/packages/react/src/additional-components/NodeResizer/NodeResizer.tsx @@ -1,8 +1,9 @@ -import ResizeControl from './ResizeControl'; -import { NodeResizerProps } from './types'; -import { ResizerControlVariant, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS } from '@xyflow/system'; +import { ResizeControlVariant, 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) => ( - ))} {XY_RESIZER_HANDLE_POSITIONS.map((position) => ( - & { - 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; }; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index c0f28fa9..20573392 100644 --- a/packages/react/src/index.ts +++ b/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 diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index 4e7a18b9..9a706959 100644 --- a/packages/svelte/src/lib/index.ts +++ b/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 diff --git a/packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte b/packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte index 208dc764..b57afcd1 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte +++ b/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} diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte index 93ed2e5d..da4df10c 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte +++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte @@ -4,8 +4,8 @@ import { useStore } from '$lib/store'; import { XYResizer, - ResizerControlVariant, - type XYResizerControlPosition, + ResizeControlVariant, + 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' - ) as XYResizerControlPosition; + variant === ResizeControlVariant.Line ? 'right' : 'bottom-right' + ) 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; diff --git a/packages/svelte/src/lib/plugins/NodeResizer/types.ts b/packages/svelte/src/lib/plugins/NodeResizer/types.ts index dfc90e4f..b37e55c1 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/types.ts +++ b/packages/svelte/src/lib/plugins/NodeResizer/types.ts @@ -1,10 +1,10 @@ import type { - XYResizeParams, - XYResizeParamsWithDirection, - XYResizeControlPosition, + ControlPosition, ResizeControlVariant, - D3DragEvent, - SubjectPosition + ShouldResize, + 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 = ( - event: ResizeDragEvent, - params: Params -) => Result; -export type ResizeDragEvent = D3DragEvent; -export type ShouldResize = OnResizeHandler; -export type OnResizeStart = OnResizeHandler; -export type OnResize = OnResizeHandler; -export type OnResizeEnd = OnResizeHandler; diff --git a/packages/system/src/types/utils.ts b/packages/system/src/types/utils.ts index 6ebb0744..908e95f1 100644 --- a/packages/system/src/types/utils.ts +++ b/packages/system/src/types/utils.ts @@ -1,5 +1,3 @@ -import type { Optional } from '../utils/types'; - export enum Position { Left = 'left', Top = 'top', diff --git a/packages/system/src/xyresizer/XYResizer.ts b/packages/system/src/xyresizer/XYResizer.ts index 7ba95aac..948602ff 100644 --- a/packages/system/src/xyresizer/XYResizer.ts +++ b/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; diff --git a/packages/system/src/xyresizer/types.ts b/packages/system/src/xyresizer/types.ts index 98fe6688..446e0ac4 100644 --- a/packages/system/src/xyresizer/types.ts +++ b/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 = - | XYResizerControlLinePosition - | 'top-left' - | 'top-right' - | 'bottom-left' - | 'bottom-right'; +export type ControlPosition = ControlLinePosition | '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[] = [ - 'top-left', - 'top-right', - 'bottom-left', - 'bottom-right', -]; -export const XY_RESIZER_LINE_POSITIONS: XYResizerControlLinePosition[] = ['top', 'right', 'bottom', 'left']; +export const XY_RESIZER_HANDLE_POSITIONS: ControlPosition[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right']; +export const XY_RESIZER_LINE_POSITIONS: ControlLinePosition[] = ['top', 'right', 'bottom', 'left']; type OnResizeHandler = (event: ResizeDragEvent, params: Params) => Result; export type ResizeDragEvent = D3DragEvent; diff --git a/packages/system/src/xyresizer/utils.ts b/packages/system/src/xyresizer/utils.ts index ffebea08..cd98e593 100644 --- a/packages/system/src/xyresizer/utils.ts +++ b/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');