@yh-ui/flow 0.1.21

package/dist/plugins/plugins/export.mjs

@@ -0,0 +1,89 @@
+import { nextTick } from "vue";
+import { captureElement, triggerDownload, copyBlobToClipboard } from "../../utils/screenshot.mjs";
+const defaultOptions = {
+  enabled: true,
+  fileName: "flow-chart",
+  exportImage: true,
+  exportJson: true,
+  imageType: "png",
+  imageQuality: 1,
+  pixelRatio: 2,
+  backgroundColor: "#ffffff"
+};
+function normalizeOptions(pluginOptions, arg) {
+  if (arg == null) {
+    return {};
+  }
+  if (arg instanceof HTMLElement) {
+    return { container: arg };
+  }
+  return { ...arg };
+}
+function mergeCaptureOptions(plugin, options) {
+  return {
+    imageType: options.imageType ?? plugin.imageType,
+    imageQuality: options.imageQuality ?? plugin.imageQuality,
+    pixelRatio: options.pixelRatio ?? plugin.pixelRatio,
+    backgroundColor: options.backgroundColor ?? plugin.backgroundColor
+  };
+}
+export function createExportPlugin(options = {}) {
+  const mergedOptions = { ...defaultOptions, ...options };
+  return {
+    id: "export",
+    name: "Export",
+    version: "1.0.0",
+    description: "Provides methods to export the flow chart as JSON or Image",
+    install(flow) {
+      if (!mergedOptions.enabled) return;
+      if (mergedOptions.exportJson) {
+        flow.exportJson = () => {
+          return JSON.stringify(
+            {
+              nodes: flow.nodes.value,
+              edges: flow.edges.value,
+              viewport: flow.viewport.value
+            },
+            null,
+            2
+          );
+        };
+      }
+      if (mergedOptions.exportImage) {
+        flow.exportImage = async (optionsOrContainer) => {
+          const opts = normalizeOptions(mergedOptions, optionsOrContainer);
+          const container = opts.container ?? flow.$el;
+          if (!container) {
+            throw new Error("[Export Plugin] No element found for export");
+          }
+          const mode = opts.mode ?? "viewport";
+          const download = opts.download !== false;
+          const copyToClipboard = opts.copyToClipboard === true;
+          const fileName = opts.fileName ?? mergedOptions.fileName;
+          const fullModePadding = opts.fullModePadding ?? 20;
+          let savedViewport = null;
+          try {
+            if (mode === "full") {
+              savedViewport = { ...flow.getViewport() };
+              flow.fitView?.({ padding: fullModePadding });
+              await nextTick();
+            }
+            const captureOpts = mergeCaptureOptions(mergedOptions, opts);
+            const result = await captureElement(container, captureOpts);
+            if (download) {
+              triggerDownload(result.dataUrl, fileName, result.extension);
+            }
+            if (copyToClipboard) {
+              await copyBlobToClipboard(result.blob);
+            }
+            return result;
+          } finally {
+            if (savedViewport) {
+              flow.setViewport(savedViewport);
+            }
+          }
+        };
+      }
+    }
+  };
+}

