migrate NodeResizer

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();
 </script>
 
 {#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)}
-    <ResizeControl
-      class={handleClass}
-      style={handleStyle}
-      {nodeId}
-      {position}
-      {color}
-      minWidth={_minWidth}
-      minHeight={_minHeight}
-      maxWidth={_maxWidth}
-      maxHeight={_maxHeight}
-      {onResizeStart}
-      {keepAspectRatio}
-      {shouldResize}
-      {onResize}
-      {onResizeEnd}
-    />
+    <ResizeControl class={handleClass} style={handleStyle} {nodeId} {position} {...rest} />
   {/each}
 {/if}

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<string>('svelteflow__node_id');
-  $: id = typeof nodeId === 'string' ? nodeId : contextNodeId;
+  let id = $derived(
+    typeof nodeId === 'string' ? nodeId : getContext<string>('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
     });
-  }
+  });
 </script>
 
 <div
@@ -123,5 +124,5 @@
   bind:this={resizeControlRef}
   style={controlStyle}
 >
-  <slot />
+  {@render children?.()}
 </div>

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;
 };