@yh-ui/flow 0.1.21

package/dist/plugins/index.cjs

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PluginManager", {
+  enumerable: true,
+  get: function () {
+    return _plugin.PluginManager;
+  }
+});
+Object.defineProperty(exports, "createControlsPlugin", {
+  enumerable: true,
+  get: function () {
+    return _plugins.createControlsPlugin;
+  }
+});
+exports.createDefaultPluginSet = createDefaultPluginSet;
+Object.defineProperty(exports, "createExportPlugin", {
+  enumerable: true,
+  get: function () {
+    return _plugins.createExportPlugin;
+  }
+});
+Object.defineProperty(exports, "createGridPlugin", {
+  enumerable: true,
+  get: function () {
+    return _plugins.createGridPlugin;
+  }
+});
+Object.defineProperty(exports, "createHistoryPlugin", {
+  enumerable: true,
+  get: function () {
+    return _plugins.createHistoryPlugin;
+  }
+});
+Object.defineProperty(exports, "createKeyboardPlugin", {
+  enumerable: true,
+  get: function () {
+    return _plugins.createKeyboardPlugin;
+  }
+});
+Object.defineProperty(exports, "createLayoutPlugin", {
+  enumerable: true,
+  get: function () {
+    return _plugins.createLayoutPlugin;
+  }
+});
+Object.defineProperty(exports, "createMiniMapPlugin", {
+  enumerable: true,
+  get: function () {
+    return _plugins.createMiniMapPlugin;
+  }
+});
+Object.defineProperty(exports, "createNodeGroupPlugin", {
+  enumerable: true,
+  get: function () {
+    return _plugins.createNodeGroupPlugin;
+  }
+});
+Object.defineProperty(exports, "createPlugin", {
+  enumerable: true,
+  get: function () {
+    return _plugin.createPlugin;
+  }
+});
+Object.defineProperty(exports, "createSnapPlugin", {
+  enumerable: true,
+  get: function () {
+    return _plugins.createSnapPlugin;
+  }
+});
+exports.defaultPlugins = void 0;
+Object.defineProperty(exports, "withHooks", {
+  enumerable: true,
+  get: function () {
+    return _plugin.withHooks;
+  }
+});
+var _index = require("./plugins/index.cjs");
+var _plugin = require("./plugin.cjs");
+var _plugins = require("./plugins/index.cjs");
+const defaultPlugins = exports.defaultPlugins = {
+  minimap: _index.createMiniMapPlugin,
+  controls: _index.createControlsPlugin,
+  grid: _index.createGridPlugin,
+  snap: _index.createSnapPlugin,
+  keyboard: _index.createKeyboardPlugin,
+  export: _index.createExportPlugin,
+  layout: _index.createLayoutPlugin,
+  history: _index.createHistoryPlugin,
+  nodeGroup: _index.createNodeGroupPlugin
+};
+function createDefaultPluginSet(options) {
+  return [(0, _index.createMiniMapPlugin)(options?.minimap), (0, _index.createControlsPlugin)(options?.controls), (0, _index.createGridPlugin)(options?.grid), (0, _index.createSnapPlugin)(options?.snap), (0, _index.createKeyboardPlugin)(options?.keyboard), (0, _index.createExportPlugin)(options?.export), (0, _index.createLayoutPlugin)(options?.layout), (0, _index.createHistoryPlugin)(options?.history), (0, _index.createNodeGroupPlugin)(options?.nodeGroup)].filter(Boolean);
+}

package/dist/plugins/index.d.ts