package/dist/plugins/plugins/grid.cjs

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGridPlugin = createGridPlugin;
+var _vue = require("vue");
+var _Background = _interopRequireDefault(require("../../renderer/Background.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultGridOptions = {
+  enabled: true,
+  type: "dots",
+  color: "#e5e5e5",
+  gap: 20
+};
+function createGridPlugin(options = {}) {
+  const mergedOptions = {
+    ...defaultGridOptions,
+    ...options
+  };
+  return {
+    id: "grid",
+    name: "Grid",
+    version: "1.0.0",
+    description: "Displays a grid or dots background",
+    component: (0, _vue.markRaw)(_Background.default),
+    componentProps: {
+      type: mergedOptions.type,
+      color: mergedOptions.color,
+      gap: mergedOptions.gap
+    },
+    install(_flow) {
+      console.log(`[Grid Plugin] Installed`);
+    }
+  };
+}

package/dist/plugins/plugins/grid.d.ts

@@ -0,0 +1,11 @@
+import type { FlowPlugin } from '../plugin';
+export interface GridPluginOptions {
+    enabled?: boolean;
+    type?: 'dots' | 'grid';
+    color?: string;
+    gap?: number;
+}
+/**
+ * 创建网格插件
+ */
+export declare function createGridPlugin(options?: GridPluginOptions): FlowPlugin;

package/dist/plugins/plugins/grid.mjs

@@ -0,0 +1,26 @@
+import { markRaw } from "vue";
+import Background from "../../renderer/Background.vue";
+const defaultGridOptions = {
+  enabled: true,
+  type: "dots",
+  color: "#e5e5e5",
+  gap: 20
+};
+export function createGridPlugin(options = {}) {
+  const mergedOptions = { ...defaultGridOptions, ...options };
+  return {
+    id: "grid",
+    name: "Grid",
+    version: "1.0.0",
+    description: "Displays a grid or dots background",
+    component: markRaw(Background),
+    componentProps: {
+      type: mergedOptions.type,
+      color: mergedOptions.color,
+      gap: mergedOptions.gap
+    },
+    install(_flow) {
+      console.log(`[Grid Plugin] Installed`);
+    }
+  };
+}

package/dist/plugins/plugins/history.cjs

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createHistoryPlugin = createHistoryPlugin;
+var _vue = require("vue");
+const defaultOptions = {
+  enabled: true,
+  maxHistory: 100,
+  enableKeyboard: true,
+  onHistoryChange: () => {},
+  autoCapture: false
+};
+function snapshot(data) {
+  return JSON.parse(JSON.stringify(data));
+}
+function createHistoryPlugin(options = {}) {
+  const opts = {
+    ...defaultOptions,
+    ...options
+  };
+  const historyStack = (0, _vue.ref)([]);
+  const pointer = (0, _vue.ref)(-1);
+  const canUndo = (0, _vue.computed)(() => pointer.value > 0);
+  const canRedo = (0, _vue.computed)(() => pointer.value < historyStack.value.length - 1);
+  const historyLength = (0, _vue.computed)(() => historyStack.value.length);
+  let _flow = null;
+  let _keydownHandler = null;
+  const notifyChange = () => {
+    opts.onHistoryChange(canUndo.value, canRedo.value, historyStack.value.length);
+  };
+  const saveSnapshot = description => {
+    if (!_flow) return;
+    const newStack = historyStack.value.slice(0, pointer.value + 1);
+    newStack.push({
+      nodes: snapshot(_flow.nodes.value),
+      edges: snapshot(_flow.edges.value),
+      timestamp: Date.now(),
+      description
+    });
+    if (newStack.length > opts.maxHistory) {
+      newStack.shift();
+    }
+    historyStack.value = newStack;
+    pointer.value = newStack.length - 1;
+    notifyChange();
+  };
+  const undo = () => {
+    if (!_flow || !canUndo.value) return;
+    pointer.value--;
+    const prevState = historyStack.value[pointer.value];
+    if (prevState) {
+      _flow.nodes.value = snapshot(prevState.nodes);
+      _flow.edges.value = snapshot(prevState.edges);
+    }
+    notifyChange();
+  };
+  const redo = () => {
+    if (!_flow || !canRedo.value) return;
+    pointer.value++;
+    const nextState = historyStack.value[pointer.value];
+    if (nextState) {
+      _flow.nodes.value = snapshot(nextState.nodes);
+      _flow.edges.value = snapshot(nextState.edges);
+    }
+    notifyChange();
+  };
+  const clearHistory = () => {
+    historyStack.value = [];
+    pointer.value = -1;
+    notifyChange();
+  };
+  const getHistory = () => historyStack.value;
+  const jumpToStep = index => {
+    if (!_flow || index < 0 || index >= historyStack.value.length) return;
+    pointer.value = index;
+    const state = historyStack.value[index];
+    if (state) {
+      _flow.nodes.value = snapshot(state.nodes);
+      _flow.edges.value = snapshot(state.edges);
+    }
+    notifyChange();
+  };
+  const plugin = {
+    id: "history",
+    name: "History",
+    version: "1.0.0",
+    description: "Provides undo/redo history for flow graph with keyboard shortcut support",
+    // 将响应式状态和方法挂到插件上，方便外部访问
+    canUndo,
+    canRedo,
+    historyLength,
+    saveSnapshot,
+    undo,
+    redo,
+    clearHistory,
+    getHistory,
+    jumpToStep,
+    install(flow) {
+      if (!opts.enabled) return;
+      _flow = flow;
+      flow.undo = undo;
+      flow.redo = redo;
+      flow.saveSnapshot = saveSnapshot;
+      flow.canUndo = canUndo;
+      flow.canRedo = canRedo;
+      flow.historyLength = historyLength;
+      flow.clearHistory = clearHistory;
+      flow.getHistory = getHistory;
+      flow.jumpToStep = jumpToStep;
+      saveSnapshot("initial");
+      if (opts.enableKeyboard) {
+        _keydownHandler = e => {
+          const isCtrl = e.ctrlKey || e.metaKey;
+          if (!isCtrl) return;
+          if (e.key === "z" && !e.shiftKey) {
+            e.preventDefault();
+            undo();
+          } else if (e.key === "y" || e.key === "z" && e.shiftKey) {
+            e.preventDefault();
+            redo();
+          }
+        };
+        window.addEventListener("keydown", _keydownHandler);
+      }
+      console.log("[History Plugin] Installed \u2014 Ctrl+Z to undo, Ctrl+Y to redo");
+    },
+    destroy() {
+      if (_keydownHandler) {
+        window.removeEventListener("keydown", _keydownHandler);
+        _keydownHandler = null;
+      }
+      _flow = null;
+      historyStack.value = [];
+      pointer.value = -1;
+    }
+  };
+  return plugin;
+}

package/dist/plugins/plugins/history.d.ts

@@ -0,0 +1,53 @@
+import { type Ref } from 'vue';
+import type { FlowPlugin } from '../plugin';
+import type { Node, Edge } from '../../types';
+export interface HistoryPluginOptions {
+    enabled?: boolean;
+    /** 最大历史步骤数, 默认 100 */
+    maxHistory?: number;
+    /** 是否启用键盘快捷键 (Ctrl+Z/Y), 默认 true */
+    enableKeyboard?: boolean;
+    /** 历史变化回调 */
+    onHistoryChange?: (canUndo: boolean, canRedo: boolean, historyLength: number) => void;
+    /** 启用自动捕获节点/边变化（注意性能影响），默认 false */
+    autoCapture?: boolean;
+}
+export interface HistorySnapshot {
+    nodes: Node[];
+    edges: Edge[];
+    timestamp: number;
+    description?: string;
+}
+export interface HistoryPluginReturn {
+    /** 撤销 */
+    undo: () => void;
+    /** 重做 */
+    redo: () => void;
+    /** 手动保存当前状态快照 */
+    saveSnapshot: (description?: string) => void;
+    /** 是否可撤销 */
+    canUndo: Ref<boolean>;
+    /** 是否可重做 */
+    canRedo: Ref<boolean>;
+    /** 历史记录数量 */
+    historyLength: Ref<number>;
+    /** 清空历史 */
+    clearHistory: () => void;
+    /** 获取历史列表（用于时间旅行功能） */
+    getHistory: () => HistorySnapshot[];
+    /** 跳转到指定历史步骤 */
+    jumpToStep: (index: number) => void;
+}
+export declare function createHistoryPlugin(options?: HistoryPluginOptions): FlowPlugin & {
+    getHistory: () => HistorySnapshot[];
+    undo: () => void;
+    redo: () => void;
+    saveSnapshot: (description?: string) => void;
+    canUndo: Ref<boolean>;
+    canRedo: Ref<boolean>;
+    historyLength: Ref<number>;
+    clearHistory: () => void;
+    jumpToStep: (index: number) => void;
+};
+/** 导出快照类型 */
+export type { HistorySnapshot as FlowHistorySnapshot };

package/dist/plugins/plugins/history.mjs

@@ -0,0 +1,132 @@
+import { ref, computed } from "vue";
+const defaultOptions = {
+  enabled: true,
+  maxHistory: 100,
+  enableKeyboard: true,
+  onHistoryChange: () => {
+  },
+  autoCapture: false
+};
+function snapshot(data) {
+  return JSON.parse(JSON.stringify(data));
+}
+export function createHistoryPlugin(options = {}) {
+  const opts = { ...defaultOptions, ...options };
+  const historyStack = ref([]);
+  const pointer = ref(-1);
+  const canUndo = computed(() => pointer.value > 0);
+  const canRedo = computed(() => pointer.value < historyStack.value.length - 1);
+  const historyLength = computed(() => historyStack.value.length);
+  let _flow = null;
+  let _keydownHandler = null;
+  const notifyChange = () => {
+    opts.onHistoryChange(canUndo.value, canRedo.value, historyStack.value.length);
+  };
+  const saveSnapshot = (description) => {
+    if (!_flow) return;
+    const newStack = historyStack.value.slice(0, pointer.value + 1);
+    newStack.push({
+      nodes: snapshot(_flow.nodes.value),
+      edges: snapshot(_flow.edges.value),
+      timestamp: Date.now(),
+      description
+    });
+    if (newStack.length > opts.maxHistory) {
+      newStack.shift();
+    }
+    historyStack.value = newStack;
+    pointer.value = newStack.length - 1;
+    notifyChange();
+  };
+  const undo = () => {
+    if (!_flow || !canUndo.value) return;
+    pointer.value--;
+    const prevState = historyStack.value[pointer.value];
+    if (prevState) {
+      _flow.nodes.value = snapshot(prevState.nodes);
+      _flow.edges.value = snapshot(prevState.edges);
+    }
+    notifyChange();
+  };
+  const redo = () => {
+    if (!_flow || !canRedo.value) return;
+    pointer.value++;
+    const nextState = historyStack.value[pointer.value];
+    if (nextState) {
+      _flow.nodes.value = snapshot(nextState.nodes);
+      _flow.edges.value = snapshot(nextState.edges);
+    }
+    notifyChange();
+  };
+  const clearHistory = () => {
+    historyStack.value = [];
+    pointer.value = -1;
+    notifyChange();
+  };
+  const getHistory = () => historyStack.value;
+  const jumpToStep = (index) => {
+    if (!_flow || index < 0 || index >= historyStack.value.length) return;
+    pointer.value = index;
+    const state = historyStack.value[index];
+    if (state) {
+      _flow.nodes.value = snapshot(state.nodes);
+      _flow.edges.value = snapshot(state.edges);
+    }
+    notifyChange();
+  };
+  const plugin = {
+    id: "history",
+    name: "History",
+    version: "1.0.0",
+    description: "Provides undo/redo history for flow graph with keyboard shortcut support",
+    // 将响应式状态和方法挂到插件上，方便外部访问
+    canUndo,
+    canRedo,
+    historyLength,
+    saveSnapshot,
+    undo,
+    redo,
+    clearHistory,
+    getHistory,
+    jumpToStep,
+    install(flow) {
+      if (!opts.enabled) return;
+      _flow = flow;
+      flow.undo = undo;
+      flow.redo = redo;
+      flow.saveSnapshot = saveSnapshot;
+      flow.canUndo = canUndo;
+      flow.canRedo = canRedo;
+      flow.historyLength = historyLength;
+      flow.clearHistory = clearHistory;
+      flow.getHistory = getHistory;
+      flow.jumpToStep = jumpToStep;
+      saveSnapshot("initial");
+      if (opts.enableKeyboard) {
+        _keydownHandler = (e) => {
+          const isCtrl = e.ctrlKey || e.metaKey;
+          if (!isCtrl) return;
+          if (e.key === "z" && !e.shiftKey) {
+            e.preventDefault();
+            undo();
+          } else if (e.key === "y" || e.key === "z" && e.shiftKey) {
+            e.preventDefault();
+            redo();
+          }
+        };
+        window.addEventListener("keydown", _keydownHandler);
+      }
+      console.log("[History Plugin] Installed \u2014 Ctrl+Z to undo, Ctrl+Y to redo");
+    },
+    destroy() {
+      if (_keydownHandler) {
+        window.removeEventListener("keydown", _keydownHandler);
+        _keydownHandler = null;
+      }
+      _flow = null;
+      historyStack.value = [];
+      pointer.value = -1;
+    }
+  };
+  return plugin;
+}

package/dist/plugins/plugins/index.cjs

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _minimap = require("./minimap.cjs");
+Object.keys(_minimap).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _minimap[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _minimap[key];
+    }
+  });
+});
+var _controls = require("./controls.cjs");
+Object.keys(_controls).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _controls[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _controls[key];
+    }
+  });
+});
+var _grid = require("./grid.cjs");
+Object.keys(_grid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _grid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _grid[key];
+    }
+  });
+});
+var _snap = require("./snap.cjs");
+Object.keys(_snap).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _snap[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _snap[key];
+    }
+  });
+});
+var _keyboard = require("./keyboard.cjs");
+Object.keys(_keyboard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _keyboard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _keyboard[key];
+    }
+  });
+});
+var _export = require("./export.cjs");
+Object.keys(_export).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _export[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _export[key];
+    }
+  });
+});
+var _layout = require("./layout.cjs");
+Object.keys(_layout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _layout[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _layout[key];
+    }
+  });
+});
+var _nodeGroup = require("./node-group.cjs");
+Object.keys(_nodeGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _nodeGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _nodeGroup[key];
+    }
+  });
+});
+var _history = require("./history.cjs");
+Object.keys(_history).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _history[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _history[key];
+    }
+  });
+});

