@yh-ui/flow 0.1.21

package/dist/plugins/plugins/layout.cjs

@@ -0,0 +1,275 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLayoutPlugin = createLayoutPlugin;
+const defaultOptions = {
+  enabled: true,
+  type: "dagre",
+  direction: "TB",
+  nodeSpacing: 50,
+  rankSpacing: 80,
+  animate: true,
+  elkOptions: {},
+  forceOptions: {},
+  gridOptions: {
+    columns: 4
+  },
+  useWebWorker: false,
+  workerUrl: ""
+};
+async function applyDagreLayout(nodes, edges, options) {
+  const dagreLib = await Promise.resolve().then(() => require("dagre"));
+  const dagre = dagreLib.default || dagreLib;
+  const graphlib = dagreLib.graphlib || dagre.graphlib;
+  const g = new graphlib.Graph();
+  g.setGraph({
+    rankdir: options.direction,
+    nodesep: options.nodeSpacing,
+    ranksep: options.rankSpacing,
+    marginx: 0,
+    marginy: 0
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+  nodes.forEach(node => {
+    g.setNode(node.id, {
+      width: node.width || 150,
+      height: node.height || 50
+    });
+  });
+  edges.forEach(edge => {
+    g.setEdge(edge.source, edge.target);
+  });
+  dagre.layout(g);
+  const layoutedNodes = nodes.map(node => {
+    const layoutNode = g.node(node.id);
+    if (!layoutNode) return node;
+    return {
+      ...node,
+      position: {
+        x: layoutNode.x - (node.width || 150) / 2,
+        y: layoutNode.y - (node.height || 50) / 2
+      }
+    };
+  });
+  return {
+    nodes: layoutedNodes,
+    edges
+  };
+}
+async function applyElkLayout(nodes, edges, options) {
+  const bundledPath = "elkjs/lib/elk.bundled.js";
+  const elkPath = "elkjs";
+  let elkLib;
+  try {
+    elkLib = await Promise.resolve(`${/* @vite-ignore */
+    bundledPath}`).then(s => require(s));
+  } catch {
+    elkLib = await Promise.resolve(`${/* @vite-ignore */
+    elkPath}`).then(s => require(s));
+  }
+  const ELK = elkLib.default || elkLib;
+  const elk = new ELK();
+  const dirMap = {
+    TB: "DOWN",
+    BT: "UP",
+    LR: "RIGHT",
+    RL: "LEFT"
+  };
+  const elkOpts = options.elkOptions || {};
+  const graph = {
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": elkOpts.algorithm || "layered",
+      "elk.direction": elkOpts.direction || dirMap[options.direction] || "DOWN",
+      "elk.spacing.nodeNode": elkOpts.spacing || options.nodeSpacing,
+      "elk.edgeRouting": elkOpts.edgeRouting || "POLYLINE"
+    },
+    children: nodes.map(node => ({
+      id: node.id,
+      width: node.width || 150,
+      height: node.height || 50
+    })),
+    edges: edges.map((edge, index) => ({
+      id: edge.id || `edge-${index}`,
+      sources: [edge.source],
+      targets: [edge.target]
+    }))
+  };
+  const layoutedGraph = await elk.layout(graph);
+  const layoutedNodes = nodes.map(node => {
+    const layoutNode = layoutedGraph.children?.find(n => n.id === node.id);
+    if (!layoutNode) return node;
+    return {
+      ...node,
+      position: {
+        x: layoutNode.x || 0,
+        y: layoutNode.y || 0
+      }
+    };
+  });
+  return {
+    nodes: layoutedNodes,
+    edges
+  };
+}
+async function applyForceLayout(nodes, edges, options, flowInstance) {
+  const d3ForcePath = "d3-force";
+  const d3ForceLib = await Promise.resolve(`${/* @vite-ignore */
+  d3ForcePath}`).then(s => require(s));
+  const d3Force = d3ForceLib.default || d3ForceLib;
+  const forceNodes = nodes.map(node => ({
+    id: node.id,
+    x: node.position.x,
+    y: node.position.y
+  }));
+  const force = d3Force.forceSimulation(forceNodes);
+  const forceOpts = options.forceOptions || {};
+  force.force("charge", d3Force.forceManyBody().strength(forceOpts.strength || -300));
+  const linkForce = d3Force.forceLink();
+  linkForce.id(d => d.id);
+  linkForce.distance(forceOpts.distance || 100);
+  force.force("link", linkForce);
+  force.force("collision", d3Force.forceCollide().radius(50));
+  const centerX = 400;
+  const centerY = 300;
+  force.force("center", d3Force.forceCenter(centerX, centerY));
+  const iterations = forceOpts.iterations || 300;
+  const ticksPerFrame = Math.max(1, Math.floor(iterations / 10));
+  return new Promise(resolve => {
+    let currentIteration = 0;
+    const step = () => {
+      const toRun = Math.min(ticksPerFrame, iterations - currentIteration);
+      for (let i = 0; i < toRun; i++) {
+        force.tick();
+      }
+      currentIteration += toRun;
+      let minX = Infinity,
+        minY = Infinity;
+      forceNodes.forEach(n => {
+        if (n.x < minX) minX = n.x;
+        if (n.y < minY) minY = n.y;
+      });
+      const offsetX = minX < 0 ? -minX + 50 : 50;
+      const offsetY = minY < 0 ? -minY + 50 : 50;
+      if (options.animate && flowInstance) {
+        forceNodes.forEach(fn => {
+          flowInstance.updateNode(fn.id, {
+            position: {
+              x: fn.x + offsetX,
+              y: fn.y + offsetY
+            }
+          });
+        });
+      }
+      if (currentIteration < iterations && force.alpha() > 5e-3) {
+        if (typeof window !== "undefined" && window.requestAnimationFrame) {
+          window.requestAnimationFrame(step);
+        } else {
+          setTimeout(step, 0);
+        }
+      } else {
+        force.stop();
+        const layoutedNodes = nodes.map(node => {
+          const forceNode = forceNodes.find(n => n.id === node.id);
+          if (!forceNode) return node;
+          return {
+            ...node,
+            position: {
+              x: forceNode.x + offsetX,
+              y: forceNode.y + offsetY
+            }
+          };
+        });
+        resolve({
+          nodes: layoutedNodes,
+          edges
+        });
+      }
+    };
+    step();
+  });
+}
+function applyGridLayout(nodes, edges, options) {
+  const gridOpts = options.gridOptions || {};
+  const columns = gridOpts.columns || 4;
+  const startX = gridOpts.startX || 50;
+  const startY = gridOpts.startY || 50;
+  const nodeWidth = options.nodeSpacing + (nodes[0]?.width || 150);
+  const nodeHeight = options.rankSpacing + (nodes[0]?.height || 50);
+  const layoutedNodes = nodes.map((node, index) => {
+    const col = index % columns;
+    const row = Math.floor(index / columns);
+    return {
+      ...node,
+      position: {
+        x: startX + col * nodeWidth,
+        y: startY + row * nodeHeight
+      }
+    };
+  });
+  return {
+    nodes: layoutedNodes,
+    edges
+  };
+}
+function createLayoutPlugin(options = {}) {
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options
+  };
+  return {
+    id: "layout",
+    name: "Layout",
+    version: "1.0.0",
+    description: "Provides automatic layout algorithms for flow charts (dagre, elk, force)",
+    install(flow) {
+      if (!mergedOptions.enabled) return;
+      flow.applyLayout = async layoutOptions => {
+        const opts = {
+          ...mergedOptions,
+          ...layoutOptions
+        };
+        const nodes = [...flow.nodes.value];
+        const edges = [...flow.edges.value];
+        try {
+          let layouted;
+          if (opts.type === "dagre") {
+            layouted = await applyDagreLayout(nodes, edges, opts);
+            console.log("[Layout Plugin] Dagre layout applied successfully");
+          } else if (opts.type === "elk") {
+            layouted = await applyElkLayout(nodes, edges, opts);
+            console.log("[Layout Plugin] ELK layout applied successfully");
+          } else if (opts.type === "force") {
+            layouted = await applyForceLayout(nodes, edges, opts, flow);
+            console.log("[Layout Plugin] Force layout applied asynchronously");
+          } else if (opts.type === "grid") {
+            layouted = applyGridLayout(nodes, edges, opts);
+            console.log("[Layout Plugin] Grid layout applied successfully");
+          } else {
+            console.warn(`[Layout Plugin] Unknown layout type '${opts.type}'`);
+            return;
+          }
+          layouted.nodes.forEach(layoutedNode => {
+            flow.updateNode(layoutedNode.id, {
+              position: {
+                x: layoutedNode.position.x,
+                y: layoutedNode.position.y
+              }
+            });
+          });
+          if (opts.animate) {
+            setTimeout(() => {
+              flow.fitView?.({
+                padding: 50
+              });
+            }, 100);
+          }
+        } catch (error) {
+          console.error("[Layout Plugin] Layout calculation failed:", error);
+        }
+      };
+    }
+  };
+}

