@yh-ui/flow 1.0.52 → 1.0.54

package/dist/Flow.vue

@@ -120,7 +120,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount, shallowRef, useId } from "vue";
+import { ref, computed, watch, onMounted, onBeforeUnmount, shallowRef, useId, toRaw } from "vue";
 if (typeof window !== "undefined") window.__YH_FLOW_VERSION__ = "1.0.1";
 import EdgeRenderer from "./renderer/EdgeRenderer.vue";
 import EdgeHandlesRenderer from "./renderer/EdgeHandlesRenderer.vue";
@@ -135,7 +135,8 @@ import {
   createControlsPlugin,
   createSnapPlugin,
   createExportPlugin,
-  createLayoutPlugin
+  createLayoutPlugin,
+  createHistoryPlugin
 } from "./plugins/plugins";
 import { useViewport } from "./core/useViewport";
 import { useNodes } from "./core/useNodes";
@@ -243,8 +244,10 @@ const usePlugin = (plugin) => {
   registeredPlugins.value = pluginManager.getPlugins();
 };
 const removePlugin = (pluginId) => {
-  pluginManager.unregister(pluginId);
-  registeredPlugins.value = pluginManager.getPlugins();
+  if (pluginManager.hasPlugin(pluginId)) {
+    pluginManager.unregister(pluginId);
+    registeredPlugins.value = pluginManager.getPlugins();
+  }
 };
 const nodesManager = useNodes(viewportRef, {
   nodes: nodesRef,
@@ -259,12 +262,51 @@ const selectionManager = useSelection({
   nodes: nodesRef,
   edges: edgesRef
 });
-const historyManager = useHistory(nodesRef, edgesRef, {
+const localHistoryManager = useHistory(nodesRef, edgesRef, {
   maxHistory: props.maxHistory || 50,
   onHistoryChange: (canUndo, canRedo) => {
     emit("historyChange", { canUndo, canRedo });
   }
 });
+const getHistoryPlugin = () => {
+  return pluginManager.getPlugin("history");
+};
+const historyManager = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  push: (state) => {
+    const plugin = getHistoryPlugin();
+    if (plugin) {
+      plugin.saveSnapshot();
+    } else {
+      localHistoryManager.push(state);
+    }
+  },
+  undo: () => {
+    const plugin = getHistoryPlugin();
+    if (plugin) {
+      plugin.undo();
+    } else {
+      localHistoryManager.undo();
+    }
+  },
+  redo: () => {
+    const plugin = getHistoryPlugin();
+    if (plugin) {
+      plugin.redo();
+    } else {
+      localHistoryManager.redo();
+    }
+  },
+  clear: () => {
+    const plugin = getHistoryPlugin();
+    if (plugin) {
+      plugin.clearHistory();
+    } else {
+      localHistoryManager.clear();
+    }
+  }
+};
+historyManager.push({ nodes: nodesRef.value, edges: edgesRef.value });
 const alignmentManager = useAlignment({
   nodes: nodesRef,
   snapThreshold: snapThreshold.value
@@ -392,6 +434,63 @@ const handleMouseMove = (event) => {
     }
   }
 };
+const getNodeHandles = (node, type) => {
+  if (node.handleBounds) {
+    const handles = [];
+    if (node.handleBounds.top) handles.push(...node.handleBounds.top);
+    if (node.handleBounds.right) handles.push(...node.handleBounds.right);
+    if (node.handleBounds.bottom) handles.push(...node.handleBounds.bottom);
+    if (node.handleBounds.left) handles.push(...node.handleBounds.left);
+    return handles.filter((h) => h.type === type);
+  }
+  if (node.type === "group") return [];
+  if (node.type === "input") {
+    return type === "source" ? [{ id: void 0, type: "source", position: "right" }] : [];
+  }
+  if (node.type === "output") {
+    return type === "target" ? [{ id: void 0, type: "target", position: "left" }] : [];
+  }
+  if (node.type === "bpmn-start") {
+    return type === "source" ? [{ id: void 0, type: "source", position: "right" }] : [];
+  }
+  if (node.type === "bpmn-end") {
+    return type === "target" ? [{ id: void 0, type: "target", position: "left" }] : [];
+  }
+  if (node.type === "bpmn-task" || node.type === "bpmn-service-task" || node.type === "bpmn-user-task") {
+    if (type === "source") return [{ id: void 0, type: "source", position: "right" }];
+    return [{ id: void 0, type: "target", position: "left" }];
+  }
+  if (node.type === "bpmn-exclusive-gateway" || node.type === "bpmn-parallel-gateway" || node.type === "bpmn-inclusive-gateway") {
+    if (type === "source") {
+      return [
+        { id: void 0, type: "source", position: "right" },
+        { id: void 0, type: "source", position: "bottom" }
+      ];
+    }
+    return [{ id: void 0, type: "target", position: "left" }];
+  }
+  if (node.type === "ai-start") {
+    return type === "source" ? [{ id: void 0, type: "source", position: "right" }] : [];
+  }
+  if (node.type === "ai-end") {
+    return type === "target" ? [{ id: void 0, type: "target", position: "left" }] : [];
+  }
+  if (node.type === "ai-llm" || node.type === "ai-prompt" || node.type === "ai-agent" || node.type === "ai-tool" || node.type === "ai-memory") {
+    if (type === "source") return [{ id: void 0, type: "source", position: "right" }];
+    return [{ id: void 0, type: "target", position: "left" }];
+  }
+  if (node.type === "ai-condition") {
+    if (type === "source") {
+      return [
+        { id: void 0, type: "source", position: "right" },
+        { id: void 0, type: "source", position: "bottom" }
+      ];
+    }
+    return [{ id: void 0, type: "target", position: "left" }];
+  }
+  if (type === "source") return [{ id: void 0, type: "source", position: "right" }];
+  return [{ id: void 0, type: "target", position: "left" }];
+};
 const handleMouseUp = (event) => {
   isPanning.value = false;
   if (isSelecting.value) {
@@ -411,17 +510,37 @@ const handleMouseUp = (event) => {
       if (targetNode) {
         const sourceNodeId = updatingEdge.value ? updatingEdge.value.handleType === "source" ? targetNode.id : updatingEdge.value.edge.source : connectionStart.value.nodeId;
         const targetNodeId = updatingEdge.value ? updatingEdge.value.handleType === "target" ? targetNode.id : updatingEdge.value.edge.target : targetNode.id;
-        const sourceNode = nodesRef.value.find((n) => n.id === sourceNodeId);
-        const validationResult = validateConnection(
-          sourceNode,
-          nodesRef.value.find((n) => n.id === targetNodeId),
-          {
-            source: sourceNodeId,
-            target: targetNodeId,
-            sourceHandle: updatingEdge.value && updatingEdge.value.handleType === "source" ? void 0 : updatingEdge.value?.edge.sourceHandle || connectionStart.value?.handleId,
-            targetHandle: updatingEdge.value && updatingEdge.value.handleType === "target" ? void 0 : updatingEdge.value?.edge.targetHandle
+        let dropHandleId = void 0;
+        let dropHandleType = void 0;
+        const element = document.elementFromPoint(event.clientX, event.clientY);
+        const handleEl = element?.closest(".yh-flow-handle");
+        if (handleEl) {
+          dropHandleId = handleEl.getAttribute("data-handle-id") || void 0;
+          dropHandleType = handleEl.getAttribute("data-handle-type") || void 0;
+        }
+        let finalSourceHandle = void 0;
+        let finalTargetHandle = void 0;
+        if (updatingEdge.value) {
+          const { edge, handleType } = updatingEdge.value;
+          if (handleType === "source") {
+            finalSourceHandle = dropHandleType === "source" ? dropHandleId : getNodeHandles(targetNode, "source")[0]?.id || void 0;
+            finalTargetHandle = edge.targetHandle || void 0;
+          } else {
+            finalSourceHandle = edge.sourceHandle || void 0;
+            finalTargetHandle = dropHandleType === "target" ? dropHandleId : getNodeHandles(targetNode, "target")[0]?.id || void 0;
           }
-        );
+        } else {
+          finalSourceHandle = connectionStart.value?.handleId || void 0;
+          finalTargetHandle = dropHandleType === "target" ? dropHandleId : getNodeHandles(targetNode, "target")[0]?.id || void 0;
+        }
+        const sourceNode = nodesRef.value.find((n) => n.id === sourceNodeId);
+        const targetNodeObj = nodesRef.value.find((n) => n.id === targetNodeId);
+        const validationResult = validateConnection(sourceNode, targetNodeObj, {
+          source: sourceNodeId,
+          target: targetNodeId,
+          sourceHandle: finalSourceHandle,
+          targetHandle: finalTargetHandle
+        });
         if (!validationResult.isValid) {
           console.warn("Invalid connection:", validationResult.message);
           isConnecting.value = false;
@@ -430,12 +549,12 @@ const handleMouseUp = (event) => {
           return;
         }
         if (updatingEdge.value) {
-          const { edge, handleType } = updatingEdge.value;
+          const { edge } = updatingEdge.value;
           const connection = {
-            source: handleType === "source" ? targetNode.id : edge.source,
-            target: handleType === "target" ? targetNode.id : edge.target,
-            sourceHandle: handleType === "source" ? void 0 : edge.sourceHandle,
-            targetHandle: handleType === "target" ? void 0 : edge.targetHandle
+            source: sourceNodeId,
+            target: targetNodeId,
+            sourceHandle: finalSourceHandle,
+            targetHandle: finalTargetHandle
           };
           edgesManager.updateEdge(edge.id, connection);
           emit("edgeUpdate", { edge, connection });
@@ -443,10 +562,10 @@ const handleMouseUp = (event) => {
         } else {
           const newEdge = {
             id: `edge-${Date.now()}`,
-            source: connectionStart.value.nodeId,
-            target: targetNode.id,
-            sourceHandle: connectionStart.value.handleId || void 0,
-            targetHandle: void 0,
+            source: sourceNodeId,
+            target: targetNodeId,
+            sourceHandle: finalSourceHandle,
+            targetHandle: finalTargetHandle,
             type: "bezier"
           };
           edgesManager.addEdge(newEdge);
@@ -741,16 +860,19 @@ pluginManager.init(flowInstance);
 defineExpose(flowInstance);
 watch(
   () => props.nodes,
-  (newNodes) => {
-    if (draggingNodeId.value) return;
-    nodesRef.value = newNodes || [];
+  (nodes) => {
+    if (toRaw(nodesRef.value) !== toRaw(nodes)) {
+      nodesRef.value = nodes;
+    }
   },
   { deep: true }
 );
 watch(
   () => props.edges,
-  (newEdges) => {
-    edgesRef.value = newEdges || [];
+  (edges) => {
+    if (toRaw(edgesRef.value) !== toRaw(edges)) {
+      edgesRef.value = edges;
+    }
   },
   { deep: true }
 );
@@ -806,13 +928,14 @@ watch(
   { deep: true }
 );
 let handleKeyDown;
+let resizeObserver = null;
 onMounted(() => {
   document.addEventListener("mousemove", handleMouseMove);
   document.addEventListener("mouseup", handleMouseUp);
   if (containerRef.value) {
     containerWidth.value = containerRef.value.clientWidth;
     containerHeight.value = containerRef.value.clientHeight;
-    const resizeObserver = new ResizeObserver((entries) => {
+    resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         containerWidth.value = entry.contentRect.width;
         containerHeight.value = entry.contentRect.height;
@@ -955,16 +1078,38 @@ onMounted(() => {
       }
     }
   );
+  watch(
+    () => [props.history, props.maxHistory],
+    ([history, maxHistory]) => {
+      removePlugin("history");
+      if (history) {
+        usePlugin(
+          createHistoryPlugin({
+            enabled: true,
+            maxHistory: maxHistory || 50,
+            enableKeyboard: false,
+            onHistoryChange: (canUndo, canRedo) => {
+              emit("historyChange", { canUndo, canRedo });
+            }
+          })
+        );
+      }
+    },
+    { immediate: true }
+  );
   if (props.keyboardShortcuts) {
     const keyboard = useKeyboard({
       enabled: true,
       onDelete: () => {
         const selectedNodes = nodesRef.value.filter((n) => n.selected);
         const selectedEdges = edgesRef.value.filter((e) => e.selected);
-        selectedNodes.forEach((node) => nodesManager.removeNode(node.id));
-        selectedEdges.forEach((edge) => edgesManager.removeEdge(edge.id));
-        emit("update:nodes", nodesRef.value);
-        emit("update:edges", edgesRef.value);
+        if (selectedNodes.length > 0 || selectedEdges.length > 0) {
+          historyManager.push({ nodes: nodesRef.value, edges: edgesRef.value });
+          selectedNodes.forEach((node) => nodesManager.removeNode(node.id));
+          selectedEdges.forEach((edge) => edgesManager.removeEdge(edge.id));
+          emit("update:nodes", nodesRef.value);
+          emit("update:edges", edgesRef.value);
+        }
       },
       onUndo: () => historyManager.undo(),
       onRedo: () => historyManager.redo(),
@@ -983,6 +1128,10 @@ onMounted(() => {
   }
 });
 onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
   if (props.keyboardShortcuts && handleKeyDown) {
     document.removeEventListener("keydown", handleKeyDown);
   }

package/dist/core/useKeyboard.cjs

@@ -19,7 +19,9 @@ function useKeyboard(options = {}) {
     if (!enabled) return;
     const key = event.key;
     const ctrl = event.ctrlKey || event.metaKey;
-    if ((key === "Delete" || key === "Backspace") && !event.target?.toString().includes("Input")) {
+    const target = event.target;
+    const isEditable = target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable === true);
+    if ((key === "Delete" || key === "Backspace") && !isEditable) {
       event.preventDefault();
       onDelete?.();
     }

package/dist/core/useKeyboard.mjs

@@ -13,7 +13,9 @@ export function useKeyboard(options = {}) {
     if (!enabled) return;
     const key = event.key;
     const ctrl = event.ctrlKey || event.metaKey;
-    if ((key === "Delete" || key === "Backspace") && !event.target?.toString().includes("Input")) {
+    const target = event.target;
+    const isEditable = target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable === true);
+    if ((key === "Delete" || key === "Backspace") && !isEditable) {
       event.preventDefault();
       onDelete?.();
     }

package/dist/plugins/plugins/layout.cjs

@@ -20,7 +20,15 @@ const defaultOptions = {
   workerUrl: ""
 };
 async function applyDagreLayout(nodes, edges, options) {
-  const dagreLib = await Promise.resolve().then(() => require("dagre"));
+  let dagreLib;
+  try {
+    dagreLib = await Promise.resolve().then(() => require("dagre"));
+  } catch {
+    throw new Error('[YH-UI Flow] Layout engine "dagre" is not installed. Please install "dagre" to use the dagre layout algorithm.');
+  }
+  if (!dagreLib) {
+    throw new Error('[YH-UI Flow] Layout engine "dagre" is not installed. Please install "dagre" to use the dagre layout algorithm.');
+  }
   const dagre = dagreLib.default || dagreLib;
   const graphlib = dagreLib.graphlib || dagre.graphlib;
   const g = new graphlib.Graph();
@@ -63,11 +71,18 @@ async function applyElkLayout(nodes, edges, options) {
   const elkPath = "elkjs";
   let elkLib;
   try {
-    elkLib = await Promise.resolve(`${/* @vite-ignore */
-    bundledPath}`).then(s => require(s));
+    try {
+      elkLib = await Promise.resolve(`${/* @vite-ignore */
+      bundledPath}`).then(s => require(s));
+    } catch {
+      elkLib = await Promise.resolve(`${/* @vite-ignore */
+      elkPath}`).then(s => require(s));
+    }
   } catch {
-    elkLib = await Promise.resolve(`${/* @vite-ignore */
-    elkPath}`).then(s => require(s));
+    throw new Error('[YH-UI Flow] Layout engine "elkjs" is not installed. Please install "elkjs" to use the elk layout algorithm.');
+  }
+  if (!elkLib) {
+    throw new Error('[YH-UI Flow] Layout engine "elkjs" is not installed. Please install "elkjs" to use the elk layout algorithm.');
   }
   const ELK = elkLib.default || elkLib;
   const elk = new ELK();
@@ -116,8 +131,16 @@ async function applyElkLayout(nodes, edges, options) {
 }
 async function applyForceLayout(nodes, edges, options, flowInstance) {
   const d3ForcePath = "d3-force";
-  const d3ForceLib = await Promise.resolve(`${/* @vite-ignore */
-  d3ForcePath}`).then(s => require(s));
+  let d3ForceLib;
+  try {
+    d3ForceLib = await Promise.resolve(`${/* @vite-ignore */
+    d3ForcePath}`).then(s => require(s));
+  } catch {
+    throw new Error('[YH-UI Flow] Layout engine "d3-force" is not installed. Please install "d3-force" to use the force layout algorithm.');
+  }
+  if (!d3ForceLib) {
+    throw new Error('[YH-UI Flow] Layout engine "d3-force" is not installed. Please install "d3-force" to use the force layout algorithm.');
+  }
   const d3Force = d3ForceLib.default || d3ForceLib;
   const forceNodes = nodes.map(node => ({
     id: node.id,

package/dist/plugins/plugins/layout.mjs

@@ -12,7 +12,22 @@ const defaultOptions = {
   workerUrl: ""
 };
 async function applyDagreLayout(nodes, edges, options) {
-  const dagreLib = await import("dagre");
+  let dagreLib;
+  try {
+    dagreLib = await import(
+      /* @vite-ignore */
+      "dagre"
+    );
+  } catch {
+    throw new Error(
+      '[YH-UI Flow] Layout engine "dagre" is not installed. Please install "dagre" to use the dagre layout algorithm.'
+    );
+  }
+  if (!dagreLib) {
+    throw new Error(
+      '[YH-UI Flow] Layout engine "dagre" is not installed. Please install "dagre" to use the dagre layout algorithm.'
+    );
+  }
   const dagre = dagreLib.default || dagreLib;
   const graphlib = dagreLib.graphlib || dagre.graphlib;
   const g = new graphlib.Graph();
@@ -52,14 +67,25 @@ async function applyElkLayout(nodes, edges, options) {
   const elkPath = "elkjs";
   let elkLib;
   try {
-    elkLib = await import(
-      /* @vite-ignore */
-      bundledPath
-    );
+    try {
+      elkLib = await import(
+        /* @vite-ignore */
+        bundledPath
+      );
+    } catch {
+      elkLib = await import(
+        /* @vite-ignore */
+        elkPath
+      );
+    }
   } catch {
-    elkLib = await import(
-      /* @vite-ignore */
-      elkPath
+    throw new Error(
+      '[YH-UI Flow] Layout engine "elkjs" is not installed. Please install "elkjs" to use the elk layout algorithm.'
+    );
+  }
+  if (!elkLib) {
+    throw new Error(
+      '[YH-UI Flow] Layout engine "elkjs" is not installed. Please install "elkjs" to use the elk layout algorithm.'
     );
   }
   const ELK = elkLib.default || elkLib;
@@ -106,10 +132,22 @@ async function applyElkLayout(nodes, edges, options) {
 }
 async function applyForceLayout(nodes, edges, options, flowInstance) {
   const d3ForcePath = "d3-force";
-  const d3ForceLib = await import(
-    /* @vite-ignore */
-    d3ForcePath
-  );
+  let d3ForceLib;
+  try {
+    d3ForceLib = await import(
+      /* @vite-ignore */
+      d3ForcePath
+    );
+  } catch {
+    throw new Error(
+      '[YH-UI Flow] Layout engine "d3-force" is not installed. Please install "d3-force" to use the force layout algorithm.'
+    );
+  }
+  if (!d3ForceLib) {
+    throw new Error(
+      '[YH-UI Flow] Layout engine "d3-force" is not installed. Please install "d3-force" to use the force layout algorithm.'
+    );
+  }
   const d3Force = d3ForceLib.default || d3ForceLib;
   const forceNodes = nodes.map((node) => ({
     id: node.id,

package/dist/renderer/EdgeRenderer.vue

@@ -14,7 +14,11 @@
   >
     <defs>
       <!-- Dynamic masks to create a true gap in the line behind the label -->
-      <mask v-for="ed in edgeData" :key="`mask-${ed.edge.id}`" :id="getMaskId(ed.edge.id)">
+      <mask
+        v-for="ed in edgeData.filter(e => e.edge.label)"
+        :key="`mask-${ed.edge.id}`"
+        :id="getMaskId(ed.edge.id)"
+      >
         <rect x="-5000" y="-5000" width="10000" height="10000" fill="white" />
         <rect
           :x="ed.labelX - ed.labelWidth / 2 - 4"
@@ -61,8 +65,28 @@
             style="cursor: pointer; pointer-events: all"
           />
 
-          <!-- Visible Path -->
+          <!-- Visible Path with Mask (when label exists) -->
           <path
+            v-if="ed.edge.label"
+            :d="ed.path"
+            :stroke="ed.stroke"
+            :stroke-width="ed.strokeWidth"
+            fill="none"
+            :class="{
+  'yh-flow-edge-path': true,
+  'is-animated': ed.edge.animated
+}"
+            :mask="`url(#${getMaskId(ed.edge.id)})`"
+            :style="{
+  pointerEvents: 'none',
+  transition: 'stroke 0.2s, stroke-width 0.2s',
+  stroke: ed.stroke
+}"
+          />
+
+          <!-- Visible Path without Mask (when no label exists) -->
+          <path
+            v-else
             :d="ed.path"
             :stroke="ed.stroke"
             :stroke-width="ed.strokeWidth"
@@ -71,7 +95,6 @@
   'yh-flow-edge-path': true,
   'is-animated': ed.edge.animated
 }"
-            :mask="ed.edge.label ? `url(#${getMaskId(ed.edge.id)})` : void 0"
             :style="{
   pointerEvents: 'none',
   transition: 'stroke 0.2s, stroke-width 0.2s',
@@ -151,6 +174,12 @@ const getLabelStyle = (edge) => {
   return styles;
 };
 const edgeData = computed(() => {
+  console.log(
+    "EdgeRenderer computed edgeData running. Nodes count:",
+    props.nodes.length,
+    "Node 1 pos:",
+    props.nodes.find((n) => n.id === "1")?.position
+  );
   const result = [];
   for (const edge of props.edges) {
     if (!edge || edge.hidden) continue;

package/dist/renderer/NodeRenderer.vue

@@ -64,7 +64,7 @@
 </template>
 
 <script setup>
-import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { computed, ref, onMounted, onBeforeUnmount, watch } from "vue";
 import {
   getCustomNodeTemplate,
   getCustomNode,
@@ -373,6 +373,30 @@ onBeforeUnmount(() => {
   }
   nodeElements.clear();
 });
+watch(
+  () => props.nodes,
+  (newNodes) => {
+    let hasChanges = false;
+    newNodes.forEach((node) => {
+      if (!node.measured) {
+        const el = nodeElements.get(node.id);
+        if (el) {
+          const rect = el.getBoundingClientRect();
+          const width = Math.round(rect.width);
+          const height = Math.round(rect.height);
+          if (width > 0 && height > 0) {
+            node.measured = { width, height };
+            hasChanges = true;
+          }
+        }
+      }
+    });
+    if (hasChanges) {
+      emit("nodes-measured");
+    }
+  },
+  { flush: "post" }
+);
 const setNodeRef = (el, nodeId) => {
   if (el) {
     nodeElements.set(nodeId, el);

package/dist/utils/edge.cjs

@@ -8,6 +8,7 @@ exports.getEdgeCenter = getEdgeCenter;
 exports.getEdgePath = getEdgePath;
 exports.getEdgePosition = getEdgePosition;
 exports.getHandlePosition = getHandlePosition;
+exports.getSelfLoopPath = getSelfLoopPath;
 exports.getSmoothStepPath = getSmoothStepPath;
 exports.getStepPath = getStepPath;
 exports.getStraightPath = getStraightPath;
@@ -51,6 +52,44 @@ function getHandlePosition(node, handlePosition = "right", _handleId) {
   }
   width = width || 150;
   height = height || 40;
+  if (node.handleBounds && node.handleBounds[handlePosition]) {
+    const handles = node.handleBounds[handlePosition] || [];
+    if (handles.length > 0) {
+      let handleIndex = -1;
+      if (_handleId) {
+        handleIndex = handles.findIndex(h => h.id === _handleId);
+      }
+      if (handleIndex === -1) {
+        handleIndex = 0;
+      }
+      const handle = handles[handleIndex];
+      if (handle) {
+        if (handle.x !== void 0 && handle.y !== void 0) {
+          return {
+            x: x + handle.x,
+            y: y + handle.y
+          };
+        }
+        const N = handles.length;
+        const i = handleIndex;
+        if (handlePosition === "left" || handlePosition === "right") {
+          const hX = handlePosition === "left" ? 0 : width;
+          const hY = height / (N + 1) * (i + 1);
+          return {
+            x: x + hX,
+            y: y + hY
+          };
+        } else {
+          const hX = width / (N + 1) * (i + 1);
+          const hY = handlePosition === "top" ? 0 : height;
+          return {
+            x: x + hX,
+            y: y + hY
+          };
+        }
+      }
+    }
+  }
   switch (handlePosition) {
     case "top":
       return {
@@ -170,7 +209,37 @@ function getSmoothStepPath(params) {
     return [`M${sourceX},${sourceY}`, `L${sourceX},${midY - sign1Y * r}`, `Q${sourceX},${midY} ${sourceX + sign2X * r},${midY}`, `L${targetX - sign2X * r},${midY}`, `Q${targetX},${midY} ${targetX},${midY + sign1Y * r}`, `L${targetX},${targetY}`].join(" ");
   }
 }
+function getSelfLoopPath(sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, nodeWidth, nodeHeight) {
+  const w = nodeWidth ?? 150;
+  const h = nodeHeight ?? 50;
+  const dx = targetX - sourceX;
+  const dy = targetY - sourceY;
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  if (dist < 5) {
+    const loopSize = 40;
+    if (sourcePosition === "right") {
+      return `M${sourceX},${sourceY} C${sourceX + loopSize},${sourceY - loopSize} ${sourceX + loopSize},${sourceY + loopSize} ${sourceX},${sourceY}`;
+    } else if (sourcePosition === "left") {
+      return `M${sourceX},${sourceY} C${sourceX - loopSize},${sourceY - loopSize} ${sourceX - loopSize},${sourceY + loopSize} ${sourceX},${sourceY}`;
+    } else if (sourcePosition === "top") {
+      return `M${sourceX},${sourceY} C${sourceX - loopSize},${sourceY - loopSize} ${sourceX + loopSize},${sourceY - loopSize} ${sourceX},${sourceY}`;
+    } else {
+      return `M${sourceX},${sourceY} C${sourceX - loopSize},${sourceY + loopSize} ${sourceX + loopSize},${sourceY + loopSize} ${sourceX},${sourceY}`;
+    }
+  }
+  const offset = Math.max(w, h, 60) * 0.5;
+  let c1x = sourceX;
+  let c1y = sourceY;
+  if (sourcePosition === "right") c1x += offset;else if (sourcePosition === "left") c1x -= offset;else if (sourcePosition === "top") c1y -= offset;else if (sourcePosition === "bottom") c1y += offset;
+  let c2x = targetX;
+  let c2y = targetY;
+  if (targetPosition === "right") c2x += offset;else if (targetPosition === "left") c2x -= offset;else if (targetPosition === "top") c2y -= offset;else if (targetPosition === "bottom") c2y += offset;
+  return `M${sourceX},${sourceY} C${c1x},${c1y} ${c2x},${c2y} ${targetX},${targetY}`;
+}
 function getEdgePath(type, params) {
+  if (params.isSelfLoop) {
+    return getSelfLoopPath(params.sourceX, params.sourceY, params.targetX, params.targetY, params.sourcePosition, params.targetPosition, params.nodeWidth, params.nodeHeight);
+  }
   switch (type) {
     case "bezier":
     case "default":
@@ -191,8 +260,58 @@ function getEdgeCenter(params) {
     sourceY,
     targetX,
     targetY,
-    type = "bezier"
+    type = "bezier",
+    isSelfLoop,
+    nodeWidth,
+    nodeHeight,
+    sourcePosition,
+    targetPosition
   } = params;
+  if (isSelfLoop) {
+    const w = nodeWidth ?? 150;
+    const h = nodeHeight ?? 50;
+    const dx = targetX - sourceX;
+    const dy = targetY - sourceY;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    let c1x = sourceX,
+      c1y = sourceY,
+      c2x = targetX,
+      c2y = targetY;
+    if (dist < 5) {
+      const loopSize = 40;
+      if (sourcePosition === "right") {
+        c1x = sourceX + loopSize;
+        c1y = sourceY - loopSize;
+        c2x = sourceX + loopSize;
+        c2y = sourceY + loopSize;
+      } else if (sourcePosition === "left") {
+        c1x = sourceX - loopSize;
+        c1y = sourceY - loopSize;
+        c2x = sourceX - loopSize;
+        c2y = sourceY + loopSize;
+      } else if (sourcePosition === "top") {
+        c1x = sourceX - loopSize;
+        c1y = sourceY - loopSize;
+        c2x = sourceX + loopSize;
+        c2y = sourceY - loopSize;
+      } else {
+        c1x = sourceX - loopSize;
+        c1y = sourceY + loopSize;
+        c2x = sourceX + loopSize;
+        c2y = sourceY + loopSize;
+      }
+    } else {
+      const offset = Math.max(w, h, 60) * 0.5;
+      if (sourcePosition === "right") c1x += offset;else if (sourcePosition === "left") c1x -= offset;else if (sourcePosition === "top") c1y -= offset;else if (sourcePosition === "bottom") c1y += offset;
+      if (targetPosition === "right") c2x += offset;else if (targetPosition === "left") c2x -= offset;else if (targetPosition === "top") c2y -= offset;else if (targetPosition === "bottom") c2y += offset;
+    }
+    return {
+      x: 0.125 * sourceX + 0.375 * c1x + 0.375 * c2x + 0.125 * targetX,
+      y: 0.125 * sourceY + 0.375 * c1y + 0.375 * c2y + 0.125 * targetY,
+      ox: 0,
+      oy: 0
+    };
+  }
   if (type === "bezier" || type === "default") {
     const curvature = params.curvature ?? 0.25;
     const srcDir = getDir(params.sourcePosition);

package/dist/utils/edge.d.ts

@@ -1,4 +1,4 @@
-import type { Position, EdgeType, NodeStyle } from '../types';
+import type { Position, EdgeType, NodeStyle, NodeHandle } from '../types';
 export interface EdgePathParams {
     sourceX: number;
     sourceY: number;
@@ -8,6 +8,9 @@ export interface EdgePathParams {
     targetPosition: Position;
     /** 控制曲率，0~1，默认 0.25 */
     curvature?: number;
+    isSelfLoop?: boolean;
+    nodeWidth?: number;
+    nodeHeight?: number;
 }
 /**
  * 获取连接点的位置坐标
@@ -24,6 +27,12 @@ export declare function getHandlePosition(node: {
         width: number;
         height: number;
     };
+    handleBounds?: {
+        top?: NodeHandle[];
+        right?: NodeHandle[];
+        bottom?: NodeHandle[];
+        left?: NodeHandle[];
+    };
 }, handlePosition?: Position, _handleId?: string | null): {
     x: number;
     y: number;
@@ -54,6 +63,10 @@ export declare function getStepPath(params: EdgePathParams): string;
  * 生成平滑阶梯线路径（带圆角转折的 step）
  */
 export declare function getSmoothStepPath(params: EdgePathParams): string;
+/**
+ * 生成自环曲线路径
+ */
+export declare function getSelfLoopPath(sourceX: number, sourceY: number, targetX: number, targetY: number, sourcePosition: Position, targetPosition: Position, nodeWidth?: number, nodeHeight?: number): string;
 /**
  * 根据类型获取连线路径
  */

package/dist/utils/edge.mjs

@@ -25,6 +25,35 @@ export function getHandlePosition(node, handlePosition = "right", _handleId) {
   }
   width = width || 150;
   height = height || 40;
+  if (node.handleBounds && node.handleBounds[handlePosition]) {
+    const handles = node.handleBounds[handlePosition] || [];
+    if (handles.length > 0) {
+      let handleIndex = -1;
+      if (_handleId) {
+        handleIndex = handles.findIndex((h) => h.id === _handleId);
+      }
+      if (handleIndex === -1) {
+        handleIndex = 0;
+      }
+      const handle = handles[handleIndex];
+      if (handle) {
+        if (handle.x !== void 0 && handle.y !== void 0) {
+          return { x: x + handle.x, y: y + handle.y };
+        }
+        const N = handles.length;
+        const i = handleIndex;
+        if (handlePosition === "left" || handlePosition === "right") {
+          const hX = handlePosition === "left" ? 0 : width;
+          const hY = height / (N + 1) * (i + 1);
+          return { x: x + hX, y: y + hY };
+        } else {
+          const hX = width / (N + 1) * (i + 1);
+          const hY = handlePosition === "top" ? 0 : height;
+          return { x: x + hX, y: y + hY };
+        }
+      }
+    }
+  }
   switch (handlePosition) {
     case "top":
       return { x: x + width / 2, y };
@@ -119,7 +148,52 @@ export function getSmoothStepPath(params) {
     ].join(" ");
   }
 }
+export function getSelfLoopPath(sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, nodeWidth, nodeHeight) {
+  const w = nodeWidth ?? 150;
+  const h = nodeHeight ?? 50;
+  const dx = targetX - sourceX;
+  const dy = targetY - sourceY;
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  if (dist < 5) {
+    const loopSize = 40;
+    if (sourcePosition === "right") {
+      return `M${sourceX},${sourceY} C${sourceX + loopSize},${sourceY - loopSize} ${sourceX + loopSize},${sourceY + loopSize} ${sourceX},${sourceY}`;
+    } else if (sourcePosition === "left") {
+      return `M${sourceX},${sourceY} C${sourceX - loopSize},${sourceY - loopSize} ${sourceX - loopSize},${sourceY + loopSize} ${sourceX},${sourceY}`;
+    } else if (sourcePosition === "top") {
+      return `M${sourceX},${sourceY} C${sourceX - loopSize},${sourceY - loopSize} ${sourceX + loopSize},${sourceY - loopSize} ${sourceX},${sourceY}`;
+    } else {
+      return `M${sourceX},${sourceY} C${sourceX - loopSize},${sourceY + loopSize} ${sourceX + loopSize},${sourceY + loopSize} ${sourceX},${sourceY}`;
+    }
+  }
+  const offset = Math.max(w, h, 60) * 0.5;
+  let c1x = sourceX;
+  let c1y = sourceY;
+  if (sourcePosition === "right") c1x += offset;
+  else if (sourcePosition === "left") c1x -= offset;
+  else if (sourcePosition === "top") c1y -= offset;
+  else if (sourcePosition === "bottom") c1y += offset;
+  let c2x = targetX;
+  let c2y = targetY;
+  if (targetPosition === "right") c2x += offset;
+  else if (targetPosition === "left") c2x -= offset;
+  else if (targetPosition === "top") c2y -= offset;
+  else if (targetPosition === "bottom") c2y += offset;
+  return `M${sourceX},${sourceY} C${c1x},${c1y} ${c2x},${c2y} ${targetX},${targetY}`;
+}
 export function getEdgePath(type, params) {
+  if (params.isSelfLoop) {
+    return getSelfLoopPath(
+      params.sourceX,
+      params.sourceY,
+      params.targetX,
+      params.targetY,
+      params.sourcePosition,
+      params.targetPosition,
+      params.nodeWidth,
+      params.nodeHeight
+    );
+  }
   switch (type) {
     case "bezier":
     case "default":
@@ -135,7 +209,66 @@ export function getEdgePath(type, params) {
   }
 }
 export function getEdgeCenter(params) {
-  const { sourceX, sourceY, targetX, targetY, type = "bezier" } = params;
+  const {
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    type = "bezier",
+    isSelfLoop,
+    nodeWidth,
+    nodeHeight,
+    sourcePosition,
+    targetPosition
+  } = params;
+  if (isSelfLoop) {
+    const w = nodeWidth ?? 150;
+    const h = nodeHeight ?? 50;
+    const dx = targetX - sourceX;
+    const dy = targetY - sourceY;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    let c1x = sourceX, c1y = sourceY, c2x = targetX, c2y = targetY;
+    if (dist < 5) {
+      const loopSize = 40;
+      if (sourcePosition === "right") {
+        c1x = sourceX + loopSize;
+        c1y = sourceY - loopSize;
+        c2x = sourceX + loopSize;
+        c2y = sourceY + loopSize;
+      } else if (sourcePosition === "left") {
+        c1x = sourceX - loopSize;
+        c1y = sourceY - loopSize;
+        c2x = sourceX - loopSize;
+        c2y = sourceY + loopSize;
+      } else if (sourcePosition === "top") {
+        c1x = sourceX - loopSize;
+        c1y = sourceY - loopSize;
+        c2x = sourceX + loopSize;
+        c2y = sourceY - loopSize;
+      } else {
+        c1x = sourceX - loopSize;
+        c1y = sourceY + loopSize;
+        c2x = sourceX + loopSize;
+        c2y = sourceY + loopSize;
+      }
+    } else {
+      const offset = Math.max(w, h, 60) * 0.5;
+      if (sourcePosition === "right") c1x += offset;
+      else if (sourcePosition === "left") c1x -= offset;
+      else if (sourcePosition === "top") c1y -= offset;
+      else if (sourcePosition === "bottom") c1y += offset;
+      if (targetPosition === "right") c2x += offset;
+      else if (targetPosition === "left") c2x -= offset;
+      else if (targetPosition === "top") c2y -= offset;
+      else if (targetPosition === "bottom") c2y += offset;
+    }
+    return {
+      x: 0.125 * sourceX + 0.375 * c1x + 0.375 * c2x + 0.125 * targetX,
+      y: 0.125 * sourceY + 0.375 * c1y + 0.375 * c2y + 0.125 * targetY,
+      ox: 0,
+      oy: 0
+    };
+  }
   if (type === "bezier" || type === "default") {
     const curvature = params.curvature ?? 0.25;
     const srcDir = getDir(params.sourcePosition);

package/dist/utils/validation.cjs

@@ -56,14 +56,7 @@ function isValidConnection(sourceNode, targetNode, connection) {
   }
   if (connection.source === connection.target) {
     return {
-      isValid: false,
-      message: "Cannot connect to the same node"
-    };
-  }
-  if (connection.target === connection.source) {
-    return {
-      isValid: false,
-      message: "Cannot create self-loop"
+      isValid: true
     };
   }
   return {

package/dist/utils/validation.mjs

@@ -41,10 +41,7 @@ export function isValidConnection(sourceNode, targetNode, connection) {
     return { isValid: false, message: "Target node not found" };
   }
   if (connection.source === connection.target) {
-    return { isValid: false, message: "Cannot connect to the same node" };
-  }
-  if (connection.target === connection.source) {
-    return { isValid: false, message: "Cannot create self-loop" };
+    return { isValid: true };
   }
   return { isValid: true };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yh-ui/flow",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "description": "YH-UI High-performance Flow Chart Component",
   "type": "module",
   "sideEffects": false,
@@ -32,8 +32,8 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@yh-ui/utils": "^1.0.52",
-    "@yh-ui/hooks": "^1.0.52"
+    "@yh-ui/utils": "^1.0.54",
+    "@yh-ui/hooks": "^1.0.54"
   },
   "devDependencies": {
     "vue": "^3.5.35",
@@ -44,7 +44,8 @@
     "vue": "^3.5.35",
     "dagre": ">=0.8.5",
     "elkjs": ">=0.9.0",
-    "d3-force": ">=3.0.0"
+    "d3-force": ">=3.0.0",
+    "html-to-image": ">=1.11.0"
   },
   "peerDependenciesMeta": {
     "dagre": {
@@ -55,6 +56,9 @@
     },
     "d3-force": {
       "optional": true
+    },
+    "html-to-image": {
+      "optional": true
     }
   },
   "publishConfig": {