package/dist/plugins/plugins/index.d.ts

@@ -0,0 +1,9 @@
+export * from './minimap';
+export * from './controls';
+export * from './grid';
+export * from './snap';
+export * from './keyboard';
+export * from './export';
+export * from './layout';
+export * from './node-group';
+export * from './history';

package/dist/plugins/plugins/index.mjs

@@ -0,0 +1,9 @@
+export * from "./minimap.mjs";
+export * from "./controls.mjs";
+export * from "./grid.mjs";
+export * from "./snap.mjs";
+export * from "./keyboard.mjs";
+export * from "./export.mjs";
+export * from "./layout.mjs";
+export * from "./node-group.mjs";
+export * from "./history.mjs";

package/dist/plugins/plugins/keyboard.cjs

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createKeyboardPlugin = createKeyboardPlugin;
+const defaultOptions = {
+  enabled: true,
+  delete: true,
+  backspace: true,
+  ctrlZ: true,
+  ctrlY: true,
+  escape: true
+};
+function createKeyboardPlugin(options = {}) {
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options
+  };
+  return {
+    id: "keyboard",
+    name: "Keyboard",
+    install(_flow) {
+      console.log("Keyboard plugin installed", mergedOptions);
+    }
+  };
+}

package/dist/plugins/plugins/keyboard.d.ts

@@ -0,0 +1,10 @@
+import type { FlowPlugin } from '../plugin';
+export interface KeyboardOptions {
+    enabled?: boolean;
+    delete?: boolean;
+    backspace?: boolean;
+    ctrlZ?: boolean;
+    ctrlY?: boolean;
+    escape?: boolean;
+}
+export declare function createKeyboardPlugin(options?: KeyboardOptions): FlowPlugin;

package/dist/plugins/plugins/keyboard.mjs

@@ -0,0 +1,18 @@
+const defaultOptions = {
+  enabled: true,
+  delete: true,
+  backspace: true,
+  ctrlZ: true,
+  ctrlY: true,
+  escape: true
+};
+export function createKeyboardPlugin(options = {}) {
+  const mergedOptions = { ...defaultOptions, ...options };
+  return {
+    id: "keyboard",
+    name: "Keyboard",
+    install(_flow) {
+      console.log("Keyboard plugin installed", mergedOptions);
+    }
+  };
+}