@yh-ui/flow 0.1.21

package/dist/plugins/plugins/node-group.cjs

@@ -0,0 +1,209 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createNodeGroupPlugin = createNodeGroupPlugin;
+const defaultOptions = {
+  enabled: true,
+  groupNodeType: "group",
+  paddingX: 40,
+  paddingY: 50,
+  groupIdPrefix: "group",
+  collapseMode: "hide"
+};
+function computeBoundingBox(nodes, paddingX, paddingY) {
+  if (nodes.length === 0) return {
+    x: 0,
+    y: 0,
+    width: 200,
+    height: 150
+  };
+  let minX = Infinity,
+    minY = Infinity,
+    maxX = -Infinity,
+    maxY = -Infinity;
+  nodes.forEach(node => {
+    const w = node.width || 150;
+    const h = node.height || 50;
+    minX = Math.min(minX, node.position.x);
+    minY = Math.min(minY, node.position.y);
+    maxX = Math.max(maxX, node.position.x + w);
+    maxY = Math.max(maxY, node.position.y + h);
+  });
+  return {
+    x: minX - paddingX,
+    y: minY - paddingY,
+    width: maxX - minX + paddingX * 2,
+    height: maxY - minY + paddingY * 2
+  };
+}
+function generateGroupId(prefix, existingIds) {
+  let i = 1;
+  while (existingIds.includes(`${prefix}-${i}`)) i++;
+  return `${prefix}-${i}`;
+}
+function createNodeGroupPlugin(options = {}) {
+  const opts = {
+    ...defaultOptions,
+    ...options
+  };
+  const groupRegistry = /* @__PURE__ */new Map();
+  return {
+    id: "node-group",
+    name: "NodeGroup",
+    version: "1.0.0",
+    description: "Enable node grouping, sub-flow nesting and collapse/expand features",
+    install(flow) {
+      if (!opts.enabled) return;
+      flow.groupSelectedNodes = (label = "Group") => {
+        const selectedNodes = flow.nodes.value.filter(n => n.selected && n.type !== opts.groupNodeType);
+        if (selectedNodes.length < 2) {
+          console.warn("[NodeGroup] Please select at least 2 nodes to group");
+          return null;
+        }
+        const existingIds = flow.nodes.value.map(n => n.id);
+        const groupId = generateGroupId(opts.groupIdPrefix, existingIds);
+        const bbox = computeBoundingBox(selectedNodes, opts.paddingX, opts.paddingY);
+        const originalPositions = {};
+        selectedNodes.forEach(n => {
+          originalPositions[n.id] = {
+            x: n.position.x,
+            y: n.position.y
+          };
+        });
+        const groupNode = {
+          id: groupId,
+          type: opts.groupNodeType,
+          position: {
+            x: bbox.x,
+            y: bbox.y
+          },
+          data: {
+            label,
+            style: {
+              backgroundColor: "rgba(241, 245, 249, 0.8)"
+            }
+          },
+          style: {
+            width: bbox.width,
+            height: bbox.height,
+            minWidth: bbox.width,
+            minHeight: bbox.height
+          },
+          width: bbox.width,
+          height: bbox.height,
+          selectable: true,
+          draggable: true,
+          zIndex: -1
+        };
+        flow.addNode(groupNode);
+        selectedNodes.forEach(node => {
+          flow.updateNode(node.id, {
+            parentId: groupId,
+            extent: "parent",
+            position: {
+              x: node.position.x - bbox.x,
+              y: node.position.y - bbox.y
+            },
+            selected: false
+          });
+        });
+        groupRegistry.set(groupId, {
+          groupId,
+          childIds: selectedNodes.map(n => n.id),
+          collapsed: false,
+          originalPositions
+        });
+        console.log(`[NodeGroup] Created group "${groupId}" with ${selectedNodes.length} nodes`);
+        return groupId;
+      };
+      flow.ungroupNodes = groupId => {
+        const groupNode = flow.getNode(groupId);
+        if (!groupNode) {
+          console.warn(`[NodeGroup] Group "${groupId}" not found`);
+          return;
+        }
+        const groupInfo = groupRegistry.get(groupId);
+        const groupPos = groupNode.position;
+        const childNodes = flow.nodes.value.filter(n => n.parentId === groupId);
+        childNodes.forEach(node => {
+          const absPos = groupInfo?.originalPositions[node.id] ?? {
+            x: groupPos.x + node.position.x,
+            y: groupPos.y + node.position.y
+          };
+          flow.updateNode(node.id, {
+            parentId: void 0,
+            extent: void 0,
+            position: absPos
+          });
+        });
+        flow.removeNode(groupId);
+        groupRegistry.delete(groupId);
+        console.log(`[NodeGroup] Ungrouped "${groupId}"`);
+      };
+      flow.toggleGroupCollapse = groupId => {
+        const groupInfo = groupRegistry.get(groupId);
+        if (!groupInfo) {
+          console.warn(`[NodeGroup] Group "${groupId}" not found in registry`);
+          return;
+        }
+        groupInfo.collapsed = !groupInfo.collapsed;
+        const hidden = groupInfo.collapsed;
+        groupInfo.childIds.forEach(childId => {
+          flow.updateNode(childId, {
+            hidden
+          });
+        });
+        flow.edges.value.forEach(edge => {
+          const srcHidden = groupInfo.childIds.includes(edge.source);
+          const tgtHidden = groupInfo.childIds.includes(edge.target);
+          if (srcHidden || tgtHidden) {
+            flow.updateEdge(edge.id, {
+              hidden
+            });
+          }
+        });
+        if (hidden) {
+          flow.updateNode(groupId, {
+            style: {
+              width: 160,
+              height: 50,
+              minWidth: 160,
+              minHeight: 50
+            },
+            width: 160,
+            height: 50
+          });
+        } else {
+          const groupNode = flow.getNode(groupId);
+          if (groupNode) {
+            const originalW = groupNode.data._origWidth;
+            const originalH = groupNode.data._origHeight;
+            flow.updateNode(groupId, {
+              style: {
+                width: originalW || 200,
+                height: originalH || 150,
+                minWidth: originalW || 200,
+                minHeight: originalH || 150
+              },
+              width: originalW || 200,
+              height: originalH || 150
+            });
+          }
+        }
+        console.log(`[NodeGroup] Group "${groupId}" ${hidden ? "collapsed" : "expanded"}`);
+      };
+      flow.isGroupCollapsed = groupId => {
+        return groupRegistry.get(groupId)?.collapsed ?? false;
+      };
+      flow.getGroupChildren = groupId => {
+        return flow.nodes.value.filter(n => n.parentId === groupId);
+      };
+      flow.getGroupRegistry = () => groupRegistry;
+    },
+    destroy() {
+      groupRegistry.clear();
+    }
+  };
+}

