@blueking/flow-canvas 0.0.1-beta.1

package/dist/core/apply-command.d.ts

@@ -0,0 +1,11 @@
+import type { FlowModel } from '../types/flow-model';
+import type { CanvasCommand } from '../types/command';
+/**
+ * 纯函数 reducer：将一条原子命令应用到 FlowModel 上，返回新 FlowModel（不可变）。
+ * 所有 FlowModel 不变量在此处保证：
+ *  - 节点/边 id 唯一性
+ *  - 边端点必须指向存在的节点（及可选的 port）
+ *  - 删除节点时级联清理关联边
+ *  - label id 在同一条边内唯一
+ */
+export declare function applyCanvasCommand(model: FlowModel, cmd: CanvasCommand): FlowModel;

package/dist/core/editor.d.ts

@@ -0,0 +1,50 @@
+import { type Ref } from 'vue';
+import type { FlowModel } from '../types/flow-model';
+import type { CanvasSchema, CanvasMode } from '../types/schema';
+import type { CanvasPlugin } from '../types/plugin';
+import type { CanvasApi, CanvasToolbarItem } from '../types/api';
+import type { CanvasHistory, CanvasHistoryOptions } from '../types/history';
+import type { CommandEnvelope, CommandExecutionResult, FlowModelChangeEvent } from '../types/command';
+import { PluginManager } from './plugin-manager';
+export interface CanvasEditorOptions {
+    initialFlowModel: FlowModel;
+    schema: CanvasSchema;
+    plugins?: CanvasPlugin[];
+    mode?: CanvasMode;
+    historyOptions?: CanvasHistoryOptions;
+    onCommandResult?(result: CommandExecutionResult): void;
+    onFlowModelChange?(event: FlowModelChangeEvent): void;
+}
+export interface CanvasEditorContext {
+    flowModel: Readonly<Ref<FlowModel>>;
+    history: CanvasHistory;
+    schema: CanvasSchema;
+    mode: Ref<CanvasMode>;
+    executeCommand(envelope: CommandEnvelope): CommandExecutionResult;
+    replaceFlowModel(model: FlowModel): void;
+    setMode(mode: CanvasMode): void;
+    /** 框选模式：开启后左键拖拽画布空白区域为框选，关闭时为画布平移 */
+    selectionMode: Ref<boolean>;
+    setSelectionMode(enabled: boolean): void;
+    api: Ref<CanvasApi | null>;
+    toolbarItems: Readonly<Ref<CanvasToolbarItem[]>>;
+    extendedApi: Record<string, Function>;
+    /** @internal used by CanvasRuntime */
+    _pluginManager: PluginManager;
+}
+/**
+ * 画布编辑引擎的核心 composable。
+ *
+ * 初始化时完成：
+ *  1. 创建 CanvasHistory（快照栈）
+ *  2. 安装插件（editor-stage）
+ *  3. 暴露 executeCommand / replaceFlowModel / setMode 等 API
+ *
+ * api（CanvasApi）在 CanvasRuntime mount 后才由 runtime 注入。
+ * 在此之前 api.value === null，工具栏等依赖 api 的功能默认禁用。
+ *
+ * executeCommand 的完整管道：
+ *  pluginManager.transformCommand → history.execute → applyCanvasCommand
+ *  → pluginManager.afterCommand → onCommandResult → onFlowModelChange
+ */
+export declare function useCanvasEditor(options: CanvasEditorOptions): CanvasEditorContext;

package/dist/core/errors.d.ts

@@ -0,0 +1,6 @@
+export declare class CanvasConstraintError extends Error {
+    constructor(message: string);
+}
+export declare class CanvasSchemaError extends Error {
+    constructor(message: string);
+}

package/dist/core/history.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'vue';
+import type { FlowModel } from '../types/flow-model';
+import type { CanvasHistory, CanvasHistoryOptions } from '../types/history';
+/**
+ * 基于快照栈的历史系统。
+ *
+ * 每次 execute 时在 undo 栈中保存执行前的 FlowModel 快照，同时清空 redo 栈。
+ * undo 弹出上一个快照恢复 FlowModel；redo 重新执行对应 envelope 的命令序列。
+ *
+ * 注意：当前实现为完整快照，适用于中小规模 FlowModel。
+ * 若 payload 增长导致性能问题，后续可引入结构共享或 checkpoint + patch 混合模式。
+ */
+export declare function createCanvasHistory(initialFlowModel: FlowModel, options?: CanvasHistoryOptions): CanvasHistory & {
+    currentFlowModel: Ref<FlowModel>;
+};

package/dist/core/plugin-manager.d.ts

