aldehyde 0.2.474 → 0.2.476

package/lib/draw-canvas-edit/components/main-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/aldehyde/draw-canvas-edit/components/main-header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAOzE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,SAAS,EAAuB,MAAM,iBAAiB,CAAC;AAEjE,OAAO,cAAc,CAAC;AA2BtB,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACzD,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,OAAO,eAAe,sBAoLzC,CAAA;AAED,eAAe,UAAU,CAAC"}

package/lib/{draw-canvas/edit → draw-canvas-edit}/components/main-header/index.js

@@ -9,7 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { Dropdown, Modal, Space, Button, Divider, Tooltip } from 'antd';
-import IconFont from "../../../../icon/aliIcon";
+import { ImportOutlined, ExportOutlined, SaveOutlined, QuestionCircleOutlined, MergeCellsOutlined, NumberOutlined } from '@ant-design/icons';
+import { gzipSync, strToU8 } from 'fflate';
+import { uint8ArrayToHex } from 'uint8array-extras';
+import HcserviceV3 from "../../../tmpl/hcservice-v3";
+import IconFont from "../../../icon/aliIcon";
 import * as Draws from '../render/draws';
 import './index.less';
 // 布局类型
@@ -35,7 +39,7 @@ const graphTypes = [
     { label: '圆', value: 'Circle', icon: 'icon-circle' },
 ];
 const MainHeader = (props) => {
-    const { render, graphType, onGraphTypeChange, onTexting, texting } = props;
+    const { render, graphType, onGraphTypeChange, onTexting, texting, recordCode, showGrid, setShowGrid, showAttract, setShowAttract } = props;
     const [scale, setScale] = useState(100); // 缩放
     const [history, setHistory] = useState([]); // 历史记录
     const [historyIndex, setHistoryIndex] = useState(-1); // 当前历史记录标签
@@ -64,18 +68,38 @@ const MainHeader = (props) => {
         };
         input.click();
     }, [render]);
+    // 保存
+    const handleSave = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!recordCode) {
+            return;
+        }
+        setLoading(true);
+        const data = render.importExportTool.save();
+        // 1. 将普通字符串转换为 Uint8Array
+        const dataBuffer = strToU8(data);
+        // 2. 压缩为 ByteArray
+        const content = gzipSync(dataBuffer, { level: 9 });
+        // 3. 将 Uint8Array 转为 16进制字符串
+        const hexString = uint8ArrayToHex(content);
+        yield HcserviceV3.postDiagram2DConfig(recordCode, hexString);
+        setLoading(false);
+    });
     // 数据导出
