@meta2d/core 1.0.33 → 1.0.35

package/src/canvas/canvas.js

@@ -82,7 +82,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 import { KeydownType } from '../options';
-import { addLineAnchor, calcIconRect, calcTextRect, calcWorldAnchors, calcWorldRects, LockState, nearestAnchor, PenType, pushPenAnchor, removePenAnchor, renderPen, scalePen, translateLine, deleteTempAnchor, connectLine, disconnectLine, getAnchor, calcAnchorDock, calcMoveDock, calcTextLines, setNodeAnimate, setLineAnimate, calcPenRect, setChildrenActive, getParent, setHover, randomId, getPensLock, getToAnchor, getFromAnchor, calcPadding, getPensDisableRotate, getPensDisableResize, needCalcTextRectProps, calcResizeDock, needPatchFlagsPenRectProps, needCalcIconRectProps, isDomShapes, renderPenRaw, needSetPenProps, getAllChildren, calcInView, isShowChild, getTextColor, getGlobalColor, clearLifeCycle, rotatePen, calcTextAutoWidth, } from '../pen';
+import { addLineAnchor, calcIconRect, calcTextRect, calcWorldAnchors, calcWorldRects, LockState, nearestAnchor, PenType, pushPenAnchor, removePenAnchor, renderPen, scalePen, translateLine, deleteTempAnchor, connectLine, disconnectLine, getAnchor, calcAnchorDock, calcMoveDock, calcTextLines, setNodeAnimate, setLineAnimate, calcPenRect, setChildrenActive, getParent, setHover, randomId, getPensLock, getToAnchor, getFromAnchor, calcPadding, getPensDisableRotate, getPensDisableResize, needCalcTextRectProps, calcResizeDock, needPatchFlagsPenRectProps, needCalcIconRectProps, isDomShapes, renderPenRaw, needSetPenProps, getAllChildren, calcInView, isShowChild, getTextColor, getGlobalColor, clearLifeCycle, rotatePen, calcTextAutoWidth, getGradientAnimatePath, } from '../pen';
 import { calcRotate, distance, getDistance, hitPoint, PointType, PrevNextType, rotatePoint, samePoint, scalePoint, translatePoint, TwoWay, } from '../point';
 import { calcCenter, calcRightBottom, calcRelativePoint, getRect, getRectOfPoints, pointInRect, pointInSimpleRect, rectInRect, rectToPoints, resizeRect, translateRect, } from '../rect';
 import { EditType, globalStore, } from '../store';
@@ -298,11 +298,15 @@ var Canvas = /** @class */ (function () {
                 }
             }
             else {
+                var offset = 0.2;
+                if (e.deltaY.toString().indexOf('.') !== -1) {
+                    offset = 0.01;
+                }
                 if (e.deltaY > 0) {
-                    scaleOff = -0.05;
+                    scaleOff = -offset;
                 }
                 else {
-                    scaleOff = 0.05;
+                    scaleOff = offset;
                 }
             }
             var x = e.offsetX, y = e.offsetY;
