123 lines
3.2 KiB
Svelte
123 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import { getContext, onMount } from 'svelte';
|
|
import { useStore } from '$lib/store';
|
|
import {
|
|
XYResizer,
|
|
ResizeControlVariant,
|
|
type ControlPosition,
|
|
type XYResizerInstance,
|
|
type XYResizerChange,
|
|
type XYResizerChildChange
|
|
} from '@xyflow/system';
|
|
import type { ResizeControlProps } from './types';
|
|
import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
|
|
|
|
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 store = useStore();
|
|
|
|
const { updateNode } = useSvelteFlow();
|
|
|
|
let id = $derived(
|
|
typeof nodeId === 'string' ? nodeId : getContext<string>('svelteflow__node_id')
|
|
);
|
|
|
|
let resizeControlRef: HTMLDivElement;
|
|
let resizer: XYResizerInstance | null = $state(null);
|
|
|
|
let controlPosition = $derived.by(() => {
|
|
let defaultPosition = (
|
|
variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'
|
|
) as ControlPosition;
|
|
return position ?? defaultPosition;
|
|
});
|
|
|
|
let positionClassNames = $derived(controlPosition.split('-'));
|
|
|
|
let controlStyle = $derived.by(() => {
|
|
let colorStyleProp =
|
|
variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
|
|
return color ? `${style} ${colorStyleProp}: ${color};` : style;
|
|
});
|
|
|
|
onMount(() => {
|
|
if (resizeControlRef) {
|
|
resizer = XYResizer({
|
|
domNode: resizeControlRef,
|
|
nodeId: id,
|
|
getStoreItems: () => {
|
|
return {
|
|
nodeLookup: store.nodeLookup,
|
|
transform: [store.viewport.x, store.viewport.y, store.viewport.zoom],
|
|
snapGrid: store.snapGrid ?? undefined,
|
|
snapToGrid: !!store.snapGrid,
|
|
nodeOrigin: store.nodeOrigin,
|
|
paneDomNode: store.domNode
|
|
};
|
|
},
|
|
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
|
|
updateNode(id, (node) => ({
|
|
...node,
|
|
position: { x: change.x ?? node.position.x, y: change.y ?? node.position.y },
|
|
width: change.width ?? node.width,
|
|
height: change.height ?? node.height
|
|
}));
|
|
|
|
// TODO: performance?
|
|
for (const childChange of childChanges) {
|
|
updateNode(childChange.id, (node) => ({
|
|
...node,
|
|
position: childChange.position
|
|
}));
|
|
}
|
|
}
|
|
});
|
|
}
|
|
return () => {
|
|
resizer?.destroy();
|
|
};
|
|
});
|
|
|
|
$effect.pre(() => {
|
|
resizer?.update({
|
|
controlPosition,
|
|
boundaries: {
|
|
minWidth,
|
|
minHeight,
|
|
maxWidth,
|
|
maxHeight
|
|
},
|
|
keepAspectRatio: !!keepAspectRatio,
|
|
onResizeStart,
|
|
onResize,
|
|
onResizeEnd,
|
|
shouldResize
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div
|
|
class={['svelte-flow__resize-control', 'nodrag', ...positionClassNames, variant, className]}
|
|
bind:this={resizeControlRef}
|
|
style={controlStyle}
|
|
>
|
|
{@render children?.()}
|
|
</div>
|