@meta2d/core 1.0.34 → 1.0.36

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, getGradientAnimatePath, } 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, CanvasLayer, ctxFlip, ctxRotate, setGlobalAlpha, drawImage, } 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';
@@ -542,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 = '';
@@ -556,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':
@@ -707,8 +719,8 @@ var Canvas = /** @class */ (function () {
                         }
                         _a.label = 3;
                     case 3:
-                        if (obj && obj.draggable !== false) {
-                            obj = Array.isArray(obj) ? obj : [obj];
+                        obj = Array.isArray(obj) ? obj : [obj];
+                        if (obj[0] && obj[0].draggable !== false) {
                             pt = { x: event.offsetX, y: event.offsetY };
                             this.calibrateMouse(pt);
                             this.dropPens(obj, pt);
@@ -1052,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) {
@@ -1227,7 +1239,7 @@ var Canvas = /** @class */ (function () {
                         var pt = { x: e.x, y: e.y };
                         // Move line anchor
                         if (_this.hoverType === HoverType.LineAnchor) {
-                            if (_this.dockInAnchor(e) &&
+                            if ((_this.store.active[0].lineName === 'line' || _this.dockInAnchor(e)) &&
                                 !_this.store.options.disableDock &&
                                 !_this.store.options.disableLineDock) {
                                 _this.clearDock();
@@ -2025,10 +2037,24 @@ var Canvas = /** @class */ (function () {
                     if (!isFinite(pen.x)) {
                         continue;
                     }
-                    if (pen.template) {
+                    // if (pen.template) {
+                    if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
                         continue;
                     }
                     if (pen.calculative.inView) {
+                        if (pen.canvasLayer === CanvasLayer.CanvasMain &&
+                            pen.name !== 'gif' &&
+                            pen.image &&
+                            pen.calculative.img) {
+                            ctx.save();
+                            ctxFlip(ctx, pen);
+                            if (pen.calculative.rotate) {
+                                ctxRotate(ctx, pen);
+                            }
+                            setGlobalAlpha(ctx, pen);
+                            drawImage(ctx, pen);
+                            ctx.restore();
+                        }
                         renderPen(ctx, pen);
                     }
                 }
@@ -2981,12 +3007,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;
@@ -2997,13 +3026,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();
@@ -3012,12 +3066,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 {
                             // // 计算区域
@@ -3025,8 +3079,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;
@@ -3039,12 +3093,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;
@@ -3057,8 +3111,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 },
@@ -3093,12 +3147,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('画笔在大屏范围外');
@@ -3107,7 +3161,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(); // 聚焦
@@ -3117,8 +3171,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)) {
@@ -3134,12 +3215,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;
@@ -3147,8 +3228,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:
@@ -3164,8 +3245,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;
                                 }
@@ -3173,12 +3254,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);
@@ -3245,7 +3326,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;
@@ -3260,12 +3341,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;
@@ -3293,6 +3386,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;
+        // 如果开启了自动网格,并且不是连线，则使pen对齐网格
+        if (autoAlignGrid && !pen.type) {
+            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());
+            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
      */
@@ -3301,13 +3425,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 && !_this.movingPens[i].type) {
+                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);
@@ -3336,7 +3473,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];
@@ -3379,6 +3516,11 @@ var Canvas = /** @class */ (function () {
                 }
             }
         }
+        // 如果开启自动网格对齐，则需要重算activeRect和sizeCPs
+        if (autoAlignGrid) {
+            this.calcActiveRect();
+            this.getSizeCPs();
+        }
         // 此处是更新后的值
         this.pushHistory({
             type: EditType.Update,
@@ -3421,14 +3563,34 @@ var Canvas = /** @class */ (function () {
             this.canvasImageBottom.init();
     };
     Canvas.prototype.initTemplateCanvas = function (pens) {
-        pens.some(function (pen) { return pen.template !== undefined; }) &&
+        // pens.some((pen) => pen.template !== undefined) &&
+        //   this.canvasTemplate.init();
+        pens.some(function (pen) { return pen.canvasLayer === CanvasLayer.CanvasTemplate; }) &&
             this.canvasTemplate.init();
     };
     Canvas.prototype.hasImage = function (pen, isBottom) {
         var _this = this;
         var _a;
-        if (pen.image && pen.name !== 'gif' && !pen.isBottom == !isBottom) {
-            return true;
+        // if (pen.image && pen.name !== 'gif' && !pen.isBottom == !isBottom) {
+        //   return true;
+        // }
+        if (pen.image && pen.name !== 'gif') {
+            if (isBottom) {
+                if (pen.canvasLayer === CanvasLayer.CanvasImageBottom) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                if (pen.canvasLayer === CanvasLayer.CanvasImage) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
         }
         return (_a = pen.children) === null || _a === void 0 ? void 0 : _a.some(function (childId) {
             var child = _this.store.pens[childId];
@@ -3454,7 +3616,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);
@@ -3466,12 +3628,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 = [];
@@ -3658,7 +3820,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;
@@ -3700,12 +3862,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 () {
@@ -3773,7 +3935,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 {
@@ -3784,12 +3946,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) {
@@ -3847,11 +4009,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) {
@@ -3887,6 +4049,13 @@ 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) {
@@ -3911,7 +4080,7 @@ var Canvas = /** @class */ (function () {
                 });
                 break;
             case EditType.Delete:
-                action.pens.forEach(function (aPen) {
+                action.pens.reverse().forEach(function (aPen) {
                     var _a, _b;
                     var pen = deepClone(aPen, true);
                     if (!pen.calculative) {
@@ -3922,9 +4091,14 @@ var Canvas = /** @class */ (function () {
                         : _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);
@@ -3958,7 +4132,8 @@ var Canvas = /** @class */ (function () {
         if (Math.abs(this.store.lastScale - this.store.data.scale) < 0.0001 &&
             this.store.sameTemplate &&
             this.store.templatePens[pen.id] &&
-            pen.template) {
+            // pen.template
+            pen.canvasLayer === CanvasLayer.CanvasTemplate) {
             pen = this.store.templatePens[pen.id];
             this.store.data.pens.push(pen);
             this.updatePenRect(pen);
@@ -3984,6 +4159,18 @@ var Canvas = /** @class */ (function () {
         if (!pen.lineHeight) {
             pen.lineHeight = lineHeight;
         }
+        if (pen.image && pen.name !== 'gif' && pen.canvasLayer === undefined) {
+            if (pen.isBottom) {
+                pen.canvasLayer = CanvasLayer.CanvasImageBottom;
+            }
+            else {
+                pen.canvasLayer = CanvasLayer.CanvasImage;
+            }
+            delete pen.isBottom;
+        }
+        if (pen.template) {
+            pen.canvasLayer = CanvasLayer.CanvasTemplate;
+        }
         pen.calculative = { canvas: this, singleton: (_a = pen.calculative) === null || _a === void 0 ? void 0 : _a.singleton };
         if (pen.video || pen.audio) {
             pen.calculative.onended = function (pen) {
@@ -4234,7 +4421,8 @@ var Canvas = /** @class */ (function () {
                 pen.calculative.imgNaturalHeight = img.naturalHeight || pen.iconHeight;
                 globalStore.htmlElements[pen.image] = img;
                 _this.imageLoaded();
-                if (pen.template) {
+                // if (pen.template) {
+                if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
                     _this.templateImageLoaded();
                 }
             };
@@ -4254,7 +4442,8 @@ var Canvas = /** @class */ (function () {
                     pen.calculative.imgNaturalHeight =
                         img.naturalHeight || pen.iconHeight;
                     this.imageLoaded(); // TODO: 重绘图片层 有延时器，可能卡顿
-                    if (pen.template) {
+                    // if (pen.template) {
+                    if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
                         this.templateImageLoaded();
                     }
                 }
@@ -4286,7 +4475,8 @@ var Canvas = /** @class */ (function () {
                                 img_1.naturalHeight || pen.iconHeight;
                             globalStore.htmlElements[pen.image] = img_1;
                             _this.imageLoaded();
-                            if (pen.template) {
+                            // if (pen.template) {
+                            if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
                                 _this.templateImageLoaded();
                             }
                         };
@@ -4316,7 +4506,8 @@ var Canvas = /** @class */ (function () {
                         pen.calculative.backgroundImg = img_2;
                         globalStore.htmlElements[pen.backgroundImage] = img_2;
                         _this.imageLoaded();
-                        if (pen.template) {
+                        // if (pen.template) {
+                        if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
                             _this.templateImageLoaded();
                         }
                     };
@@ -4345,7 +4536,10 @@ var Canvas = /** @class */ (function () {
                         pen.calculative.strokeImg = img_3;
                         globalStore.htmlElements[pen.strokeImage] = img_3;
                         _this.imageLoaded();
-                        if (pen.template && pen.name !== 'gif') {
+                        if (
+                        // pen.template
+                        pen.canvasLayer === CanvasLayer.CanvasTemplate &&
+                            pen.name !== 'gif') {
                             _this.templateImageLoaded();
                         }
                     };
@@ -4516,7 +4710,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) {
@@ -4541,12 +4735,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; }
         }
     };
     /**
@@ -4644,7 +4838,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));
@@ -4671,12 +4865,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();
@@ -5413,7 +5607,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) {
@@ -5470,10 +5664,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;
         }
     };
@@ -5650,7 +5848,7 @@ var Canvas = /** @class */ (function () {
             return;
         }
         pens.forEach(function (pen) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             if (pen.calculative.pause) {
                 var d = Date.now() - pen.calculative.pause;
                 pen.calculative.pause = undefined;
@@ -5685,6 +5883,18 @@ var Canvas = /** @class */ (function () {
                         }
                         _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);
                 }
             }
@@ -5710,7 +5920,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) {
@@ -5795,12 +6005,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();
@@ -5887,7 +6097,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:
@@ -5960,12 +6170,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);
@@ -5983,20 +6193,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);
     };
@@ -6039,7 +6249,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];
@@ -6075,12 +6285,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) {
@@ -6134,6 +6344,9 @@ var Canvas = /** @class */ (function () {
             return;
         }
         pens.forEach(function (pen) {
+            if (pen.type) {
+                pen.lastConnected = {};
+            }
             if (!pen.parentId) {
                 if (!canDelLocked && pen.locked) {
                     return;
@@ -6491,7 +6704,7 @@ var Canvas = /** @class */ (function () {
                 if (k === 'rotate') {
                     oldRotate = pen.calculative.rotate || 0;
                 }
-                else if (k === 'isBottom') {
+                else if (k === 'canvasLayer' || k === 'isBottom') {
                     containIsBottom = true;
                 }
                 else if (k === 'image') {
@@ -6595,17 +6808,30 @@ var Canvas = /** @class */ (function () {
         }
         else if (willRenderImage) {
             // 存在先有 image 后无 image 的情况
-            if (pen.isBottom) {
+            // if (pen.isBottom) {
+            //   this.canvasImageBottom.init();
+            // } else {
+            //   this.canvasImage.init();
+            // }
+            if (pen.canvasLayer === undefined) {
+                pen.canvasLayer = CanvasLayer.CanvasImageBottom;
+                pen.calculative.canvasLayer = CanvasLayer.CanvasImageBottom;
+            }
+            if (pen.canvasLayer === CanvasLayer.CanvasImageBottom) {
                 this.canvasImageBottom.init();
             }
-            else {
+            else if (pen.canvasLayer === CanvasLayer.CanvasImage) {
                 this.canvasImage.init();
             }
         }
         else {
             this.initImageCanvas([pen]);
         }
-        if (data.template !== undefined || pen.template) {
+        // if (data.template !== undefined || pen.template) {
+        //   this.initTemplateCanvas([pen]);
+        // }
+        if (data.canvasLayer !== undefined ||
+            pen.canvasLayer === CanvasLayer.CanvasTemplate) {
             this.initTemplateCanvas([pen]);
         }
     };
@@ -6628,9 +6854,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;
         }
@@ -6661,7 +6887,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);
@@ -6694,7 +6920,11 @@ var Canvas = /** @class */ (function () {
         var width = this.store.data.width || this.store.options.width;
         var height = this.store.data.height || this.store.options.height;
         //大屏
-        if (width && 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;
@@ -6740,7 +6970,7 @@ var Canvas = /** @class */ (function () {
             // 绘制背景颜色
             ctx.save();
             ctx.fillStyle = background;
-            if (width && height) {
+            if (isV) {
                 ctx.fillRect(0, 0, vRect.width + (p[1] + p[3]) * _scale, vRect.height + (p[0] + p[2]) * _scale);
             }
             else {
@@ -6749,7 +6979,7 @@ var Canvas = /** @class */ (function () {
             ctx.restore();
         }
         if (isDrawBkImg) {
-            if (width && height) {
+            if (isV) {
                 ctx.drawImage(this.store.bkImg, p[3] * _scale || 0, p[0] * _scale || 0, vRect.width, vRect.height);
             }
             else {
@@ -6763,7 +6993,7 @@ var Canvas = /** @class */ (function () {
         }
         else {
             // 平移画布，画笔的 worldRect 不变化
-            if (width && height) {
+            if (isV) {
                 ctx.translate(-oldRect.x + p[3] * _scale || 0, -oldRect.y + p[0] * _scale || 0);
             }
             else {
@@ -6784,17 +7014,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);
@@ -6803,7 +7033,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; });
@@ -6853,12 +7083,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();
     };