alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate NodeResizer

Browse Source
This commit is contained in:
peterkogo
2024-11-13 16:40:26 +01:00
parent edc8632ac7
commit 7ba4104602
3 changed files with 54 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte
+11 -49
View File
@@ -7,29 +7,15 @@
XY_RESIZER_LINE_POSITIONS XY_RESIZER_LINE_POSITIONS
} from '@xyflow/system'; } from '@xyflow/system';
type $$Props = NodeResizerProps; let {
isVisible = true,
export let nodeId: $$Props['nodeId'] = undefined; nodeId,
export let isVisible: $$Props['isVisible'] = true; handleClass,
export let handleClass: $$Props['handleClass'] = undefined; handleStyle,
export let handleStyle: $$Props['handleStyle'] = undefined; lineClass,
export let lineClass: $$Props['lineClass'] = undefined; lineStyle,
export let lineStyle: $$Props['lineStyle'] = undefined; ...rest
export let color: $$Props['color'] = undefined; }: NodeResizerProps = $props();
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;
</script> </script>
{#if isVisible} {#if isVisible}
@@ -40,34 +26,10 @@
{nodeId} {nodeId}
{position} {position}
variant={ResizeControlVariant.Line} variant={ResizeControlVariant.Line}
{color} {...rest}
minWidth={_minWidth}
minHeight={_minHeight}
maxWidth={_maxWidth}
maxHeight={_maxHeight}
{onResizeStart}
{keepAspectRatio}
{shouldResize}
{onResize}
{onResizeEnd}
/> />
{/each} {/each}
{#each XY_RESIZER_HANDLE_POSITIONS as position (position)} {#each XY_RESIZER_HANDLE_POSITIONS as position (position)}
<ResizeControl <ResizeControl class={handleClass} style={handleStyle} {nodeId} {position} {...rest} />
class={handleClass}
style={handleStyle}
{nodeId}
{position}
{color}
minWidth={_minWidth}
minHeight={_minHeight}
maxWidth={_maxWidth}
maxHeight={_maxHeight}
{onResizeStart}
{keepAspectRatio}
{shouldResize}
{onResize}
{onResizeEnd}
/>
{/each} {/each}
{/if} {/if}
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+41 -40
View File
@@ -12,47 +12,48 @@
} from '@xyflow/system'; } from '@xyflow/system';
import type { ResizeControlProps } from './types'; import type { ResizeControlProps } from './types';
type $$Props = ResizeControlProps; let {
nodeId,
export let nodeId: $$Props['nodeId'] = undefined; position,
export let position: $$Props['position'] = undefined; variant = ResizeControlVariant.Handle,
export let variant: $$Props['variant'] = ResizeControlVariant.Handle; color,
export let color: $$Props['color'] = undefined; minWidth = 10,
export let minWidth: $$Props['minWidth'] = 10; minHeight = 10,
$: _minWidth = minWidth ?? 10; maxWidth = Number.MAX_VALUE,
export let minHeight: $$Props['minHeight'] = 10; maxHeight = Number.MAX_VALUE,
$: _minHeight = minHeight ?? 10; keepAspectRatio = false,
export let maxWidth: $$Props['maxWidth'] = Number.MAX_VALUE; shouldResize,
$: _maxWidth = maxWidth ?? Number.MAX_VALUE; onResizeStart,
export let maxHeight: $$Props['maxHeight'] = Number.MAX_VALUE; onResize,
$: _maxHeight = maxHeight ?? Number.MAX_VALUE; onResizeEnd,
export let keepAspectRatio: $$Props['keepAspectRatio'] = false; style = '',
export let shouldResize: $$Props['shouldResize'] = undefined; class: className,
export let onResizeStart: $$Props['onResizeStart'] = undefined; children
export let onResize: $$Props['onResize'] = undefined; }: ResizeControlProps = $props();
export let onResizeEnd: $$Props['onResizeEnd'] = undefined;
export let style: $$Props['style'] = '';
let className: $$Props['class'] = '';
export { className as class };
const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin, domNode } = useStore(); const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin, domNode } = useStore();
const contextNodeId = getContext<string>('svelteflow__node_id'); let id = $derived(
$: id = typeof nodeId === 'string' ? nodeId : contextNodeId; typeof nodeId === 'string' ? nodeId : getContext<string>('svelteflow__node_id')
);
let resizeControlRef: HTMLDivElement; let resizeControlRef: HTMLDivElement;
let resizer: XYResizerInstance | null = null; let resizer: XYResizerInstance | null = $state(null);
$: defaultPosition = ( let controlPosition = $derived.by(() => {
variant === ResizeControlVariant.Line ? 'right' : 'bottom-right' let defaultPosition = (
) as ControlPosition; variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'
$: controlPosition = position ?? defaultPosition; ) as ControlPosition;
return position ?? defaultPosition;
});
$: positionClassNames = controlPosition.split('-'); let positionClassNames = $derived(controlPosition.split('-'));
$: colorStyleProp = variant === ResizeControlVariant.Line ? 'border-color' : 'background-color'; let controlStyle = $derived.by(() => {
$: _style = style ?? ''; let colorStyleProp =
$: controlStyle = color ? `${_style} ${colorStyleProp}: ${color};` : _style; variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
return color ? `${style} ${colorStyleProp}: ${color};` : style;
});
onMount(() => { onMount(() => {
if (resizeControlRef) { if (resizeControlRef) {
@@ -100,14 +101,14 @@
}; };
}); });
$: { $effect.pre(() => {
resizer?.update({ resizer?.update({
controlPosition, controlPosition,
boundaries: { boundaries: {
minWidth: _minWidth, minWidth,
minHeight: _minHeight, minHeight,
maxWidth: _maxWidth, maxWidth,
maxHeight: _maxHeight maxHeight
}, },
keepAspectRatio: !!keepAspectRatio, keepAspectRatio: !!keepAspectRatio,
onResizeStart, onResizeStart,
@@ -115,7 +116,7 @@
onResizeEnd, onResizeEnd,
shouldResize shouldResize
}); });
} });
</script> </script>
<div <div
@@ -123,5 +124,5 @@
bind:this={resizeControlRef} bind:this={resizeControlRef}
style={controlStyle} style={controlStyle}
> >
<slot /> {@render children?.()}
</div> </div>
packages/svelte/src/lib/plugins/NodeResizer/types.ts
+2
View File
@@ -6,6 +6,7 @@ import type {
OnResize, OnResize,
OnResizeEnd OnResizeEnd
} from '@xyflow/system'; } from '@xyflow/system';
import type { Snippet } from 'svelte';
export type NodeResizerProps = { export type NodeResizerProps = {
/** Id of the node it is resizing /** Id of the node it is resizing
@@ -69,4 +70,5 @@ export type ResizeControlProps = Pick<
variant?: ResizeControlVariant; variant?: ResizeControlVariant;
class?: string; class?: string;
style?: string; style?: string;
children?: Snippet;
}; };