@@ -0,0 +1,58 @@
+import type { CanvasPlugin, EditorPluginContext, RuntimePluginContext, CanvasSelection, NodeDecoration, EdgeDecoration } from '../types/plugin';
+import type { CommandEnvelope, CanvasUiEvent, ScreenPosition, CommandExecutionError } from '../types/command';
+import type { CanvasToolbarItem } from '../types/api';
+import type { FlowModel, FlowNodeModel, FlowEdgeModel } from '../types/flow-model';
+/**
+ * 管理插件的安装、运行时挂载、命令管道和事件分发。
+ *
+ * 生命周期分两阶段：
+ *  1. install（editor 级）：在 useCanvasEditor 初始化时调用，此时只有 flowModel/history/schema 可用
+ *  2. attachRuntime（runtime 级）：在 CanvasRuntime mount 后调用，此时 api/graph/overlay 已就绪
+ *
+ * 命令管道（transformCommand）为不可变管道：
+ *  - 插件按 priority 升序执行
+ *  - 每个插件返回新 envelope 或 null（拒绝）或 CommandRejection
+ *  - 前一个插件的输出是下一个插件的输入
+ */
+export declare class PluginManager {
+    private plugins;
+    private editorContext;
+    private runtimeCtx;
+    /** 每次 attachRuntime 递增，detachRuntime 时旧 generation 的异步调用自动作废 */
+    private runtimeVersion;
+    install(plugins: CanvasPlugin[], ctx: EditorPluginContext): void;
+    /**
+     * 挂载运行时上下文并调用各插件的 attachRuntime。
+     * 异步插件（如动态 import X6 插件）在 await 返回后会检查 generation，
+     * 若 detachRuntime 已被调用（generation 已变），则跳过 graph.use() 等操作。
+     */
+    attachRuntime(ctx: RuntimePluginContext): void;
+    /** 按安装的逆序 detach，保证后安装的插件先释放运行时资源 */
+    detachRuntime(): void;
+    /**
+     * 为 attachRuntime 创建保护代理：graph.use() 等可能在异步回调中调用，
+     * 如果在 await 期间 detachRuntime 已执行，代理会将 graph 操作变为 no-op。
+     */
+    private createSafeRuntimeContext;
+    dispose(): void;
+    transformCommand(envelope: Readonly<CommandEnvelope>): {
+        envelope: CommandEnvelope;
+    } | {
+        rejected: true;
+        error: CommandExecutionError;
+    };
+    afterCommand(envelope: Readonly<CommandEnvelope>, prevModel: Readonly<FlowModel>, newModel: Readonly<FlowModel>): void;
+    dispatchUiEvent(event: CanvasUiEvent): void;
+    dispatchSelectionChange(selection: CanvasSelection): void;
+    dispatchKeyboardShortcut(event: KeyboardEvent): boolean;
+    collectContextMenuItems(position: ScreenPosition): import('../types/plugin').ContextMenuItem[];
+    /** 汇聚所有插件的工具栏项，相同 id 的后注册覆盖先注册，最终按 order 排序 */
+    collectToolbarItems(): CanvasToolbarItem[];
+    /** 合并所有插件对某节点的装饰（className / borderColor / badge），后注册覆盖先注册 */
+    collectNodeDecorations(node: FlowNodeModel): NodeDecoration | undefined;
+    /** 合并所有插件对某边的装饰（className / strokeColor），后注册覆盖先注册 */
+    collectEdgeDecorations(edge: FlowEdgeModel): EdgeDecoration | undefined;
+    collectExtendedApi(): Record<string, Function>;
+    /** 基于当前 FlowModel 和待执行命令序列，生成预览 FlowModel 供 transformCommand 使用 */
+    private createPreview;
+}

package/dist/index-BAAMFT_J.js