-    const handleSave = useCallback((type) => {
+    const handleExport = useCallback((type, action) => {
         if (!render)
             return;
-        const data = [];
         switch (type) {
             case 'json':
-                data.push({ name: 'data.json', content: render.importExportTool.save() });
-                break;
+                if (action === "save") {
+                    handleSave();
+                }
+                else {
+                    download("data.json", render.importExportTool.save());
+                }
+                return;
             case 'asset':
-                data.push({ name: 'asset.json', content: render.importExportTool.getAsset() });
-                break;
+                download("asset.json", render.importExportTool.getAsset());
+                return;
             case 'png':
                 download('image.png', render.importExportTool.getAssetImage(2));
                 return;
@@ -83,9 +107,6 @@ const MainHeader = (props) => {
                 download('image.png', render.importExportTool.getAssetImage());
                 return;
         }
-        if (data.length) {
-            data.forEach(({ name, content }) => download(name, content));
-        }
     }, [render]);
     // 下载辅助函数
     const download = (name, content) => {
@@ -129,8 +150,8 @@ const MainHeader = (props) => {
     const isSelects = useMemo(() => selection.length <= 1, [selection]);
     // 缩放菜单选项
     const scaleMenu = [
-        { key: "fit", label: React.createElement("a", { onClick: () => handleScale('fit') }, "\u81EA\u9002\u5E94\u5927\u5C0F") },
-        { key: "reset", label: React.createElement("a", { onClick: () => handleScale('reset') }, "\u91CD\u7F6E\u4F4D\u7F6E\u5927\u5C0F") },
+        { key: "fit", label: React.createElement("a", { onClick: () => handleScale('fit') }, "\u81EA\u9002\u5E94") },
+        { key: "reset", label: React.createElement("a", { onClick: () => handleScale('reset') }, "\u91CD\u7F6E\u4F4D\u7F6E\u53CA\u7F29\u653E") },
         { key: "position", label: React.createElement("a", { onClick: () => handleScale('position') }, "\u4EC5\u91CD\u7F6E\u4F4D\u7F6E") }
     ];
     return (React.createElement("div", { className: "main-header" },
@@ -152,9 +173,28 @@ const MainHeader = (props) => {
                     React.createElement(IconFont, { type: type.icon }))))),
             React.createElement(Tooltip, { title: "\u63D2\u5165\u6587\u5B57" },
                 React.createElement(Button, { type: "text", onClick: () => onTexting(true), className: texting ? "active" : "" },
-                    React.createElement(IconFont, { type: "icon-wenben" })))),
+                    React.createElement(IconFont, { type: "icon-wenben" }))),
+            React.createElement(Tooltip, { title: "\u7F51\u683C" },
+                React.createElement(Button, { type: "text", onClick: () => setShowGrid(!showGrid), className: showGrid ? "active" : "" },
+                    React.createElement(NumberOutlined, null))),
+            React.createElement(Tooltip, { title: "\u78C1\u5438" },
+                React.createElement(Button, { type: "text", onClick: () => setShowAttract(!showAttract), className: showAttract ? "active" : "" },
+                    React.createElement(MergeCellsOutlined, null)))),
+        React.createElement(Space, { size: 4, separator: React.createElement(Divider, { vertical: true, styles: { root: { margin: "0 4px" } } }) },
+            React.createElement(Tooltip, { title: "\u5FEB\u6377\u952E" },
+                React.createElement(Button, { type: "text", onClick: () => setShowShortCut(true) },
+                    React.createElement(QuestionCircleOutlined, null))),
+            React.createElement(Tooltip, { title: "\u5BFC\u5165" },
+                React.createElement(Button, { type: "text", onClick: handleRestore },
+                    React.createElement(ImportOutlined, null))),
+            React.createElement(Tooltip, { title: "\u5BFC\u51FA" },
+                React.createElement(Button, { type: "text", onClick: () => handleExport("json") },
+                    React.createElement(ExportOutlined, null))),
+            React.createElement(Tooltip, { title: "\u4FDD\u5B58" },
+                React.createElement(Button, { loading: loading, type: "text", onClick: () => handleExport("json", "save") },
+                    React.createElement(SaveOutlined, null)))),
         showShortCut &&
-            React.createElement(Modal, { title: "\u5FEB\u6377\u952E", open: showShortCut, onCancel: () => setShowShortCut(false) },
+            React.createElement(Modal, { title: "\u5FEB\u6377\u952E", width: 600, footer: null, open: showShortCut, onCancel: () => setShowShortCut(false) },
                 React.createElement("p", null, "1\u3001\u590D\u5236\u3001\u7C98\u8D34\u3001\u591A\u9009\u3001\u5168\u9009\u3001\u5220\u9664\u3001\u4E0A\u4E00\u6B65\u3001\u4E0B\u4E00\u6B65\u7B49\u5FEB\u6377\u952E\u4E0E\u4E00\u822C\u6587\u6863\u7F16\u8F91\u5668\u7C7B\u4F3C\uFF1B"),
                 React.createElement("p", null, "2\u3001\u653E\u5927\u7F29\u5C0F\uFF0C\u3010Win\u3011\u9F20\u6807\u4E0A\u6EDA\u52A8\u4E0B\u6EDA\u52A8\uFF0C\u3010Mac\u3011\u89E6\u63A7\u677F\u53CC\u6307\u653E\u5927\u3001\u7F29\u5C0F\uFF1B"),
                 React.createElement("p", null, "3\u3001\u753B\u5E03\u62D6\u52A8\uFF0C\u5728\u7A7A\u767D\u5904\uFF0C\u3010Win\u3011\u53F3\u952E\u6309\u4E0B\u79FB\u52A8\uFF0C\u3010Mac\u3011control + \u89E6\u63A7\u677F\u4E09\u6307\u79FB\u52A8\uFF1B"))));

