@yh-ui/flow 0.1.21

package/dist/components/nodes/CustomNode.d.vue.ts

@@ -0,0 +1,36 @@
+import type { Node, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected: boolean;
+    dragging: boolean;
+    connectable: boolean;
+    style?: NodeStyle;
+    label?: string;
+}
+declare var __VLS_1: {
+    node: {
+        id: any;
+        type: any;
+        data: any;
+        selected: any;
+    };
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/nodes/CustomNode.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  id: { type: String, required: true },
+  type: { type: String, required: true },
+  data: { type: null, required: true },
+  selected: { type: Boolean, required: true, default: false },
+  dragging: { type: Boolean, required: true, default: false },
+  connectable: { type: Boolean, required: true, default: true },
+  style: { type: Object, required: false, default: () => ({}) },
+  label: { type: String, required: false, default: "" }
+});
+const nodeStyle = computed(() => {
+  const base = {
+    padding: "12px",
+    borderRadius: "8px",
+    border: "1px solid #dcdfe6",
+    backgroundColor: "#ffffff",
+    minWidth: "120px",
+    transition: "all 0.2s"
+  };
+  if (props.selected) {
+    base.border = "2px solid #409eff";
+    base.boxShadow = "0 0 8px rgba(64, 158, 255, 0.4)";
+  }
+  if (props.dragging) {
+    base.opacity = "0.8";
+  }
+  return { ...base, ...props.style };
+});
+</script>
+
+<template>
+  <div :class="['flow-custom-node', {
+  selected,
+  dragging
+}]" :style="nodeStyle">
+    <slot :node="{ id, type, data, selected }" />
+  </div>
+</template>
+
+<style scoped>
+.flow-custom-node{cursor:pointer;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.flow-custom-node.selected{z-index:10}.flow-custom-node.dragging{cursor:grabbing;z-index:100}
+</style>

package/dist/components/nodes/CustomNode.vue.d.ts

@@ -0,0 +1,36 @@
+import type { Node, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected: boolean;
+    dragging: boolean;
+    connectable: boolean;
+    style?: NodeStyle;
+    label?: string;
+}
+declare var __VLS_1: {
+    node: {
+        id: any;
+        type: any;
+        data: any;
+        selected: any;
+    };
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/nodes/DatabaseNode.d.vue.ts

@@ -0,0 +1,19 @@
+import type { Node, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected?: boolean;
+    dragging?: boolean;
+    connectable?: boolean;
+    style?: NodeStyle;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/nodes/DatabaseNode.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  id: { type: String, required: true },
+  type: { type: String, required: true },
+  data: { type: null, required: true },
+  selected: { type: Boolean, required: false, default: false },
+  dragging: { type: Boolean, required: false, default: false },
+  connectable: { type: Boolean, required: false, default: true },
+  style: { type: Object, required: false, default: () => ({}) },
+  label: { type: String, required: false, default: "" }
+});
+const nodeStyle = computed(() => {
+  return { ...props.style };
+});
+</script>
+
+<template>
+  <div :class="['flow-database-node', {
+  selected,
+  dragging
+}]" :style="nodeStyle">
+    <div class="yh-flow-node-database__content" :style="data?.style">
+      <div class="yh-flow-node-database__top"></div>
+      <div class="yh-flow-node-database__body">
+        <span class="yh-flow-node-database__label">{{ label || data?.label }}</span>
+      </div>
+      <!-- Handles -->
+      <div
+        v-if="connectable"
+        class="flow-handle position-top"
+        data-handle-type="target"
+        data-handle-position="top"
+      >
+      </div>
+      <div
+        v-if="connectable"
+        class="flow-handle position-bottom"
+        data-handle-type="source"
+        data-handle-position="bottom"
+      ></div>
+      <div
+        v-if="connectable"
+        class="flow-handle position-left"
+        data-handle-type="target"
+        data-handle-position="left"
+      >
+      </div>
+      <div
+        v-if="connectable"
+        class="flow-handle position-right"
+        data-handle-type="source"
+        data-handle-position="right"
+      >
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.flow-database-node{cursor:pointer;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.flow-database-node.dragging{cursor:grabbing}.yh-flow-node-database__content{height:80px;position:relative;width:120px}.yh-flow-node-database__top{background:#fff;border:1px solid #1a192b;border-radius:50%;height:24px;left:0;position:absolute;top:0;width:100%;z-index:2}.yh-flow-node-database__body{align-items:center;background:#fff;border:1px solid #1a192b;border-bottom-left-radius:50% 12px;border-bottom-right-radius:50% 12px;border-top:none;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);display:flex;height:calc(100% - 12px);justify-content:center;left:0;position:absolute;top:12px;width:100%;z-index:1}.yh-flow-node-database__label{color:#222;font-size:12px;margin-top:10px;padding:0 10px;text-align:center}.flow-handle{background:#fff;border:1px solid #1a192b;border-radius:50%;height:10px;position:absolute;width:10px;z-index:20}.flow-handle.position-top{left:50%;top:0;transform:translate(-50%,-50%)}.flow-handle.position-bottom{bottom:0;left:50%;transform:translate(-50%,50%)}.flow-handle.position-left{left:0;top:50%;transform:translate(-50%,-50%)}.flow-handle.position-right{right:0;top:50%;transform:translate(50%,-50%)}
+</style>

package/dist/components/nodes/DatabaseNode.vue.d.ts

@@ -0,0 +1,19 @@
+import type { Node, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected?: boolean;
+    dragging?: boolean;
+    connectable?: boolean;
+    style?: NodeStyle;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/nodes/DiamondNode.d.vue.ts

@@ -0,0 +1,19 @@
+import type { Node, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected?: boolean;
+    dragging?: boolean;
+    connectable?: boolean;
+    style?: NodeStyle;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/nodes/DiamondNode.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  id: { type: String, required: true },
+  type: { type: String, required: true },
+  data: { type: null, required: true },
+  selected: { type: Boolean, required: false, default: false },
+  dragging: { type: Boolean, required: false, default: false },
+  connectable: { type: Boolean, required: false, default: true },
+  style: { type: Object, required: false, default: () => ({}) },
+  label: { type: String, required: false, default: "" }
+});
+const nodeStyle = computed(() => {
+  return { ...props.style };
+});
+</script>
+
+<template>
+  <div :class="['flow-diamond-node', {
+  selected,
+  dragging
+}]" :style="nodeStyle">
+    <!-- Decision Node (Diamond shape using CSS transform) -->
+    <div class="yh-flow-node-diamond__content">
+      <div class="yh-flow-node-diamond__shape" :style="data?.style">
+        <span class="yh-flow-node-diamond__label">{{ label || data?.label }}</span>
+      </div>
+      <!-- Handles -->
+      <div
+        v-if="connectable"
+        class="flow-handle position-top"
+        data-handle-type="target"
+        data-handle-position="top"
+      >
+      </div>
+      <div
+        v-if="connectable"
+        class="flow-handle position-bottom"
+        data-handle-type="source"
+        data-handle-position="bottom"
+      ></div>
+      <div
+        v-if="connectable"
+        class="flow-handle position-left"
+        data-handle-type="source"
+        data-handle-position="left"
+      >
+      </div>
+      <div
+        v-if="connectable"
+        class="flow-handle position-right"
+        data-handle-type="source"
+        data-handle-position="right"
+      >
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.flow-diamond-node{cursor:pointer;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.flow-diamond-node.dragging{cursor:grabbing}.yh-flow-node-diamond__content{align-items:center;display:flex;height:100px;justify-content:center;position:relative;width:100px}.yh-flow-node-diamond__shape{background:#fff;border:1px solid #1a192b;border-radius:4px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);height:100%;left:0;position:absolute;top:0;transform:rotate(45deg);width:100%}.yh-flow-node-diamond__label{color:#222;font-size:12px;max-width:70px;position:relative;text-align:center;transform:rotate(0deg);z-index:10}.flow-handle{background:#fff;border:1px solid #1a192b;border-radius:50%;height:10px;position:absolute;width:10px;z-index:20}.flow-handle.position-top{left:50%;top:0;transform:translate(-50%,-50%)}.flow-handle.position-bottom{bottom:0;left:50%;transform:translate(-50%,50%)}.flow-handle.position-left{left:0;top:50%;transform:translate(-50%,-50%)}.flow-handle.position-right{right:0;top:50%;transform:translate(50%,-50%)}
+</style>

package/dist/components/nodes/DiamondNode.vue.d.ts

@@ -0,0 +1,19 @@
+import type { Node, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected?: boolean;
+    dragging?: boolean;
+    connectable?: boolean;
+    style?: NodeStyle;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/nodes/GroupNode.d.vue.ts

@@ -0,0 +1,31 @@
+import type { Node, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected: boolean;
+    dragging: boolean;
+    connectable: boolean;
+    style?: NodeStyle;
+    label?: string;
+    expanded?: boolean;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+    expanded: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/nodes/GroupNode.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  id: { type: String, required: true },
+  type: { type: String, required: true },
+  data: { type: null, required: true },
+  selected: { type: Boolean, required: true, default: false },
+  dragging: { type: Boolean, required: true, default: false },
+  connectable: { type: Boolean, required: true, default: false },
+  style: { type: Object, required: false, default: () => ({}) },
+  label: { type: String, required: false, default: "" },
+  expanded: { type: Boolean, required: false, default: true }
+});
+const nodeStyle = computed(() => {
+  const base = {
+    padding: "15px",
+    borderRadius: "8px",
+    border: "2px dashed #909399",
+    backgroundColor: "#f5f7fa",
+    minWidth: "200px",
+    minHeight: "150px",
+    transition: "all 0.2s"
+  };
+  if (props.selected) {
+    base.border = "2px solid #409eff";
+  }
+  return { ...base, ...props.style };
+});
+</script>
+
+<template>
+  <div :class="['flow-group-node', {
+  selected,
+  dragging,
+  expanded
+}]" :style="nodeStyle">
+    <div class="flow-group-header">
+      <span class="flow-group-label">{{ label || data?.label || 'Group' }}</span>
+    </div>
+    <div class="flow-group-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.flow-group-node{cursor:pointer;display:flex;flex-direction:column;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.flow-group-node.dragging{cursor:grabbing}.flow-group-header{border-bottom:1px solid #dcdfe6;margin-bottom:10px;padding-bottom:10px}.flow-group-label{color:#909399;font-size:12px;font-weight:600;text-transform:uppercase}.flow-group-content{flex:1;min-height:100px}
+</style>