@@ -0,0 +1,236 @@
+import { View as x, CssLoader as u, Dom as l, Graph as y, FunctionExt as f, Rectangle as E, GeometryUtil as m } from "@antv/x6";
+const G = `.x6-widget-dnd {
+  position: absolute;
+  top: -10000px;
+  left: -10000px;
+  z-index: 999999;
+  display: none;
+  cursor: move;
+  opacity: 0.7;
+  pointer-events: 'cursor';
+}
+.x6-widget-dnd.dragging {
+  display: inline-block;
+}
+.x6-widget-dnd.dragging * {
+  pointer-events: none !important;
+}
+.x6-widget-dnd .x6-graph {
+  background: transparent;
+  box-shadow: none;
+}
+`;
+var v = function(c, e, n, t) {
+  var i = arguments.length, s = i < 3 ? e : t === null ? t = Object.getOwnPropertyDescriptor(e, n) : t, a;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") s = Reflect.decorate(c, e, n, t);
+  else for (var o = c.length - 1; o >= 0; o--) (a = c[o]) && (s = (i < 3 ? a(s) : i > 3 ? a(e, n, s) : a(e, n)) || s);
+  return i > 3 && s && Object.defineProperty(e, n, s), s;
+};
+class p extends x {
+  get targetScroller() {
+    return this.options.target.getPlugin("scroller");
+  }
+  get targetGraph() {
+    return this.options.target;
+  }
+  get targetModel() {
+    return this.targetGraph.model;
+  }
+  get snapline() {
+    return this.options.target.getPlugin("snapline");
+  }
+  constructor(e) {
+    super(), this.name = "dnd", this.options = Object.assign(Object.assign({}, p.defaults), e), this.init();
+  }
+  init() {
+    u.ensure(this.name, G), this.container = document.createElement("div"), l.addClass(this.container, this.prefixClassName("widget-dnd")), this.draggingGraph = new y(Object.assign(Object.assign({}, this.options.delegateGraphOptions), { container: document.createElement("div"), width: 1, height: 1, async: !1 })), l.append(this.container, this.draggingGraph.container);
+  }
+  start(e, n) {
+    const t = n;
+    t.preventDefault(), this.targetModel.startBatch("dnd"), l.addClass(this.container, "dragging"), l.appendTo(this.container, this.options.draggingContainer || document.body), this.sourceNode = e, this.prepareDragging(e, t.clientX, t.clientY);
+    const i = this.updateNodePosition(t.clientX, t.clientY);
+    this.isSnaplineEnabled() && (this.snapline.captureCursorOffset({
+      e: t,
+      node: e,
+      cell: e,
+      view: this.draggingView,
+      x: i.x,
+      y: i.y
+    }), this.draggingNode.on("change:position", this.snap, this)), this.delegateDocumentEvents(p.documentEvents, t.data);
+  }
+  isSnaplineEnabled() {
+    return this.snapline && this.snapline.isEnabled();
+  }
+  prepareDragging(e, n, t) {
+    const i = this.draggingGraph, s = i.model, a = this.options.getDragNode(e, {
+      sourceNode: e,
+      draggingGraph: i,
+      targetGraph: this.targetGraph
+    });
+    a.position(0, 0);
+    let o = 5;
+    if (this.isSnaplineEnabled() && (o += this.snapline.options.tolerance || 0), this.isSnaplineEnabled() || this.options.scaled) {
+      const g = this.targetGraph.transform.getScale();
+      i.scale(g.sx, g.sy), o *= Math.max(g.sx, g.sy);
+    } else
+      i.scale(1, 1);
+    this.clearDragging(), s.resetCells([a]);
+    const r = i.findViewByCell(a);
+    r.undelegateEvents(), r.cell.off("changed"), i.fitToContent({
+      padding: o,
+      allowNewOrigin: "any",
+      useCellGeometry: !1
+    });
+    const d = r.getBBox();
+    this.geometryBBox = r.getBBox({ useCellGeometry: !0 }), this.delta = this.geometryBBox.getTopLeft().diff(d.getTopLeft()), this.draggingNode = a, this.draggingView = r, this.draggingBBox = a.getBBox(), this.padding = o, this.originOffset = this.updateGraphPosition(n, t);
+  }
+  updateGraphPosition(e, n) {
+    const t = document.body.scrollTop || document.documentElement.scrollTop, i = document.body.scrollLeft || document.documentElement.scrollLeft, s = this.delta, a = this.geometryBBox, o = this.padding || 5, r = {
+      left: e - s.x - a.width / 2 - o + i,
+      top: n - s.y - a.height / 2 - o + t
+    };
+    return this.draggingGraph && l.css(this.container, {
+      left: `${r.left}px`,
+      top: `${r.top}px`
+    }), r;
+  }
+  updateNodePosition(e, n) {
+    const t = this.targetGraph.clientToLocal(e, n), i = this.draggingBBox;
+    return t.x -= i.width / 2, t.y -= i.height / 2, this.draggingNode.position(t.x, t.y), t;
+  }
+  snap({ cell: e, current: n, options: t }) {
+    const i = e;
+    if (t.snapped) {
+      const s = this.draggingBBox;
+      i.position(s.x + t.tx, s.y + t.ty, { silent: !0 }), this.draggingView.translate(), i.position(n.x, n.y, { silent: !0 }), this.snapOffset = {
+        x: t.tx,
+        y: t.ty
+      };
+    } else
+      this.snapOffset = null;
+  }
+  onDragging(e) {
+    const n = this.draggingView;
+    if (n) {
+      e.preventDefault();
+      const t = this.normalizeEvent(e), i = t.clientX, s = t.clientY;
+      this.updateGraphPosition(i, s);
+      const a = this.updateNodePosition(i, s), o = this.targetGraph.options.embedding.enabled, r = (o || this.isSnaplineEnabled()) && this.isInsideValidArea({
+        x: i,
+        y: s
+      });
+      if (o) {
+        n.setEventData(t, {
+          graph: this.targetGraph,
+          candidateEmbedView: this.candidateEmbedView
+        });
+        const d = n.getEventData(t);
+        r ? n.processEmbedding(t, d) : n.clearEmbedding(d), this.candidateEmbedView = d.candidateEmbedView;
+      }
+      this.isSnaplineEnabled() && (r ? this.snapline.snapOnMoving({
+        e: t,
+        view: n,
+        x: a.x,
+        y: a.y
+      }) : this.snapline.hide());
+    }
+  }
+  onDragEnd(e) {
+    const n = this.draggingNode;
+    if (n) {
+      const t = this.normalizeEvent(e), i = this.draggingView, s = this.draggingBBox, a = this.snapOffset;
+      let o = s.x, r = s.y;
+      a && (o += a.x, r += a.y), n.position(o, r, { silent: !0 });
+      const d = this.drop(n, { x: t.clientX, y: t.clientY }), g = (h) => {
+        h ? (this.onDropped(n), this.targetGraph.options.embedding.enabled && i && (i.setEventData(t, {
+          cell: h,
+          graph: this.targetGraph,
+          candidateEmbedView: this.candidateEmbedView
+        }), i.finalizeEmbedding(t, i.getEventData(t)))) : this.onDropInvalid(), this.candidateEmbedView = null, this.targetModel.stopBatch("dnd");
+      };
+      f.isAsync(d) ? (this.undelegateDocumentEvents(), d.then(g)) : g(d);
+    }
+  }
+  clearDragging() {
+    this.draggingNode && (this.sourceNode = null, this.draggingNode.remove(), this.draggingNode = null, this.draggingView = null, this.delta = null, this.padding = null, this.snapOffset = null, this.originOffset = null, this.undelegateDocumentEvents());
+  }
+  onDropped(e) {
+    this.draggingNode === e && (this.clearDragging(), l.removeClass(this.container, "dragging"), l.remove(this.container));
+  }
+  onDropInvalid() {
+    const e = this.draggingNode;
+    e && this.onDropped(e);
+  }
+  isInsideValidArea(e) {
+    let n, t = null;
+    const i = this.targetGraph, s = this.targetScroller;
+    this.options.dndContainer && (t = this.getDropArea(this.options.dndContainer));
+    const a = t && t.containsPoint(e);
+    if (s)
+      if (s.options.autoResize)
+        n = this.getDropArea(s.container);
+      else {
+        const o = this.getDropArea(s.container);
+        n = this.getDropArea(i.container).intersectsWithRect(o);
+      }
+    else
+      n = this.getDropArea(i.container);
+    return !a && n && n.containsPoint(e);
+  }
+  getDropArea(e) {
+    const n = l.offset(e), t = document.body.scrollTop || document.documentElement.scrollTop, i = document.body.scrollLeft || document.documentElement.scrollLeft;
+    return E.create({
+      x: n.left + parseInt(l.css(e, "border-left-width"), 10) - i,
+      y: n.top + parseInt(l.css(e, "border-top-width"), 10) - t,
+      width: e.clientWidth,
+      height: e.clientHeight
+    });
+  }
+  drop(e, n) {
+    if (this.isInsideValidArea(n)) {
+      const t = this.targetGraph, i = t.model, s = t.clientToLocal(n), a = this.sourceNode, o = this.options.getDropNode(e, {
+        sourceNode: a,
+        draggingNode: e,
+        targetGraph: this.targetGraph,
+        draggingGraph: this.draggingGraph
+      }), r = o.getBBox();
+      s.x += r.x - r.width / 2, s.y += r.y - r.height / 2;
+      const d = this.snapOffset ? 1 : t.getGridSize();
+      o.position(m.snapToGrid(s.x, d), m.snapToGrid(s.y, d)), o.removeZIndex();
+      const g = this.options.validateNode, h = g ? g(o, {
+        sourceNode: a,
+        draggingNode: e,
+        droppingNode: o,
+        targetGraph: t,
+        draggingGraph: this.draggingGraph
+      }) : !0;
+      return typeof h == "boolean" ? h ? (i.addCell(o, { stencil: this.cid }), o) : null : f.toDeferredBoolean(h).then((b) => b ? (i.addCell(o, { stencil: this.cid }), o) : null);
+    }
+    return null;
+  }
+  onRemove() {
+    this.draggingGraph && (this.draggingGraph.view.remove(), this.draggingGraph.dispose());
+  }
+  dispose() {
+    this.remove(), u.clean(this.name);
+  }
+}
+v([
+  x.dispose()
+], p.prototype, "dispose", null);
+(function(c) {
+  c.defaults = {
+    // animation: false,
+    getDragNode: (e) => e.clone(),
+    getDropNode: (e) => e.clone()
+  }, c.documentEvents = {
+    mousemove: "onDragging",
+    touchmove: "onDragging",
+    mouseup: "onDragEnd",
+    touchend: "onDragEnd",
+    touchcancel: "onDragEnd"
+  };
+})(p || (p = {}));
+export {
+  p as Dnd
+};