package/lib/draw-canvas-edit/components/main-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/aldehyde/draw-canvas-edit/components/main-header/index.tsx"],"names":[],"mappings":"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"}

package/lib/draw-canvas-edit/components/render/draws/bg-draw.d.ts

@@ -0,0 +1,26 @@
+import Konva from 'konva';
+import { Draw, BaseDraw, Render } from '../types';
+export interface BgDrawOption {
+    size: number;
+    readonly?: boolean;
+    showGrid?: boolean;
+}
+export declare class BgDraw extends BaseDraw implements Draw {
+    static readonly name = "bg";
+    option: BgDrawOption;
+    private staticGroup;
+    private gridGroup;
+    private isStaticInitialized;
+    constructor(render: Render, layer: Konva.Layer, option: BgDrawOption);
+    updateOption(newOption: Partial<BgDrawOption>): void;
+    draw(): void;
+    /**
+     * 渲染静态元素（仅在初始化或配置改变时执行）
+     */
+    private renderStaticElements;
+    /**
+     * 渲染网格（每次拖拽/缩放时调用）
+     */
+    private renderGrid;
+}
+//# sourceMappingURL=bg-draw.d.ts.map

package/lib/draw-canvas-edit/components/render/draws/bg-draw.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bg-draw.d.ts","sourceRoot":"","sources":["../../../../../../../src/aldehyde/draw-canvas-edit/components/render/draws/bg-draw.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBAAa,MAAO,SAAQ,QAAS,YAAW,IAAI;IAElD,gBAAyB,IAAI,QAAQ;IACrC,MAAM,EAAE,YAAY,CAAC;IAGrB,OAAO,CAAC,WAAW,CAAc;IAEjC,OAAO,CAAC,SAAS,CAAc;IAE/B,OAAO,CAAC,mBAAmB,CAAkB;gBAEjC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY;IAsB7D,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC;IAK3C,IAAI;IAcb;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAoD5B;;OAEG;IACH,OAAO,CAAC,UAAU;CAwCnB"}

package/lib/draw-canvas-edit/components/render/draws/bg-draw.js