@@ -0,0 +1,34 @@
+import { FlowPlugin } from './plugin';
+import { createMiniMapPlugin, createControlsPlugin, createGridPlugin, createSnapPlugin, createKeyboardPlugin, createExportPlugin, createLayoutPlugin, createHistoryPlugin, createNodeGroupPlugin } from './plugins/index';
+export type { FlowPlugin, FlowInstance, PluginHooks, PluginOptions } from './plugin';
+export { PluginManager, createPlugin, withHooks } from './plugin';
+export { createMiniMapPlugin, createControlsPlugin, createGridPlugin, createSnapPlugin, createKeyboardPlugin, createExportPlugin, createLayoutPlugin, createHistoryPlugin, createNodeGroupPlugin } from './plugins';
+export type { MiniMapOptions as MiniMapPluginOptions, ControlsPluginOptions, GridPluginOptions, SnapPluginOptions, KeyboardOptions as KeyboardPluginOptions, ExportPluginOptions, LayoutOptions as LayoutPluginOptions, HistoryPluginOptions, FlowHistorySnapshot, NodeGroupOptions, NodeGroupInfo } from './plugins';
+/**
+ * 默认插件预设
+ */
+export declare const defaultPlugins: {
+    minimap: typeof createMiniMapPlugin;
+    controls: typeof createControlsPlugin;
+    grid: typeof createGridPlugin;
+    snap: typeof createSnapPlugin;
+    keyboard: typeof createKeyboardPlugin;
+    export: typeof createExportPlugin;
+    layout: typeof createLayoutPlugin;
+    history: typeof createHistoryPlugin;
+    nodeGroup: typeof createNodeGroupPlugin;
+};
+/**
+ * 创建完整插件集
+ */
+export declare function createDefaultPluginSet(options?: {
+    minimap?: Parameters<typeof createMiniMapPlugin>[0];
+    controls?: Parameters<typeof createControlsPlugin>[0];
+    grid?: Parameters<typeof createGridPlugin>[0];
+    snap?: Parameters<typeof createSnapPlugin>[0];
+    keyboard?: Parameters<typeof createKeyboardPlugin>[0];
+    export?: Parameters<typeof createExportPlugin>[0];
+    layout?: Parameters<typeof createLayoutPlugin>[0];
+    history?: Parameters<typeof createHistoryPlugin>[0];
+    nodeGroup?: Parameters<typeof createNodeGroupPlugin>[0];
+}): FlowPlugin[];

package/dist/plugins/index.mjs

@@ -0,0 +1,47 @@
+import {
+  createMiniMapPlugin,
+  createControlsPlugin,
+  createGridPlugin,
+  createSnapPlugin,
+  createKeyboardPlugin,
+  createExportPlugin,
+  createLayoutPlugin,
+  createHistoryPlugin,
+  createNodeGroupPlugin
+} from "./plugins/index.mjs";
+export { PluginManager, createPlugin, withHooks } from "./plugin.mjs";
+export {
+  createMiniMapPlugin,
+  createControlsPlugin,
+  createGridPlugin,
+  createSnapPlugin,
+  createKeyboardPlugin,
+  createExportPlugin,
+  createLayoutPlugin,
+  createHistoryPlugin,
+  createNodeGroupPlugin
+} from "./plugins/index.mjs";
+export const defaultPlugins = {
+  minimap: createMiniMapPlugin,
+  controls: createControlsPlugin,
+  grid: createGridPlugin,
+  snap: createSnapPlugin,
+  keyboard: createKeyboardPlugin,
+  export: createExportPlugin,
+  layout: createLayoutPlugin,
+  history: createHistoryPlugin,
+  nodeGroup: createNodeGroupPlugin
+};
+export function createDefaultPluginSet(options) {
+  return [
+    createMiniMapPlugin(options?.minimap),
+    createControlsPlugin(options?.controls),
+    createGridPlugin(options?.grid),
+    createSnapPlugin(options?.snap),
+    createKeyboardPlugin(options?.keyboard),
+    createExportPlugin(options?.export),
+    createLayoutPlugin(options?.layout),
+    createHistoryPlugin(options?.history),
+    createNodeGroupPlugin(options?.nodeGroup)
+  ].filter(Boolean);
+}