package/dist/index-CleU3x1v.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@antv/x6");a.Graph.prototype.toSVG=function(s,e){const t=this.getPlugin("export");t&&t.toSVG(s,e)};a.Graph.prototype.toPNG=function(s,e){const t=this.getPlugin("export");t&&t.toPNG(s,e)};a.Graph.prototype.toJPEG=function(s,e){const t=this.getPlugin("export");t&&t.toJPEG(s,e)};a.Graph.prototype.exportPNG=function(s,e){const t=this.getPlugin("export");t&&t.exportPNG(s,e)};a.Graph.prototype.exportJPEG=function(s,e){const t=this.getPlugin("export");t&&t.exportJPEG(s,e)};a.Graph.prototype.exportSVG=function(s,e){const t=this.getPlugin("export");t&&t.exportSVG(s,e)};var E=function(s,e,t,r){var i=arguments.length,c=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")c=Reflect.decorate(s,e,t,r);else for(var h=s.length-1;h>=0;h--)(d=s[h])&&(c=(i<3?d(c):i>3?d(e,t,c):d(e,t))||c);return i>3&&c&&Object.defineProperty(e,t,c),c};class D extends a.Basecoat{constructor(){super(),this.name="export"}get view(){return this.graph.view}init(e){this.graph=e}exportPNG(e="chart",t={}){this.toPNG(r=>{a.DataUri.downloadDataUri(r,e)},t)}exportJPEG(e="chart",t={}){this.toPNG(r=>{a.DataUri.downloadDataUri(r,e)},t)}exportSVG(e="chart",t={}){this.toSVG(r=>{a.DataUri.downloadDataUri(a.DataUri.svgToDataUrl(r),e)},t)}toSVG(e,t={}){this.notify("before:export",t);const r=this.view.svg,i=a.Vector.create(r).clone();let c=i.node;const d=i.findOne(`.${this.view.prefixClassName("graph-svg-stage")}`),h=t.viewBox||this.graph.graphToLocal(this.graph.getContentBBox()),l=t.preserveDimensions;if(l){const o=typeof l=="boolean"?h:l;i.attr({width:o.width,height:o.height})}if(i.removeAttribute("style").attr("viewBox",[h.x,h.y,h.width,h.height].join(" ")),d.removeAttribute("transform"),t.copyStyles!==!1){const o=r.ownerDocument,f=Array.from(r.querySelectorAll("*")),u=Array.from(c.querySelectorAll("*")),p=o.styleSheets.length,G=[];for(let n=p-1;n>=0;n-=1)G[n]=o.styleSheets[n],o.styleSheets[n].disabled=!0;const x={};f.forEach((n,m)=>{const w=window.getComputedStyle(n,null),P={};Object.keys(w).forEach(S=>{P[S]=w.getPropertyValue(S)}),x[m]=P}),p!==o.styleSheets.length&&G.forEach((n,m)=>{o.styleSheets[m]=n});for(let n=0;n<p;n+=1)o.styleSheets[n].disabled=!1;const v={};f.forEach((n,m)=>{const w=window.getComputedStyle(n,null),P=x[m],S={};Object.keys(w).forEach(b=>{!a.NumberExt.isNumber(b)&&w.getPropertyValue(b)!==P[b]&&(S[b]=w.getPropertyValue(b))}),v[m]=S}),u.forEach((n,m)=>{a.Dom.css(n,v[m])})}const y=t.stylesheet;if(typeof y=="string"){const o=r.ownerDocument.implementation.createDocument(null,"xml",null).createCDATASection(y);i.prepend(a.Vector.create("style",{type:"text/css"},[o]))}const g=()=>{const o=t.beforeSerialize;if(typeof o=="function"){const u=a.FunctionExt.call(o,this.graph,c);u instanceof SVGSVGElement&&(c=u)}const f=new XMLSerializer().serializeToString(c).replace(/&nbsp;/g," ");this.notify("after:export",t),e(f)};if(t.serializeImages){const o=i.find("image").map(f=>new Promise(u=>{const p=f.attr("xlink:href")||f.attr("href");a.DataUri.imageToDataUri(p,(G,x)=>{!G&&x&&f.attr("xlink:href",x),u()})}));Promise.all(o).then(g)}else g()}toDataURL(e,t){let r=t.viewBox||this.graph.getContentBBox();const i=a.NumberExt.normalizeSides(t.padding);t.width&&t.height&&(i.left+i.right>=t.width&&(i.left=i.right=0),i.top+i.bottom>=t.height&&(i.top=i.bottom=0));const c=new a.Rectangle(-i.left,-i.top,i.left+i.right,i.top+i.bottom);if(t.width&&t.height){const g=r.width+i.left+i.right,o=r.height+i.top+i.bottom;c.scale(g/t.width,o/t.height)}r=a.Rectangle.create(r).moveAndExpand(c);const d=typeof t.width=="number"&&typeof t.height=="number"?{width:t.width,height:t.height}:r;let h=t.ratio?parseFloat(t.ratio):1;(!Number.isFinite(h)||h===0)&&(h=1);const l={width:Math.max(Math.round(d.width*h),1),height:Math.max(Math.round(d.height*h),1)};{const g=document.createElement("canvas"),o=g.getContext("2d");g.width=l.width,g.height=l.height;const f=l.width-1,u=l.height-1;o.fillStyle="rgb(1,1,1)",o.fillRect(f,u,1,1);const p=o.getImageData(f,u,1,1).data;if(p[0]!==1||p[1]!==1||p[2]!==1)throw new Error("size exceeded")}const y=new Image;y.onload=()=>{const g=document.createElement("canvas");g.width=l.width,g.height=l.height;const o=g.getContext("2d");o.fillStyle=t.backgroundColor||"white",o.fillRect(0,0,l.width,l.height);try{o.drawImage(y,0,0,l.width,l.height);const f=g.toDataURL(t.type,t.quality);e(f)}catch{}},this.toSVG(g=>{y.src=`data:image/svg+xml,${encodeURIComponent(g)}`},Object.assign(Object.assign({},t),{viewBox:r,serializeImages:!0,preserveDimensions:Object.assign({},l)}))}toPNG(e,t={}){this.toDataURL(e,Object.assign(Object.assign({},t),{type:"image/png"}))}toJPEG(e,t={}){this.toDataURL(e,Object.assign(Object.assign({},t),{type:"image/jpeg"}))}notify(e,t){this.trigger(e,t),this.graph.trigger(e,t)}dispose(){this.off()}}E([a.Basecoat.dispose()],D.prototype,"dispose",null);exports.Export=D;

