feat(svelte): add autoScale for node resizer
This commit is contained in:
@@ -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'
|
||||||
|
|||||||
Reference in New Issue
Block a user