aldehyde 0.2.473 → 0.2.474

package/lib/draw-canvas/edit/components/render/index.js

@@ -0,0 +1,686 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import * as _ from 'lodash';
+import Konva from 'konva';
+import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw, RefLineDraw, BgDraw, ContextmenuDraw } from './draws';
+import { AssetType, ImageType } from './types';
+import { DragHandlers, ZoomHandlers, DragOutsideHandlers, SelectionHandlers, KeyMoveHandlers, ShutcutHandlers, LinkHandlers, GraphHandlers, TextHandlers } from './handlers';
+import { AssetTool, SelectionTool, CopyTool, PositionTool, ZIndexTool, ImportExportTool, AlignTool, LinkTool, AttractTool } from './tools';
+// 简单的事件系统替代 mitt
+class SimpleEventEmitter {
+    constructor() {
+        this.listeners = new Map();
+    }
+    on(event, handler) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        this.listeners.get(event).add(handler);
+        return () => this.off(event, handler);
+    }
+    off(event, handler) {
+        var _a;
+        (_a = this.listeners.get(event)) === null || _a === void 0 ? void 0 : _a.delete(handler);
+    }
+    emit(event, ...args) {
+        var _a;
+        (_a = this.listeners.get(event)) === null || _a === void 0 ? void 0 : _a.forEach(handler => handler(...args));
+    }
+}
+// 渲染器
+export class Render {
+    constructor(stageEle, config) {
+        this.layer = new Konva.Layer({ id: 'main' }); // 主要层
+        this.layerFloor = new Konva.Layer(); // 辅助层 - 背景
+        this.layerCover = new Konva.Layer({ id: 'cover' }); // 辅助层 - 连接线、对齐线
+        this.draws = {}; // 附加工具
+        this.groupTransformer = new Konva.Group(); // 多选器层
+        // 多选器
+        this.transformer = new Konva.Transformer({
+            shouldOverdrawWholeArea: true,
+            borderDash: [4, 4],
+            padding: 1,
+            rotationSnaps: [0, 45, 90, 135, 180, 225, 270, 315, 360],
+            flipEnabled: false
+        });
+        // 选择框
+        this.selectRect = new Konva.Rect({
+            id: 'selectRect',
+            fill: 'rgba(0,0,255,0.1)',
+            visible: false
+        });
+        // 事件处理
+        this.handlers = {};
+        // 参数
+        this.bgSize = 20;
+        this.rulerSize = 0;
+        this.previewSize = 0.2; // 预览框大小（比例）
+        this.pointSize = 6;
+        this.history = [];
+        this.historyIndex = -1;
+        this.graphType = undefined; // 画图类型
+        this.texting = false; // 添加文字中
+        // 事件发射器（替代 mitt）
+        this.emitter = new SimpleEventEmitter();
+        this.config = config;
+        // 绑定事件方法
+        this.on = this.emitter.on.bind(this.emitter);
+        this.off = this.emitter.off.bind(this.emitter);
+        this.emit = this.emitter.emit.bind(this.emitter);
+        if (this.config.showRuler) {
+            this.rulerSize = 40;
+        }
+        this.stage = new Konva.Stage({
+            container: stageEle,
+            x: this.rulerSize,
+            y: this.rulerSize,
+            width: config.width,
+            height: config.height
+        });
+        // 辅助层 - 顶层
+        this.groupTransformer.add(this.transformer);
+        this.groupTransformer.add(this.selectRect);
+        this.layerCover.add(this.groupTransformer);
+        // 附加工具
+        if (!this.config.readonly && this.config.showBg) {
+            this.draws[BgDraw.name] = new BgDraw(this, this.layerFloor, {
+                size: this.bgSize
+            });
+        }
+        this.draws[LinkDraw.name] = new LinkDraw(this, this.layerCover, {
+            size: this.pointSize
+        });
+        if (!this.config.readonly && this.config.showRuler) {
+            this.draws[RulerDraw.name] = new RulerDraw(this, this.layerCover, {
+                size: this.rulerSize
+            });
+        }
+        if (!this.config.readonly && this.config.showRefLine) {
+            this.draws[RefLineDraw.name] = new RefLineDraw(this, this.layerCover, {
+                padding: this.rulerSize
+            });
+        }
+        if (this.config.showContextmenu) {
+            this.draws[ContextmenuDraw.name] = new ContextmenuDraw(this, this.layerCover, {});
+        }
+        if (!this.config.readonly && this.config.showPreview) {
+            this.draws[PreviewDraw.name] = new PreviewDraw(this, this.layerCover, {
+                size: this.previewSize
+            });
+        }
+        this.draws[GraphDraw.name] = new GraphDraw(this, this.layerCover, {});
+        this.assetTool = new AssetTool(this); // 素材工具
+        this.selectionTool = new SelectionTool(this); // 选择工具
+        this.copyTool = new CopyTool(this); // 复制工具
+        this.positionTool = new PositionTool(this); // 定位工具 
+        this.zIndexTool = new ZIndexTool(this); // 定位工具
+        this.importExportTool = new ImportExportTool(this); // 导入导出
+        this.alignTool = new AlignTool(this); // 对齐工具
+        this.linkTool = new LinkTool(this); // 对齐工具
+        this.attractTool = new AttractTool(this); // 磁贴工具
+        // 事件处理
+        this.handlers[DragHandlers.name] = new DragHandlers(this);
+        this.handlers[ZoomHandlers.name] = new ZoomHandlers(this);
+        if (!this.config.readonly) {
+            this.handlers[DragOutsideHandlers.name] = new DragOutsideHandlers(this);
+            this.handlers[SelectionHandlers.name] = new SelectionHandlers(this);
+            this.handlers[KeyMoveHandlers.name] = new KeyMoveHandlers(this);
+            this.handlers[LinkHandlers.name] = new LinkHandlers(this);
+            this.handlers[GraphHandlers.name] = new GraphHandlers(this);
+            this.handlers[TextHandlers.name] = new TextHandlers(this);
+        }
+        if (!this.config.readonly && this.config.showRefLine) {
+            if (this.draws[RefLineDraw.name] !== void 0) {
+                this.handlers[RefLineDraw.name] = this.draws[RefLineDraw.name];
+            }
+        }
+        this.handlers[ShutcutHandlers.name] = new ShutcutHandlers(this);
+        // 初始化
+        this.init();
+    }
+    // 初始化
+    init() {
+        var _a, _b, _c, _d, _e, _f;
+        this.stage.add(this.layerFloor);
+        (_a = this.draws[BgDraw.name]) === null || _a === void 0 ? void 0 : _a.init();
+        this.stage.add(this.layer);
+        this.stage.add(this.layerCover);
+        (_b = this.draws[LinkDraw.name]) === null || _b === void 0 ? void 0 : _b.init();
+        (_c = this.draws[RulerDraw.name]) === null || _c === void 0 ? void 0 : _c.init();
+        (_d = this.draws[RefLineDraw.name]) === null || _d === void 0 ? void 0 : _d.init();
+        (_e = this.draws[ContextmenuDraw.name]) === null || _e === void 0 ? void 0 : _e.init();
+        (_f = this.draws[PreviewDraw.name]) === null || _f === void 0 ? void 0 : _f.init();
+        // 事件绑定
+        this.eventBind();
+        // 更新历史
+        this.updateHistory();
+    }
+    // 更新 stage 尺寸
+    resize(width, height) {
+        this.stage.setAttrs({
+            width: width,
+            height: height
+        });
+        // 重绘
+        this.redraw();
+    }
+    // 移除元素
+    remove(nodes) {
+        for (const node of nodes) {
+            if (node instanceof Konva.Transformer) {
+                // 移除已选择的节点
+                this.remove(this.selectionTool.selectingNodes);
+            }
+            else {
+                // 移除相关联系线信息
+                const groupId = node.id();
+                for (const rn of this.layer.getChildren()) {
+                    if (rn.id() !== groupId && Array.isArray(rn.attrs.points)) {
+                        for (const point of rn.attrs.points) {
+                            if (Array.isArray(point.pairs)) {
+                                // 移除拐点记录
+                                if (rn.attrs.manualPointsMap) {
+                                    point.pairs
+                                        .filter((pair) => pair.from.groupId === groupId || pair.to.groupId === groupId)
+                                        .forEach((pair) => {
+                                        rn.attrs.manualPointsMap[pair.id] = undefined;
+                                    });
+                                }
+                                // 连接线信息
+                                point.pairs = point.pairs.filter((pair) => pair.from.groupId !== groupId && pair.to.groupId !== groupId);
+                            }
+                        }
+                        rn.setAttrs({ points: rn.attrs.points });
+                    }
+                }
+                // 移除未选择的节点
+                node.destroy();
+            }
+        }
+        if (nodes.length > 0) {
+            // 清除选择
+            this.selectionTool.selectingClear();
+            this.linkTool.selectingClear();
+            // 更新历史
+            this.updateHistory();
+            // 重绘
+            this.redraw();
+        }
+    }
+    // 撤销
+    prevHistory() {
+        const record = this.history[this.historyIndex - 1];
+        if (record) {
+            this.importExportTool.restore(record, true);
+            this.historyIndex--;
+            // 历史变化事件
+            this.emit('history-change', {
+                records: _.clone(this.history),
+                index: this.historyIndex
+            });
+        }
+    }
+    // 恢复
+    nextHistory() {
+        const record = this.history[this.historyIndex + 1];
+        if (record) {
+            this.importExportTool.restore(record, true);
+            this.historyIndex++;
+            // 历史变化事件
+            this.emit('history-change', {
+                records: _.clone(this.history),
+                index: this.historyIndex
+            });
+        }
+    }
+    updateHistory() {
+        this.history.splice(this.historyIndex + 1);
+        this.history.push(this.importExportTool.save());
+        this.historyIndex = this.history.length - 1;
+        // 历史变化事件
+        this.emit('history-change', {
+            records: _.clone(this.history),
+            index: this.historyIndex
+        });
+    }
+    // 事件绑定
+    eventBind() {
+        var _a, _b;
+        for (const event of [
+            'mousedown',
+            'mouseup',
+            'mousemove',
+            'wheel',
+            'contextmenu',
+            'pointerclick'
+        ]) {
+            this.stage.on(event, (e) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                (_a = e === null || e === void 0 ? void 0 : e.evt) === null || _a === void 0 ? void 0 : _a.preventDefault();
+                for (const k in this.draws) {
+                    (_e = (_d = (_c = (_b = this.draws[k]) === null || _b === void 0 ? void 0 : _b.handlers) === null || _c === void 0 ? void 0 : _c.stage) === null || _d === void 0 ? void 0 : _d[event]) === null || _e === void 0 ? void 0 : _e.call(_d, e);
+                }
+                for (const k in this.handlers) {
+                    (_j = (_h = (_g = (_f = this.handlers[k]) === null || _f === void 0 ? void 0 : _f.handlers) === null || _g === void 0 ? void 0 : _g.stage) === null || _h === void 0 ? void 0 : _h[event]) === null || _j === void 0 ? void 0 : _j.call(_h, e);
+                }
+            });
+        }
+        const container = this.stage.container();
+        container.tabIndex = 1;
+        container.focus();
+        for (const event of [
+            'mouseenter',
+            'dragenter',
+            'mousemove',
+            'mouseout',
+            'dragenter',
+            'dragover',
+            'drop',
+            'keydown',
+            'keyup'
+        ]) {
+            container.addEventListener(event, (e) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                e === null || e === void 0 ? void 0 : e.preventDefault();
+                if (['mouseenter', 'dragenter'].includes(event)) {
+                    // 激活 dom 事件
+                    this.stage.container().focus();
+                }
+                for (const k in this.draws) {
+                    (_d = (_c = (_b = (_a = this.draws[k]) === null || _a === void 0 ? void 0 : _a.handlers) === null || _b === void 0 ? void 0 : _b.dom) === null || _c === void 0 ? void 0 : _c[event]) === null || _d === void 0 ? void 0 : _d.call(_c, e);
+                }
+                for (const k in this.handlers) {
+                    (_h = (_g = (_f = (_e = this.handlers[k]) === null || _e === void 0 ? void 0 : _e.handlers) === null || _f === void 0 ? void 0 : _f.dom) === null || _g === void 0 ? void 0 : _g[event]) === null || _h === void 0 ? void 0 : _h.call(_g, e);
+                }
+            });
+        }
+        for (const event of [
+            'mousedown',
+            'transformstart',
+            'transform',
+            'transformend',
+            'dragstart',
+            'dragmove',
+            'dragend',
+            'mousemove',
+            'mouseleave',
+            'dblclick'
+        ]) {
+            this.transformer.on(event, (e) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                (_a = e === null || e === void 0 ? void 0 : e.evt) === null || _a === void 0 ? void 0 : _a.preventDefault();
+                for (const k in this.draws) {
+                    (_e = (_d = (_c = (_b = this.draws[k]) === null || _b === void 0 ? void 0 : _b.handlers) === null || _c === void 0 ? void 0 : _c.transformer) === null || _d === void 0 ? void 0 : _d[event]) === null || _e === void 0 ? void 0 : _e.call(_d, e);
+                }
+                for (const k in this.handlers) {
+                    (_j = (_h = (_g = (_f = this.handlers[k]) === null || _f === void 0 ? void 0 : _f.handlers) === null || _g === void 0 ? void 0 : _g.transformer) === null || _h === void 0 ? void 0 : _h[event]) === null || _j === void 0 ? void 0 : _j.call(_h, e);
+                }
+            });
+        }
+        ((_b = (_a = this.handlers[SelectionHandlers.name]) === null || _a === void 0 ? void 0 : _a.transformerConfig) === null || _b === void 0 ? void 0 : _b.anchorDragBoundFunc) &&
+            this.transformer.anchorDragBoundFunc(this.handlers[SelectionHandlers.name].transformerConfig.anchorDragBoundFunc);
+    }
+    // 获取 stage 状态
+    getStageState() {
+        return {
+            width: this.stage.width() - this.rulerSize,
+            height: this.stage.height() - this.rulerSize,
+            scale: this.stage.scaleX(),
+            x: this.stage.x(),
+            y: this.stage.y()
+        };
+    }
+    // 相对大小（基于 stage，且无视 scale）
+    toStageValue(boardPos) {
+        return boardPos / this.stage.scaleX();
+    }
+    // 绝对大小（基于可视区域像素）
+    toBoardValue(stagePos) {
+        return stagePos * this.stage.scaleX();
+    }
+    // 忽略非素材
+    ignore(node) {
+        // 素材有各自根 group
+        const isGroup = node instanceof Konva.Group;
+        return !isGroup || this.ignoreSelect(node) || this.ignoreDraw(node) || this.ignoreLink(node);
+    }
+    // 忽略 选择时 辅助元素
+    ignoreSelect(node) {
+        return node.id() === 'selectRect' || node.id() === 'hoverRect';
+    }
+    // 忽略各 draw 的根 group
+    ignoreDraw(node) {
+        return [BgDraw.name, RulerDraw.name, RefLineDraw.name, ContextmenuDraw.name, PreviewDraw.name, LinkDraw.name, GraphDraw.name].includes(node.name());
+    }
+    // 忽略各 draw 的根 group
+    ignoreLink(node) {
+        return ["link-anchor", "linking-line", "link-point", "link-line", "link-manual-point"].includes(node.name());
+    }
+    // 重绘（可选择）
+    redraw(drawNames) {
+        var _a, _b;
+        const all = [
+            // layerFloor
+            BgDraw.name, // 更新背景
+            // layerCover（按先后顺序）
+            GraphDraw.name, // 更新图形调整点
+            LinkDraw.name, // 更新连线
+            RulerDraw.name, // 更新比例尺
+            RefLineDraw.name, // 更新参考线
+            PreviewDraw.name, // 更新预览
+            ContextmenuDraw.name // 更新右键菜单
+        ];
+        // 可以以此发现缺失的 draw
+        // console.log('redraw', drawNames)
+        if (Array.isArray(drawNames)) {
+            // 选择性 draw 也要保持顺序
+            for (const name of all) {
+                if (drawNames.includes(name)) {
+                    (_a = this.draws[name]) === null || _a === void 0 ? void 0 : _a.draw();
+                }
+            }
+        }
+        else {
+            for (const name of all) {
+                (_b = this.draws[name]) === null || _b === void 0 ? void 0 : _b.draw();
+            }
+        }
+    }
+    changeDraggable(disabled) {
+        this.layer.children.forEach((asset) => {
+            asset.draggable(disabled);
+        });
+    }
+    // 改变画图类型
+    changeGraphType(type) {
+        if (type) {
+            this.texting = false;
+            this.emit('texting-change', this.texting);
+        }
+        this.graphType = type;
+        this.emit('graph-type-change', this.graphType);
+        // 绘制 Graph 的时候，不允许直接拖动其他素材
+        this.changeDraggable(!this.config.readonly && this.graphType === void 0);
+    }
+    // 添加文字状态
+    changeTexting(texting) {
+        if (texting) {
+            this.graphType = undefined;
+            this.emit('graph-type-change', this.graphType);
+        }
+        this.texting = texting;
+        this.emit('texting-change', this.texting);
+        document.body.style.cursor = this.texting ? 'text' : 'default';
+    }
+    // 获取页面设置
+    getPageSettings() {
+        var _a;
+        return (_a = this.stage.attrs.pageSettings) !== null && _a !== void 0 ? _a : Object.assign({}, Render.PageSettingsDefault);
+    }
+    // 更新页面设置
+    setPageSettings(settings, update = false) {
+        this.stage.setAttr('pageSettings', settings);
+        // 更新背景
+        this.updateBackground();
+        if (update) {
+            // 更新历史
+            this.updateHistory();
+        }
+    }
+    // 获取背景
+    getBackground() {
+        var _a;
+        return (_a = this.draws[BgDraw.name]) === null || _a === void 0 ? void 0 : _a.layer.findOne(`.${BgDraw.name}__background`);
+    }
+    // 更新背景
+    updateBackground() {
+        var _a, _b, _c, _d, _e;
+        const background = this.getBackground();
+        if (background) {
+            background.fill((_a = this.getPageSettings().background) !== null && _a !== void 0 ? _a : 'transparent');
+        }
+        (_b = this.draws[BgDraw.name]) === null || _b === void 0 ? void 0 : _b.draw();
+        (_c = this.draws[GraphDraw.name]) === null || _c === void 0 ? void 0 : _c.draw();
+        (_d = this.draws[LinkDraw.name]) === null || _d === void 0 ? void 0 : _d.draw();
+        (_e = this.draws[PreviewDraw.name]) === null || _e === void 0 ? void 0 : _e.draw();
+    }
+    // 获取素材设置
+    getAssetSettings(asset) {
+        var _a, _b, _c, _d;
+        const base = (_a = asset === null || asset === void 0 ? void 0 : asset.attrs.assetSettings) !== null && _a !== void 0 ? _a : Object.assign({}, Render.AssetSettingsDefault);
+        return Object.assign(Object.assign({}, base), { 
+            // 继承全局
+            stroke: base.stroke || this.getPageSettings().stroke, strokeWidth: base.strokeWidth || this.getPageSettings().strokeWidth, fontSize: base.fontSize || this.getPageSettings().fontSize, textFill: base.textFill || this.getPageSettings().textFill, 
+            // 绘制图形，默认不填充
+            fill: base.fill ||
+                ((asset === null || asset === void 0 ? void 0 : asset.attrs.assetType) === AssetType.Graph
+                    ? 'transparent'
+                    : this.getPageSettings().fill), x: parseFloat(((_b = asset === null || asset === void 0 ? void 0 : asset.position().x) !== null && _b !== void 0 ? _b : 0).toFixed(1)), y: parseFloat(((_c = asset === null || asset === void 0 ? void 0 : asset.position().y) !== null && _c !== void 0 ? _c : 0).toFixed(1)), rotation: parseFloat(((_d = asset === null || asset === void 0 ? void 0 : asset.rotation()) !== null && _d !== void 0 ? _d : 0).toFixed(1)), tension: (asset === null || asset === void 0 ? void 0 : asset.attrs.assetType) === AssetType.Graph &&
+                (asset === null || asset === void 0 ? void 0 : asset.attrs.graphType) === "Curve"
+                ? base.tension
+                : undefined });
+    }
+    // 设置 svgXML 样式（部分）
+    setSvgXMLSettings(xml, settings) {
+        const reg = /<(circle|ellipse|line|path|polygon|rect|text|textPath|tref|tspan)[^>/]*\/?>/g;
+        const shapes = xml.match(reg);
+        const regStroke = / stroke="([^"]*)"/;
+        const regFill = / fill="([^"]*)"/;
+        for (const shape of shapes !== null && shapes !== void 0 ? shapes : []) {
+            let result = shape;
+            if (settings.stroke) {
+                if (regStroke.test(shape)) {
+                    result = result.replace(regStroke, ` stroke="${settings.stroke}"`);
+                }
+                else {
+                    result = result.replace(/(<[^>/]*)(\/?>)/, `$1 stroke="${settings.stroke}" $2`);
+                }
+            }
+            if (settings.fill) {
+                if (regFill.test(shape)) {
+                    result = result.replace(regFill, ` fill="${settings.fill}"`);
+                }
+                else {
+                    result = result.replace(/(<[^>/]*)(\/?>)/, `$1 fill="${settings.fill}" $2`);
+                }
+            }
+            xml = xml.replace(shape, result);
+        }
+        return xml;
+    }
+    rotatePoint({ x, y }, rad) {
+        const rCos = Math.cos(rad);
+        const rSin = Math.sin(rad);
+        return { x: x * rCos - y * rSin, y: y * rCos + x * rSin };
+    }
+    rotateAroundCenter(node, rotation) {
+        const topLeft = { x: -node.width() / 2, y: -node.height() / 2 };
+        const current = this.rotatePoint(topLeft, Konva.getAngle(node.rotation()));
+        const rotated = this.rotatePoint(topLeft, Konva.getAngle(rotation));
+        const dx = rotated.x - current.x;
+        const dy = rotated.y - current.y;
+        node.rotation(rotation);
+        node.x(node.x() + dx);
+        node.y(node.y() + dy);
+    }
+    // 更新素材设置
+    setAssetSettings(asset_1, settings_1) {
+        return __awaiter(this, arguments, void 0, function* (asset, settings, update = false) {
+            var _a, _b, _c, _d, _e;
+            asset.setAttr('assetSettings', settings);
+            if (asset instanceof Konva.Group) {
+                if (asset.attrs.imageType === ImageType.svg) {
+                    const node = asset.children[0];
+                    if (node instanceof Konva.Image) {
+                        if (node.attrs.svgXML) {
+                            const n = yield this.assetTool.loadSvgXML(this.setSvgXMLSettings(node.attrs.svgXML, settings));
+                            (_a = node.parent) === null || _a === void 0 ? void 0 : _a.add(n);
+                            node.remove();
+                            node.destroy();
+                            n.zIndex(0);
+                        }
+                    }
+                }
+                else if (asset.attrs.assetType === AssetType.Graph) {
+                    const node = asset.findOne('.graph');
+                    if (node instanceof Konva.Shape) {
+                        node.strokeWidth(settings.strokeWidth);
+                        node.stroke(settings.stroke);
+                        if (node instanceof Konva.Arrow) {
+                            // 箭头跟随 stroke
+                            node.fill(settings.stroke);
+                        }
+                        else {
+                            node.fill(settings.fill);
+                        }
+                        if (node instanceof Konva.Arrow) {
+                            node.pointerAtBeginning(settings.arrowStart);
+                            node.pointerAtEnding(settings.arrowEnd);
+                        }
+                        if (node instanceof Konva.Arrow && asset.attrs.graphType === "Curve") {
+                            node.tension(settings.tension);
+                        }
+                    }
+                }
+                else if (asset.attrs.assetType === AssetType.Text) {
+                    const node = asset.findOne('Text');
+                    const rect = asset.findOne('Rect');
+                    if (node instanceof Konva.Text && rect instanceof Konva.Rect) {
+                        let sizeChanged = false;
+                        if (node.fontSize() !== settings.fontSize || node.text() !== settings.text) {
+                            sizeChanged = true;
+                        }
+                        node.fill(settings.textFill);
+                        node.fontSize(settings.fontSize);
+                        node.text(settings.text);
+                        // 内容为空时，给一个半透明背景色
+                        rect.fill(node.text().trim() ? '' : 'rgba(0,0,0,0.1)');
+                        rect.width(Math.max(node.width(), settings.fontSize));
+                        rect.height(Math.max(node.height(), settings.fontSize));
+                        // 刷新 transformer 大小
+                        if (sizeChanged) {
+                            this.selectionTool.select([asset]);
+                        }
+                    }
+                }
+                // rotate 会影响 position，不能同时改变
+                // 区分属性面板正在调整
+                if (Math.abs(settings.rotation - asset.rotation()) >= 0.1) {
+                    this.rotateAroundCenter(asset, settings.rotation);
+                    // 同步 position 的变化
+                    this.emit('asset-position-change', [asset]);
+                }
+                else {
+                    const prevSettings = this.getAssetSettings(asset);
+                    asset.position({
+                        x: parseFloat(settings.x.toFixed(1)),
+                        y: parseFloat(settings.y.toFixed(1))
+                    });
+                    // 外部调用变化同步
+                    if (settings.x !== prevSettings.x || settings.y !== prevSettings.y) {
+                        this.emit('asset-position-change', [asset]);
+                    }
+                }
+            }
+            if (update) {
+                // 更新历史
+                this.updateHistory();
+            }
+            (_b = this.draws[BgDraw.name]) === null || _b === void 0 ? void 0 : _b.draw();
+            (_c = this.draws[GraphDraw.name]) === null || _c === void 0 ? void 0 : _c.draw();
+            (_d = this.draws[LinkDraw.name]) === null || _d === void 0 ? void 0 : _d.draw();
+            (_e = this.draws[PreviewDraw.name]) === null || _e === void 0 ? void 0 : _e.draw();
+        });
+    }
+    // 连接线设置
+    setLinkSettings(link_1, settings_1) {
+        return __awaiter(this, arguments, void 0, function* (link, settings, update = false) {
+            var _a, _b, _c, _d, _e;
+            const group = this.layer.findOne(`#${link.attrs.groupId}`);
+            if (Array.isArray(group === null || group === void 0 ? void 0 : group.attrs.points)) {
+                const point = (group === null || group === void 0 ? void 0 : group.attrs.points).find((o) => o.id === link.attrs.pointId);
+                if (point) {
+                    const pair = point.pairs.find((o) => o.id === link.attrs.pairId);
+                    if (pair) {
+                        pair.style = Object.assign(Object.assign(Object.assign({}, pair.style), settings), { strokeWidth: Number((_a = settings.strokeWidth) !== null && _a !== void 0 ? _a : pair.style.strokeWidth) });
+                        group.setAttr('points', group === null || group === void 0 ? void 0 : group.attrs.points);
+                    }
+                }
+            }
+            if (update) {
+                // 更新历史
+                this.updateHistory();
+            }
+            (_b = this.draws[BgDraw.name]) === null || _b === void 0 ? void 0 : _b.draw();
+            (_c = this.draws[GraphDraw.name]) === null || _c === void 0 ? void 0 : _c.draw();
+            (_d = this.draws[LinkDraw.name]) === null || _d === void 0 ? void 0 : _d.draw();
+            (_e = this.draws[PreviewDraw.name]) === null || _e === void 0 ? void 0 : _e.draw();
+        });
+    }
+    // 获取连接线设置
+    getLinkSettings(link) {
+        let settings = undefined;
+        if (link) {
+            const group = this.layer.findOne(`#${link.attrs.groupId}`);
+            if (Array.isArray(group === null || group === void 0 ? void 0 : group.attrs.points)) {
+                const point = (group === null || group === void 0 ? void 0 : group.attrs.points).find((o) => o.id === link.attrs.pointId);
+                if (point) {
+                    const pair = point.pairs.find((o) => o.id === link.attrs.pairId);
+                    if (pair) {
+                        settings = pair.style;
+                    }
+                }
+            }
+        }
+        const base = settings !== null && settings !== void 0 ? settings : Object.assign({}, Render.LinkSettingsDefault);
+        return Object.assign(Object.assign({}, base), { 
+            // 继承全局
+            stroke: base.stroke || this.getPageSettings().linkStroke, strokeWidth: base.strokeWidth || this.getPageSettings().linkStrokeWidth });
+    }
+}
+// 页面设置 默认值
+Render.PageSettingsDefault = {
+    // 画布默认尺寸
+    pageWidth: 1280,
+    pageHeight: 720,
+    // 样式默认值
+    background: undefined,
+    stroke: 'rgb(0,0,0)',
+    strokeWidth: 1,
+    fill: 'rgb(0,0,0)',
+    linkStroke: 'rgb(0,0,0)',
+    linkStrokeWidth: 1,
+    fontSize: 24,
+    textFill: 'rgb(0,0,0)'
+};
+// 素材设置 默认值
+Render.AssetSettingsDefault = {
+    stroke: '',
+    strokeWidth: 0,
+    fill: '',
+    arrowStart: false,
+    arrowEnd: false,
+    fontSize: 0,
+    textFill: '',
+    text: 'Text',
+    x: 0,
+    y: 0,
+    rotation: 0,
+    tension: 0
+};
+// 连接线设置 默认值
+Render.LinkSettingsDefault = {
+    stroke: '',
+    strokeWidth: 0,
+    arrowStart: false,
+    arrowEnd: false,
+    tension: 0
+};
+//# sourceMappingURL=index.js.map