@@ -0,0 +1,135 @@
+import Konva from 'konva';
+import { BaseDraw } from '../types';
+export class BgDraw extends BaseDraw {
+    constructor(render, layer, option) {
+        super(render, layer);
+        // 标记静态元素是否需要重绘
+        this.isStaticInitialized = false;
+        this.option = option;
+        this.group.listening(false);
+        // 预先创建好两个独立的 Group
+        this.staticGroup = new Konva.Group({ name: 'bg-static', listening: false });
+        this.gridGroup = new Konva.Group({ name: 'bg-grid', listening: false });
+        // 注意添加顺序：静态在下，网格在上
+        this.group.add(this.staticGroup);
+        this.group.add(this.gridGroup);
+        // 监听页面配置变化，当配置改变时，重置静态层初始化状态
+        this.render.on('page-settings-change', () => {
+            this.isStaticInitialized = false;
+            // 触发整体重绘，让 draw 方法重新执行
+            this.draw();
+        });
+    }
+    // 更新配置项，触发重绘
+    updateOption(newOption) {
+        this.option = Object.assign(Object.assign({}, this.option), newOption);
+        this.draw();
+    }
+    draw() {
+        // 1. 如果静态元素未初始化，或者配置发生变化导致标记被重置，则重新绘制
+        if (!this.isStaticInitialized) {
+            this.renderStaticElements();
+            this.isStaticInitialized = true;
+        }
+        // 2. 仅重绘网格部分（拖拽/缩放时高频调用）
+        if (!this.option.readonly && this.option.showGrid) { // 只读页面不显示网格
+            this.renderGrid();
+        }
+        else { // 清除已渲染网格
+            this.gridGroup.destroyChildren();
+        }
+    }
+    /**
+     * 渲染静态元素（仅在初始化或配置改变时执行）
+     */
+    renderStaticElements() {
+        // 清除旧的静态元素
+        this.staticGroup.destroyChildren();
+        const { width, height, x, y } = this.render.getStageState();
+        const { pageWidth, pageHeight, background, backgroundImg } = this.render.getPageSettings();
+        // 背景层（填满整个 stage）
+        const bgRect = new Konva.Rect({
+            name: `${this.constructor.name}__background`,
+            x: this.render.toStageValue(-x + this.render.rulerSize),
+            y: this.render.toStageValue(-y + this.render.rulerSize),
+            width: this.render.toStageValue(width),
+            height: this.render.toStageValue(height),
+            listening: false,
+            fill: 'transparent'
+        });
+        // 画布边框
+        const canvas = new Konva.Rect({
+            name: this.constructor.name,
+            x: 0,
+            y: 0,
+            width: pageWidth,
+            height: pageHeight,
+            stroke: this.option.readonly ? "transparent" : 'rgba(255,0,0,0.3)',
+            strokeWidth: this.render.toStageValue(2),
+            listening: false,
+            dash: [this.render.toStageValue(6), this.render.toStageValue(6)],
+            fill: background || 'transparent',
+        });
+        this.staticGroup.add(bgRect);
+        this.staticGroup.add(canvas);
+        // 处理背景图（异步）
+        if (backgroundImg === null || backgroundImg === void 0 ? void 0 : backgroundImg.src) {
+            const img = new Image();
+            img.crossOrigin = 'anonymous'; // 如果图片在 CDN 上，必须加上此属性防止跨域问题
+            img.src = backgroundImg.src;
+            img.onload = () => {
+                canvas.fill(null);
+                canvas.fillPatternImage(img);
+                canvas.fillPatternRepeat('no-repeat');
+                // 让图片自适应填满矩形（等比缩放裁剪效果）
+                const scaleX = pageWidth / img.width;
+                const scaleY = pageHeight / img.height;
+                canvas.fillPatternScaleX(scaleX);
+                canvas.fillPatternScaleY(scaleY);
+            };
+        }
+    }
+    /**
+     * 渲染网格（每次拖拽/缩放时调用）
+     */
+    renderGrid() {
+        // 仅清空网格 Group，不影响静态层
+        this.gridGroup.destroyChildren();
+        const { width, height, x, y } = this.render.getStageState();
+        const cellSize = this.option.size;
+        const lenX = Math.ceil(this.render.toStageValue(width + this.render.rulerSize) / cellSize);
+        const lenY = Math.ceil(this.render.toStageValue(height + this.render.rulerSize) / cellSize);
+        const startX = -Math.ceil(this.render.toStageValue(x) / cellSize);
+        const startY = -Math.ceil(this.render.toStageValue(y) / cellSize);
+        const lines = [];
+        // 生成竖线
+        for (let i = startX; i < lenX + startX + 2; i++) {
+            lines.push(new Konva.Line({
+                points: [
+                    cellSize * i, this.render.toStageValue(-y + this.render.rulerSize),
+                    cellSize * i, this.render.toStageValue(height - y + this.render.rulerSize)
+                ],
+                stroke: '#ddd',
+                strokeWidth: this.render.toStageValue(1),
+                listening: false
+            }));
+        }
+        // 生成横线
+        for (let j = startY; j < lenY + startY + 2; j++) {
+            lines.push(new Konva.Line({
+                points: [
+                    this.render.toStageValue(-x + this.render.rulerSize), cellSize * j,
+                    this.render.toStageValue(width - x + this.render.rulerSize), cellSize * j
+                ],
+                stroke: '#ddd',
+                strokeWidth: this.render.toStageValue(1),
+                listening: false
+            }));
+        }
+        // 批量添加线条到网格 Group
+        this.gridGroup.add(...lines);
+    }
+}
+// @ts-ignore
+BgDraw.name = 'bg';
+//# sourceMappingURL=bg-draw.js.map