package/dist/plugins/plugin.cjs

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PluginManager = void 0;
+exports.createPlugin = createPlugin;
+exports.withHooks = withHooks;
+class PluginManager {
+  plugins = /* @__PURE__ */new Map();
+  flowInstance = null;
+  /**
+   * 初始化插件管理器
+   */
+  init(flow) {
+    this.flowInstance = flow;
+  }
+  /**
+   * 注册插件
+   */
+  register(plugin, options) {
+    if (this.plugins.has(plugin.id)) {
+      console.warn(`[YhFlow] Plugin ${plugin.id} is already registered, skipping...`);
+      return;
+    }
+    const flowInstance = this.flowInstance || options;
+    if (!flowInstance) {
+      console.error("[YhFlow] PluginManager not initialized, call init() first or provide flow instance");
+      return;
+    }
+    plugin.install(flowInstance, options);
+    this.plugins.set(plugin.id, plugin);
+    console.log(`[YhFlow] Plugin ${plugin.name} (${plugin.id}) registered`);
+  }
+  /**
+   * 卸载插件
+   */
+  unregister(pluginId) {
+    const plugin = this.plugins.get(pluginId);
+    if (!plugin) {
+      console.warn(`[YhFlow] Plugin ${pluginId} not found`);
+      return;
+    }
+    if (plugin.destroy) {
+      plugin.destroy();
+    }
+    this.plugins.delete(pluginId);
+    console.log(`[YhFlow] Plugin ${plugin.name} (${pluginId}) unregistered`);
+  }
+  /**
+   * 获取已注册的插件
+   */
+  getPlugin(pluginId) {
+    return this.plugins.get(pluginId);
+  }
+  /**
+   * 获取所有插件
+   */
+  getPlugins() {
+    return Array.from(this.plugins.values());
+  }
+  /**
+   * 检查插件是否已注册
+   */
+  hasPlugin(pluginId) {
+    return this.plugins.has(pluginId);
+  }
+  /**
+   * 销毁所有插件
+   */
+  destroyAll() {
+    this.plugins.forEach(plugin => {
+      if (plugin.destroy) {
+        plugin.destroy();
+      }
+    });
+    this.plugins.clear();
+  }
+}
+exports.PluginManager = PluginManager;
+function createPlugin(options, install) {
+  return {
+    id: options.id,
+    name: options.name,
+    version: options.version,
+    description: options.description,
+    enabled: options.enabled ?? true,
+    install: flow => {
+      if (options.enabled !== false) {
+        install(flow, options);
+      }
+    }
+  };
+}
+function withHooks(plugin, hooks) {
+  const originalInstall = plugin.install;
+  return {
+    ...plugin,
+    install: (flow, options) => {
+      originalInstall(flow, options);
+      hooks.onInit?.();
+      if (hooks.onViewportChange) {
+        flow.on("viewport:change", event => hooks.onViewportChange?.(event.transform));
+      }
+      if (hooks.onNodesChange) {
+        flow.on("node:selected", () => hooks.onNodesChange?.(flow.nodes.value));
+      }
+      if (hooks.onEdgesChange) {
+        flow.on("edge:selected", () => hooks.onEdgesChange?.(flow.edges.value));
+      }
+    },
+    destroy: () => {
+      hooks.onDestroy?.();
+      plugin.destroy?.();
+    }
+  };
+}

package/dist/plugins/plugin.d.ts

@@ -0,0 +1,72 @@
+import type { Node, Edge, ViewportTransform, FlowInstance, FlowPlugin } from '../types';
+export type { FlowInstance, FlowPlugin };
+/**
+ * 插件生命周期钩子
+ */
+export interface PluginHooks {
+    onInit?: () => void;
+    onDestroy?: () => void;
+    onViewportChange?: (viewport: ViewportTransform) => void;
+    onNodesChange?: (nodes: Node[]) => void;
+    onEdgesChange?: (edges: Edge[]) => void;
+    onSelectionChange?: (selectedNodes: Node[], selectedEdges: Edge[]) => void;
+}
+/**
+ * 插件配置选项
+ */
+export interface PluginOptions {
+    id: string;
+    name: string;
+    version?: string;
+    description?: string;
+    enabled?: boolean;
+}
+/**
+ * 创建插件的配置工厂
+ */
+export interface FlowPluginFactory<T = Record<string, unknown>> {
+    (options?: T): FlowPlugin;
+}
+/**
+ * 插件管理器 - 负责插件的注册、加载、卸载
+ */
+export declare class PluginManager {
+    private plugins;
+    private flowInstance;
+    /**
+     * 初始化插件管理器
+     */
+    init(flow: FlowInstance): void;
+    /**
+     * 注册插件
+     */
+    register(plugin: FlowPlugin, options?: Record<string, unknown>): void;
+    /**
+     * 卸载插件
+     */
+    unregister(pluginId: string): void;
+    /**
+     * 获取已注册的插件
+     */
+    getPlugin(pluginId: string): FlowPlugin | undefined;
+    /**
+     * 获取所有插件
+     */
+    getPlugins(): FlowPlugin[];
+    /**
+     * 检查插件是否已注册
+     */
+    hasPlugin(pluginId: string): boolean;
+    /**
+     * 销毁所有插件
+     */
+    destroyAll(): void;
+}
+/**
+ * 创建插件的工厂函数
+ */
+export declare function createPlugin<T extends PluginOptions>(options: T, install: (flow: FlowInstance, options: T) => void): FlowPlugin;
+/**
+ * 插件高阶函数 - 添加生命周期钩子支持
+ */
+export declare function withHooks(plugin: FlowPlugin, hooks: PluginHooks): FlowPlugin;