package/dist/components/nodes/GroupNode.vue.d.ts

@@ -0,0 +1,31 @@
+import type { Node, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected: boolean;
+    dragging: boolean;
+    connectable: boolean;
+    style?: NodeStyle;
+    label?: string;
+    expanded?: boolean;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+    expanded: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/nodes/InputNode.d.vue.ts

@@ -0,0 +1,23 @@
+import type { Node, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected: boolean;
+    dragging: boolean;
+    connectable: boolean;
+    style?: NodeStyle;
+    label?: string;
+    labelColor?: string;
+    descriptionColor?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+    labelColor: string;
+    descriptionColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/nodes/InputNode.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  id: { type: String, required: true },
+  type: { type: String, required: true },
+  data: { type: null, required: true },
+  selected: { type: Boolean, required: true, default: false },
+  dragging: { type: Boolean, required: true, default: false },
+  connectable: { type: Boolean, required: true, default: true },
+  style: { type: Object, required: false, default: () => ({}) },
+  label: { type: String, required: false, default: "" },
+  labelColor: { type: String, required: false, default: "" },
+  descriptionColor: { type: String, required: false, default: "" }
+});
+const nodeStyle = computed(() => {
+  const base = {
+    padding: "10px 15px",
+    borderRadius: "4px 4px 12px 4px",
+    border: "1px solid #67c23a",
+    backgroundColor: "#f0f9ff",
+    minWidth: "80px",
+    textAlign: "center",
+    transition: "all 0.2s"
+  };
+  if (props.selected) {
+    base.border = "2px solid #67c23a";
+    base.boxShadow = "0 0 8px rgba(103, 194, 58, 0.4)";
+  }
+  return { ...base, ...props.style };
+});
+</script>
+
+<template>
+  <div :class="['flow-input-node', {
+  selected,
+  dragging
+}]" :style="nodeStyle">
+    <div class="flow-node-label" :style="{
+  color: labelColor || data?.labelColor || '#000'
+}">
+      {{ label || data?.label || 'Input' }}
+    </div>
+    <div
+      v-if="data?.description"
+      class="flow-node-description"
+      :style="{
+  color: descriptionColor || data?.descriptionColor || 'var(--flow-node-description-color, #909399)'
+}"
+    >
+      {{ data.description }}
+    </div>
+    <div
+      class="flow-handle-right"
+      v-if="connectable"
+      data-handle-type="source"
+      data-handle-position="right"
+    />
+  </div>
+</template>
+
+<style scoped>
+.flow-input-node{cursor:pointer;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.flow-input-node.dragging{cursor:grabbing}.flow-input-node .flow-handle-right{background-color:#67c23a;border:2px solid #fff;border-radius:50%;cursor:crosshair;height:12px;position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px}.flow-node-label{color:#000;font-family:Courier New,Courier,monospace;font-size:13px;font-weight:400}
+</style>

package/dist/components/nodes/InputNode.vue.d.ts

@@ -0,0 +1,23 @@
+import type { Node, NodeStyle } from '../../types';
+interface Props {
+    id: string;
+    type: string;
+    data: Node['data'];
+    selected: boolean;
+    dragging: boolean;
+    connectable: boolean;
+    style?: NodeStyle;
+    label?: string;
+    labelColor?: string;
+    descriptionColor?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: NodeStyle;
+    connectable: boolean;
+    selected: boolean;
+    dragging: boolean;
+    labelColor: string;
+    descriptionColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/nodes/NodeResizer.d.vue.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    nodeId: string;
+    selected?: boolean;
+    minWidth?: number;
+    minHeight?: number;
+    keepAspectRatio?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    resize: (data: {
+        width: number;
+        height: number;
+        x?: number;
+        y?: number;
+    }) => any;
+    resizeStart: (event: MouseEvent) => any;
+    resizeEnd: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onResize?: ((data: {
+        width: number;
+        height: number;
+        x?: number;
+        y?: number;
+    }) => any) | undefined;
+    onResizeStart?: ((event: MouseEvent) => any) | undefined;
+    onResizeEnd?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/nodes/NodeResizer.vue

@@ -0,0 +1,89 @@
+<template>
+  <div v-if="isVisible" class="yh-flow-node-resizer" @mousedown.stop @click.stop>
+    <div
+      v-for="handle in handles"
+      :key="handle"
+      class="resizer-handle"
+      :class="`handle-${handle}`"
+      @mousedown.stop="onResizeStart($event, handle)"
+      @click.stop
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useFlowContext } from "../../core/FlowContext";
+const props = defineProps({
+  nodeId: { type: String, required: true },
+  selected: { type: Boolean, required: false },
+  minWidth: { type: Number, required: false },
+  minHeight: { type: Number, required: false },
+  keepAspectRatio: { type: Boolean, required: false }
+});
+const flow = useFlowContext();
+const emit = defineEmits(["resize", "resizeStart", "resizeEnd"]);
+const isVisible = computed(() => props.selected);
+const handles = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
+let startX = 0;
+let startY = 0;
+let lastX = 0;
+let lastY = 0;
+let startWidth = 0;
+let startHeight = 0;
+let currentHandle = "";
+const onResizeStart = (event, handle) => {
+  event.preventDefault();
+  startX = event.clientX;
+  startY = event.clientY;
+  lastX = event.clientX;
+  lastY = event.clientY;
+  currentHandle = handle;
+  const nodeEl = document.getElementById(`node-${props.nodeId}`);
+  if (!nodeEl) return;
+  startWidth = nodeEl.offsetWidth;
+  startHeight = nodeEl.offsetHeight;
+  emit("resizeStart", event);
+  document.addEventListener("mousemove", onResizing);
+  document.addEventListener("mouseup", onResizeEnd);
+};
+const onResizing = (event) => {
+  const zoom = flow.viewport.value.zoom || 1;
+  const totalDX = (event.clientX - startX) / zoom;
+  const totalDY = (event.clientY - startY) / zoom;
+  const incrementalDX = (event.clientX - lastX) / zoom;
+  const incrementalDY = (event.clientY - lastY) / zoom;
+  lastX = event.clientX;
+  lastY = event.clientY;
+  let newWidth = startWidth;
+  let newHeight = startHeight;
+  let deltaX = 0;
+  let deltaY = 0;
+  if (currentHandle.includes("e")) {
+    newWidth = startWidth + totalDX;
+  }
+  if (currentHandle.includes("w")) {
+    newWidth = startWidth - totalDX;
+    deltaX = incrementalDX;
+  }
+  if (currentHandle.includes("s")) {
+    newHeight = startHeight + totalDY;
+  }
+  if (currentHandle.includes("n")) {
+    newHeight = startHeight - totalDY;
+    deltaY = incrementalDY;
+  }
+  newWidth = Math.max(newWidth, props.minWidth || 50);
+  newHeight = Math.max(newHeight, props.minHeight || 30);
+  emit("resize", { width: newWidth, height: newHeight, x: deltaX, y: deltaY });
+};
+const onResizeEnd = (event) => {
+  emit("resizeEnd", event);
+  document.removeEventListener("mousemove", onResizing);
+  document.removeEventListener("mouseup", onResizeEnd);
+};
+</script>
+
+<style scoped>
+.yh-flow-node-resizer{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1001}.resizer-handle{background:transparent;cursor:pointer;height:16px;pointer-events:auto;position:absolute;width:16px;z-index:1002}.resizer-handle:after{background:#3b82f6;border:1px solid #fff;border-radius:2px;content:"";height:8px;left:4px;position:absolute;top:4px;width:8px}.handle-n{top:-8px}.handle-n,.handle-s{cursor:ns-resize;left:50%;transform:translateX(-50%)}.handle-s{bottom:-8px}.handle-e{right:-8px}.handle-e,.handle-w{cursor:ew-resize;top:50%;transform:translateY(-50%)}.handle-w{left:-8px}.handle-ne{cursor:nesw-resize;right:-8px;top:-8px}.handle-nw{cursor:nwse-resize;left:-8px;top:-8px}.handle-se{bottom:-8px;cursor:nwse-resize;right:-8px}.handle-sw{bottom:-8px;cursor:nesw-resize;left:-8px}
+</style>