package/lib/draw-canvas-edit/components/render/draws/bg-draw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bg-draw.js","sourceRoot":"","sources":["../../../../../../../src/aldehyde/draw-canvas-edit/components/render/draws/bg-draw.ts"],"names":[],"mappings":"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"}

package/lib/draw-canvas-edit/components/render/draws/contextmenu-draw.d.ts

@@ -0,0 +1,26 @@
+import Konva from 'konva';
+import { BaseDraw, Draw, Render } from '../types';
+export interface ContextmenuDrawOption {
+}
+export declare class ContextmenuDraw extends BaseDraw implements Draw {
+    static readonly name = "contextmenu";
+    option: ContextmenuDrawOption;
+    state: {
+        target: Konva.Node | null;
+        menuIsMousedown: boolean;
+        lastPos: Konva.Vector2d | null;
+        right: boolean;
+    };
+    constructor(render: Render, layer: Konva.Layer, option: ContextmenuDrawOption);
+    draw(): void;
+    handlers: {
+        stage: {
+            mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap["mousedown"]>) => void;
+            mousemove: () => void;
+            mouseup: () => void;
+            contextmenu: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap["contextmenu"]>) => void;
+            wheel: () => void;
+        };
+    };
+}
+//# sourceMappingURL=contextmenu-draw.d.ts.map

package/lib/draw-canvas-edit/components/render/draws/contextmenu-draw.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextmenu-draw.d.ts","sourceRoot":"","sources":["../../../../../../../src/aldehyde/draw-canvas-edit/components/render/draws/contextmenu-draw.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAK/D,MAAM,WAAW,qBAAqB;CAAI;AAE1C,qBAAa,eAAgB,SAAQ,QAAS,YAAW,IAAI;IAE3D,gBAAyB,IAAI,iBAAiB;IAC9C,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,EAAE;QACL,MAAM,EAAE,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;QAC1B,eAAe,EAAE,OAAO,CAAC;QACzB,OAAO,EAAE,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;QAC/B,KAAK,EAAE,OAAO,CAAC;KAChB,CAAA;gBAEW,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,qBAAqB;IAMpE,IAAI;IA4Nb,QAAQ;;2BAEW,KAAK,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,WAAW,CAAC,CAAC;;;6BAwB9D,KAAK,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,aAAa,CAAC,CAAC;;;MAkCtF;CACF"}

package/lib/draw-canvas-edit/components/render/draws/contextmenu-draw.js