package/dist/plugins/plugins/layout.d.ts

@@ -0,0 +1,34 @@
+import type { FlowPlugin } from '../plugin';
+export interface LayoutOptions {
+    enabled?: boolean;
+    type?: 'dagre' | 'elk' | 'force' | 'grid';
+    direction?: 'TB' | 'BT' | 'LR' | 'RL';
+    nodeSpacing?: number;
+    rankSpacing?: number;
+    animate?: boolean;
+    /** ELK 布局专属选项 */
+    elkOptions?: {
+        algorithm?: 'layered' | 'force' | 'mrtree' | 'box' | 'disco';
+        direction?: 'DOWN' | 'RIGHT' | 'UP' | 'LEFT';
+        spacing?: number;
+        edgeRouting?: 'ORTHOGONAL' | 'POLYLINE' | 'SPLINES';
+    };
+    /** Force 布局专属选项 */
+    forceOptions?: {
+        strength?: number;
+        distance?: number;
+        theta?: number;
+        iterations?: number;
+    };
+    /** Grid 布局专属选项 */
+    gridOptions?: {
+        columns?: number;
+        startX?: number;
+        startY?: number;
+    };
+    /** 是否启用 Web Worker 进行密集计算（如用户自行提供打包的 workerUrl） */
+    useWebWorker?: boolean;
+    /** 自定义 Web Worker 的 URL，配合 useWebWorker 使用 */
+    workerUrl?: string;
+}
+export declare function createLayoutPlugin(options?: LayoutOptions): FlowPlugin;

