feat(svelte): add autoScale for node resizer

This commit is contained in:
moklick
2025-06-11 10:48:49 +02:00
parent 120a12baf4
commit 49e8c9329a
4 changed files with 16 additions and 3 deletions
@@ -11,7 +11,7 @@ const CustomResizerNode: FC<NodeProps> = ({ data }) => {
minWidth={100} minWidth={100}
maxWidth={500} maxWidth={500}
color="orange" color="orange"
scaleControls autoScale={false}
/> />
<Handle type="target" position={Position.Left} /> <Handle type="target" position={Position.Left} />
<div>{data.label}</div> <div>{data.label}</div>
@@ -14,6 +14,7 @@
handleStyle, handleStyle,
lineClass, lineClass,
lineStyle, lineStyle,
autoScale = true,
...rest ...rest
}: NodeResizerProps = $props(); }: NodeResizerProps = $props();
</script> </script>
@@ -25,11 +26,19 @@
style={lineStyle} style={lineStyle}
{nodeId} {nodeId}
{position} {position}
{autoScale}
variant={ResizeControlVariant.Line} variant={ResizeControlVariant.Line}
{...rest} {...rest}
/> />
{/each} {/each}
{#each XY_RESIZER_HANDLE_POSITIONS as position (position)} {#each XY_RESIZER_HANDLE_POSITIONS as position (position)}
<ResizeControl class={handleClass} style={handleStyle} {nodeId} {position} {...rest} /> <ResizeControl
class={handleClass}
style={handleStyle}
{nodeId}
{position}
{autoScale}
{...rest}
/>
{/each} {/each}
{/if} {/if}
@@ -22,6 +22,7 @@
maxWidth = Number.MAX_VALUE, maxWidth = Number.MAX_VALUE,
maxHeight = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE,
keepAspectRatio = false, keepAspectRatio = false,
autoScale = true,
shouldResize, shouldResize,
onResizeStart, onResizeStart,
onResize, onResize,
@@ -121,7 +122,7 @@
bind:this={resizeControlRef} bind:this={resizeControlRef}
style:border-color={isLineVariant ? color : undefined} style:border-color={isLineVariant ? color : undefined}
style:background-color={isLineVariant ? undefined : color} style:background-color={isLineVariant ? undefined : color}
style:scale={isLineVariant ? undefined : Math.max(1 / store.viewport.zoom, 1)} style:scale={isLineVariant || !autoScale ? undefined : Math.max(1 / store.viewport.zoom, 1)}
{...rest} {...rest}
> >
{@render children?.()} {@render children?.()}
@@ -36,6 +36,8 @@ export type NodeResizerProps = {
maxHeight?: number; maxHeight?: number;
/** Keep aspect ratio when resizing */ /** Keep aspect ratio when resizing */
keepAspectRatio?: boolean; keepAspectRatio?: boolean;
/** Automatically scale the node when resizing */
autoScale?: boolean;
/** Callback to determine if node should resize */ /** Callback to determine if node should resize */
shouldResize?: ShouldResize; shouldResize?: ShouldResize;
/** Callback called when resizing starts */ /** Callback called when resizing starts */
@@ -55,6 +57,7 @@ export type ResizeControlProps = Pick<
| 'maxWidth' | 'maxWidth'
| 'maxHeight' | 'maxHeight'
| 'keepAspectRatio' | 'keepAspectRatio'
| 'autoScale'
| 'shouldResize' | 'shouldResize'
| 'onResizeStart' | 'onResizeStart'
| 'onResize' | 'onResize'