Naive copy&paste implementation of node resizer in svelte, some stuff pulled out to system

2024-01-04 21:43:04 +01:00
parent a899f9b6ca
commit 296cc15fc1
22 changed files with 6256 additions and 9006 deletions
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import ResizeControl from './ResizeControl.svelte';
+  import type { NodeResizerProps } from './types';
+  import {
+    XY_RESIZER_HANDLE_CONTROLS,
+    XY_RESIZER_LINE_CONTROLS,
+    ResizeControlVariant
+  } 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;
+
+  $: console.log(isVisible);
+</script>
+
+{#if isVisible}
+  {#each XY_RESIZER_LINE_CONTROLS as c (c)}
+    <ResizeControl
+      class={lineClass}
+      style={lineStyle}
+      {nodeId}
+      position={c}
+      variant={ResizeControlVariant.Line}
+      {color}
+      minWidth={_minWidth}
+      minHeight={_minHeight}
+      maxWidth={_maxWidth}
+      maxHeight={_maxHeight}
+      {onResizeStart}
+      {keepAspectRatio}
+      {shouldResize}
+      {onResize}
+      {onResizeEnd}
+    />
+  {/each}
+  {#each XY_RESIZER_HANDLE_CONTROLS as c (c)}
+    <ResizeControl
+      class={handleClass}
+      style={handleStyle}
+      {nodeId}
+      position={c}
+      {color}
+      minWidth={_minWidth}
+      minHeight={_minHeight}
+      maxWidth={_maxWidth}
+      maxHeight={_maxHeight}
+      {onResizeStart}
+      {keepAspectRatio}
+      {shouldResize}
+      {onResize}
+      {onResizeEnd}
+    />
+  {/each}
+{/if}