@@ -538,6 +542,9 @@ var Canvas = /** @class */ (function () {
                 case 'v':
                 case 'V':
                     if (!e.ctrlKey && !e.metaKey) {
+                        if (_this.pencil) {
+                            _this.stopPencil();
+                        }
                         if (_this.drawingLineName) {
                             _this.finishDrawline();
                             _this.drawingLineName = '';
@@ -552,7 +559,16 @@ var Canvas = /** @class */ (function () {
                     break;
                 case 'b':
                 case 'B':
-                    _this.drawingPencil();
+                    if (_this.drawingLineName) {
+                        _this.finishDrawline();
+                        _this.drawingLineName = '';
+                    }
+                    if (_this.pencil) {
+                        _this.stopPencil();
+                    }
+                    else {
+                        _this.drawingPencil();
+                    }
                     break;
                 case 'y':
                 case 'Y':
@@ -1048,7 +1064,7 @@ var Canvas = /** @class */ (function () {
             else {
                 switch (_this.hoverType) {
                     case HoverType.None:
-                        _this.store.data.rule &&
+                        (_this.store.data.rule || _this.store.options.rule) &&
                             !_this.store.options.disableRuleLine &&
                             _this.addRuleLine(e);
                         if (_this.store.options.resizeMode) {
@@ -1374,6 +1390,7 @@ var Canvas = /** @class */ (function () {
                 _this.store.emitter.emit('contextmenu', {
                     e: e,
                     clientRect: _this.clientRect,
+                    pen: _this.store.hover,
                 });
             }
             _this.mouseRight = MouseRight.None;
@@ -2514,7 +2531,12 @@ var Canvas = /** @class */ (function () {
                 if (tem < 0) {
                     tem = 0;
                 }
-                style += "height:" + (pen.fontSize * scale < 12 ? tem * font_scale : tem * scale * font_scale) + "px;";
+                var height = pen.fontSize * scale < 12 ? tem * font_scale : tem * scale * font_scale;
+                if (height < pen.fontSize * pen.lineHeight * scale) {
+                    height = pen.fontSize * pen.lineHeight * scale;
+                    style += "top:-" + height / 2 + "px;";
+                }
+                style += "height:" + height + "px;";
             }
             var _textWidth = null;
             if (pen.textWidth) {
@@ -2971,12 +2993,15 @@ var Canvas = /** @class */ (function () {
         });
     };
     Canvas.prototype.dropPens = function (pens, e) {
+        var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var pens_2, pens_2_1, pen, pens_3, pens_3_1, pen, pens_4, pens_4_1, pen, width, height, rect_1, flag, pens_5, pens_5_1, pen, points;
-            var e_7, _a, e_8, _b, e_9, _c, e_10, _d;
-            return __generator(this, function (_e) {
-                switch (_e.label) {
+            var pens_2, pens_2_1, pen, pens_3, pens_3_1, pen, pens_4, pens_4_1, pen, pens_5, pens_5_1, pen, width, height, rect_1, flag, pens_6, pens_6_1, pen, points;
+            var e_7, _b, e_8, _c, e_9, _d, e_10, _e, e_11, _f;
+            var _this = this;
+            return __generator(this, function (_g) {
+                switch (_g.label) {
                     case 0:
+                        this.randomIdObj = {};
                         try {
                             for (pens_2 = __values(pens), pens_2_1 = pens_2.next(); !pens_2_1.done; pens_2_1 = pens_2.next()) {
                                 pen = pens_2_1.value;
@@ -2987,13 +3012,38 @@ var Canvas = /** @class */ (function () {
                         catch (e_7_1) { e_7 = { error: e_7_1 }; }
                         finally {
                             try {
-                                if (pens_2_1 && !pens_2_1.done && (_a = pens_2.return)) _a.call(pens_2);
+                                if (pens_2_1 && !pens_2_1.done && (_b = pens_2.return)) _b.call(pens_2);
                             }
                             finally { if (e_7) throw e_7.error; }
                         }
+                        if (Object.keys(this.randomIdObj).length !== 0) {
+                            try {
+                                for (pens_3 = __values(pens), pens_3_1 = pens_3.next(); !pens_3_1.done; pens_3_1 = pens_3.next()) {
+                                    pen = pens_3_1.value;
+                                    if (pen.type) {
+                                        pen.anchors[0].connectTo = this.randomIdObj[pen.anchors[0].connectTo];
+                                        pen.anchors[pen.anchors.length - 1].connectTo =
+                                            this.randomIdObj[pen.anchors[pen.anchors.length - 1].connectTo];
+                                    }
+                                    else {
+                                        (_a = pen.connectedLines) === null || _a === void 0 ? void 0 : _a.forEach(function (item) {
+                                            item.lineAnchor = _this.randomIdObj[item.lineAnchor];
+                                            item.lineId = _this.randomIdObj[item.lineId];
+                                        });
+                                    }
+                                }
+                            }
+                            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                            finally {
+                                try {
+                                    if (pens_3_1 && !pens_3_1.done && (_c = pens_3.return)) _c.call(pens_3);
+                                }
+                                finally { if (e_8) throw e_8.error; }
+                            }
+                        }
                         try {
-                            for (pens_3 = __values(pens), pens_3_1 = pens_3.next(); !pens_3_1.done; pens_3_1 = pens_3.next()) {
-                                pen = pens_3_1.value;
+                            for (pens_4 = __values(pens), pens_4_1 = pens_4.next(); !pens_4_1.done; pens_4_1 = pens_4.next()) {
+                                pen = pens_4_1.value;
                                 // TODO: randomCombineId 会更改 id， 此处应该不存在空 id
                                 if (!pen.id) {
                                     pen.id = s8();
@@ -3002,12 +3052,12 @@ var Canvas = /** @class */ (function () {
                                 this.store.pens[pen.id] = pen;
                             }
                         }
-                        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                        catch (e_9_1) { e_9 = { error: e_9_1 }; }
                         finally {
                             try {
-                                if (pens_3_1 && !pens_3_1.done && (_b = pens_3.return)) _b.call(pens_3);
+                                if (pens_4_1 && !pens_4_1.done && (_d = pens_4.return)) _d.call(pens_4);
                             }
-                            finally { if (e_8) throw e_8.error; }
+                            finally { if (e_9) throw e_9.error; }
                         }
                         try {
                             // // 计算区域
@@ -3015,8 +3065,8 @@ var Canvas = /** @class */ (function () {
                             //   // 组合节点才需要提前计算
                             //   Array.isArray(pen.children) && pen.children.length > 0 && this.updatePenRect(pen);
                             // }
-                            for (pens_4 = __values(pens), pens_4_1 = pens_4.next(); !pens_4_1.done; pens_4_1 = pens_4.next()) {
-                                pen = pens_4_1.value;
+                            for (pens_5 = __values(pens), pens_5_1 = pens_5.next(); !pens_5_1.done; pens_5_1 = pens_5.next()) {
+                                pen = pens_5_1.value;
                                 if (!pen.parentId) {
                                     pen.width *= this.store.data.scale;
                                     pen.height *= this.store.data.scale;
@@ -3029,12 +3079,12 @@ var Canvas = /** @class */ (function () {
                                 }
                             }
                         }
-                        catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                        catch (e_10_1) { e_10 = { error: e_10_1 }; }
                         finally {
                             try {
-                                if (pens_4_1 && !pens_4_1.done && (_c = pens_4.return)) _c.call(pens_4);
+                                if (pens_5_1 && !pens_5_1.done && (_e = pens_5.return)) _e.call(pens_5);
                             }
-                            finally { if (e_9) throw e_9.error; }
+                            finally { if (e_10) throw e_10.error; }
                         }
                         width = this.store.data.width || this.store.options.width;
                         height = this.store.data.height || this.store.options.height;
@@ -3047,8 +3097,8 @@ var Canvas = /** @class */ (function () {
                             };
                             flag = true;
                             try {
-                                for (pens_5 = __values(pens), pens_5_1 = pens_5.next(); !pens_5_1.done; pens_5_1 = pens_5.next()) {
-                                    pen = pens_5_1.value;
+                                for (pens_6 = __values(pens), pens_6_1 = pens_6.next(); !pens_6_1.done; pens_6_1 = pens_6.next()) {
+                                    pen = pens_6_1.value;
                                     if (!pen.parentId) {
                                         points = [
                                             { x: pen.x, y: pen.y },
@@ -3083,12 +3133,12 @@ var Canvas = /** @class */ (function () {
                                     }
                                 }
                             }
-                            catch (e_10_1) { e_10 = { error: e_10_1 }; }
+                            catch (e_11_1) { e_11 = { error: e_11_1 }; }
                             finally {
                                 try {
-                                    if (pens_5_1 && !pens_5_1.done && (_d = pens_5.return)) _d.call(pens_5);
+                                    if (pens_6_1 && !pens_6_1.done && (_f = pens_6.return)) _f.call(pens_6);
                                 }
-                                finally { if (e_10) throw e_10.error; }
+                                finally { if (e_11) throw e_11.error; }
                             }
                             if (flag) {
                                 console.info('画笔在大屏范围外');
@@ -3097,7 +3147,7 @@ var Canvas = /** @class */ (function () {
                         }
                         return [4 /*yield*/, this.addPens(pens, true)];
                     case 1:
-                        _e.sent();
+                        _g.sent();
                         this.active(pens.filter(function (pen) { return !pen.parentId; }));
                         this.render();
                         this.externalElements.focus(); // 聚焦
@@ -3107,8 +3157,35 @@ var Canvas = /** @class */ (function () {
         });
     };
     Canvas.prototype.randomCombineId = function (pen, pens, parentId) {
-        var e_11, _a;
+        var e_12, _a;
+        var beforeIds = null;
+        if (pen.type) {
+            if (pen.anchors[0].connectTo ||
+                pen.anchors[pen.anchors.length - 1].connectTo) {
+                beforeIds = [
+                    pen.id,
+                    pen.anchors[0].id,
+                    pen.anchors[pen.anchors.length - 1].id,
+                ];
+            }
+        }
+        else {
+            if (pen.connectedLines && pen.connectedLines.length) {
+                beforeIds = [pen.id];
+            }
+        }
         randomId(pen);
+        if (beforeIds) {
+            if (beforeIds.length === 1) {
+                this.randomIdObj[beforeIds[0]] = pen.id;
+            }
+            else {
+                this.randomIdObj[beforeIds[0]] = pen.id;
+                this.randomIdObj[beforeIds[1]] = pen.anchors[0].id;
+                this.randomIdObj[beforeIds[2]] = pen.anchors[pen.anchors.length - 1].id;
+            }
+        }
+        //处理链接关系
         pen.parentId = parentId;
         var newChildren = [];
         if (Array.isArray(pen.children)) {
@@ -3124,12 +3201,12 @@ var Canvas = /** @class */ (function () {
                     _loop_4(childId);
                 }
             }
-            catch (e_11_1) { e_11 = { error: e_11_1 }; }
+            catch (e_12_1) { e_12 = { error: e_12_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_11) throw e_11.error; }
+                finally { if (e_12) throw e_12.error; }
             }
         }
         pen.children = newChildren;
@@ -3137,8 +3214,8 @@ var Canvas = /** @class */ (function () {
     };
     Canvas.prototype.addPens = function (pens, history) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, list, pens_6, pens_6_1, pen;
-            var e_12, _b;
+            var _a, list, pens_7, pens_7_1, pen;
+            var e_13, _b;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
@@ -3154,8 +3231,8 @@ var Canvas = /** @class */ (function () {
                         }
                         list = [];
                         try {
-                            for (pens_6 = __values(pens), pens_6_1 = pens_6.next(); !pens_6_1.done; pens_6_1 = pens_6.next()) {
-                                pen = pens_6_1.value;
+                            for (pens_7 = __values(pens), pens_7_1 = pens_7.next(); !pens_7_1.done; pens_7_1 = pens_7.next()) {
+                                pen = pens_7_1.value;
                                 if (this.beforeAddPen && this.beforeAddPen(pen) != true) {
                                     continue;
                                 }
@@ -3163,12 +3240,12 @@ var Canvas = /** @class */ (function () {
                                 list.push(pen);
                             }
                         }
-                        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+                        catch (e_13_1) { e_13 = { error: e_13_1 }; }
                         finally {
                             try {
-                                if (pens_6_1 && !pens_6_1.done && (_b = pens_6.return)) _b.call(pens_6);
+                                if (pens_7_1 && !pens_7_1.done && (_b = pens_7.return)) _b.call(pens_7);
                             }
-                            finally { if (e_12) throw e_12.error; }
+                            finally { if (e_13) throw e_13.error; }
                         }
                         this.render();
                         this.store.emitter.emit('add', list);
@@ -3235,7 +3312,7 @@ var Canvas = /** @class */ (function () {
         };
     };
     Canvas.prototype.addRuleLine = function (e) {
-        var _a = this.store.data, offsetX = _a.x, offsetY = _a.y;
+        var _a = this.store.data, offsetX = _a.x, offsetY = _a.y, scale = _a.scale, origin = _a.origin;
         // 靠近左上角的 x ，y
         var x = e.x + offsetX;
         var y = e.y + offsetY;
@@ -3250,12 +3327,24 @@ var Canvas = /** @class */ (function () {
             lineX = -offsetX;
             width = this.width;
             otherPX = 1;
+            if (!e.ctrlKey) {
+                //找最近的标尺线
+                lineY =
+                    Math.round((lineY - origin.y) / (scale * 10)) * (scale * 10) +
+                        origin.y;
+            }
         }
         else if (y < x && y < 20) {
             // 绘制一条垂直线
             lineY = -offsetY;
             height = this.height;
             otherPY = 1;
+            if (!e.ctrlKey) {
+                //找最近的标尺线
+                lineX =
+                    Math.round((lineX - origin.x) / (scale * 10)) * (scale * 10) +
+                        origin.x;
+            }
         }
         else {
             return;
@@ -3283,6 +3372,37 @@ var Canvas = /** @class */ (function () {
             ],
         });
     };
+    /**
+     * @description 调整pen的坐标，让pen按照网格自动对齐
+     * @author Joseph Ho
+     * @date 14/11/2023
+     * @memberof Canvas
+     */
+    Canvas.prototype.alignPenToGrid = function (pen) {
+        var _a;
+        var autoAlignGrid = this.store.options.autoAlignGrid && this.store.data.grid;
+        if (autoAlignGrid) {
+            var gridSize = this.store.data.gridSize || this.store.options.gridSize;
+            var _b = this.store.data, origin_2 = _b.origin, scale = _b.scale;
+            var x = pen.x, y = pen.y;
+            var obj = { x: x, y: y };
+            var rect = this.getPenRect(pen);
+            // 算出偏移了多少个网格
+            var m = parseInt((rect.x / gridSize).toFixed());
+            var n = parseInt((rect.y / gridSize).toFixed());
+            console.log(m, n);
+            var x1 = m * gridSize;
+            var y1 = n * gridSize;
+            // 算出最终的偏移坐标
+            obj.x = origin_2.x + x1 * scale;
+            obj.y = origin_2.y + y1 * scale;
+            Object.assign(pen, obj);
+            (_a = pen.onMove) === null || _a === void 0 ? void 0 : _a.call(pen, pen);
+            this.updatePenRect(pen);
+            this.calcActiveRect();
+            this.getSizeCPs();
+        }
+    };
     /**
      * 拖拽结束，数据更新到 active.pens
      */
@@ -3291,13 +3411,26 @@ var Canvas = /** @class */ (function () {
         // 鼠标松手才更新，此处是更新前的值
         var initPens = deepClone(this.store.active, true);
         // const pens = deepClone(this.store.active, true);
+        var gridSize = this.store.data.gridSize || this.store.options.gridSize;
+        var _a = this.store.data, origin = _a.origin, scale = _a.scale;
+        var autoAlignGrid = this.store.options.autoAlignGrid && this.store.data.grid;
         this.store.active.forEach(function (pen, i) {
             var _a;
             var _b = _this.movingPens[i], x = _b.x, y = _b.y;
-            Object.assign(pen, {
-                x: x,
-                y: y,
-            });
+            var obj = { x: x, y: y };
+            // 根据是否开启了自动网格对齐，来修正坐标
+            if (autoAlignGrid) {
+                var rect = _this.getPenRect(_this.movingPens[i]);
+                // 算出偏移了多少个网格
+                var m = parseInt((rect.x / gridSize).toFixed());
+                var n = parseInt((rect.y / gridSize).toFixed());
+                var x1 = m * gridSize;
+                var y1 = n * gridSize;
+                // 算出最终的偏移坐标
+                obj.x = origin.x + x1 * scale;
+                obj.y = origin.y + y1 * scale;
+            }
+            Object.assign(pen, obj);
             (_a = pen.onMove) === null || _a === void 0 ? void 0 : _a.call(pen, pen);
             _this.updatePenRect(pen);
             _this.updateLines(pen);
@@ -3326,7 +3459,7 @@ var Canvas = /** @class */ (function () {
         // 避免选中图元的出错情况，this.dock为undefined
         if (!this.dock)
             return;
-        var _a = this.dock, xDock = _a.xDock, yDock = _a.yDock;
+        var _b = this.dock, xDock = _b.xDock, yDock = _b.yDock;
         var dockPen;
         if (xDock) {
             dockPen = this.store.pens[xDock.penId];
@@ -3369,6 +3502,11 @@ var Canvas = /** @class */ (function () {
                 }
             }
         }
+        // 如果开启自动网格对齐，则需要重算activeRect和sizeCPs
+        if (autoAlignGrid) {
+            this.calcActiveRect();
+            this.getSizeCPs();
+        }
         // 此处是更新后的值
         this.pushHistory({
             type: EditType.Update,
@@ -3444,7 +3582,7 @@ var Canvas = /** @class */ (function () {
         this.patchFlags = true;
     };
     Canvas.prototype.active = function (pens, emit) {
-        var e_13, _a, _b;
+        var e_14, _a, _b;
         if (emit === void 0) { emit = true; }
         if (this.store.active) {
             emit && this.store.emitter.emit('inactive', this.store.active);
@@ -3456,12 +3594,12 @@ var Canvas = /** @class */ (function () {
                     setChildrenActive(pen, false);
                 }
             }
-            catch (e_13_1) { e_13 = { error: e_13_1 }; }
+            catch (e_14_1) { e_14 = { error: e_14_1 }; }
             finally {
                 try {
                     if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                 }
-                finally { if (e_13) throw e_13.error; }
+                finally { if (e_14) throw e_14.error; }
             }
         }
         this.store.active = [];
@@ -3648,7 +3786,7 @@ var Canvas = /** @class */ (function () {
         return HoverType.None;
     };
     Canvas.prototype.resize = function (w, h) {
-        var e_14, _a;
+        var e_15, _a;
         w = w || this.parentElement.clientWidth;
         h = h || this.parentElement.clientHeight;
         this.width = w;
@@ -3690,12 +3828,12 @@ var Canvas = /** @class */ (function () {
                 calcInView(pen);
             }
         }
-        catch (e_14_1) { e_14 = { error: e_14_1 }; }
+        catch (e_15_1) { e_15 = { error: e_15_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_14) throw e_14.error; }
+            finally { if (e_15) throw e_15.error; }
         }
     };
     Canvas.prototype.clearCanvas = function () {
@@ -3763,7 +3901,7 @@ var Canvas = /** @class */ (function () {
             this.store.histories.splice(this.store.historyIndex + 1, this.store.histories.length - this.store.historyIndex - 1);
         }
         (_a = action.pens) === null || _a === void 0 ? void 0 : _a.forEach(function (pen) {
-            var e_15, _a;
+            var e_16, _a;
             var found;
             if (action.initPens) {
                 try {
@@ -3774,12 +3912,12 @@ var Canvas = /** @class */ (function () {
                         }
                     }
                 }
-                catch (e_15_1) { e_15 = { error: e_15_1 }; }
+                catch (e_16_1) { e_16 = { error: e_16_1 }; }
                 finally {
                     try {
                         if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                     }
-                    finally { if (e_15) throw e_15.error; }
+                    finally { if (e_16) throw e_16.error; }
                 }
             }
             if (found) {
@@ -3837,11 +3975,11 @@ var Canvas = /** @class */ (function () {
         var _this = this;
         var before = this.store.histories[this.store.historyIndex];
         if (before && before.type === EditType.Add) {
-            var pens_7 = [];
+            var pens_8 = [];
             before.pens.forEach(function (pen) {
-                pens_7.push(_this.store.pens[pen.id]);
+                pens_8.push(_this.store.pens[pen.id]);
             });
-            this.active(pens_7);
+            this.active(pens_8);
         }
     };
     Canvas.prototype.doEditAction = function (action, undo) {
@@ -3877,6 +4015,11 @@ var Canvas = /** @class */ (function () {
                     var i = _this.store.data.pens.findIndex(function (item) { return item.id === pen.id; });
                     if (i > -1) {
                         pen.calculative = _this.store.data.pens[i].calculative;
+                        if (_this.store.data.pens[i].type && _this.store.data.pens[i].lastConnected) {
+                            for (var key in _this.store.data.pens[i].lastConnected) {
+                                _this.store.pens[key].connectedLines = _this.store.data.pens[i].lastConnected[key];
+                            }
+                        }
                         _this.store.data.pens[i] = pen;
                         _this.store.pens[pen.id] = pen;
                         for (var k in pen) {
@@ -3901,18 +4044,25 @@ var Canvas = /** @class */ (function () {
                 });
                 break;
             case EditType.Delete:
-                action.pens.forEach(function (aPen) {
-                    var _a;
+                action.pens.reverse().forEach(function (aPen) {
+                    var _a, _b;
                     var pen = deepClone(aPen, true);
                     if (!pen.calculative) {
                         pen.calculative = {};
                     }
-                    _this.store.data.pens.splice((_a = pen.calculative) === null || _a === void 0 ? void 0 : _a.layer, 0, pen);
+                    _this.store.data.pens.splice(((_a = pen.calculative) === null || _a === void 0 ? void 0 : _a.layer) !== -1
+                        ? (_b = pen.calculative) === null || _b === void 0 ? void 0 : _b.layer
+                        : _this.store.data.pens.length, 0, pen);
                     // 先放进去，pens 可能是子节点在前，而父节点在后
                     _this.store.pens[pen.id] = pen;
+                    if (pen.type && pen.lastConnected) {
+                        for (var key in pen.lastConnected) {
+                            _this.store.pens[key].connectedLines = pen.lastConnected[key];
+                        }
+                    }
                     pen.calculative.canvas = _this;
                 });
-                action.pens.forEach(function (aPen) {
+                action.pens.reverse().forEach(function (aPen) {
                     var pen = _this.store.pens[aPen.id];
                     var rect = _this.getPenRect(pen, action.origin, action.scale);
                     _this.setPenRect(pen, rect, false);
@@ -4000,6 +4150,7 @@ var Canvas = /** @class */ (function () {
         }
         !pen.rotate && (pen.rotate = 0);
         this.loadImage(pen);
+        this.parent.penNetwork(pen);
     };
     Canvas.prototype.drawline = function (mouse) {
         var _a;
@@ -4503,7 +4654,7 @@ var Canvas = /** @class */ (function () {
         this.onMovePens();
     };
     Canvas.prototype.onMovePens = function () {
-        var e_16, _a;
+        var e_17, _a;
         var _b;
         var map = this.parent.map;
         if (map && map.isShow) {
@@ -4528,12 +4679,12 @@ var Canvas = /** @class */ (function () {
                 }
             }
         }
-        catch (e_16_1) { e_16 = { error: e_16_1 }; }
+        catch (e_17_1) { e_17 = { error: e_17_1 }; }
         finally {
             try {
                 if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_16) throw e_16.error; }
+            finally { if (e_17) throw e_17.error; }
         }
     };
     /**
@@ -4631,7 +4782,7 @@ var Canvas = /** @class */ (function () {
         this.calcActiveRect();
     };
     Canvas.prototype.rotatePens = function (e) {
-        var e_17, _a;
+        var e_18, _a;
         var _this = this;
         if (!this.initPens) {
             this.initPens = deepClone(this.getAllByPens(this.store.active));
@@ -4658,12 +4809,12 @@ var Canvas = /** @class */ (function () {
                 this.updateLines(pen);
             }
         }
-        catch (e_17_1) { e_17 = { error: e_17_1 }; }
+        catch (e_18_1) { e_18 = { error: e_18_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_17) throw e_17.error; }
+            finally { if (e_18) throw e_18.error; }
         }
         this.lastRotate = this.activeRect.rotate;
         this.getSizeCPs();
@@ -5400,7 +5551,7 @@ var Canvas = /** @class */ (function () {
         this.initLineRect(line);
     };
     Canvas.prototype.restoreNodeAnimate = function (pen) {
-        var _a;
+        var _a, _b;
         if (pen.calculative.initRect) {
             if (pen.keepAnimateState) {
                 for (var k in pen) {
@@ -5457,10 +5608,14 @@ var Canvas = /** @class */ (function () {
                 pen.calculative.worldRect = pen.calculative.initRect;
             }
             this.updatePenRect(pen, { worldRectIsReady: true });
+            this.updateLines(pen);
             if (pen.calculative.text !== pen.text) {
                 pen.calculative.text = pen.text;
                 calcTextLines(pen);
             }
+            if ((_b = this.store.active) === null || _b === void 0 ? void 0 : _b.length) {
+                this.calcActiveRect();
+            }
             pen.calculative.initRect = undefined;
         }
     };
@@ -5547,6 +5702,9 @@ var Canvas = /** @class */ (function () {
             }
             _this.store.path2dMap.set(line, globalStore.path2dDraws[line.name](line));
             _this.patchFlagsLines.add(line);
+            if (line.calculative.gradientSmooth) {
+                line.calculative.gradientAnimatePath = getGradientAnimatePath(line);
+            }
             change && getLineLength(line);
         });
     };
@@ -5634,7 +5792,7 @@ var Canvas = /** @class */ (function () {
             return;
         }
         pens.forEach(function (pen) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             if (pen.calculative.pause) {
                 var d = Date.now() - pen.calculative.pause;
                 pen.calculative.pause = undefined;
@@ -5647,11 +5805,40 @@ var Canvas = /** @class */ (function () {
                     (_a = pen.calculative.media) === null || _a === void 0 ? void 0 : _a.play();
                     (_b = pen.onStartVideo) === null || _b === void 0 ? void 0 : _b.call(pen, pen);
                 }
-                else if (pen.type || ((_c = pen.frames) === null || _c === void 0 ? void 0 : _c.length)) {
+                else if (pen.type ||
+                    ((_c = pen.frames) === null || _c === void 0 ? void 0 : _c.length) ||
+                    (pen.animations && pen.animations.length)) {
                     //存储动画初始状态
                     if (!pen.type) {
+                        if (!pen.frames && pen.animations && pen.animations.length) {
+                            //无活动动画
+                            var autoIndex = (_d = pen.animations) === null || _d === void 0 ? void 0 : _d.findIndex(function (i) { return i.autoPlay; });
+                            var index = autoIndex === -1 ? 0 : autoIndex;
+                            var animate = deepClone(pen.animations[index]);
+                            delete animate.name;
+                            animate.currentAnimation = index;
+                            if (!pen.type && animate.frames) {
+                                animate.showDuration = _this.parent.calcAnimateDuration(animate);
+                            }
+                            _this.parent.setValue(__assign({ id: pen.id }, animate), {
+                                doEvent: false,
+                                history: false,
+                            });
+                        }
                         _this.store.animateMap.set(pen, _this.getFrameProps(pen));
                     }
+                    else {
+                        if ((_e = pen.animations) === null || _e === void 0 ? void 0 : _e.length) {
+                            //默认执行line的第一个动画
+                            var animate = deepClone(pen.animations[0]);
+                            delete animate.name;
+                            animate.currentAnimation = 0;
+                            _this.parent.setValue(__assign({ id: pen.id }, animate), {
+                                doEvent: false,
+                                history: false,
+                            });
+                        }
+                    }
                     _this.store.animates.add(pen);
                 }
             }
@@ -5677,7 +5864,7 @@ var Canvas = /** @class */ (function () {
             return;
         }
         requestAnimationFrame(function () {
-            var e_18, _a;
+            var e_19, _a;
             var now = Date.now();
             if (now - _this.lastAnimateRender < _this.store.options.animateInterval) {
                 if (_this.store.animates.size > 0) {
@@ -5762,12 +5949,12 @@ var Canvas = /** @class */ (function () {
                     _loop_5(pen);
                 }
             }
-            catch (e_18_1) { e_18 = { error: e_18_1 }; }
+            catch (e_19_1) { e_19 = { error: e_19_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_18) throw e_18.error; }
+                finally { if (e_19) throw e_19.error; }
             }
             if (active) {
                 _this.calcActiveRect();
@@ -5854,7 +6041,7 @@ var Canvas = /** @class */ (function () {
         var _a;
         return __awaiter(this, void 0, void 0, function () {
             var clipboardText, clipboard, _b, _c, offset, pos, curPage, rootPens, rootPens_1, rootPens_1_1, pen;
-            var e_19, _d;
+            var e_20, _d;
             return __generator(this, function (_e) {
                 switch (_e.label) {
                     case 0:
@@ -5927,12 +6114,12 @@ var Canvas = /** @class */ (function () {
                                 this.pastePen(pen, undefined);
                             }
                         }
-                        catch (e_19_1) { e_19 = { error: e_19_1 }; }
+                        catch (e_20_1) { e_20 = { error: e_20_1 }; }
                         finally {
                             try {
                                 if (rootPens_1_1 && !rootPens_1_1.done && (_d = rootPens_1.return)) _d.call(rootPens_1);
                             }
-                            finally { if (e_19) throw e_19.error; }
+                            finally { if (e_20) throw e_20.error; }
                         }
                         sessionStorage.setItem('page', clipboard.page);
                         this.active(rootPens);
@@ -5950,20 +6137,20 @@ var Canvas = /** @class */ (function () {
      * @param pens 不包含子节点
      */
     Canvas.prototype.getAllByPens = function (pens) {
-        var e_20, _a;
+        var e_21, _a;
         var retPens = [];
         try {
-            for (var pens_8 = __values(pens), pens_8_1 = pens_8.next(); !pens_8_1.done; pens_8_1 = pens_8.next()) {
-                var pen = pens_8_1.value;
+            for (var pens_9 = __values(pens), pens_9_1 = pens_9.next(); !pens_9_1.done; pens_9_1 = pens_9.next()) {
+                var pen = pens_9_1.value;
                 retPens.push.apply(retPens, __spreadArray([], __read(deepClone(getAllChildren(pen, this.store), true)), false));
             }
         }
-        catch (e_20_1) { e_20 = { error: e_20_1 }; }
+        catch (e_21_1) { e_21 = { error: e_21_1 }; }
         finally {
             try {
-                if (pens_8_1 && !pens_8_1.done && (_a = pens_8.return)) _a.call(pens_8);
+                if (pens_9_1 && !pens_9_1.done && (_a = pens_9.return)) _a.call(pens_9);
             }
-            finally { if (e_20) throw e_20.error; }
+            finally { if (e_21) throw e_21.error; }
         }
         return retPens.concat(pens);
     };
@@ -6006,7 +6193,7 @@ var Canvas = /** @class */ (function () {
      * @param pastePens 此处复制的全部 pens (包含子节点)
      */
     Canvas.prototype.changeNodeConnectedLine = function (oldId, line, pastePens) {
-        var e_21, _a;
+        var e_22, _a;
         var _b;
         var from = line.anchors[0];
         var to = line.anchors[line.anchors.length - 1];
@@ -6042,12 +6229,12 @@ var Canvas = /** @class */ (function () {
                 _loop_7(anchor);
             }
         }
-        catch (e_21_1) { e_21 = { error: e_21_1 }; }
+        catch (e_22_1) { e_22 = { error: e_22_1 }; }
         finally {
             try {
                 if (anchors_1_1 && !anchors_1_1.done && (_a = anchors_1.return)) _a.call(anchors_1);
             }
-            finally { if (e_21) throw e_21.error; }
+            finally { if (e_22) throw e_22.error; }
         }
     };
     Canvas.prototype.delete = function (pens, canDelLocked, history) {
@@ -6079,7 +6266,7 @@ var Canvas = /** @class */ (function () {
                             return [2 /*return*/];
                         }
                         deletePens = [];
-                        this._del(pens, deletePens);
+                        this._del(pens, deletePens, canDelLocked);
                         this.initImageCanvas(deletePens);
                         this.initTemplateCanvas(deletePens);
                         this.inactive();
@@ -6095,15 +6282,17 @@ var Canvas = /** @class */ (function () {
             });
         });
     };
-    Canvas.prototype._del = function (pens, delPens) {
+    Canvas.prototype._del = function (pens, delPens, canDelLocked) {
         var _this = this;
         if (!pens) {
             return;
         }
         pens.forEach(function (pen) {
+            if (pen.type) {
+                pen.lastConnected = {};
+            }
             if (!pen.parentId) {
-                if (pen.locked) {
-                    // TODO: canDelLocked 是 true ， locked 仍然删不掉
+                if (!canDelLocked && pen.locked) {
                     return;
                 }
                 else {
@@ -6269,9 +6458,60 @@ var Canvas = /** @class */ (function () {
             sheet.insertRule('.meta2d-input ul li{padding: 5px 12px;line-height: 22px;white-space: nowrap;cursor: pointer;}');
             sheet.insertRule('.meta2d-input ul li:hover{background: #eeeeee;}');
             sheet.insertRule(".input-div::-webkit-scrollbar {display:none}");
+            sheet.insertRule(".input-div{scrollbar-width: none;}");
             sheet.insertRule('.meta2d-input .input-div{resize:none;border:none;outline:none;background:transparent;flex-grow:1;height:100%;width: 100%;left:0;top:0;display:flex;text-align: center;justify-content: center;flex-direction: column;}');
             sheet.insertRule(".input-div div{}");
         }
+        this.inputDiv.onfocus = function (e) {
+            if (navigator.userAgent.includes('Firefox')) {
+                if (!e.target.innerText) {
+                    var left = _this.inputDiv.offsetWidth / 2;
+                    var inputDivStyle = window.getComputedStyle(_this.inputDiv, null);
+                    if (inputDivStyle.textAlign !== 'center') {
+                        left = 0;
+                    }
+                    _this.inputDiv.innerHTML = "<br style=\"margin-left:" + left + "px;margin-top:4px;\" />";
+                }
+            }
+            else {
+                //无文本时，光标确保居中
+                if (!e.target.innerText) {
+                    var inputDivStyle = window.getComputedStyle(_this.inputDiv, null);
+                    if (inputDivStyle.justifyContent === 'center') {
+                        _this.inputDiv.style.paddingTop = " " + (_this.inputDiv.offsetHeight / 2 -
+                            parseFloat(inputDivStyle.lineHeight) / 2) + "px";
+                    }
+                }
+                else {
+                    _this.inputDiv.style.paddingTop = '';
+                }
+            }
+        };
+        this.inputDiv.oninput = function (e) {
+            // //无文本时，光标确保居中
+            if (navigator.userAgent.includes('Firefox')) {
+                if (!e.target.innerText.trim()) {
+                    var left = _this.inputDiv.offsetWidth / 2;
+                    var inputDivStyle = window.getComputedStyle(_this.inputDiv, null);
+                    if (inputDivStyle.textAlign !== 'center') {
+                        left = 0;
+                    }
+                    _this.inputDiv.innerHTML = "<br style=\"margin-left:" + left + "px;margin-top:4px;\" />";
+                }
+            }
+            else {
+                if (!e.target.innerText) {
+                    var inputDivStyle = window.getComputedStyle(_this.inputDiv, null);
+                    if (inputDivStyle.justifyContent === 'center') {
+                        _this.inputDiv.style.paddingTop = " " + (_this.inputDiv.offsetHeight / 2 -
+                            parseFloat(inputDivStyle.lineHeight) / 2) + "px";
+                    }
+                }
+                else {
+                    _this.inputDiv.style.paddingTop = '';
+                }
+            }
+        };
         this.inputDiv.onclick = function (e) {
             e.stopPropagation();
             var pen = _this.store.pens[_this.inputDiv.dataset.penId];
@@ -6403,37 +6643,45 @@ var Canvas = /** @class */ (function () {
         var oldRotate = undefined;
         var willRenderImage = false; // 是否需要重新渲染图片
         for (var k in data) {
-            if (k === 'rotate') {
-                oldRotate = pen.calculative.rotate || 0;
-            }
-            if (typeof pen[k] !== 'object' || k === 'lineDash') {
-                pen.calculative[k] = data[k];
-            }
-            if (needCalcTextRectProps.includes(k)) {
-                willCalcTextRect = true;
-            }
-            if (['name', 'borderRadius'].includes(k)) {
-                willUpdatePath = true;
-            }
-            if (needSetPenProps.includes(k)) {
-                willSetPenRect = true;
-            }
-            if (needPatchFlagsPenRectProps.includes(k)) {
-                willPatchFlagsPenRect = true;
-            }
-            if (needCalcIconRectProps.includes(k)) {
-                willCalcIconRect = true;
-            }
-            if (k === 'isBottom') {
-                containIsBottom = true;
-            }
-            if (k === 'image') {
-                willRenderImage = true;
+            // 单属性
+            if (k.indexOf('.') === -1) {
+                if (k === 'rotate') {
+                    oldRotate = pen.calculative.rotate || 0;
+                }
+                else if (k === 'isBottom') {
+                    containIsBottom = true;
+                }
+                else if (k === 'image') {
+                    willRenderImage = true;
+                }
+                if (typeof pen[k] !== 'object' || k === 'lineDash') {
+                    pen.calculative[k] = data[k];
+                }
+                if (needCalcTextRectProps.includes(k)) {
+                    willCalcTextRect = true;
+                }
+                if (['name', 'borderRadius'].includes(k)) {
+                    willUpdatePath = true;
+                }
+                if (needSetPenProps.includes(k)) {
+                    willSetPenRect = true;
+                }
+                if (needPatchFlagsPenRectProps.includes(k)) {
+                    willPatchFlagsPenRect = true;
+                }
+                if (needCalcIconRectProps.includes(k)) {
+                    willCalcIconRect = true;
+                }
             }
-            if (k.indexOf('.') !== -1) {
+            else {
+                // 复合属性，如abc.def.ghi
                 delete pen[k];
                 setter(pen, k, data[k]);
             }
+            // anchors 或者 anchors.x都去执行
+            if (k.split('.')[0] === 'anchors') {
+                calcWorldAnchors(pen);
+            }
         }
         this.setCalculativeByScale(pen); // 该方法计算量并不大，所以每次修改都计算一次
         if (isChangedName) {
@@ -6450,6 +6698,11 @@ var Canvas = /** @class */ (function () {
             };
             this.setPenRect(pen, rect, false);
             this.updateLines(pen, true);
+            if (this.store.active &&
+                this.store.active.length &&
+                pen.id === this.store.active[0].id) {
+                this.calcActiveRect();
+            }
         }
         else if (willPatchFlagsPenRect) {
             this.updatePenRect(pen);
@@ -6532,9 +6785,9 @@ var Canvas = /** @class */ (function () {
             Object.assign(pen, rect);
         }
         else {
-            var _a = this.store.data, origin_2 = _a.origin, scale = _a.scale;
-            pen.x = origin_2.x + rect.x * scale;
-            pen.y = origin_2.y + rect.y * scale;
+            var _a = this.store.data, origin_3 = _a.origin, scale = _a.scale;
+            pen.x = origin_3.x + rect.x * scale;
+            pen.y = origin_3.y + rect.y * scale;
             pen.width = rect.width * scale;
             pen.height = rect.height * scale;
         }
@@ -6565,7 +6818,7 @@ var Canvas = /** @class */ (function () {
         };
     };
     Canvas.prototype.toPng = function (padding, callback, containBkImg, maxWidth) {
-        var e_22, _a;
+        var e_23, _a;
         if (padding === void 0) { padding = 2; }
         if (containBkImg === void 0) { containBkImg = false; }
         var rect = getRect(this.store.data.pens);
@@ -6595,6 +6848,20 @@ var Canvas = /** @class */ (function () {
             isRight = rect.x === 0;
             isBottom = rect.y === 0;
         }
+        var width = this.store.data.width || this.store.options.width;
+        var height = this.store.data.height || this.store.options.height;
+        //大屏
+        var isV = false;
+        if (width && height && !this.store.data.component) {
+            isV = true;
+        }
+        if (isV) {
+            rect.x = this.store.data.origin.x;
+            rect.y = this.store.data.origin.y;
+            rect.width = width * this.store.data.scale;
+            rect.height = height * this.store.data.scale;
+        }
+        var vRect = deepClone(rect);
         // 有背景图，也添加 padding
         var p = formatPadding(padding);
         rect.x -= p[3] * _scale;
@@ -6629,25 +6896,40 @@ var Canvas = /** @class */ (function () {
         // }
         ctx.textBaseline = 'middle'; // 默认垂直居中
         ctx.scale(scale, scale);
-        if (isDrawBkImg) {
-            var x = rect.x < 0 ? -rect.x : 0;
-            var y = rect.y < 0 ? -rect.y : 0;
-            ctx.drawImage(this.store.bkImg, x, y, this.canvasRect.width, this.canvasRect.height);
-        }
         var background = this.store.data.background || this.store.options.background;
         if (background) {
             // 绘制背景颜色
             ctx.save();
             ctx.fillStyle = background;
-            ctx.fillRect(0, 0, oldRect.width + (p[3] + p[1]) * _scale, oldRect.height + (p[0] + p[2]) * _scale);
+            if (isV) {
+                ctx.fillRect(0, 0, vRect.width + (p[1] + p[3]) * _scale, vRect.height + (p[0] + p[2]) * _scale);
+            }
+            else {
+                ctx.fillRect(0, 0, oldRect.width + (p[3] + p[1]) * _scale, oldRect.height + (p[0] + p[2]) * _scale);
+            }
             ctx.restore();
         }
+        if (isDrawBkImg) {
+            if (isV) {
+                ctx.drawImage(this.store.bkImg, p[3] * _scale || 0, p[0] * _scale || 0, vRect.width, vRect.height);
+            }
+            else {
+                var x = rect.x < 0 ? -rect.x : 0;
+                var y = rect.y < 0 ? -rect.y : 0;
+                ctx.drawImage(this.store.bkImg, x, y, this.canvasRect.width, this.canvasRect.height);
+            }
+        }
         if (!isDrawBkImg) {
             ctx.translate(-rect.x, -rect.y);
         }
         else {
             // 平移画布，画笔的 worldRect 不变化
-            ctx.translate(isRight ? storeData.x : -oldRect.x, isBottom ? storeData.y : -oldRect.y);
+            if (isV) {
+                ctx.translate(-oldRect.x + p[3] * _scale || 0, -oldRect.y + p[0] * _scale || 0);
+            }
+            else {
+                ctx.translate((isRight ? storeData.x : -oldRect.x) + p[3] * _scale || 0, (isBottom ? storeData.y : -oldRect.y) + p[0] * _scale || 0);
+            }
         }
         try {
             for (var _b = __values(this.store.data.pens), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -6663,17 +6945,17 @@ var Canvas = /** @class */ (function () {
                     renderPenRaw(ctx, pen);
                 }
                 else {
-                    renderPen(ctx, pen);
+                    renderPen(ctx, pen, true);
                 }
                 pen.calculative.active = active;
             }
         }
-        catch (e_22_1) { e_22 = { error: e_22_1 }; }
+        catch (e_23_1) { e_23 = { error: e_23_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_22) throw e_22.error; }
+            finally { if (e_23) throw e_23.error; }
         }
         if (callback) {
             canvas.toBlob(callback);
@@ -6682,7 +6964,7 @@ var Canvas = /** @class */ (function () {
         return canvas.toDataURL();
     };
     Canvas.prototype.activeToPng = function (padding) {
-        var e_23, _a;
+        var e_24, _a;
         if (padding === void 0) { padding = 2; }
         var allPens = this.getAllByPens(this.store.active);
         var ids = allPens.map(function (pen) { return pen.id; });
@@ -6732,12 +7014,12 @@ var Canvas = /** @class */ (function () {
                 }
             }
         }
-        catch (e_23_1) { e_23 = { error: e_23_1 }; }
+        catch (e_24_1) { e_24 = { error: e_24_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_23) throw e_23.error; }
+            finally { if (e_24) throw e_24.error; }
         }
         return canvas.toDataURL();
     };