@@ -0,0 +1,293 @@
+import Konva from 'konva';
+import { BaseDraw, MouseButton } from '../types';
+import { LinkDraw } from '../draws';
+export class ContextmenuDraw extends BaseDraw {
+    constructor(render, layer, option) {
+        super(render, layer);
+        this.handlers = {
+            stage: {
+                mousedown: (e) => {
+                    this.state.lastPos = this.render.stage.getPointerPosition();
+                    if (e.evt.button === MouseButton.左键) {
+                        if (!this.state.menuIsMousedown) {
+                            // 没有按下菜单，清除菜单
+                            this.state.target = null;
+                            this.draw();
+                        }
+                    }
+                    else if (e.evt.button === MouseButton.右键 && !e.evt.ctrlKey) {
+                        // （判断 ctrlKey 为了排查 mac 拖动快捷键）
+                        // 右键按下
+                        this.state.right = true;
+                    }
+                },
+                mousemove: () => {
+                    if (this.state.target && this.state.right) {
+                        // 拖动画布时（右键），清除菜单
+                        this.state.target = null;
+                        this.draw();
+                    }
+                },
+                mouseup: () => {
+                    this.state.right = false;
+                },
+                contextmenu: (e) => {
+                    // （判断 ctrlKey 为了排查 mac 拖动快捷键）
+                    if (!e.evt.ctrlKey) {
+                        const pos = this.render.stage.getPointerPosition();
+                        if (pos && this.state.lastPos) {
+                            const linkGroup = this.render.layerCover.find(`.${LinkDraw.name}`)[0];
+                            // 右键目标可能为 连接线
+                            let lineSelection = null;
+                            if (linkGroup) {
+                                const linkLines = linkGroup.find('.link-line');
+                                for (const line of linkLines) {
+                                    if (Konva.Util.haveIntersection(Object.assign(Object.assign({}, pos), { width: 1, height: 1 }), line.getClientRect())) {
+                                        // 右键目标为 连接线
+                                        lineSelection = line;
+                                        break;
+                                    }
+                                }
+                            }
+                            if (pos.x === this.state.lastPos.x || pos.y === this.state.lastPos.y) {
+                                // 右键 连接线/其它目标
+                                this.state.target = lineSelection !== null && lineSelection !== void 0 ? lineSelection : e.target;
+                            }
+                            else {
+                                this.state.target = null;
+                            }
+                            this.draw();
+                        }
+                    }
+                },
+                wheel: () => {
+                    // 画布缩放时，清除菜单
+                    this.state.target = null;
+                    this.draw();
+                }
+            }
+        };
+        this.option = option;
+        this.state = { target: null, menuIsMousedown: false, lastPos: null, right: false };
+    }
+    draw() {
+        this.clear();
+        if (this.state.target) {
+            // 菜单数组
+            const menus = [];
+            if (this.state.target === this.render.stage) {
+                // 空白处
+                menus.push({
+                    name: '自适应大小',
+                    action: () => this.render.positionTool.positionFit()
+                });
+                menus.push({
+                    name: '恢复位置',
+                    action: () => this.render.positionTool.positionReset()
+                });
+                menus.push({
+                    name: '恢复大小位置',
+                    action: () => this.render.positionTool.positionZoomReset()
+                });
+            }
+            else if (!this.render.config.readonly) {
+                if (this.state.target.name() === 'link-line') {
+                    menus.push({
+                        name: '删除', // 删除连接线
+                        action: () => this.render.linkTool.remove(this.state.target)
+                    });
+                }
+                else {
+                    // 未选择：真实节点，即素材的容器 group
+                    // 已选择：transformer
+                    const target = this.state.target.parent;
+                    // 目标
+                    menus.push({
+                        name: '复制',
+                        action: () => {
+                            if (target) {
+                                this.render.copyTool.copy([target]);
+                            }
+                        }
+                    });
+                    menus.push({
+                        name: '删除',
+                        action: () => {
+                            if (target) {
+                                this.render.remove([target]);
+                            }
+                        }
+                    });
+                    menus.push({
+                        name: '上移',
+                        action: () => {
+                            if (target) {
+                                this.render.zIndexTool.up([target]);
+                            }
+                        }
+                    });
+                    menus.push({
+                        name: '下移',
+                        action: () => {
+                            if (target) {
+                                this.render.zIndexTool.down([target]);
+                            }
+                        }
+                    });
+                    menus.push({
+                        name: '置顶',
+                        action: () => {
+                            if (target) {
+                                this.render.zIndexTool.top([target]);
+                            }
+                        }
+                    });
+                    menus.push({
+                        name: '置底',
+                        action: () => {
+                            if (target) {
+                                this.render.zIndexTool.bottom([target]);
+                            }
+                        }
+                    });
+                    if (target instanceof Konva.Transformer) {
+                        const pos = this.render.stage.getPointerPosition();
+                        if (pos) {
+                            // 获取所有图形
+                            const shapes = target.nodes();
+                            if (shapes.length > 1) {
+                                // zIndex 倒序（大的优先）
+                                shapes.sort((a, b) => b.zIndex() - a.zIndex());
+                                // 提取重叠目标
+                                const selected = shapes.find((shape) => 
+                                // 关键 api
+                                Konva.Util.haveIntersection(Object.assign(Object.assign({}, pos), { width: 1, height: 1 }), shape.getClientRect()));
+                                // 对齐菜单
+                                menus.push({
+                                    name: '垂直居中' + (selected ? '于目标' : ''),
+                                    action: () => this.render.alignTool.align("Middle", selected)
+                                });
+                                menus.push({
+                                    name: '左对齐' + (selected ? '于目标' : ''),
+                                    action: () => this.render.alignTool.align("Left", selected)
+                                });
+                                menus.push({
+                                    name: '右对齐' + (selected ? '于目标' : ''),
+                                    action: () => this.render.alignTool.align("Right", selected)
+                                });
+                                menus.push({
+                                    name: '水平居中' + (selected ? '于目标' : ''),
+                                    action: () => this.render.alignTool.align("Center", selected)
+                                });
+                                menus.push({
+                                    name: '上对齐' + (selected ? '于目标' : ''),
+                                    action: () => this.render.alignTool.align("Top", selected)
+                                });
+                                menus.push({
+                                    name: '下对齐' + (selected ? '于目标' : ''),
+                                    action: () => this.render.alignTool.align("Bottom", selected)
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+            // stage 状态
+            const stageState = this.render.getStageState();
+            // 绘制右键菜单
+            const group = new Konva.Group({
+                name: 'contextmenu',
+                width: stageState.width,
+                height: stageState.height
+            });
+            let top = 0;
+            // 菜单每项高度
+            const lineHeight = 30;
+            const pos = this.render.stage.getPointerPosition();
+            if (pos) {
+                for (const menu of menus) {
+                    // 框
+                    const rect = new Konva.Rect({
+                        x: this.render.toStageValue(pos.x - stageState.x),
+                        y: this.render.toStageValue(pos.y + top - stageState.y),
+                        width: this.render.toStageValue(150),
+                        height: this.render.toStageValue(lineHeight),
+                        fill: '#fff',
+                        stroke: '#999',
+                        strokeWidth: this.render.toStageValue(1),
+                        name: 'contextmenu'
+                    });
+                    // 标题
+                    const text = new Konva.Text({
+                        x: this.render.toStageValue(pos.x - stageState.x),
+                        y: this.render.toStageValue(pos.y + top - stageState.y),
+                        text: menu.name,
+                        name: 'contextmenu',
+                        listening: false,
+                        fontSize: this.render.toStageValue(16),
+                        fill: '#333',
+                        width: this.render.toStageValue(150),
+                        height: this.render.toStageValue(lineHeight),
+                        align: 'center',
+                        verticalAlign: 'middle'
+                    });
+                    group.add(rect);
+                    group.add(text);
+                    // 菜单事件
+                    rect.on('pointerclick', (e) => {
+                        if (e.evt.button === MouseButton.左键) {
+                            // 触发事件
+                            menu.action(e);
+                            // 移除菜单
+                            this.group.getChildren().forEach((o) => {
+                                o.destroy();
+                            });
+                            this.group.removeChildren();
+                            this.state.target = null;
+                        }
+                        e.evt.preventDefault();
+                        e.evt.stopPropagation();
+                    });
+                    rect.on('mousedown', (e) => {
+                        if (e.evt.button === MouseButton.左键) {
+                            this.state.menuIsMousedown = true;
+                            // 按下效果
+                            rect.fill('#dfdfdf');
+                        }
+                        e.evt.preventDefault();
+                        e.evt.stopPropagation();
+                    });
+                    rect.on('mouseup', (e) => {
+                        if (e.evt.button === MouseButton.左键) {
+                            this.state.menuIsMousedown = false;
+                        }
+                    });
+                    rect.on('mouseenter', (e) => {
+                        if (this.state.menuIsMousedown) {
+                            rect.fill('#dfdfdf');
+                        }
+                        else {
+                            // hover in
+                            rect.fill('#efefef');
+                        }
+                        e.evt.preventDefault();
+                        e.evt.stopPropagation();
+                    });
+                    rect.on('mouseout', () => {
+                        // hover out
+                        rect.fill('#fff');
+                    });
+                    rect.on('contextmenu', (e) => {
+                        e.evt.preventDefault();
+                        e.evt.stopPropagation();
+                    });
+                    top += lineHeight - 1;
+                }
+            }
+            this.group.add(group);
+        }
+    }
+}
+// @ts-ignore
+ContextmenuDraw.name = 'contextmenu';
+//# sourceMappingURL=contextmenu-draw.js.map