@yh-ui/flow 1.0.53 → 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";
@@ -860,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 }
 );

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;
@@ -208,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":
@@ -229,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

@@ -8,6 +8,9 @@ export interface EdgePathParams {
     targetPosition: Position;
     /** 控制曲率，0~1，默认 0.25 */
     curvature?: number;
+    isSelfLoop?: boolean;
+    nodeWidth?: number;
+    nodeHeight?: number;
 }
 /**
  * 获取连接点的位置坐标
@@ -60,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

@@ -148,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":
@@ -164,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.53",
+  "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.53",
-    "@yh-ui/hooks": "^1.0.53"
+    "@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": {