package/dist/plugins/plugins/layout.mjs

@@ -0,0 +1,246 @@
+const defaultOptions = {
+  enabled: true,
+  type: "dagre",
+  direction: "TB",
+  nodeSpacing: 50,
+  rankSpacing: 80,
+  animate: true,
+  elkOptions: {},
+  forceOptions: {},
+  gridOptions: { columns: 4 },
+  useWebWorker: false,
+  workerUrl: ""
+};
+async function applyDagreLayout(nodes, edges, options) {
+  const dagreLib = await import("dagre");
+  const dagre = dagreLib.default || dagreLib;
+  const graphlib = dagreLib.graphlib || dagre.graphlib;
+  const g = new graphlib.Graph();
+  g.setGraph({
+    rankdir: options.direction,
+    nodesep: options.nodeSpacing,
+    ranksep: options.rankSpacing,
+    marginx: 0,
+    marginy: 0
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+  nodes.forEach((node) => {
+    g.setNode(node.id, {
+      width: node.width || 150,
+      height: node.height || 50
+    });
+  });
+  edges.forEach((edge) => {
+    g.setEdge(edge.source, edge.target);
+  });
+  dagre.layout(g);
+  const layoutedNodes = nodes.map((node) => {
+    const layoutNode = g.node(node.id);
+    if (!layoutNode) return node;
+    return {
+      ...node,
+      position: {
+        x: layoutNode.x - (node.width || 150) / 2,
+        y: layoutNode.y - (node.height || 50) / 2
+      }
+    };
+  });
+  return { nodes: layoutedNodes, edges };
+}
+async function applyElkLayout(nodes, edges, options) {
+  const bundledPath = "elkjs/lib/elk.bundled.js";
+  const elkPath = "elkjs";
+  let elkLib;
+  try {
+    elkLib = await import(
+      /* @vite-ignore */
+      bundledPath
+    );
+  } catch {
+    elkLib = await import(
+      /* @vite-ignore */
+      elkPath
+    );
+  }
+  const ELK = elkLib.default || elkLib;
+  const elk = new ELK();
+  const dirMap = {
+    TB: "DOWN",
+    BT: "UP",
+    LR: "RIGHT",
+    RL: "LEFT"
+  };
+  const elkOpts = options.elkOptions || {};
+  const graph = {
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": elkOpts.algorithm || "layered",
+      "elk.direction": elkOpts.direction || dirMap[options.direction] || "DOWN",
+      "elk.spacing.nodeNode": elkOpts.spacing || options.nodeSpacing,
+      "elk.edgeRouting": elkOpts.edgeRouting || "POLYLINE"
+    },
+    children: nodes.map((node) => ({
+      id: node.id,
+      width: node.width || 150,
+      height: node.height || 50
+    })),
+    edges: edges.map((edge, index) => ({
+      id: edge.id || `edge-${index}`,
+      sources: [edge.source],
+      targets: [edge.target]
+    }))
+  };
+  const layoutedGraph = await elk.layout(graph);
+  const layoutedNodes = nodes.map((node) => {
+    const layoutNode = layoutedGraph.children?.find((n) => n.id === node.id);
+    if (!layoutNode) return node;
+    return {
+      ...node,
+      position: {
+        x: layoutNode.x || 0,
+        y: layoutNode.y || 0
+      }
+    };
+  });
+  return { nodes: layoutedNodes, edges };
+}
+async function applyForceLayout(nodes, edges, options, flowInstance) {
+  const d3ForcePath = "d3-force";
+  const d3ForceLib = await import(
+    /* @vite-ignore */
+    d3ForcePath
+  );
+  const d3Force = d3ForceLib.default || d3ForceLib;
+  const forceNodes = nodes.map((node) => ({
+    id: node.id,
+    x: node.position.x,
+    y: node.position.y
+  }));
+  const force = d3Force.forceSimulation(forceNodes);
+  const forceOpts = options.forceOptions || {};
+  force.force("charge", d3Force.forceManyBody().strength(forceOpts.strength || -300));
+  const linkForce = d3Force.forceLink();
+  linkForce.id((d) => d.id);
+  linkForce.distance(forceOpts.distance || 100);
+  force.force("link", linkForce);
+  force.force("collision", d3Force.forceCollide().radius(50));
+  const centerX = 400;
+  const centerY = 300;
+  force.force("center", d3Force.forceCenter(centerX, centerY));
+  const iterations = forceOpts.iterations || 300;
+  const ticksPerFrame = Math.max(1, Math.floor(iterations / 10));
+  return new Promise((resolve) => {
+    let currentIteration = 0;
+    const step = () => {
+      const toRun = Math.min(ticksPerFrame, iterations - currentIteration);
+      for (let i = 0; i < toRun; i++) {
+        force.tick();
+      }
+      currentIteration += toRun;
+      let minX = Infinity, minY = Infinity;
+      forceNodes.forEach((n) => {
+        if (n.x < minX) minX = n.x;
+        if (n.y < minY) minY = n.y;
+      });
+      const offsetX = minX < 0 ? -minX + 50 : 50;
+      const offsetY = minY < 0 ? -minY + 50 : 50;
+      if (options.animate && flowInstance) {
+        forceNodes.forEach((fn) => {
+          flowInstance.updateNode(fn.id, {
+            position: { x: fn.x + offsetX, y: fn.y + offsetY }
+          });
+        });
+      }
+      if (currentIteration < iterations && force.alpha() > 5e-3) {
+        if (typeof window !== "undefined" && window.requestAnimationFrame) {
+          window.requestAnimationFrame(step);
+        } else {
+          setTimeout(step, 0);
+        }
+      } else {
+        force.stop();
+        const layoutedNodes = nodes.map((node) => {
+          const forceNode = forceNodes.find((n) => n.id === node.id);
+          if (!forceNode) return node;
+          return {
+            ...node,
+            position: { x: forceNode.x + offsetX, y: forceNode.y + offsetY }
+          };
+        });
+        resolve({ nodes: layoutedNodes, edges });
+      }
+    };
+    step();
+  });
+}
+function applyGridLayout(nodes, edges, options) {
+  const gridOpts = options.gridOptions || {};
+  const columns = gridOpts.columns || 4;
+  const startX = gridOpts.startX || 50;
+  const startY = gridOpts.startY || 50;
+  const nodeWidth = options.nodeSpacing + (nodes[0]?.width || 150);
+  const nodeHeight = options.rankSpacing + (nodes[0]?.height || 50);
+  const layoutedNodes = nodes.map((node, index) => {
+    const col = index % columns;
+    const row = Math.floor(index / columns);
+    return {
+      ...node,
+      position: {
+        x: startX + col * nodeWidth,
+        y: startY + row * nodeHeight
+      }
+    };
+  });
+  return { nodes: layoutedNodes, edges };
+}
+export function createLayoutPlugin(options = {}) {
+  const mergedOptions = { ...defaultOptions, ...options };
+  return {
+    id: "layout",
+    name: "Layout",
+    version: "1.0.0",
+    description: "Provides automatic layout algorithms for flow charts (dagre, elk, force)",
+    install(flow) {
+      if (!mergedOptions.enabled) return;
+      flow.applyLayout = async (layoutOptions) => {
+        const opts = { ...mergedOptions, ...layoutOptions };
+        const nodes = [...flow.nodes.value];
+        const edges = [...flow.edges.value];
+        try {
+          let layouted;
+          if (opts.type === "dagre") {
+            layouted = await applyDagreLayout(nodes, edges, opts);
+            console.log("[Layout Plugin] Dagre layout applied successfully");
+          } else if (opts.type === "elk") {
+            layouted = await applyElkLayout(nodes, edges, opts);
+            console.log("[Layout Plugin] ELK layout applied successfully");
+          } else if (opts.type === "force") {
+            layouted = await applyForceLayout(nodes, edges, opts, flow);
+            console.log("[Layout Plugin] Force layout applied asynchronously");
+          } else if (opts.type === "grid") {
+            layouted = applyGridLayout(nodes, edges, opts);
+            console.log("[Layout Plugin] Grid layout applied successfully");
+          } else {
+            console.warn(`[Layout Plugin] Unknown layout type '${opts.type}'`);
+            return;
+          }
+          layouted.nodes.forEach((layoutedNode) => {
+            flow.updateNode(layoutedNode.id, {
+              position: {
+                x: layoutedNode.position.x,
+                y: layoutedNode.position.y
+              }
+            });
+          });
+          if (opts.animate) {
+            setTimeout(() => {
+              flow.fitView?.({ padding: 50 });
+            }, 100);
+          }
+        } catch (error) {
+          console.error("[Layout Plugin] Layout calculation failed:", error);
+        }
+      };
+    }
+  };
+}

package/dist/plugins/plugins/minimap.cjs

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createMiniMapPlugin = createMiniMapPlugin;
+var _vue = require("vue");
+var _Minimap = _interopRequireDefault(require("../../renderer/Minimap.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultOptions = {
+  enabled: true,
+  nodeColor: () => "#fff",
+  nodeStrokeColor: () => "#999",
+  nodeStrokeWidth: 1,
+  maskColor: "rgba(240, 240, 240, 0.6)",
+  maskStrokeColor: "#ddd",
+  maskStrokeWidth: 1,
+  pannable: true,
+  zoomable: true,
+  position: "bottom-right",
+  width: 200,
+  height: 150,
+  interactive: false,
+  showLayoutControls: false,
+  layoutType: "none",
+  layoutDirection: "TB"
+};
+function createMiniMapPlugin(options = {}) {
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options
+  };
+  return {
+    id: "minimap",
+    name: "Minimap",
+    version: "1.0.0",
+    description: "Displays a minimap for navigation",
+    component: (0, _vue.markRaw)(_Minimap.default),
+    componentProps: {
+      position: mergedOptions.position,
+      width: mergedOptions.width,
+      height: mergedOptions.height,
+      nodeColor: mergedOptions.nodeColor,
+      nodeStrokeColor: mergedOptions.nodeStrokeColor,
+      nodeStrokeWidth: mergedOptions.nodeStrokeWidth,
+      maskColor: mergedOptions.maskColor,
+      maskStrokeColor: mergedOptions.maskStrokeColor,
+      maskStrokeWidth: mergedOptions.maskStrokeWidth,
+      pannable: mergedOptions.pannable,
+      zoomable: mergedOptions.zoomable,
+      interactive: mergedOptions.interactive,
+      showLayoutControls: mergedOptions.showLayoutControls,
+      layoutType: mergedOptions.layoutType,
+      layoutDirection: mergedOptions.layoutDirection
+    },
+    install(flow) {
+      console.log("[Minimap Plugin] Installed", flow);
+    }
+  };
+}

package/dist/plugins/plugins/minimap.d.ts

@@ -0,0 +1,25 @@
+import type { FlowPlugin } from '../plugin';
+import type { Node } from '../../types';
+export interface MiniMapOptions {
+    enabled?: boolean;
+    nodeColor?: (node: Node) => string;
+    nodeStrokeColor?: (node: Node) => string;
+    nodeStrokeWidth?: number;
+    maskColor?: string;
+    maskStrokeColor?: string;
+    maskStrokeWidth?: number;
+    pannable?: boolean;
+    zoomable?: boolean;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    width?: number;
+    height?: number;
+    /** Enable interactive click-to-navigate */
+    interactive?: boolean;
+    /** Show layout control buttons */
+    showLayoutControls?: boolean;
+    /** Current layout type */
+    layoutType?: 'dagre' | 'elk' | 'force' | 'grid' | 'none';
+    /** Layout direction */
+    layoutDirection?: 'TB' | 'BT' | 'LR' | 'RL';
+}
+export declare function createMiniMapPlugin(options?: MiniMapOptions): FlowPlugin;

package/dist/plugins/plugins/minimap.mjs

@@ -0,0 +1,50 @@
+import { markRaw } from "vue";
+import Minimap from "../../renderer/Minimap.vue";
+const defaultOptions = {
+  enabled: true,
+  nodeColor: () => "#fff",
+  nodeStrokeColor: () => "#999",
+  nodeStrokeWidth: 1,
+  maskColor: "rgba(240, 240, 240, 0.6)",
+  maskStrokeColor: "#ddd",
+  maskStrokeWidth: 1,
+  pannable: true,
+  zoomable: true,
+  position: "bottom-right",
+  width: 200,
+  height: 150,
+  interactive: false,
+  showLayoutControls: false,
+  layoutType: "none",
+  layoutDirection: "TB"
+};
+export function createMiniMapPlugin(options = {}) {
+  const mergedOptions = { ...defaultOptions, ...options };
+  return {
+    id: "minimap",
+    name: "Minimap",
+    version: "1.0.0",
+    description: "Displays a minimap for navigation",
+    component: markRaw(Minimap),
+    componentProps: {
+      position: mergedOptions.position,
+      width: mergedOptions.width,
+      height: mergedOptions.height,
+      nodeColor: mergedOptions.nodeColor,
+      nodeStrokeColor: mergedOptions.nodeStrokeColor,
+      nodeStrokeWidth: mergedOptions.nodeStrokeWidth,
+      maskColor: mergedOptions.maskColor,
+      maskStrokeColor: mergedOptions.maskStrokeColor,
+      maskStrokeWidth: mergedOptions.maskStrokeWidth,
+      pannable: mergedOptions.pannable,
+      zoomable: mergedOptions.zoomable,
+      interactive: mergedOptions.interactive,
+      showLayoutControls: mergedOptions.showLayoutControls,
+      layoutType: mergedOptions.layoutType,
+      layoutDirection: mergedOptions.layoutDirection
+    },
+    install(flow) {
+      console.log("[Minimap Plugin] Installed", flow);
+    }
+  };
+}