@meta2d/core 1.0.32 → 1.0.34

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';
@@ -265,12 +265,15 @@ var Canvas = /** @class */ (function () {
             if (_this.store.data.locked === LockState.DisableMoveScale)
                 return;
             // e.ctrlKey: false - 平移； true - 缩放。老windows触摸板不支持
-            if (!e.ctrlKey && Math.abs(e.wheelDelta) < 100) {
+            if (!e.ctrlKey &&
+                Math.abs(e.wheelDelta) < 100 &&
+                e.deltaY.toString().indexOf('.') === -1) {
                 if (_this.store.options.scroll && !e.metaKey && _this.scroll) {
                     _this.scroll.wheel(e.deltaY < 0);
                     return;
                 }
-                _this.translate(-e.deltaX, -e.deltaY);
+                var scale = _this.store.data.scale || 1;
+                _this.translate(-e.deltaX / scale, -e.deltaY / scale);
                 return;
             }
             if (Math.abs(e.wheelDelta) > 100) {
@@ -295,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.2;
+                    scaleOff = -offset;
                 }
                 else {
-                    scaleOff = 0.2;
+                    scaleOff = offset;
                 }
             }
             var x = e.offsetX, y = e.offsetY;
@@ -326,6 +333,19 @@ var Canvas = /** @class */ (function () {
             }
             var x = 10;
             var y = 10;
+            var vRect = null;
+            if (_this.store.options.strictScope) {
+                var width = _this.store.data.width || _this.store.options.width;
+                var height = _this.store.data.height || _this.store.options.height;
+                if (width && height) {
+                    vRect = {
+                        x: _this.store.data.origin.x,
+                        y: _this.store.data.origin.y,
+                        width: width * _this.store.data.scale,
+                        height: height * _this.store.data.scale,
+                    };
+                }
+            }
             switch (e.key) {
                 case ' ':
                     _this.hotkeyType = HotkeyType.Translate;
@@ -350,7 +370,9 @@ var Canvas = /** @class */ (function () {
                     }
                     else if (!_this.hotkeyType) {
                         _this.patchFlags = true;
-                        _this.hotkeyType = HotkeyType.Resize;
+                        if (!_this.store.options.resizeMode) {
+                            _this.hotkeyType = HotkeyType.Resize;
+                        }
                     }
                     break;
                 case 'Alt':
@@ -403,6 +425,9 @@ var Canvas = /** @class */ (function () {
                         x = -10;
                     }
                     x = x * _this.store.data.scale;
+                    if (vRect && _this.activeRect.x + x < vRect.x) {
+                        x = vRect.x - _this.activeRect.x;
+                    }
                     _this.translatePens(_this.store.active, x, 0);
                     break;
                 case 'ArrowUp':
@@ -418,6 +443,9 @@ var Canvas = /** @class */ (function () {
                         y = -10;
                     }
                     y = y * _this.store.data.scale;
+                    if (vRect && _this.activeRect.y + y < vRect.y) {
+                        y = vRect.y - _this.activeRect.y;
+                    }
                     _this.translatePens(_this.store.active, 0, y);
                     break;
                 case 'ArrowRight':
@@ -433,6 +461,11 @@ var Canvas = /** @class */ (function () {
                         x = 10;
                     }
                     x = x * _this.store.data.scale;
+                    if (vRect &&
+                        _this.activeRect.x + _this.activeRect.width + x > vRect.x + vRect.width) {
+                        x =
+                            vRect.x + vRect.width - (_this.activeRect.x + _this.activeRect.width);
+                    }
                     _this.translatePens(_this.store.active, x, 0);
                     break;
                 case 'ArrowDown':
@@ -448,6 +481,14 @@ var Canvas = /** @class */ (function () {
                         y = 10;
                     }
                     y = y * _this.store.data.scale;
+                    if (vRect &&
+                        _this.activeRect.y + _this.activeRect.height + y >
+                            vRect.y + vRect.height) {
+                        y =
+                            vRect.y +
+                                vRect.height -
+                                (_this.activeRect.y + _this.activeRect.height);
+                    }
                     _this.translatePens(_this.store.active, 0, y);
                     break;
                 case 'd':
@@ -1014,6 +1055,9 @@ var Canvas = /** @class */ (function () {
                         _this.store.data.rule &&
                             !_this.store.options.disableRuleLine &&
                             _this.addRuleLine(e);
+                        if (_this.store.options.resizeMode) {
+                            _this.hotkeyType = HotkeyType.None;
+                        }
                         _this.inactive();
                         break;
                     case HoverType.Node:
@@ -1038,6 +1082,9 @@ var Canvas = /** @class */ (function () {
                             else {
                                 if (!pen.calculative.active) {
                                     _this.active([pen]);
+                                    if (_this.store.options.resizeMode) {
+                                        _this.hotkeyType = HotkeyType.Resize;
+                                    }
                                 }
                             }
                             _this.calcActiveRect();
@@ -1331,6 +1378,7 @@ var Canvas = /** @class */ (function () {
                 _this.store.emitter.emit('contextmenu', {
                     e: e,
                     clientRect: _this.clientRect,
+                    pen: _this.store.hover,
                 });
             }
             _this.mouseRight = MouseRight.None;
@@ -2471,7 +2519,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) {
@@ -3020,6 +3073,21 @@ var Canvas = /** @class */ (function () {
                                             pen.height === rect_1.height) ||
                                             points.some(function (point) { return pointInRect(point, rect_1); })) {
                                             flag = false;
+                                            //严格范围模式下对齐大屏边界
+                                            if (this.store.options.strictScope) {
+                                                if (pen.x < rect_1.x) {
+                                                    pen.x = rect_1.x;
+                                                }
+                                                if (pen.y < rect_1.y) {
+                                                    pen.y = rect_1.y;
+                                                }
+                                                if (pen.x + pen.width > rect_1.x + rect_1.width) {
+                                                    pen.x = rect_1.x + rect_1.width - pen.width;
+                                                }
+                                                if (pen.y + pen.height > rect_1.y + rect_1.height) {
+                                                    pen.y = rect_1.y + rect_1.height - pen.height;
+                                                }
+                                            }
                                             break;
                                         }
                                     }
@@ -3844,12 +3912,14 @@ var Canvas = /** @class */ (function () {
                 break;
             case EditType.Delete:
                 action.pens.forEach(function (aPen) {
-                    var _a;
+                    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;
                     pen.calculative.canvas = _this;
@@ -3942,6 +4012,7 @@ var Canvas = /** @class */ (function () {
         }
         !pen.rotate && (pen.rotate = 0);
         this.loadImage(pen);
+        this.parent.penNetwork(pen);
     };
     Canvas.prototype.drawline = function (mouse) {
         var _a;
@@ -4391,6 +4462,43 @@ var Canvas = /** @class */ (function () {
         this.store.data.y += y * this.store.data.scale;
         this.store.data.x = Math.round(this.store.data.x);
         this.store.data.y = Math.round(this.store.data.y);
+        if (this.store.options.padding) {
+            var p = formatPadding(this.store.options.padding);
+            var width = this.store.data.width || this.store.options.width;
+            var height = this.store.data.height || this.store.options.height;
+            if (this.width < (width + p[1] + p[3]) * this.store.data.scale) {
+                if (this.store.data.x + this.store.data.origin.x >
+                    p[3] * this.store.data.scale) {
+                    this.store.data.x =
+                        p[3] * this.store.data.scale - this.store.data.origin.x;
+                }
+                if (this.store.data.x +
+                    this.store.data.origin.x +
+                    width * this.store.data.scale <
+                    this.width - p[1] * this.store.data.scale) {
+                    this.store.data.x =
+                        this.width -
+                            p[1] * this.store.data.scale -
+                            (this.store.data.origin.x + width * this.store.data.scale);
+                }
+            }
+            if (this.height < (height + p[0] + p[2]) * this.store.data.scale) {
+                if (this.store.data.y + this.store.data.origin.y >
+                    p[0] * this.store.data.scale) {
+                    this.store.data.y =
+                        p[0] * this.store.data.scale - this.store.data.origin.y;
+                }
+                if (this.store.data.y +
+                    this.store.data.origin.y +
+                    height * this.store.data.scale <
+                    this.height - p[2] * this.store.data.scale) {
+                    this.store.data.y =
+                        this.height -
+                            p[2] * this.store.data.scale -
+                            (this.store.data.origin.y + height * this.store.data.scale);
+                }
+            }
+        }
         setTimeout(function () {
             _this.canvasTemplate.init();
             _this.canvasImage.init();
@@ -4638,6 +4746,48 @@ var Canvas = /** @class */ (function () {
         }
         this.activeRect.ratio = this.initPens[0].ratio;
         resizeRect(this.activeRect, offsetX, offsetY, this.resizeIndex);
+        //大屏区域
+        if (this.store.options.strictScope) {
+            var width = this.store.data.width || this.store.options.width;
+            var height = this.store.data.height || this.store.options.height;
+            if (width && height) {
+                var vRect = {
+                    x: this.store.data.origin.x,
+                    y: this.store.data.origin.y,
+                    width: width * this.store.data.scale,
+                    height: height * this.store.data.scale,
+                };
+                if (this.activeRect.x < vRect.x) {
+                    this.activeRect.width =
+                        this.activeRect.width - (vRect.x - this.activeRect.x);
+                    this.activeRect.x = vRect.x;
+                }
+                if (this.activeRect.y < vRect.y) {
+                    this.activeRect.height =
+                        this.activeRect.height - (vRect.y - this.activeRect.y);
+                    this.activeRect.y = vRect.y;
+                }
+                if (this.activeRect.x + this.activeRect.width > vRect.x + vRect.width) {
+                    this.activeRect.width =
+                        this.activeRect.width -
+                            (this.activeRect.x +
+                                this.activeRect.width -
+                                (vRect.x + vRect.width));
+                    this.activeRect.x = vRect.x + vRect.width - this.activeRect.width;
+                    this.activeRect.ex = this.activeRect.x + this.activeRect.width;
+                }
+                if (this.activeRect.y + this.activeRect.height >
+                    vRect.y + vRect.height) {
+                    this.activeRect.height =
+                        this.activeRect.height -
+                            (this.activeRect.y +
+                                this.activeRect.height -
+                                (vRect.y + vRect.height));
+                    this.activeRect.y = vRect.y + vRect.height - this.activeRect.height;
+                    this.activeRect.ey = this.activeRect.y + this.activeRect.height;
+                }
+            }
+        }
         calcCenter(this.activeRect);
         var scaleX = this.activeRect.width / w;
         var scaleY = this.activeRect.height / h;
@@ -4706,11 +4856,40 @@ var Canvas = /** @class */ (function () {
         e.ctrlKey && (x = 0);
         var rect = deepClone(this.initActiveRect);
         translateRect(rect, x, y);
+        var vFlag = false;
+        if (this.store.options.strictScope) {
+            var width = this.store.data.width || this.store.options.width;
+            var height = this.store.data.height || this.store.options.height;
+            if (width && height) {
+                var vRect = {
+                    x: this.store.data.origin.x,
+                    y: this.store.data.origin.y,
+                    width: width * this.store.data.scale,
+                    height: height * this.store.data.scale,
+                };
+                if (rect.x < vRect.x) {
+                    rect.x = vRect.x;
+                    vFlag = true;
+                }
+                if (rect.y < vRect.y) {
+                    rect.y = vRect.y;
+                    vFlag = true;
+                }
+                if (rect.x + rect.width > vRect.x + vRect.width) {
+                    rect.x = vRect.x + vRect.width - rect.width;
+                    vFlag = true;
+                }
+                if (rect.y + rect.height > vRect.y + vRect.height) {
+                    rect.y = vRect.y + vRect.height - rect.height;
+                    vFlag = true;
+                }
+            }
+        }
         var offset = {
             x: rect.x - this.activeRect.x,
             y: rect.y - this.activeRect.y,
         };
-        if (!this.store.options.disableDock) {
+        if (!this.store.options.disableDock && !vFlag) {
             this.clearDock();
             var moveDock = this.customMoveDock || calcMoveDock;
             this.dock = moveDock(this.store, rect, this.movingPens, offset);
@@ -5381,6 +5560,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);
         });
     };
@@ -5468,7 +5650,7 @@ var Canvas = /** @class */ (function () {
             return;
         }
         pens.forEach(function (pen) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (pen.calculative.pause) {
                 var d = Date.now() - pen.calculative.pause;
                 pen.calculative.pause = undefined;
@@ -5481,9 +5663,26 @@ 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));
                     }
                     _this.store.animates.add(pen);
@@ -5913,7 +6112,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();
@@ -5929,15 +6128,14 @@ 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.parentId) {
-                if (pen.locked) {
-                    // TODO: canDelLocked 是 true ， locked 仍然删不掉
+                if (!canDelLocked && pen.locked) {
                     return;
                 }
                 else {
@@ -6103,9 +6301,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];
@@ -6237,37 +6486,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) {
@@ -6284,6 +6541,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);
@@ -6398,11 +6660,12 @@ var Canvas = /** @class */ (function () {
             height: pen.height / scale,
         };
     };
-    Canvas.prototype.toPng = function (padding, callback, containBkImg) {
+    Canvas.prototype.toPng = function (padding, callback, containBkImg, maxWidth) {
         var e_22, _a;
         if (padding === void 0) { padding = 2; }
         if (containBkImg === void 0) { containBkImg = false; }
         var rect = getRect(this.store.data.pens);
+        var _scale = this.store.data.scale;
         if (!isFinite(rect.width)) {
             throw new Error('can not to png, because width is not finite');
         }
@@ -6428,12 +6691,28 @@ 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;
+        //大屏
+        if (width && height) {
+            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];
-        rect.y -= p[0];
-        rect.width += p[3] + p[1];
-        rect.height += p[0] + p[2];
+        rect.x -= p[3] * _scale;
+        rect.y -= p[0] * _scale;
+        rect.width += (p[3] + p[1]) * _scale;
+        rect.height += (p[0] + p[2]) * _scale;
+        // 扩大图
+        // const scale =
+        //   rect.width > rect.height ? longSide / rect.width : longSide / rect.height;
+        var scale = (maxWidth || 1920) / rect.width;
+        rect.width *= scale;
+        rect.height *= scale;
         calcRightBottom(rect);
         var canvas = document.createElement('canvas');
         canvas.width = rect.width;
@@ -6447,26 +6726,49 @@ var Canvas = /** @class */ (function () {
             throw new Error('can not to png, because the size exceeds the browser limit');
         }
         var ctx = canvas.getContext('2d');
+        // if (window.devicePixelRatio > 1) {
+        //   canvas.width *= window.devicePixelRatio;
+        //   canvas.height *= window.devicePixelRatio;
+        //   canvas.style.width = `${canvas.width / window.devicePixelRatio}`;
+        //   canvas.style.height = `${canvas.height / window.devicePixelRatio}`;
+        //   ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+        // }
         ctx.textBaseline = 'middle'; // 默认垂直居中
-        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);
-        }
+        ctx.scale(scale, scale);
         var background = this.store.data.background || this.store.options.background;
         if (background) {
             // 绘制背景颜色
             ctx.save();
             ctx.fillStyle = background;
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            if (width && height) {
+                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 (width && height) {
+                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 (width && height) {
+                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()) {