@yh-ui/flow 1.0.52 → 1.0.53

package/dist/Flow.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);
@@ -806,13 +925,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 +1075,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 +1125,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/utils/edge.cjs

@@ -51,6 +51,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 {

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;
@@ -24,6 +24,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;

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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yh-ui/flow",
-  "version": "1.0.52",
+  "version": "1.0.53",
   "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.53",
+    "@yh-ui/hooks": "^1.0.53"
   },
   "devDependencies": {
     "vue": "^3.5.35",