From 7ba410460224ed74212b895fafa876633ca5c8a4 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 13 Nov 2024 16:40:26 +0100 Subject: [PATCH] migrate NodeResizer --- .../plugins/NodeResizer/NodeResizer.svelte | 60 +++----------- .../plugins/NodeResizer/ResizeControl.svelte | 81 ++++++++++--------- .../src/lib/plugins/NodeResizer/types.ts | 2 + 3 files changed, 54 insertions(+), 89 deletions(-) diff --git a/packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte b/packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte index b57afcd1..8ced5ba3 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte +++ b/packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte @@ -7,29 +7,15 @@ XY_RESIZER_LINE_POSITIONS } from '@xyflow/system'; - type $$Props = NodeResizerProps; - - export let nodeId: $$Props['nodeId'] = undefined; - export let isVisible: $$Props['isVisible'] = true; - export let handleClass: $$Props['handleClass'] = undefined; - export let handleStyle: $$Props['handleStyle'] = undefined; - export let lineClass: $$Props['lineClass'] = undefined; - export let lineStyle: $$Props['lineStyle'] = undefined; - export let color: $$Props['color'] = undefined; - export let minWidth: $$Props['minWidth'] = 10; - export let minHeight: $$Props['minHeight'] = 10; - export let maxWidth: $$Props['maxWidth'] = Number.MAX_VALUE; - export let maxHeight: $$Props['maxHeight'] = Number.MAX_VALUE; - export let keepAspectRatio: $$Props['keepAspectRatio'] = false; - export let shouldResize: $$Props['shouldResize'] = undefined; - export let onResizeStart: $$Props['onResizeStart'] = undefined; - export let onResize: $$Props['onResize'] = undefined; - export let onResizeEnd: $$Props['onResizeEnd'] = undefined; - - let _minWidth = minWidth || 10; - let _minHeight = minHeight || 10; - let _maxWidth = maxWidth || Number.MAX_VALUE; - let _maxHeight = maxHeight || Number.MAX_VALUE; + let { + isVisible = true, + nodeId, + handleClass, + handleStyle, + lineClass, + lineStyle, + ...rest + }: NodeResizerProps = $props(); {#if isVisible} @@ -40,34 +26,10 @@ {nodeId} {position} variant={ResizeControlVariant.Line} - {color} - minWidth={_minWidth} - minHeight={_minHeight} - maxWidth={_maxWidth} - maxHeight={_maxHeight} - {onResizeStart} - {keepAspectRatio} - {shouldResize} - {onResize} - {onResizeEnd} + {...rest} /> {/each} {#each XY_RESIZER_HANDLE_POSITIONS as position (position)} - + {/each} {/if} diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte index 7e686880..415899ed 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte +++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte @@ -12,47 +12,48 @@ } from '@xyflow/system'; import type { ResizeControlProps } from './types'; - type $$Props = ResizeControlProps; - - export let nodeId: $$Props['nodeId'] = undefined; - export let position: $$Props['position'] = undefined; - export let variant: $$Props['variant'] = ResizeControlVariant.Handle; - export let color: $$Props['color'] = undefined; - export let minWidth: $$Props['minWidth'] = 10; - $: _minWidth = minWidth ?? 10; - export let minHeight: $$Props['minHeight'] = 10; - $: _minHeight = minHeight ?? 10; - export let maxWidth: $$Props['maxWidth'] = Number.MAX_VALUE; - $: _maxWidth = maxWidth ?? Number.MAX_VALUE; - export let maxHeight: $$Props['maxHeight'] = Number.MAX_VALUE; - $: _maxHeight = maxHeight ?? Number.MAX_VALUE; - export let keepAspectRatio: $$Props['keepAspectRatio'] = false; - export let shouldResize: $$Props['shouldResize'] = undefined; - export let onResizeStart: $$Props['onResizeStart'] = undefined; - export let onResize: $$Props['onResize'] = undefined; - export let onResizeEnd: $$Props['onResizeEnd'] = undefined; - export let style: $$Props['style'] = ''; - let className: $$Props['class'] = ''; - export { className as class }; + let { + nodeId, + position, + variant = ResizeControlVariant.Handle, + color, + minWidth = 10, + minHeight = 10, + maxWidth = Number.MAX_VALUE, + maxHeight = Number.MAX_VALUE, + keepAspectRatio = false, + shouldResize, + onResizeStart, + onResize, + onResizeEnd, + style = '', + class: className, + children + }: ResizeControlProps = $props(); const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin, domNode } = useStore(); - const contextNodeId = getContext('svelteflow__node_id'); - $: id = typeof nodeId === 'string' ? nodeId : contextNodeId; + let id = $derived( + typeof nodeId === 'string' ? nodeId : getContext('svelteflow__node_id') + ); let resizeControlRef: HTMLDivElement; - let resizer: XYResizerInstance | null = null; + let resizer: XYResizerInstance | null = $state(null); - $: defaultPosition = ( - variant === ResizeControlVariant.Line ? 'right' : 'bottom-right' - ) as ControlPosition; - $: controlPosition = position ?? defaultPosition; + let controlPosition = $derived.by(() => { + let defaultPosition = ( + variant === ResizeControlVariant.Line ? 'right' : 'bottom-right' + ) as ControlPosition; + return position ?? defaultPosition; + }); - $: positionClassNames = controlPosition.split('-'); + let positionClassNames = $derived(controlPosition.split('-')); - $: colorStyleProp = variant === ResizeControlVariant.Line ? 'border-color' : 'background-color'; - $: _style = style ?? ''; - $: controlStyle = color ? `${_style} ${colorStyleProp}: ${color};` : _style; + let controlStyle = $derived.by(() => { + let colorStyleProp = + variant === ResizeControlVariant.Line ? 'border-color' : 'background-color'; + return color ? `${style} ${colorStyleProp}: ${color};` : style; + }); onMount(() => { if (resizeControlRef) { @@ -100,14 +101,14 @@ }; }); - $: { + $effect.pre(() => { resizer?.update({ controlPosition, boundaries: { - minWidth: _minWidth, - minHeight: _minHeight, - maxWidth: _maxWidth, - maxHeight: _maxHeight + minWidth, + minHeight, + maxWidth, + maxHeight }, keepAspectRatio: !!keepAspectRatio, onResizeStart, @@ -115,7 +116,7 @@ onResizeEnd, shouldResize }); - } + });
- + {@render children?.()}
diff --git a/packages/svelte/src/lib/plugins/NodeResizer/types.ts b/packages/svelte/src/lib/plugins/NodeResizer/types.ts index ebe44b8b..bcb924ae 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/types.ts +++ b/packages/svelte/src/lib/plugins/NodeResizer/types.ts @@ -6,6 +6,7 @@ import type { OnResize, OnResizeEnd } from '@xyflow/system'; +import type { Snippet } from 'svelte'; export type NodeResizerProps = { /** Id of the node it is resizing @@ -69,4 +70,5 @@ export type ResizeControlProps = Pick< variant?: ResizeControlVariant; class?: string; style?: string; + children?: Snippet; };