package/dist/plugins/plugins/node-group.d.ts

@@ -0,0 +1,26 @@
+import type { FlowPlugin } from '../plugin';
+export interface NodeGroupOptions {
+    enabled?: boolean;
+    /** 分组时使用的节点类型（需要在 nodeTypes 中有对应渲染） */
+    groupNodeType?: string;
+    /** 默认分组节点宽度偏移量 */
+    paddingX?: number;
+    /** 默认分组节点高度偏移量 */
+    paddingY?: number;
+    /** 分组 id 前缀 */
+    groupIdPrefix?: string;
+    /** 折叠行为：'collapse'=折叠子节点 | 'hide'=隐藏子节点 */
+    collapseMode?: 'collapse' | 'hide';
+}
+export interface GroupInfo {
+    groupId: string;
+    childIds: string[];
+    collapsed: boolean;
+    originalPositions: Record<string, {
+        x: number;
+        y: number;
+    }>;
+}
+export declare function createNodeGroupPlugin(options?: NodeGroupOptions): FlowPlugin;
+/** 导出分组信息类型，供外部使用 */
+export type { GroupInfo as NodeGroupInfo };

package/dist/plugins/plugins/node-group.mjs

@@ -0,0 +1,178 @@
+const defaultOptions = {
+  enabled: true,
+  groupNodeType: "group",
+  paddingX: 40,
+  paddingY: 50,
+  groupIdPrefix: "group",
+  collapseMode: "hide"
+};
+function computeBoundingBox(nodes, paddingX, paddingY) {
+  if (nodes.length === 0) return { x: 0, y: 0, width: 200, height: 150 };
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  nodes.forEach((node) => {
+    const w = node.width || 150;
+    const h = node.height || 50;
+    minX = Math.min(minX, node.position.x);
+    minY = Math.min(minY, node.position.y);
+    maxX = Math.max(maxX, node.position.x + w);
+    maxY = Math.max(maxY, node.position.y + h);
+  });
+  return {
+    x: minX - paddingX,
+    y: minY - paddingY,
+    width: maxX - minX + paddingX * 2,
+    height: maxY - minY + paddingY * 2
+  };
+}
+function generateGroupId(prefix, existingIds) {
+  let i = 1;
+  while (existingIds.includes(`${prefix}-${i}`)) i++;
+  return `${prefix}-${i}`;
+}
+export function createNodeGroupPlugin(options = {}) {
+  const opts = { ...defaultOptions, ...options };
+  const groupRegistry = /* @__PURE__ */ new Map();
+  return {
+    id: "node-group",
+    name: "NodeGroup",
+    version: "1.0.0",
+    description: "Enable node grouping, sub-flow nesting and collapse/expand features",
+    install(flow) {
+      if (!opts.enabled)
+        return;
+      flow.groupSelectedNodes = (label = "Group") => {
+        const selectedNodes = flow.nodes.value.filter(
+          (n) => n.selected && n.type !== opts.groupNodeType
+        );
+        if (selectedNodes.length < 2) {
+          console.warn("[NodeGroup] Please select at least 2 nodes to group");
+          return null;
+        }
+        const existingIds = flow.nodes.value.map((n) => n.id);
+        const groupId = generateGroupId(opts.groupIdPrefix, existingIds);
+        const bbox = computeBoundingBox(selectedNodes, opts.paddingX, opts.paddingY);
+        const originalPositions = {};
+        selectedNodes.forEach((n) => {
+          originalPositions[n.id] = { x: n.position.x, y: n.position.y };
+        });
+        const groupNode = {
+          id: groupId,
+          type: opts.groupNodeType,
+          position: { x: bbox.x, y: bbox.y },
+          data: {
+            label,
+            style: { backgroundColor: "rgba(241, 245, 249, 0.8)" }
+          },
+          style: {
+            width: bbox.width,
+            height: bbox.height,
+            minWidth: bbox.width,
+            minHeight: bbox.height
+          },
+          width: bbox.width,
+          height: bbox.height,
+          selectable: true,
+          draggable: true,
+          zIndex: -1
+        };
+        flow.addNode(groupNode);
+        selectedNodes.forEach((node) => {
+          flow.updateNode(node.id, {
+            parentId: groupId,
+            extent: "parent",
+            position: {
+              x: node.position.x - bbox.x,
+              y: node.position.y - bbox.y
+            },
+            selected: false
+          });
+        });
+        groupRegistry.set(groupId, {
+          groupId,
+          childIds: selectedNodes.map((n) => n.id),
+          collapsed: false,
+          originalPositions
+        });
+        console.log(`[NodeGroup] Created group "${groupId}" with ${selectedNodes.length} nodes`);
+        return groupId;
+      };
+      flow.ungroupNodes = (groupId) => {
+        const groupNode = flow.getNode(groupId);
+        if (!groupNode) {
+          console.warn(`[NodeGroup] Group "${groupId}" not found`);
+          return;
+        }
+        const groupInfo = groupRegistry.get(groupId);
+        const groupPos = groupNode.position;
+        const childNodes = flow.nodes.value.filter((n) => n.parentId === groupId);
+        childNodes.forEach((node) => {
+          const absPos = groupInfo?.originalPositions[node.id] ?? {
+            x: groupPos.x + node.position.x,
+            y: groupPos.y + node.position.y
+          };
+          flow.updateNode(node.id, {
+            parentId: void 0,
+            extent: void 0,
+            position: absPos
+          });
+        });
+        flow.removeNode(groupId);
+        groupRegistry.delete(groupId);
+        console.log(`[NodeGroup] Ungrouped "${groupId}"`);
+      };
+      flow.toggleGroupCollapse = (groupId) => {
+        const groupInfo = groupRegistry.get(groupId);
+        if (!groupInfo) {
+          console.warn(`[NodeGroup] Group "${groupId}" not found in registry`);
+          return;
+        }
+        groupInfo.collapsed = !groupInfo.collapsed;
+        const hidden = groupInfo.collapsed;
+        groupInfo.childIds.forEach((childId) => {
+          flow.updateNode(childId, { hidden });
+        });
+        flow.edges.value.forEach((edge) => {
+          const srcHidden = groupInfo.childIds.includes(edge.source);
+          const tgtHidden = groupInfo.childIds.includes(edge.target);
+          if (srcHidden || tgtHidden) {
+            flow.updateEdge(edge.id, { hidden });
+          }
+        });
+        if (hidden) {
+          flow.updateNode(groupId, {
+            style: { width: 160, height: 50, minWidth: 160, minHeight: 50 },
+            width: 160,
+            height: 50
+          });
+        } else {
+          const groupNode = flow.getNode(groupId);
+          if (groupNode) {
+            const originalW = groupNode.data._origWidth;
+            const originalH = groupNode.data._origHeight;
+            flow.updateNode(groupId, {
+              style: {
+                width: originalW || 200,
+                height: originalH || 150,
+                minWidth: originalW || 200,
+                minHeight: originalH || 150
+              },
+              width: originalW || 200,
+              height: originalH || 150
+            });
+          }
+        }
+        console.log(`[NodeGroup] Group "${groupId}" ${hidden ? "collapsed" : "expanded"}`);
+      };
+      flow.isGroupCollapsed = (groupId) => {
+        return groupRegistry.get(groupId)?.collapsed ?? false;
+      };
+      flow.getGroupChildren = (groupId) => {
+        return flow.nodes.value.filter((n) => n.parentId === groupId);
+      };
+      flow.getGroupRegistry = () => groupRegistry;
+    },
+    destroy() {
+      groupRegistry.clear();
+    }
+  };
+}