package/dist/plugins/plugin.mjs

@@ -0,0 +1,110 @@
+export class PluginManager {
+  plugins = /* @__PURE__ */ new Map();
+  flowInstance = null;
+  /**
+   * 初始化插件管理器
+   */
+  init(flow) {
+    this.flowInstance = flow;
+  }
+  /**
+   * 注册插件
+   */
+  register(plugin, options) {
+    if (this.plugins.has(plugin.id)) {
+      console.warn(`[YhFlow] Plugin ${plugin.id} is already registered, skipping...`);
+      return;
+    }
+    const flowInstance = this.flowInstance || options;
+    if (!flowInstance) {
+      console.error(
+        "[YhFlow] PluginManager not initialized, call init() first or provide flow instance"
+      );
+      return;
+    }
+    plugin.install(flowInstance, options);
+    this.plugins.set(plugin.id, plugin);
+    console.log(`[YhFlow] Plugin ${plugin.name} (${plugin.id}) registered`);
+  }
+  /**
+   * 卸载插件
+   */
+  unregister(pluginId) {
+    const plugin = this.plugins.get(pluginId);
+    if (!plugin) {
+      console.warn(`[YhFlow] Plugin ${pluginId} not found`);
+      return;
+    }
+    if (plugin.destroy) {
+      plugin.destroy();
+    }
+    this.plugins.delete(pluginId);
+    console.log(`[YhFlow] Plugin ${plugin.name} (${pluginId}) unregistered`);
+  }
+  /**
+   * 获取已注册的插件
+   */
+  getPlugin(pluginId) {
+    return this.plugins.get(pluginId);
+  }
+  /**
+   * 获取所有插件
+   */
+  getPlugins() {
+    return Array.from(this.plugins.values());
+  }
+  /**
+   * 检查插件是否已注册
+   */
+  hasPlugin(pluginId) {
+    return this.plugins.has(pluginId);
+  }
+  /**
+   * 销毁所有插件
+   */
+  destroyAll() {
+    this.plugins.forEach((plugin) => {
+      if (plugin.destroy) {
+        plugin.destroy();
+      }
+    });
+    this.plugins.clear();
+  }
+}
+export function createPlugin(options, install) {
+  return {
+    id: options.id,
+    name: options.name,
+    version: options.version,
+    description: options.description,
+    enabled: options.enabled ?? true,
+    install: (flow) => {
+      if (options.enabled !== false) {
+        install(flow, options);
+      }
+    }
+  };
+}
+export function withHooks(plugin, hooks) {
+  const originalInstall = plugin.install;
+  return {
+    ...plugin,
+    install: (flow, options) => {
+      originalInstall(flow, options);
+      hooks.onInit?.();
+      if (hooks.onViewportChange) {
+        flow.on("viewport:change", (event) => hooks.onViewportChange?.(event.transform));
+      }
+      if (hooks.onNodesChange) {
+        flow.on("node:selected", () => hooks.onNodesChange?.(flow.nodes.value));
+      }
+      if (hooks.onEdgesChange) {
+        flow.on("edge:selected", () => hooks.onEdgesChange?.(flow.edges.value));
+      }
+    },
+    destroy: () => {
+      hooks.onDestroy?.();
+      plugin.destroy?.();
+    }
+  };
+}

