@yh-ui/flow 0.1.21

package/dist/Flow.vue

@@ -0,0 +1,959 @@
+<template>
+  <div
+    ref="containerRef"
+    class="yh-flow"
+    :class="{
+  'is-readonly': readonly,
+  'is-panning': isPanning
+}"
+    tabindex="0"
+    @wheel.prevent="handleWheel"
+    @mousedown="handlePaneMouseDown"
+  >
+    <!-- Plugin Components (Background, etc.) -->
+    <template v-for="plugin in uiPlugins" :key="plugin.id">
+      <component v-if="plugin.component" :is="plugin.component" v-bind="plugin.componentProps" />
+    </template>
+
+    <!-- Main Content -->
+    <div class="yh-flow__content" :style="contentStyle">
+      <!-- Edges -->
+      <EdgeRenderer
+        :edges="edgesRef || []"
+        :nodes="nodesRef || []"
+        :edge-types="edgeTypes"
+        :transform="viewportRef"
+        :connecting-edge="connectingEdge"
+        @edge-click="handleEdgeClick"
+        @edge-dblclick="handleEdgeDblClick"
+        @edge-contextmenu="handleEdgeContextMenu"
+        @edge-update-start="handleEdgeUpdateStart"
+        :updating-edge-id="updatingEdge?.edge.id"
+      >
+        <template #edge="edgeProps">
+          <slot name="edge" v-bind="edgeProps" />
+        </template>
+      </EdgeRenderer>
+
+      <!-- Edge Handles (for updating/reconnecting edges) -->
+      <EdgeHandlesRenderer
+        :edges="edgesRef || []"
+        :nodes="nodesRef || []"
+        @edge-update-start="handleEdgeUpdateStart"
+      />
+
+      <!-- Nodes -->
+      <NodeRenderer
+        :nodes="visibleNodes || []"
+        :node-types="nodeTypes"
+        :transform="viewportRef"
+        :draggable="nodesDraggable && !readonly"
+        :readonly="readonly"
+        @node-click="handleNodeClick"
+        @node-dblclick="handleNodeDblClick"
+        @node-contextmenu="handleNodeContextMenu"
+        @node-drag-start="handleNodeDragStart"
+        @node-drag="handleNodeDrag"
+        @node-drag-end="handleNodeDragEnd"
+        @connect-start="handleConnectStart"
+        @node-select-toggle="handleNodeSelectToggle"
+      >
+        <template #node="nodeProps">
+          <slot name="node" v-bind="nodeProps" />
+        </template>
+      </NodeRenderer>
+
+      <!-- Selection Box -->
+      <SelectionBox
+        :selection-rect="selectionManager.selectionRect.value"
+        :transform="viewportRef"
+      />
+    </div>
+
+    <!-- UI Overlay Plugin Components (Controls, Minimap, etc.) -->
+    <template v-for="plugin in overlayPlugins" :key="plugin.id">
+      <component v-if="plugin.component" :is="plugin.component" v-bind="plugin.componentProps" />
+    </template>
+
+    <!-- Connection Line (dragging) -->
+    <svg v-if="isConnecting" class="yh-flow__connection-line">
+      <path
+        :d="connectionLinePath"
+        stroke="var(--flow-edge-animated-stroke, #409eff)"
+        stroke-width="2"
+        fill="none"
+        stroke-dasharray="5,5"
+      />
+    </svg>
+
+    <!-- Node Edit Panel -->
+    <!-- AI 工作流节点使用 AI 配置面板 -->
+    <AiNodeEditPanel
+      v-if="editingNode?.type?.startsWith('ai-')"
+      :node="editingNode"
+      :visible="showNodeEditPanel"
+      @update="handleNodeEditUpdate"
+      @close="closeNodeEditPanel"
+    />
+    <!-- 普通节点使用基础编辑面板 -->
+    <NodeEditPanel
+      v-else
+      :node="editingNode"
+      :visible="showNodeEditPanel"
+      @update="handleNodeEditUpdate"
+      @close="closeNodeEditPanel"
+    />
+
+    <!-- Edge Edit Panel -->
+    <EdgeEditPanel
+      :edge="editingEdge"
+      :visible="showEdgeEditPanel"
+      :edge-types="edgeTypes"
+      @update="handleEdgeEditUpdate"
+      @close="closeEdgeEditPanel"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, shallowRef } 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";
+import NodeRenderer from "./renderer/NodeRenderer.vue";
+import SelectionBox from "./renderer/SelectionBox.vue";
+import NodeEditPanel from "./components/NodeEditPanel.vue";
+import AiNodeEditPanel from "./components/AiNodeEditPanel.vue";
+import EdgeEditPanel from "./components/EdgeEditPanel.vue";
+import {
+  createGridPlugin,
+  createMiniMapPlugin,
+  createControlsPlugin,
+  createSnapPlugin,
+  createExportPlugin,
+  createLayoutPlugin
+} from "./plugins/plugins";
+import { useViewport } from "./core/useViewport";
+import { useNodes } from "./core/useNodes";
+import { useEdges } from "./core/useEdges";
+import { useSelection } from "./core/useSelection";
+import { useHistory } from "./core/useHistory";
+import { useKeyboard } from "./core/useKeyboard";
+import { useAlignment } from "./core/useAlignment";
+import { getEdgePath, getHandlePosition } from "./utils/edge";
+import { screenToCanvas, canvasToScreen } from "./utils/transform";
+import { isValidConnection, detectCycles } from "./utils/validation";
+import {
+  createNodeFromTemplate,
+  isNestedNode,
+  getNodeChildren,
+  getNodeParent,
+  exportFlowData,
+  importFlowData
+} from "./utils/custom-types";
+import { provideFlowContext } from "./core/FlowContext";
+import { createEventBus } from "./utils/event-bus";
+import { PluginManager } from "./plugins/plugin";
+const validateConnection = (sourceNode, targetNode, connection) => {
+  const basicResult = isValidConnection(sourceNode, targetNode, connection);
+  if (!basicResult.isValid) {
+    return basicResult;
+  }
+  if (props.connectionValidator && !props.connectionValidator(connection)) {
+    return { isValid: false, message: "Connection not allowed by custom validator" };
+  }
+  if (!props.noCycleValidation) {
+    const wouldCreateCycle = detectCycles(edgesRef.value, {
+      source: connection.source,
+      target: connection.target
+    });
+    if (wouldCreateCycle) {
+      return { isValid: false, message: "Connection would create a cycle" };
+    }
+  }
+  return { isValid: true };
+};
+const props = defineProps({
+  nodes: { type: Array, required: false, default: () => [] },
+  edges: { type: Array, required: false, default: () => [] },
+  modelValue: { type: Object, required: false, default: () => ({ x: 0, y: 0, zoom: 1 }) },
+  minZoom: { type: Number, required: false, default: 0.1 },
+  maxZoom: { type: Number, required: false, default: 2 },
+  zoomStep: { type: Number, required: false, default: 0.1 },
+  nodesDraggable: { type: Boolean, required: false, default: true },
+  edgesConnectable: { type: Boolean, required: false, default: true },
+  selectable: { type: Boolean, required: false, default: true },
+  background: { type: String, required: false, default: "none" },
+  backgroundColor: { type: String, required: false, default: "transparent" },
+  gridSize: { type: Number, required: false, default: 20 },
+  snapToGrid: { type: Boolean, required: false, default: false },
+  snapGrid: { type: Array, required: false, default: () => [20, 20] },
+  readonly: { type: Boolean, required: false, default: false },
+  showControls: { type: Boolean, required: false, default: false },
+  showMinimap: { type: Boolean, required: false, default: false },
+  minimapNodeColor: { type: String, required: false, default: "#cbd5e1" },
+  history: { type: Boolean, required: false, default: false },
+  maxHistory: { type: Number, required: false, default: 50 },
+  keyboardShortcuts: { type: Boolean, required: false, default: true },
+  connectionValidator: { type: Function, required: false, default: void 0 },
+  noCycleValidation: { type: Boolean, required: false, default: false },
+  showAlignmentLines: { type: Boolean, required: false, default: false },
+  snapThreshold: { type: Number, required: false, default: 5 },
+  customNodeTemplates: { type: Object, required: false, default: () => ({}) },
+  nodeTypes: { type: Object, required: false, default: () => ({}) },
+  edgeTypes: { type: Object, required: false, default: () => ({}) },
+  interactiveMinimap: { type: Boolean, required: false, default: false },
+  showLayoutControls: { type: Boolean, required: false, default: false },
+  layoutType: { type: String, required: false, default: "none" },
+  layoutDirection: { type: String, required: false, default: "TB" },
+  enableExport: { type: Boolean, required: false, default: false },
+  exportFileName: { type: String, required: false, default: "flow-chart" }
+});
+const emit = defineEmits(["update:modelValue", "update:nodes", "update:edges", "nodeClick", "nodeDblClick", "nodeDragStart", "nodeDrag", "nodeDragEnd", "nodeContextMenu", "edgeClick", "edgeDblClick", "edgeContextMenu", "edgeConnect", "selectionChange", "historyChange", "viewportChange", "edgeUpdate"]);
+const containerRef = ref();
+const containerWidth = ref(800);
+const containerHeight = ref(600);
+const nodesRef = ref(props.nodes || []);
+const edgesRef = ref(props.edges || []);
+const viewportRef = shallowRef(props.modelValue || { x: 0, y: 0, zoom: 1 });
+const readonly = ref(props.readonly || false);
+const eventBus = createEventBus();
+const pluginManager = new PluginManager();
+const snapThreshold = ref(props.snapThreshold ?? 10);
+const viewport = useViewport(viewportRef, {
+  minZoom: props.minZoom || 0.1,
+  maxZoom: props.maxZoom || 5,
+  zoomStep: props.zoomStep || 0.1
+});
+const registeredPlugins = ref([]);
+const uiPlugins = computed(
+  () => registeredPlugins.value.filter((p) => !p.id.includes("minimap") && !p.id.includes("controls"))
+);
+const overlayPlugins = computed(
+  () => registeredPlugins.value.filter((p) => p.id.includes("minimap") || p.id.includes("controls"))
+);
+const usePlugin = (plugin) => {
+  pluginManager.register(plugin);
+  registeredPlugins.value = pluginManager.getPlugins();
+};
+const removePlugin = (pluginId) => {
+  pluginManager.unregister(pluginId);
+  registeredPlugins.value = pluginManager.getPlugins();
+};
+const nodesManager = useNodes(viewportRef, {
+  nodes: nodesRef,
+  snapToGrid: props.snapToGrid || false,
+  snapGrid: props.snapGrid || [15, 15]
+});
+const edgesManager = useEdges({
+  edges: edgesRef,
+  nodes: nodesRef
+});
+const selectionManager = useSelection({
+  nodes: nodesRef,
+  edges: edgesRef
+});
+const historyManager = useHistory(nodesRef, edgesRef, {
+  maxHistory: props.maxHistory || 50,
+  onHistoryChange: (canUndo, canRedo) => {
+    emit("historyChange", { canUndo, canRedo });
+  }
+});
+const alignmentManager = useAlignment({
+  nodes: nodesRef,
+  snapThreshold: snapThreshold.value
+});
+const visibleNodes = computed(() => {
+  if (!containerRef.value) return nodesRef.value;
+  const padding = 100;
+  const visibleBounds = {
+    x: -viewportRef.value.x / viewportRef.value.zoom - padding,
+    y: -viewportRef.value.y / viewportRef.value.zoom - padding,
+    width: containerWidth.value / viewportRef.value.zoom + padding * 2,
+    height: containerHeight.value / viewportRef.value.zoom + padding * 2
+  };
+  return nodesRef.value.filter((node) => {
+    const width = node.width || 200;
+    const height = node.height || 50;
+    return !(node.position.x + width < visibleBounds.x || node.position.x > visibleBounds.x + visibleBounds.width || node.position.y + height < visibleBounds.y || node.position.y > visibleBounds.y + visibleBounds.height);
+  });
+});
+const contentStyle = computed(() => ({
+  transform: `translate(${viewportRef.value.x}px, ${viewportRef.value.y}px) scale(${viewportRef.value.zoom})`,
+  transformOrigin: "0 0"
+}));
+const isPanning = ref(false);
+const panStart = ref({ x: 0, y: 0 });
+const isSelecting = ref(false);
+const draggingNodeId = ref(null);
+const draggingPosition = ref(null);
+const isConnecting = ref(false);
+const connectionStart = ref(null);
+const connectionEnd = ref({ x: 0, y: 0 });
+const updatingEdge = ref(null);
+const showNodeEditPanel = ref(false);
+const editingNode = ref(null);
+const showEdgeEditPanel = ref(false);
+const editingEdge = ref(null);
+const connectingEdge = computed(() => {
+  if (!isConnecting.value || !connectionStart.value) return null;
+  return {
+    path: connectionLinePath.value,
+    tx: connectionEnd.value.x,
+    ty: connectionEnd.value.y
+  };
+});
+const connectionLinePath = computed(() => {
+  if (!connectionStart.value) return "";
+  return getEdgePath("bezier", {
+    sourceX: connectionStart.value.x * viewportRef.value.zoom + viewportRef.value.x,
+    sourceY: connectionStart.value.y * viewportRef.value.zoom + viewportRef.value.y,
+    targetX: connectionEnd.value.x,
+    targetY: connectionEnd.value.y,
+    sourcePosition: connectionStart.value.position,
+    targetPosition: "left"
+  });
+});
+const handleWheel = (event) => {
+  event.preventDefault();
+  const delta = event.deltaY > 0 ? 0.9 : 1.1;
+  const rect = containerRef.value?.getBoundingClientRect();
+  if (rect) {
+    viewport.zoomTo(viewportRef.value.zoom * delta, {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    });
+  }
+};
+const handlePaneMouseDown = (event) => {
+  const target = event.target;
+  if (!containerRef.value?.contains(target)) return;
+  if (target.closest(".yh-flow-node")) return;
+  if (target.closest(".yh-flow-handle")) return;
+  if (target.closest(".yh-flow-edge-group")) return;
+  if (target.closest(".yh-flow__connection-line")) return;
+  if (target.closest(".yh-flow-controls")) return;
+  if (target.closest(".yh-flow-minimap")) return;
+  const rect = containerRef.value?.getBoundingClientRect();
+  if (!rect) return;
+  const mouseX = event.clientX - rect.left;
+  const mouseY = event.clientY - rect.top;
+  if (event.altKey && props.selectable && !readonly.value) {
+    const canvasPos = {
+      x: (mouseX - viewportRef.value.x) / viewportRef.value.zoom,
+      y: (mouseY - viewportRef.value.y) / viewportRef.value.zoom
+    };
+    isSelecting.value = true;
+    selectionManager.startSelection(canvasPos.x, canvasPos.y);
+    selectionManager.clearSelection();
+  } else if (!readonly.value) {
+    isPanning.value = true;
+    panStart.value = { x: event.clientX, y: event.clientY };
+  }
+};
+const handleMouseMove = (event) => {
+  if (isPanning.value) {
+    const dx = event.clientX - panStart.value.x;
+    const dy = event.clientY - panStart.value.y;
+    viewport.pan(dx, dy);
+    panStart.value = { x: event.clientX, y: event.clientY };
+  }
+  if (isSelecting.value) {
+    const rect = containerRef.value?.getBoundingClientRect();
+    if (rect) {
+      const mouseX = event.clientX - rect.left;
+      const mouseY = event.clientY - rect.top;
+      const canvasPos = {
+        x: (mouseX - viewportRef.value.x) / viewportRef.value.zoom,
+        y: (mouseY - viewportRef.value.y) / viewportRef.value.zoom
+      };
+      selectionManager.updateSelection(canvasPos.x, canvasPos.y);
+    }
+  }
+  if (isConnecting.value) {
+    const rect = containerRef.value?.getBoundingClientRect();
+    if (rect) {
+      connectionEnd.value = {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+      };
+    }
+  }
+};
+const handleMouseUp = (event) => {
+  isPanning.value = false;
+  if (isSelecting.value) {
+    isSelecting.value = false;
+    selectionManager.endSelection();
+  }
+  if (isConnecting.value && connectionStart.value) {
+    const rect = containerRef.value?.getBoundingClientRect();
+    if (rect) {
+      const mouseX = event.clientX - rect.left;
+      const mouseY = event.clientY - rect.top;
+      const canvasPos = {
+        x: (mouseX - viewportRef.value.x) / viewportRef.value.zoom,
+        y: (mouseY - viewportRef.value.y) / viewportRef.value.zoom
+      };
+      const targetNode = findTargetNode(canvasPos);
+      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
+          }
+        );
+        if (!validationResult.isValid) {
+          console.warn("Invalid connection:", validationResult.message);
+          isConnecting.value = false;
+          connectionStart.value = null;
+          updatingEdge.value = null;
+          return;
+        }
+        if (updatingEdge.value) {
+          const { edge, handleType } = 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
+          };
+          edgesManager.updateEdge(edge.id, connection);
+          emit("edgeUpdate", { edge, connection });
+          eventBus.emit("edge:update", { edge, connection });
+        } else {
+          const newEdge = {
+            id: `edge-${Date.now()}`,
+            source: connectionStart.value.nodeId,
+            target: targetNode.id,
+            sourceHandle: connectionStart.value.handleId || void 0,
+            targetHandle: void 0,
+            type: "bezier"
+          };
+          edgesManager.addEdge(newEdge);
+          emit("edgeConnect", {
+            source: newEdge.source,
+            target: newEdge.target,
+            sourceHandle: newEdge.sourceHandle,
+            targetHandle: newEdge.targetHandle
+          });
+          eventBus.emit("edge:connect", {
+            connection: {
+              source: newEdge.source,
+              target: newEdge.target,
+              sourceHandle: newEdge.sourceHandle,
+              targetHandle: newEdge.targetHandle
+            }
+          });
+        }
+      }
+    }
+    isConnecting.value = false;
+    connectionStart.value = null;
+    updatingEdge.value = null;
+  }
+};
+const findTargetNode = (canvasPos) => {
+  for (const node of nodesRef.value) {
+    const width = node.width || 200;
+    const height = node.height || 50;
+    if (canvasPos.x >= node.position.x && canvasPos.x <= node.position.x + width && canvasPos.y >= node.position.y && canvasPos.y <= node.position.y + height) {
+      if (connectionStart.value && node.id !== connectionStart.value.nodeId) {
+        return node;
+      }
+    }
+  }
+  return null;
+};
+const handleNodeClick = (event, node) => {
+  const multi = event.shiftKey || event.metaKey || event.ctrlKey;
+  if (!multi) edgesManager.clearSelection();
+  nodesManager.selectNode(node.id, true, multi);
+  emit("nodeClick", { node, nativeEvent: event });
+  eventBus.emit("node:click", { node, nativeEvent: event });
+};
+const handleNodeSelectToggle = (nodeId) => {
+  const node = nodesRef.value.find((n) => n.id === nodeId);
+  if (node) {
+    node.selected = !node.selected;
+  }
+};
+const handleNodeDblClick = (event, node) => {
+  emit("nodeDblClick", { node, nativeEvent: event });
+  eventBus.emit("node:dblclick", { node, nativeEvent: event });
+  if (!readonly.value) {
+    showEdgeEditPanel.value = false;
+    editingNode.value = node;
+    showNodeEditPanel.value = true;
+  }
+};
+const handleNodeContextMenu = (event, node) => {
+  emit("nodeContextMenu", { node, nativeEvent: event });
+  eventBus.emit("node:contextmenu", { node, nativeEvent: event });
+};
+const handleNodeDragStart = (event, node) => {
+  historyManager.push({ nodes: nodesRef.value, edges: edgesRef.value });
+  draggingNodeId.value = node.id;
+  draggingPosition.value = { ...node.position };
+  emit("nodeDragStart", { node, nativeEvent: event });
+  eventBus.emit("node:dragstart", { node, nativeEvent: event });
+};
+const handleNodeDrag = (event, node, position) => {
+  const snappedPosition = alignmentManager.getAlignmentSnap(node.id, position);
+  nodesManager.updateNodePosition(node.id, snappedPosition, { dragging: true });
+  draggingPosition.value = snappedPosition;
+  emit("nodeDrag", { node, nativeEvent: event, position: snappedPosition });
+  eventBus.emit("node:drag", { node, nativeEvent: event, position: snappedPosition });
+  emit("update:nodes", nodesRef.value);
+};
+const handleNodeDragEnd = (event, node) => {
+  nodesManager.updateNodePosition(node.id, node.position, { dragging: false });
+  draggingNodeId.value = null;
+  draggingPosition.value = null;
+  emit("nodeDragEnd", { node, nativeEvent: event });
+  eventBus.emit("node:dragend", { node, nativeEvent: event });
+  emit("update:nodes", nodesRef.value);
+  emit("update:edges", edgesRef.value);
+};
+const handleEdgeClick = (event, edge) => {
+  console.log("Edge click:", edge.id);
+  event.stopPropagation();
+  if (!event.ctrlKey && !event.metaKey && !event.shiftKey) {
+    edgesRef.value.forEach((e) => {
+      if (e.id !== edge.id) e.selected = false;
+    });
+  }
+  edge.selected = !edge.selected;
+  emit("edgeClick", { edge, nativeEvent: event });
+  if (!readonly.value) {
+    showNodeEditPanel.value = false;
+    editingEdge.value = edge;
+    showEdgeEditPanel.value = true;
+  }
+  eventBus.emit("edge:click", { edge, nativeEvent: event });
+};
+const handleEdgeDblClick = (event, edge) => {
+  console.log("Edge dblclick:", edge.id);
+  emit("edgeDblClick", { edge, nativeEvent: event });
+  eventBus.emit("edge:dblclick", { edge, nativeEvent: event });
+  if (!readonly.value) {
+    showNodeEditPanel.value = false;
+    editingEdge.value = edge;
+    showEdgeEditPanel.value = true;
+  }
+};
+const handleEdgeContextMenu = (event, edge) => {
+  emit("edgeContextMenu", { edge, nativeEvent: event });
+  eventBus.emit("edge:contextmenu", { edge, nativeEvent: event });
+};
+const handleEdgeUpdateStart = (event, edge, handleType) => {
+  if (readonly.value) return;
+  const rect = containerRef.value?.getBoundingClientRect();
+  if (!rect) return;
+  updatingEdge.value = { edge, handleType };
+  const anchorNodeId = handleType === "source" ? edge.target : edge.source;
+  const anchorHandleId = handleType === "source" ? edge.targetHandle : edge.sourceHandle;
+  const node = nodesRef.value.find((n) => n.id === anchorNodeId);
+  if (!node) return;
+  const position = handleType === "source" ? anchorHandleId ?? "left" : anchorHandleId ?? "right";
+  const startPos = getHandlePosition(node, position, anchorHandleId);
+  isConnecting.value = true;
+  connectionStart.value = {
+    nodeId: anchorNodeId,
+    handleId: anchorHandleId || "",
+    handleType: handleType === "source" ? "target" : "source",
+    // 反转类型
+    position,
+    x: startPos.x,
+    y: startPos.y
+  };
+  connectionEnd.value = {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top
+  };
+};
+const handleConnectStart = (event, nodeId, handleId, handleType) => {
+  const node = nodesRef.value.find((n) => n.id === nodeId);
+  if (!node) return;
+  const rect = containerRef.value?.getBoundingClientRect();
+  if (!rect) return;
+  const position = handleId || (handleType === "source" ? "right" : "left");
+  const startPos = getHandlePosition(node, position, handleId);
+  isConnecting.value = true;
+  connectionStart.value = {
+    nodeId,
+    handleId,
+    handleType,
+    position,
+    x: startPos.x,
+    y: startPos.y
+  };
+  connectionEnd.value = {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top
+  };
+};
+const handleNodeEditUpdate = (updates) => {
+  if (editingNode.value) {
+    historyManager.push({ nodes: nodesRef.value, edges: edgesRef.value });
+    nodesManager.updateNode(editingNode.value.id, updates);
+    editingNode.value = nodesRef.value.find((n) => n.id === editingNode.value?.id) || null;
+    emit("update:nodes", nodesRef.value);
+  }
+};
+const closeNodeEditPanel = () => {
+  showNodeEditPanel.value = false;
+  editingNode.value = null;
+};
+const handleEdgeEditUpdate = (updates) => {
+  if (editingEdge.value) {
+    historyManager.push({ nodes: nodesRef.value, edges: edgesRef.value });
+    edgesManager.updateEdge(editingEdge.value.id, updates);
+    editingEdge.value = edgesRef.value.find((e) => e.id === editingEdge.value?.id) || null;
+    emit("update:edges", edgesRef.value);
+  }
+};
+const closeEdgeEditPanel = () => {
+  showEdgeEditPanel.value = false;
+  editingEdge.value = null;
+};
+const getNodes = () => nodesRef.value;
+const getEdges = () => edgesRef.value;
+const onEvent = (event, handler) => {
+  eventBus.on(event, handler);
+};
+const offEvent = (event, handler) => {
+  eventBus.off(event, handler);
+};
+const emitEvent = (event, payload) => {
+  eventBus.emit(event, payload);
+};
+const flowInstance = {
+  nodes: nodesRef,
+  edges: edgesRef,
+  viewport: viewportRef,
+  addNode: nodesManager.addNode,
+  removeNode: nodesManager.removeNode,
+  updateNode: nodesManager.updateNode,
+  getNode: nodesManager.getNode,
+  addEdge: edgesManager.addEdge,
+  removeEdge: edgesManager.removeEdge,
+  updateEdge: edgesManager.updateEdge,
+  getEdge: edgesManager.getEdge,
+  setViewport: (transform) => viewport.setViewport(transform.x, transform.y, transform.zoom),
+  fitView: (options) => viewport.fitView(
+    { width: containerWidth.value, height: containerHeight.value },
+    nodesRef.value,
+    options
+  ),
+  zoomIn: viewport.zoomIn,
+  zoomOut: viewport.zoomOut,
+  centerView: viewport.center,
+  selectNode: nodesManager.selectNode,
+  selectEdge: edgesManager.selectEdge,
+  clearSelection: selectionManager.clearSelection,
+  on: onEvent,
+  off: offEvent,
+  emit: emitEvent,
+  isValidConnection: (connection) => isValidConnection(
+    nodesRef.value.find((n) => n.id === connection.source),
+    nodesRef.value.find((n) => n.id === connection.target),
+    connection
+  ).isValid,
+  getNodes,
+  getEdges,
+  getViewport: () => viewportRef.value,
+  screenToCanvas: (x, y) => screenToCanvas(x, y, viewportRef.value),
+  canvasToScreen: (x, y) => canvasToScreen(x, y, viewportRef.value),
+  // ============================================
+  // New 5-star feature methods
+  // ============================================
+  createNodeFromTemplate: (type, id, position, overrides) => createNodeFromTemplate(type, id, position, overrides),
+  exportFlowData: (viewport2) => exportFlowData(nodesRef.value, edgesRef.value, viewport2),
+  importFlowData: (json) => importFlowData(json),
+  isNestedNode: (node) => isNestedNode(node),
+  getNodeChildren: (node) => getNodeChildren(node, nodesRef.value),
+  getNodeParent: (node) => getNodeParent(node, nodesRef.value),
+  get $el() {
+    return containerRef.value;
+  },
+  draggingNodeId,
+  draggingPosition,
+  isLocked: readonly,
+  setInteractive: (interactive) => {
+    readonly.value = !interactive;
+  },
+  usePlugin,
+  removePlugin,
+  // Placeholders for plugin methods to be exposed via defineExpose
+  exportJson: void 0,
+  exportImage: void 0,
+  applyLayout: void 0
+};
+provideFlowContext(flowInstance);
+pluginManager.init(flowInstance);
+defineExpose(flowInstance);
+watch(
+  () => props.nodes,
+  (newNodes) => {
+    if (draggingNodeId.value) return;
+    nodesRef.value = newNodes || [];
+  },
+  { deep: true }
+);
+watch(
+  () => props.edges,
+  (newEdges) => {
+    edgesRef.value = newEdges || [];
+  },
+  { deep: true }
+);
+const prevSelectedNodeIds = ref(/* @__PURE__ */ new Set());
+const prevSelectedEdgeIds = ref(/* @__PURE__ */ new Set());
+watch(
+  [nodesRef, edgesRef],
+  ([nodes, edges]) => {
+    const selectedNodes = nodes.filter((n) => n.selected);
+    const selectedEdges = edges.filter((e) => e.selected);
+    const nextNodeIds = new Set(selectedNodes.map((n) => n.id));
+    const nextEdgeIds = new Set(selectedEdges.map((e) => e.id));
+    for (const id of nextNodeIds) {
+      if (!prevSelectedNodeIds.value.has(id)) {
+        const node = nodes.find((n) => n.id === id);
+        if (node) eventBus.emit("node:selected", { node });
+      }
+    }
+    for (const id of prevSelectedNodeIds.value) {
+      if (!nextNodeIds.has(id)) {
+        const node = nodes.find((n) => n.id === id);
+        if (node) eventBus.emit("node:unselected", { node });
+      }
+    }
+    for (const id of nextEdgeIds) {
+      if (!prevSelectedEdgeIds.value.has(id)) {
+        const edge = edges.find((e) => e.id === id);
+        if (edge) eventBus.emit("edge:selected", { edge });
+      }
+    }
+    for (const id of prevSelectedEdgeIds.value) {
+      if (!nextEdgeIds.has(id)) {
+        const edge = edges.find((e) => e.id === id);
+        if (edge) eventBus.emit("edge:unselected", { edge });
+      }
+    }
+    eventBus.emit("selection:change", { selectedNodes, selectedEdges });
+    emit("selectionChange", { selectedNodes, selectedEdges });
+    emit("update:nodes", nodes);
+    emit("update:edges", edges);
+    prevSelectedNodeIds.value = nextNodeIds;
+    prevSelectedEdgeIds.value = nextEdgeIds;
+  },
+  { deep: true }
+);
+watch(
+  viewportRef,
+  (newViewport) => {
+    emit("update:modelValue", newViewport);
+    emit("viewportChange", newViewport);
+    eventBus.emit("viewport:change", { transform: newViewport });
+  },
+  { deep: true }
+);
+let handleKeyDown;
+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) => {
+      for (const entry of entries) {
+        containerWidth.value = entry.contentRect.width;
+        containerHeight.value = entry.contentRect.height;
+      }
+    });
+    resizeObserver.observe(containerRef.value);
+  }
+  if (props.background && props.background !== "none") {
+    usePlugin(
+      createGridPlugin({
+        type: props.background === "dots" ? "dots" : "grid",
+        color: props.backgroundColor,
+        gap: props.gridSize
+      })
+    );
+  }
+  if (props.showControls) {
+    usePlugin(createControlsPlugin({}));
+  }
+  if (props.showMinimap) {
+    usePlugin(
+      createMiniMapPlugin({
+        nodeColor: props.minimapNodeColor ? () => props.minimapNodeColor : void 0,
+        interactive: props.interactiveMinimap,
+        showLayoutControls: props.showLayoutControls,
+        layoutType: props.layoutType,
+        layoutDirection: props.layoutDirection
+      })
+    );
+  }
+  if (props.showAlignmentLines) {
+    usePlugin(
+      createSnapPlugin({
+        showAlignmentLines: true,
+        snapThreshold: props.snapThreshold
+      })
+    );
+  }
+  if (props.enableExport) {
+    usePlugin(
+      createExportPlugin({
+        fileName: props.exportFileName,
+        enabled: true
+      })
+    );
+  }
+  if (props.layoutType && props.layoutType !== "none") {
+    usePlugin(
+      createLayoutPlugin({
+        type: props.layoutType,
+        direction: props.layoutDirection
+      })
+    );
+  }
+  watch(
+    () => [props.background, props.backgroundColor, props.gridSize],
+    ([bg, color, gap]) => {
+      removePlugin("grid");
+      if (bg && bg !== "none") {
+        usePlugin(
+          createGridPlugin({
+            type: bg === "dots" ? "dots" : "grid",
+            color,
+            gap: gap || 20
+          })
+        );
+      }
+    }
+  );
+  watch(
+    () => props.showControls,
+    (val) => {
+      removePlugin("controls");
+      if (val) usePlugin(createControlsPlugin({}));
+    }
+  );
+  watch(
+    () => [
+      props.showMinimap,
+      props.minimapNodeColor,
+      props.interactiveMinimap,
+      props.showLayoutControls,
+      props.layoutType,
+      props.layoutDirection
+    ],
+    ([show, color, interactive, showLayout, type, dir]) => {
+      removePlugin("minimap");
+      if (show) {
+        usePlugin(
+          createMiniMapPlugin({
+            nodeColor: color ? () => color : void 0,
+            interactive,
+            showLayoutControls: showLayout,
+            layoutType: type,
+            layoutDirection: dir
+          })
+        );
+      }
+    }
+  );
+  watch(
+    () => [props.showAlignmentLines, props.snapThreshold],
+    ([show, threshold]) => {
+      removePlugin("snap");
+      if (show) {
+        usePlugin(
+          createSnapPlugin({
+            showAlignmentLines: true,
+            snapThreshold: threshold || 10
+          })
+        );
+      }
+    }
+  );
+  watch(
+    () => [props.enableExport, props.exportFileName],
+    ([enable, fileName]) => {
+      removePlugin("export");
+      if (enable) {
+        usePlugin(
+          createExportPlugin({
+            fileName,
+            enabled: true
+          })
+        );
+      }
+    }
+  );
+  watch(
+    () => [props.layoutType, props.layoutDirection],
+    ([type, dir]) => {
+      removePlugin("layout");
+      if (type && type !== "none") {
+        usePlugin(
+          createLayoutPlugin({
+            type,
+            direction: dir
+          })
+        );
+      }
+    }
+  );
+  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);
+      },
+      onUndo: () => historyManager.undo(),
+      onRedo: () => historyManager.redo(),
+      onSelectAll: () => {
+        nodesRef.value.forEach((n) => {
+          n.selected = true;
+        });
+        edgesRef.value.forEach((e) => {
+          e.selected = true;
+        });
+      },
+      onEscape: () => selectionManager.clearSelection()
+    });
+    handleKeyDown = keyboard.handleKeyDown;
+    document.addEventListener("keydown", handleKeyDown);
+  }
+});
+onBeforeUnmount(() => {
+  if (props.keyboardShortcuts && handleKeyDown) {
+    document.removeEventListener("keydown", handleKeyDown);
+  }
+  document.removeEventListener("mousemove", handleMouseMove);
+  document.removeEventListener("mouseup", handleMouseUp);
+  pluginManager.destroyAll();
+  eventBus.clear();
+});
+</script>
+
+<style scoped>
+.yh-flow{background:var(--flow-background-color,#f8f9fa);cursor:grab;height:100%;overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.yh-flow.is-panning{cursor:grabbing}.yh-flow.is-readonly{cursor:default}.yh-flow__content{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.yh-flow__content>*{pointer-events:auto}.yh-flow__connection-line{height:100%;left:0;overflow:visible;pointer-events:none;position:absolute;top:0;width:100%;z-index:1000}
+</style>