package/dist/index-DD3pv5ZZ.cjs

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@antv/x6"),f=`.x6-widget-dnd {
+  position: absolute;
+  top: -10000px;
+  left: -10000px;
+  z-index: 999999;
+  display: none;
+  cursor: move;
+  opacity: 0.7;
+  pointer-events: 'cursor';
+}
+.x6-widget-dnd.dragging {
+  display: inline-block;
+}
+.x6-widget-dnd.dragging * {
+  pointer-events: none !important;
+}
+.x6-widget-dnd .x6-graph {
+  background: transparent;
+  box-shadow: none;
+}
+`;var m=function(h,e,n,t){var i=arguments.length,s=i<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,n):t,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(h,e,n,t);else for(var o=h.length-1;o>=0;o--)(a=h[o])&&(s=(i<3?a(s):i>3?a(e,n,s):a(e,n))||s);return i>3&&s&&Object.defineProperty(e,n,s),s};class c extends d.View{get targetScroller(){return this.options.target.getPlugin("scroller")}get targetGraph(){return this.options.target}get targetModel(){return this.targetGraph.model}get snapline(){return this.options.target.getPlugin("snapline")}constructor(e){super(),this.name="dnd",this.options=Object.assign(Object.assign({},c.defaults),e),this.init()}init(){d.CssLoader.ensure(this.name,f),this.container=document.createElement("div"),d.Dom.addClass(this.container,this.prefixClassName("widget-dnd")),this.draggingGraph=new d.Graph(Object.assign(Object.assign({},this.options.delegateGraphOptions),{container:document.createElement("div"),width:1,height:1,async:!1})),d.Dom.append(this.container,this.draggingGraph.container)}start(e,n){const t=n;t.preventDefault(),this.targetModel.startBatch("dnd"),d.Dom.addClass(this.container,"dragging"),d.Dom.appendTo(this.container,this.options.draggingContainer||document.body),this.sourceNode=e,this.prepareDragging(e,t.clientX,t.clientY);const i=this.updateNodePosition(t.clientX,t.clientY);this.isSnaplineEnabled()&&(this.snapline.captureCursorOffset({e:t,node:e,cell:e,view:this.draggingView,x:i.x,y:i.y}),this.draggingNode.on("change:position",this.snap,this)),this.delegateDocumentEvents(c.documentEvents,t.data)}isSnaplineEnabled(){return this.snapline&&this.snapline.isEnabled()}prepareDragging(e,n,t){const i=this.draggingGraph,s=i.model,a=this.options.getDragNode(e,{sourceNode:e,draggingGraph:i,targetGraph:this.targetGraph});a.position(0,0);let o=5;if(this.isSnaplineEnabled()&&(o+=this.snapline.options.tolerance||0),this.isSnaplineEnabled()||this.options.scaled){const l=this.targetGraph.transform.getScale();i.scale(l.sx,l.sy),o*=Math.max(l.sx,l.sy)}else i.scale(1,1);this.clearDragging(),s.resetCells([a]);const r=i.findViewByCell(a);r.undelegateEvents(),r.cell.off("changed"),i.fitToContent({padding:o,allowNewOrigin:"any",useCellGeometry:!1});const g=r.getBBox();this.geometryBBox=r.getBBox({useCellGeometry:!0}),this.delta=this.geometryBBox.getTopLeft().diff(g.getTopLeft()),this.draggingNode=a,this.draggingView=r,this.draggingBBox=a.getBBox(),this.padding=o,this.originOffset=this.updateGraphPosition(n,t)}updateGraphPosition(e,n){const t=document.body.scrollTop||document.documentElement.scrollTop,i=document.body.scrollLeft||document.documentElement.scrollLeft,s=this.delta,a=this.geometryBBox,o=this.padding||5,r={left:e-s.x-a.width/2-o+i,top:n-s.y-a.height/2-o+t};return this.draggingGraph&&d.Dom.css(this.container,{left:`${r.left}px`,top:`${r.top}px`}),r}updateNodePosition(e,n){const t=this.targetGraph.clientToLocal(e,n),i=this.draggingBBox;return t.x-=i.width/2,t.y-=i.height/2,this.draggingNode.position(t.x,t.y),t}snap({cell:e,current:n,options:t}){const i=e;if(t.snapped){const s=this.draggingBBox;i.position(s.x+t.tx,s.y+t.ty,{silent:!0}),this.draggingView.translate(),i.position(n.x,n.y,{silent:!0}),this.snapOffset={x:t.tx,y:t.ty}}else this.snapOffset=null}onDragging(e){const n=this.draggingView;if(n){e.preventDefault();const t=this.normalizeEvent(e),i=t.clientX,s=t.clientY;this.updateGraphPosition(i,s);const a=this.updateNodePosition(i,s),o=this.targetGraph.options.embedding.enabled,r=(o||this.isSnaplineEnabled())&&this.isInsideValidArea({x:i,y:s});if(o){n.setEventData(t,{graph:this.targetGraph,candidateEmbedView:this.candidateEmbedView});const g=n.getEventData(t);r?n.processEmbedding(t,g):n.clearEmbedding(g),this.candidateEmbedView=g.candidateEmbedView}this.isSnaplineEnabled()&&(r?this.snapline.snapOnMoving({e:t,view:n,x:a.x,y:a.y}):this.snapline.hide())}}onDragEnd(e){const n=this.draggingNode;if(n){const t=this.normalizeEvent(e),i=this.draggingView,s=this.draggingBBox,a=this.snapOffset;let o=s.x,r=s.y;a&&(o+=a.x,r+=a.y),n.position(o,r,{silent:!0});const g=this.drop(n,{x:t.clientX,y:t.clientY}),l=p=>{p?(this.onDropped(n),this.targetGraph.options.embedding.enabled&&i&&(i.setEventData(t,{cell:p,graph:this.targetGraph,candidateEmbedView:this.candidateEmbedView}),i.finalizeEmbedding(t,i.getEventData(t)))):this.onDropInvalid(),this.candidateEmbedView=null,this.targetModel.stopBatch("dnd")};d.FunctionExt.isAsync(g)?(this.undelegateDocumentEvents(),g.then(l)):l(g)}}clearDragging(){this.draggingNode&&(this.sourceNode=null,this.draggingNode.remove(),this.draggingNode=null,this.draggingView=null,this.delta=null,this.padding=null,this.snapOffset=null,this.originOffset=null,this.undelegateDocumentEvents())}onDropped(e){this.draggingNode===e&&(this.clearDragging(),d.Dom.removeClass(this.container,"dragging"),d.Dom.remove(this.container))}onDropInvalid(){const e=this.draggingNode;e&&this.onDropped(e)}isInsideValidArea(e){let n,t=null;const i=this.targetGraph,s=this.targetScroller;this.options.dndContainer&&(t=this.getDropArea(this.options.dndContainer));const a=t&&t.containsPoint(e);if(s)if(s.options.autoResize)n=this.getDropArea(s.container);else{const o=this.getDropArea(s.container);n=this.getDropArea(i.container).intersectsWithRect(o)}else n=this.getDropArea(i.container);return!a&&n&&n.containsPoint(e)}getDropArea(e){const n=d.Dom.offset(e),t=document.body.scrollTop||document.documentElement.scrollTop,i=document.body.scrollLeft||document.documentElement.scrollLeft;return d.Rectangle.create({x:n.left+parseInt(d.Dom.css(e,"border-left-width"),10)-i,y:n.top+parseInt(d.Dom.css(e,"border-top-width"),10)-t,width:e.clientWidth,height:e.clientHeight})}drop(e,n){if(this.isInsideValidArea(n)){const t=this.targetGraph,i=t.model,s=t.clientToLocal(n),a=this.sourceNode,o=this.options.getDropNode(e,{sourceNode:a,draggingNode:e,targetGraph:this.targetGraph,draggingGraph:this.draggingGraph}),r=o.getBBox();s.x+=r.x-r.width/2,s.y+=r.y-r.height/2;const g=this.snapOffset?1:t.getGridSize();o.position(d.GeometryUtil.snapToGrid(s.x,g),d.GeometryUtil.snapToGrid(s.y,g)),o.removeZIndex();const l=this.options.validateNode,p=l?l(o,{sourceNode:a,draggingNode:e,droppingNode:o,targetGraph:t,draggingGraph:this.draggingGraph}):!0;return typeof p=="boolean"?p?(i.addCell(o,{stencil:this.cid}),o):null:d.FunctionExt.toDeferredBoolean(p).then(u=>u?(i.addCell(o,{stencil:this.cid}),o):null)}return null}onRemove(){this.draggingGraph&&(this.draggingGraph.view.remove(),this.draggingGraph.dispose())}dispose(){this.remove(),d.CssLoader.clean(this.name)}}m([d.View.dispose()],c.prototype,"dispose",null);(function(h){h.defaults={getDragNode:e=>e.clone(),getDropNode:e=>e.clone()},h.documentEvents={mousemove:"onDragging",touchmove:"onDragging",mouseup:"onDragEnd",touchend:"onDragEnd",touchcancel:"onDragEnd"}})(c||(c={}));exports.Dnd=c;

package/dist/index-siYsjzl4.js

@@ -0,0 +1,181 @@
+import { Graph as w, Basecoat as j, DataUri as G, Vector as E, NumberExt as V, Dom as O, Rectangle as C, FunctionExt as N } from "@antv/x6";
+w.prototype.toSVG = function(a, e) {
+  const t = this.getPlugin("export");
+  t && t.toSVG(a, e);
+};
+w.prototype.toPNG = function(a, e) {
+  const t = this.getPlugin("export");
+  t && t.toPNG(a, e);
+};
+w.prototype.toJPEG = function(a, e) {
+  const t = this.getPlugin("export");
+  t && t.toJPEG(a, e);
+};
+w.prototype.exportPNG = function(a, e) {
+  const t = this.getPlugin("export");
+  t && t.exportPNG(a, e);
+};
+w.prototype.exportJPEG = function(a, e) {
+  const t = this.getPlugin("export");
+  t && t.exportJPEG(a, e);
+};
+w.prototype.exportSVG = function(a, e) {
+  const t = this.getPlugin("export");
+  t && t.exportSVG(a, e);
+};
+var U = function(a, e, t, n) {
+  var i = arguments.length, s = i < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, f;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") s = Reflect.decorate(a, e, t, n);
+  else for (var c = a.length - 1; c >= 0; c--) (f = a[c]) && (s = (i < 3 ? f(s) : i > 3 ? f(e, t, s) : f(e, t)) || s);
+  return i > 3 && s && Object.defineProperty(e, t, s), s;
+};
+class z extends j {
+  constructor() {
+    super(), this.name = "export";
+  }
+  get view() {
+    return this.graph.view;
+  }
+  init(e) {
+    this.graph = e;
+  }
+  exportPNG(e = "chart", t = {}) {
+    this.toPNG((n) => {
+      G.downloadDataUri(n, e);
+    }, t);
+  }
+  exportJPEG(e = "chart", t = {}) {
+    this.toPNG((n) => {
+      G.downloadDataUri(n, e);
+    }, t);
+  }
+  exportSVG(e = "chart", t = {}) {
+    this.toSVG((n) => {
+      G.downloadDataUri(G.svgToDataUrl(n), e);
+    }, t);
+  }
+  toSVG(e, t = {}) {
+    this.notify("before:export", t);
+    const n = this.view.svg, i = E.create(n).clone();
+    let s = i.node;
+    const f = i.findOne(`.${this.view.prefixClassName("graph-svg-stage")}`), c = t.viewBox || this.graph.graphToLocal(this.graph.getContentBBox()), h = t.preserveDimensions;
+    if (h) {
+      const o = typeof h == "boolean" ? c : h;
+      i.attr({
+        width: o.width,
+        height: o.height
+      });
+    }
+    if (i.removeAttribute("style").attr("viewBox", [c.x, c.y, c.width, c.height].join(" ")), f.removeAttribute("transform"), t.copyStyles !== !1) {
+      const o = n.ownerDocument, g = Array.from(n.querySelectorAll("*")), d = Array.from(s.querySelectorAll("*")), u = o.styleSheets.length, P = [];
+      for (let r = u - 1; r >= 0; r -= 1)
+        P[r] = o.styleSheets[r], o.styleSheets[r].disabled = !0;
+      const x = {};
+      g.forEach((r, m) => {
+        const y = window.getComputedStyle(r, null), v = {};
+        Object.keys(y).forEach((S) => {
+          v[S] = y.getPropertyValue(S);
+        }), x[m] = v;
+      }), u !== o.styleSheets.length && P.forEach((r, m) => {
+        o.styleSheets[m] = r;
+      });
+      for (let r = 0; r < u; r += 1)
+        o.styleSheets[r].disabled = !1;
+      const D = {};
+      g.forEach((r, m) => {
+        const y = window.getComputedStyle(r, null), v = x[m], S = {};
+        Object.keys(y).forEach((b) => {
+          !V.isNumber(b) && y.getPropertyValue(b) !== v[b] && (S[b] = y.getPropertyValue(b));
+        }), D[m] = S;
+      }), d.forEach((r, m) => {
+        O.css(r, D[m]);
+      });
+    }
+    const p = t.stylesheet;
+    if (typeof p == "string") {
+      const o = n.ownerDocument.implementation.createDocument(null, "xml", null).createCDATASection(p);
+      i.prepend(E.create("style", {
+        type: "text/css"
+      }, [o]));
+    }
+    const l = () => {
+      const o = t.beforeSerialize;
+      if (typeof o == "function") {
+        const d = N.call(o, this.graph, s);
+        d instanceof SVGSVGElement && (s = d);
+      }
+      const g = new XMLSerializer().serializeToString(s).replace(/&nbsp;/g, " ");
+      this.notify("after:export", t), e(g);
+    };
+    if (t.serializeImages) {
+      const o = i.find("image").map((g) => new Promise((d) => {
+        const u = g.attr("xlink:href") || g.attr("href");
+        G.imageToDataUri(u, (P, x) => {
+          !P && x && g.attr("xlink:href", x), d();
+        });
+      }));
+      Promise.all(o).then(l);
+    } else
+      l();
+  }
+  toDataURL(e, t) {
+    let n = t.viewBox || this.graph.getContentBBox();
+    const i = V.normalizeSides(t.padding);
+    t.width && t.height && (i.left + i.right >= t.width && (i.left = i.right = 0), i.top + i.bottom >= t.height && (i.top = i.bottom = 0));
+    const s = new C(-i.left, -i.top, i.left + i.right, i.top + i.bottom);
+    if (t.width && t.height) {
+      const l = n.width + i.left + i.right, o = n.height + i.top + i.bottom;
+      s.scale(l / t.width, o / t.height);
+    }
+    n = C.create(n).moveAndExpand(s);
+    const f = typeof t.width == "number" && typeof t.height == "number" ? { width: t.width, height: t.height } : n;
+    let c = t.ratio ? parseFloat(t.ratio) : 1;
+    (!Number.isFinite(c) || c === 0) && (c = 1);
+    const h = {
+      width: Math.max(Math.round(f.width * c), 1),
+      height: Math.max(Math.round(f.height * c), 1)
+    };
+    {
+      const l = document.createElement("canvas"), o = l.getContext("2d");
+      l.width = h.width, l.height = h.height;
+      const g = h.width - 1, d = h.height - 1;
+      o.fillStyle = "rgb(1,1,1)", o.fillRect(g, d, 1, 1);
+      const u = o.getImageData(g, d, 1, 1).data;
+      if (u[0] !== 1 || u[1] !== 1 || u[2] !== 1)
+        throw new Error("size exceeded");
+    }
+    const p = new Image();
+    p.onload = () => {
+      const l = document.createElement("canvas");
+      l.width = h.width, l.height = h.height;
+      const o = l.getContext("2d");
+      o.fillStyle = t.backgroundColor || "white", o.fillRect(0, 0, h.width, h.height);
+      try {
+        o.drawImage(p, 0, 0, h.width, h.height);
+        const g = l.toDataURL(t.type, t.quality);
+        e(g);
+      } catch {
+      }
+    }, this.toSVG((l) => {
+      p.src = `data:image/svg+xml,${encodeURIComponent(l)}`;
+    }, Object.assign(Object.assign({}, t), { viewBox: n, serializeImages: !0, preserveDimensions: Object.assign({}, h) }));
+  }
+  toPNG(e, t = {}) {
+    this.toDataURL(e, Object.assign(Object.assign({}, t), { type: "image/png" }));
+  }
+  toJPEG(e, t = {}) {
+    this.toDataURL(e, Object.assign(Object.assign({}, t), { type: "image/jpeg" }));
+  }
+  notify(e, t) {
+    this.trigger(e, t), this.graph.trigger(e, t);
+  }
+  dispose() {
+    this.off();
+  }
+}
+U([
+  j.dispose()
+], z.prototype, "dispose", null);
+export {
+  z as Export
+};