package/dist/plugins/plugins/controls.cjs

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createControlsPlugin = createControlsPlugin;
+var _vue = require("vue");
+var _Controls = _interopRequireDefault(require("../../renderer/Controls.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultControlsOptions = {
+  enabled: true,
+  position: "bottom-left",
+  showZoom: true,
+  showFitView: true,
+  showInteractive: true
+};
+function createControlsPlugin(options = {}) {
+  const mergedOptions = {
+    ...defaultControlsOptions,
+    ...options
+  };
+  return {
+    id: "controls",
+    name: "Controls",
+    version: "1.0.0",
+    description: "Displays a set of controls for zooming and fitting the view",
+    component: (0, _vue.markRaw)(_Controls.default),
+    componentProps: {
+      position: mergedOptions.position,
+      showZoom: mergedOptions.showZoom,
+      showFitView: mergedOptions.showFitView,
+      showInteractive: mergedOptions.showInteractive
+    },
+    install(_flow) {
+      console.log(`[Controls Plugin] Installed`);
+    }
+  };
+}

package/dist/plugins/plugins/controls.d.ts

@@ -0,0 +1,12 @@
+import type { FlowPlugin } from '../plugin';
+export interface ControlsPluginOptions {
+    enabled?: boolean;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    showZoom?: boolean;
+    showFitView?: boolean;
+    showInteractive?: boolean;
+}
+/**
+ * 创建控制栏插件
+ */
+export declare function createControlsPlugin(options?: ControlsPluginOptions): FlowPlugin;

package/dist/plugins/plugins/controls.mjs

@@ -0,0 +1,28 @@
+import { markRaw } from "vue";
+import Controls from "../../renderer/Controls.vue";
+const defaultControlsOptions = {
+  enabled: true,
+  position: "bottom-left",
+  showZoom: true,
+  showFitView: true,
+  showInteractive: true
+};
+export function createControlsPlugin(options = {}) {
+  const mergedOptions = { ...defaultControlsOptions, ...options };
+  return {
+    id: "controls",
+    name: "Controls",
+    version: "1.0.0",
+    description: "Displays a set of controls for zooming and fitting the view",
+    component: markRaw(Controls),
+    componentProps: {
+      position: mergedOptions.position,
+      showZoom: mergedOptions.showZoom,
+      showFitView: mergedOptions.showFitView,
+      showInteractive: mergedOptions.showInteractive
+    },
+    install(_flow) {
+      console.log(`[Controls Plugin] Installed`);
+    }
+  };
+}

package/dist/plugins/plugins/export.cjs

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createExportPlugin = createExportPlugin;
+var _vue = require("vue");
+var _screenshot = require("../../utils/screenshot.cjs");
+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
+  };
+}
+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 (0, _vue.nextTick)();
+            }
+            const captureOpts = mergeCaptureOptions(mergedOptions, opts);
+            const result = await (0, _screenshot.captureElement)(container, captureOpts);
+            if (download) {
+              (0, _screenshot.triggerDownload)(result.dataUrl, fileName, result.extension);
+            }
+            if (copyToClipboard) {
+              await (0, _screenshot.copyBlobToClipboard)(result.blob);
+            }
+            return result;
+          } finally {
+            if (savedViewport) {
+              flow.setViewport(savedViewport);
+            }
+          }
+        };
+      }
+    }
+  };
+}

package/dist/plugins/plugins/export.d.ts

@@ -0,0 +1,12 @@
+import type { FlowPlugin } from '../plugin';
+export interface ExportPluginOptions {
+    enabled?: boolean;
+    fileName?: string;
+    exportImage?: boolean;
+    exportJson?: boolean;
+    imageType?: 'png' | 'jpeg' | 'webp';
+    imageQuality?: number;
+    pixelRatio?: number;
+    backgroundColor?: string;
+}
+export declare function createExportPlugin(options?: ExportPluginOptions): FlowPlugin;