package/dist/plugins/plugins/snap.cjs

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSnapPlugin = createSnapPlugin;
+var _vue = require("vue");
+var _AlignmentLines = _interopRequireDefault(require("../../renderer/AlignmentLines.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultSnapOptions = {
+  enabled: true,
+  snapToGrid: true,
+  gridSize: 15,
+  snapThreshold: 10,
+  showAlignmentLines: true
+};
+function createSnapPlugin(options = {}) {
+  const mergedOptions = {
+    ...defaultSnapOptions,
+    ...options
+  };
+  return {
+    id: "snap",
+    name: "Snap",
+    version: "1.0.0",
+    description: "Enables grid snapping and alignment lines",
+    component: mergedOptions.showAlignmentLines ? (0, _vue.markRaw)(_AlignmentLines.default) : void 0,
+    componentProps: {
+      snapThreshold: mergedOptions.snapThreshold
+    },
+    install(flow) {
+      if (!mergedOptions.enabled) return;
+      console.log(`[Snap Plugin] Installed with options:`, mergedOptions, flow);
+    }
+  };
+}

package/dist/plugins/plugins/snap.d.ts

@@ -0,0 +1,12 @@
+import type { FlowPlugin } from '../plugin';
+export interface SnapPluginOptions {
+    enabled?: boolean;
+    snapToGrid?: boolean;
+    gridSize?: number;
+    snapThreshold?: number;
+    showAlignmentLines?: boolean;
+}
+/**
+ * 创建吸附插件
+ */
+export declare function createSnapPlugin(options?: SnapPluginOptions): FlowPlugin;

package/dist/plugins/plugins/snap.mjs

@@ -0,0 +1,26 @@
+import { markRaw } from "vue";
+import AlignmentLines from "../../renderer/AlignmentLines.vue";
+const defaultSnapOptions = {
+  enabled: true,
+  snapToGrid: true,
+  gridSize: 15,
+  snapThreshold: 10,
+  showAlignmentLines: true
+};
+export function createSnapPlugin(options = {}) {
+  const mergedOptions = { ...defaultSnapOptions, ...options };
+  return {
+    id: "snap",
+    name: "Snap",
+    version: "1.0.0",
+    description: "Enables grid snapping and alignment lines",
+    component: mergedOptions.showAlignmentLines ? markRaw(AlignmentLines) : void 0,
+    componentProps: {
+      snapThreshold: mergedOptions.snapThreshold
+    },
+    install(flow) {
+      if (!mergedOptions.enabled) return;
+      console.log(`[Snap Plugin] Installed with options:`, mergedOptions, flow);
+    }
+  };
+}

package/dist/renderer/AlignmentLines.d.vue.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    snapThreshold?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/AlignmentLines.vue

@@ -0,0 +1,113 @@
+<template>
+  <svg v-if="draggingNodeId && draggingPosition" class="yh-flow-alignment-lines">
+    <!-- Horizontal alignment lines -->
+    <line
+      v-for="(line, index) in horizontalLines"
+      :key="`h-${index}`"
+      :x1="0"
+      :y1="line.y"
+      :x2="containerWidth"
+      :y2="line.y"
+      class="alignment-line horizontal"
+      :class="{
+  active: line.active
+}"
+    />
+    <!-- Vertical alignment lines -->
+    <line
+      v-for="(line, index) in verticalLines"
+      :key="`v-${index}`"
+      :x1="line.x"
+      :y1="0"
+      :x2="line.x"
+      :y2="containerHeight"
+      class="alignment-line vertical"
+      :class="{
+  active: line.active
+}"
+    />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useFlowContext } from "../core/FlowContext";
+const props = defineProps({
+  snapThreshold: { type: Number, required: false }
+});
+const flowInstance = useFlowContext();
+const nodes = flowInstance.nodes;
+const draggingNodeId = flowInstance.draggingNodeId;
+const draggingPosition = flowInstance.draggingPosition;
+const containerWidth = computed(() => flowInstance.$el?.clientWidth || 800);
+const containerHeight = computed(() => flowInstance.$el?.clientHeight || 600);
+const SNAP_THRESHOLD = props.snapThreshold ?? 10;
+const horizontalLines = computed(() => {
+  const dNodeId = draggingNodeId.value;
+  const dPos = draggingPosition.value;
+  if (!dNodeId || !dPos) return [];
+  const lines = [];
+  const draggingNode = nodes.value.find((n) => n.id === dNodeId);
+  if (!draggingNode) return [];
+  const nodeHeight = draggingNode.height || 50;
+  const otherNodes = nodes.value.filter((n) => n.id !== dNodeId && !n.hidden);
+  const positions = [
+    { y: draggingNode.position.y, key: "top" },
+    { y: draggingNode.position.y + nodeHeight / 2, key: "center" },
+    { y: draggingNode.position.y + nodeHeight, key: "bottom" }
+  ];
+  for (const pos of positions) {
+    for (const node of otherNodes) {
+      const nHeight = node.height || 50;
+      const nodePositions = [
+        { y: node.position.y, key: "top" },
+        { y: node.position.y + nHeight / 2, key: "center" },
+        { y: node.position.y + nHeight, key: "bottom" }
+      ];
+      for (const np of nodePositions) {
+        if (Math.abs(pos.y - np.y) < SNAP_THRESHOLD) {
+          lines.push({ y: np.y, active: true });
+          break;
+        }
+      }
+    }
+  }
+  return lines;
+});
+const verticalLines = computed(() => {
+  const dNodeId = draggingNodeId.value;
+  const dPos = draggingPosition.value;
+  if (!dNodeId || !dPos) return [];
+  const lines = [];
+  const draggingNode = nodes.value.find((n) => n.id === dNodeId);
+  if (!draggingNode) return [];
+  const nodeWidth = draggingNode.width || 200;
+  const otherNodes = nodes.value.filter((n) => n.id !== dNodeId && !n.hidden);
+  const positions = [
+    { x: draggingNode.position.x, key: "left" },
+    { x: draggingNode.position.x + nodeWidth / 2, key: "center" },
+    { x: draggingNode.position.x + nodeWidth, key: "right" }
+  ];
+  for (const pos of positions) {
+    for (const node of otherNodes) {
+      const nWidth = node.width || 200;
+      const nodePositions = [
+        { x: node.position.x, key: "left" },
+        { x: node.position.x + nWidth / 2, key: "center" },
+        { x: node.position.x + nWidth, key: "right" }
+      ];
+      for (const np of nodePositions) {
+        if (Math.abs(pos.x - np.x) < SNAP_THRESHOLD) {
+          lines.push({ x: np.x, active: true });
+          break;
+        }
+      }
+    }
+  }
+  return lines;
+});
+</script>
+
+<style scoped>
+.yh-flow-alignment-lines{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:100}.alignment-line{opacity:0;stroke:var(--flow-alignment-line-color,#c0c4cc);stroke-dasharray:4 2;stroke-width:1;transition:opacity .15s ease}.alignment-line.active{opacity:1;stroke:var(--flow-alignment-line-active-color,#409eff)}
+</style>

package/dist/renderer/AlignmentLines.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    snapThreshold?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/Background.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    type?: 'dots' | 'grid' | 'none';
+    color?: string;
+    gap?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;