diff --git a/packages/react/src/additional-components/NodeResizer/NodeResizer.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizer.tsx index 0306f3ba..764c1a8c 100644 --- a/packages/react/src/additional-components/NodeResizer/NodeResizer.tsx +++ b/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) => ( ))} - {XY_RESIZER_HANDLE_CONTROLS.map((c) => ( + {XY_RESIZER_HANDLE_POSITIONS.map((position) => ( (null); - const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'; + const defaultPosition = variant === ResizerControlVariant.Line ? 'right' : 'bottom-right'; const controlPosition = position ?? defaultPosition; const resizer = useRef(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 ; + return ; } export default memo(ResizeControl); diff --git a/packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte b/packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte index 1738c70d..208dc764 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte +++ b/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, - XY_RESIZER_LINE_CONTROLS, - ResizeControlVariant + ResizerControlVariant, + XY_RESIZER_HANDLE_POSITIONS, + XY_RESIZER_LINE_POSITIONS } from '@xyflow/system'; type $$Props = NodeResizerProps; @@ -33,13 +33,13 @@ {#if isVisible} - {#each XY_RESIZER_LINE_CONTROLS as c (c)} + {#each XY_RESIZER_LINE_POSITIONS as position (position)} {/each} - {#each XY_RESIZER_HANDLE_CONTROLS as c (c)} + {#each XY_RESIZER_HANDLE_POSITIONS as position (position)} import { getContext, onMount } from 'svelte'; - import { get } from 'svelte/store'; import cc from 'classcat'; import type { ResizeControlProps } from './types'; import { - ResizeControlVariant, - type XYResizeControlPosition, + ResizerControlVariant, + 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' - ) as XYResizeControlPosition; + variant === ResizerControlVariant.Line ? 'right' : 'bottom-right' + ) 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) { - 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 - }); - } + resizer?.update({ + controlPosition, + boundries: { + minWidth: _minWidth, + minHeight: _minHeight, + maxWidth: _maxWidth, + maxHeight: _maxHeight + }, + keepAspectRatio: !!keepAspectRatio, + onResizeStart, + onResize, + onResizeEnd, + shouldResize + }); } diff --git a/packages/system/src/xyresizer/XYResizer.ts b/packages/system/src/xyresizer/XYResizer.ts index 7dd9685d..b664c627 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, 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; diff --git a/packages/system/src/xyresizer/types.ts b/packages/system/src/xyresizer/types.ts index 9a3272d8..98fe6688 100644 --- a/packages/system/src/xyresizer/types.ts +++ b/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 = - | XYResizeControlLinePosition +export type XYResizerControlPosition = + | 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 = (event: ResizeDragEvent, params: Params) => Result; +type OnResizeHandler = (event: ResizeDragEvent, params: Params) => Result; export type ResizeDragEvent = D3DragEvent; -export type ShouldResize = OnResizeHandler; +export type ShouldResize = OnResizeHandler; export type OnResizeStart = OnResizeHandler; -export type OnResize = OnResizeHandler; +export type OnResize = OnResizeHandler; export type OnResizeEnd = OnResizeHandler; diff --git a/packages/system/src/xyresizer/utils.ts b/packages/system/src/xyresizer/utils.ts index 15c3af06..ffebea08 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 { 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');