@meta2d/core 1.0.24 → 1.0.26

package/src/canvas/canvas.js

@@ -242,6 +242,12 @@ var Canvas = /** @class */ (function () {
             if (_this.pencil) {
                 return;
             }
+            if (_this.store.hover) {
+                if (_this.store.hover.onWheel) {
+                    _this.store.hover.onWheel(_this.store.hover, e);
+                    return;
+                }
+            }
             if (_this.store.options.disableScale) {
                 return;
             }
@@ -381,13 +387,14 @@ var Canvas = /** @class */ (function () {
                         _this.translateAnchor(-1, 0);
                         break;
                     }
-                    x = -10;
+                    x = -1;
                     if (e.shiftKey) {
                         x = -5;
                     }
                     if (e.ctrlKey || e.metaKey) {
-                        x = -1;
+                        x = -10;
                     }
+                    x = x * _this.store.data.scale;
                     _this.translatePens(_this.store.active, x, 0);
                     break;
                 case 'ArrowUp':
@@ -395,13 +402,14 @@ var Canvas = /** @class */ (function () {
                         _this.translateAnchor(0, -1);
                         break;
                     }
-                    y = -10;
+                    y = -1;
                     if (e.shiftKey) {
                         y = -5;
                     }
                     if (e.ctrlKey || e.metaKey) {
-                        y = -1;
+                        y = -10;
                     }
+                    y = y * _this.store.data.scale;
                     _this.translatePens(_this.store.active, 0, y);
                     break;
                 case 'ArrowRight':
@@ -409,12 +417,14 @@ var Canvas = /** @class */ (function () {
                         _this.translateAnchor(1, 0);
                         break;
                     }
+                    x = 1;
                     if (e.shiftKey) {
                         x = 5;
                     }
                     if (e.ctrlKey || e.metaKey) {
-                        x = 1;
+                        x = 10;
                     }
+                    x = x * _this.store.data.scale;
                     _this.translatePens(_this.store.active, x, 0);
                     break;
                 case 'ArrowDown':
@@ -422,12 +432,14 @@ var Canvas = /** @class */ (function () {
                         _this.translateAnchor(0, 1);
                         break;
                     }
+                    y = 1;
                     if (e.shiftKey) {
                         y = 5;
                     }
                     if (e.ctrlKey || e.metaKey) {
-                        y = 1;
+                        y = 10;
                     }
+                    y = y * _this.store.data.scale;
                     _this.translatePens(_this.store.active, 0, y);
                     break;
                 case 'd':
@@ -1424,6 +1436,16 @@ var Canvas = /** @class */ (function () {
             // Add pen
             if (_this.addCaches && _this.addCaches.length) {
                 if (!_this.store.data.locked) {
+                    if (_this.dragRect) {
+                        // 只存在一个缓存图元
+                        if (_this.addCaches.length === 1) {
+                            var target = _this.addCaches[0];
+                            target.width = _this.dragRect.width;
+                            target.height = _this.dragRect.height;
+                            e.x = (_this.dragRect.x + _this.dragRect.ex) / 2;
+                            e.y = (_this.dragRect.y + _this.dragRect.ey) / 2;
+                        }
+                    }
                     _this.dropPens(_this.addCaches, e);
                 }
                 _this.addCaches = undefined;
@@ -1553,6 +1575,7 @@ var Canvas = /** @class */ (function () {
             var hoverType = HoverType.None;
             _this.store.hover = undefined;
             _this.store.hoverAnchor = undefined;
+            _this.title.hide();
             _this.store.pointAt = undefined;
             _this.store.pointAtIndex = undefined;
             var activeLine = _this.store.active.length === 1 && _this.store.active[0].type;
@@ -1644,7 +1667,7 @@ var Canvas = /** @class */ (function () {
         this.inPens = function (pt, pens) {
             var hoverType = HoverType.None;
             var _loop_2 = function (i) {
-                var e_1, _a, e_2, _b, e_3, _c;
+                var e_1, _a, e_2, _b;
                 var pen = pens[i];
                 if (pen.visible == false ||
                     pen.calculative.inView == false ||
@@ -1658,47 +1681,48 @@ var Canvas = /** @class */ (function () {
                     return "continue";
                 }
                 //anchor title
-                if (_this.store.data.locked) {
-                    // locked>0
-                    if (pen.calculative.worldAnchors) {
-                        try {
-                            for (var _d = (e_1 = void 0, __values(pen.calculative.worldAnchors)), _e = _d.next(); !_e.done; _e = _d.next()) {
-                                var anchor = _e.value;
-                                if (hitPoint(pt, anchor, _this.pointSize, anchor.penId ? _this.store.pens[anchor.penId] : undefined)) {
-                                    _this.title.show(anchor, pen);
-                                    if (anchor.title) {
-                                        return "break-outer";
-                                    }
-                                }
-                            }
-                        }
-                        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                        finally {
-                            try {
-                                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
-                            }
-                            finally { if (e_1) throw e_1.error; }
-                        }
-                    }
-                }
+                // if (this.store.data.locked) {
+                //   // locked>0
+                //   if (pen.calculative.worldAnchors) {
+                //     for (const anchor of pen.calculative.worldAnchors) {
+                //       if (
+                //         hitPoint(
+                //           pt,
+                //           anchor,
+                //           this.pointSize,
+                //           anchor.penId ? this.store.pens[anchor.penId] : undefined
+                //         )
+                //       ) {
+                //         this.title.show(anchor, pen);
+                //         if (anchor.title) {
+                //           break outer;
+                //         }
+                //       }
+                //     }
+                //   }
+                // }
                 // 锚点
                 if (!_this.store.data.locked && _this.hotkeyType !== HotkeyType.Resize) {
                     if (pen.calculative.worldAnchors) {
                         try {
-                            for (var _f = (e_2 = void 0, __values(pen.calculative.worldAnchors)), _g = _f.next(); !_g.done; _g = _f.next()) {
-                                var anchor = _g.value;
+                            for (var _c = (e_1 = void 0, __values(pen.calculative.worldAnchors)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                                var anchor = _d.value;
                                 hoverType = _this.inAnchor(pt, pen, anchor);
                                 if (hoverType) {
+                                    //title显示
+                                    var _anchor = deepClone(anchor);
+                                    Object.assign(_anchor, pt);
+                                    _this.title.show(_anchor, pen);
                                     return "break-outer";
                                 }
                             }
                         }
-                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                        catch (e_1_1) { e_1 = { error: e_1_1 }; }
                         finally {
                             try {
-                                if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
+                                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                             }
-                            finally { if (e_2) throw e_2.error; }
+                            finally { if (e_1) throw e_1.error; }
                         }
                     }
                 }
@@ -1759,7 +1783,7 @@ var Canvas = /** @class */ (function () {
                         _this.store.pointAt = pt;
                         // 锚点贴边吸附
                         if (!pt.ctrlKey) {
-                            var _h = _this.store.hover.calculative.worldRect, x = _h.x, y = _h.y, ex = _h.ex, ey = _h.ey, rotate_1 = _h.rotate, center_1 = _h.center;
+                            var _e = _this.store.hover.calculative.worldRect, x = _e.x, y = _e.y, ex = _e.ex, ey = _e.ey, rotate_1 = _e.rotate, center_1 = _e.center;
                             if (rotate_1) {
                                 var pts = [
                                     { x: x, y: y },
@@ -1772,7 +1796,7 @@ var Canvas = /** @class */ (function () {
                                 });
                                 var last = pts[pts.length - 1];
                                 try {
-                                    for (var pts_1 = (e_3 = void 0, __values(pts)), pts_1_1 = pts_1.next(); !pts_1_1.done; pts_1_1 = pts_1.next()) {
+                                    for (var pts_1 = (e_2 = void 0, __values(pts)), pts_1_1 = pts_1.next(); !pts_1_1.done; pts_1_1 = pts_1.next()) {
                                         var item = pts_1_1.value;
                                         if (last.y > pt.y !== item.y > pt.y) {
                                             var tempx = item.x +
@@ -1784,12 +1808,12 @@ var Canvas = /** @class */ (function () {
                                         last = item;
                                     }
                                 }
-                                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                                catch (e_2_1) { e_2 = { error: e_2_1 }; }
                                 finally {
                                     try {
-                                        if (pts_1_1 && !pts_1_1.done && (_c = pts_1.return)) _c.call(pts_1);
+                                        if (pts_1_1 && !pts_1_1.done && (_b = pts_1.return)) _b.call(pts_1);
                                     }
-                                    finally { if (e_3) throw e_3.error; }
+                                    finally { if (e_2) throw e_2.error; }
                                 }
                             }
                             else {
@@ -1822,7 +1846,7 @@ var Canvas = /** @class */ (function () {
             return hoverType;
         };
         this.dockInAnchor = function (pt) {
-            var e_4, _a;
+            var e_3, _a;
             var _b, _c;
             _this.store.hover = undefined;
             for (var i = _this.store.data.pens.length - 1; i >= 0; --i) {
@@ -1842,7 +1866,7 @@ var Canvas = /** @class */ (function () {
                 if (_this.hotkeyType !== HotkeyType.Resize) {
                     if (pen.calculative.worldAnchors) {
                         try {
-                            for (var _d = (e_4 = void 0, __values(pen.calculative.worldAnchors)), _e = _d.next(); !_e.done; _e = _d.next()) {
+                            for (var _d = (e_3 = void 0, __values(pen.calculative.worldAnchors)), _e = _d.next(); !_e.done; _e = _d.next()) {
                                 var anchor = _e.value;
                                 if (anchor.twoWay === TwoWay.In) {
                                     var to = getToAnchor(_this.store.active[0]);
@@ -1867,12 +1891,12 @@ var Canvas = /** @class */ (function () {
                                 }
                             }
                         }
-                        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                        catch (e_3_1) { e_3 = { error: e_3_1 }; }
                         finally {
                             try {
                                 if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
                             }
-                            finally { if (e_4) throw e_4.error; }
+                            finally { if (e_3) throw e_3.error; }
                         }
                     }
                 }
@@ -1927,7 +1951,7 @@ var Canvas = /** @class */ (function () {
             _this.patchFlags = false;
         };
         this.renderPens = function () {
-            var e_5, _a;
+            var e_4, _a;
             var ctx = _this.offscreen.getContext('2d');
             ctx.strokeStyle = getGlobalColor(_this.store);
             try {
@@ -1941,12 +1965,12 @@ var Canvas = /** @class */ (function () {
                     }
                 }
             }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_5) throw e_5.error; }
+                finally { if (e_4) throw e_4.error; }
             }
             if (_this.drawingLine) {
                 renderPen(ctx, _this.drawingLine);
@@ -1983,9 +2007,13 @@ var Canvas = /** @class */ (function () {
                         ctx.translate(-_this.activeRect.center.x, -_this.activeRect.center.y);
                     }
                     ctx.strokeStyle = _this.store.options.activeColor;
-                    ctx.globalAlpha = 0.3;
+                    ctx.globalAlpha = _this.store.options.activeGlobalAlpha || 0.3;
                     ctx.beginPath();
+                    ctx.lineWidth = _this.store.options.activeLineWidth || 1;
+                    ctx.setLineDash(_this.store.options.activeLineDash || []);
                     ctx.strokeRect(_this.activeRect.x, _this.activeRect.y, _this.activeRect.width, _this.activeRect.height);
+                    ctx.setLineDash([]);
+                    ctx.lineWidth = 1;
                     ctx.globalAlpha = 1;
                     if (getPensLock(_this.store.active) ||
                         getPensDisableRotate(_this.store.active) ||
@@ -2186,7 +2214,7 @@ var Canvas = /** @class */ (function () {
          * @returns 复制后的画笔
          */
         this.pastePen = function (pen, parentId) {
-            var e_6, _a;
+            var e_5, _a;
             var oldId = pen.id;
             randomId(pen);
             pen.parentId = parentId;
@@ -2227,12 +2255,12 @@ var Canvas = /** @class */ (function () {
                         _loop_3(childId);
                     }
                 }
-                catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                catch (e_5_1) { e_5 = { error: e_5_1 }; }
                 finally {
                     try {
                         if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                     }
-                    finally { if (e_6) throw e_6.error; }
+                    finally { if (e_5) throw e_5.error; }
                 }
             }
             pen.children = newChildren;
@@ -2527,7 +2555,7 @@ var Canvas = /** @class */ (function () {
             _this.render();
         };
         this.setDropdownList = function (search) {
-            var e_7, _a;
+            var e_6, _a;
             _this.clearDropdownList();
             if (!_this.store.data.locked) {
                 return;
@@ -2574,12 +2602,12 @@ var Canvas = /** @class */ (function () {
                     ++i;
                 }
             }
-            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+            catch (e_6_1) { e_6 = { error: e_6_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_7) throw e_7.error; }
+                finally { if (e_6) throw e_6.error; }
             }
             if (!_this.dropdown.hasChildNodes()) {
                 var none = document.createElement('div');
@@ -2723,6 +2751,17 @@ var Canvas = /** @class */ (function () {
             });
         };
         this.externalElements.onmouseleave = function (e) {
+            //离开画布取消所有选中
+            _this.store.data.pens.forEach(function (pen) {
+                if (pen.calculative.hover) {
+                    pen.calculative.hover = false;
+                }
+            });
+            if (_this.store.hover) {
+                _this.store.hover.calculative.hover = false;
+                _this.store.hover = undefined;
+            }
+            _this.render();
             if (e.toElement !== _this.tooltip.box) {
                 _this.tooltip.hide();
                 _this.store.lastHover = undefined;
@@ -2865,7 +2904,7 @@ var Canvas = /** @class */ (function () {
     Canvas.prototype.dropPens = function (pens, e) {
         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_8, _a, e_9, _b, e_10, _c, e_11, _d;
+            var e_7, _a, e_8, _b, e_9, _c, e_10, _d;
             return __generator(this, function (_e) {
                 switch (_e.label) {
                     case 0:
@@ -2876,12 +2915,12 @@ var Canvas = /** @class */ (function () {
                                 !pen.parentId && this.randomCombineId(pen, pens);
                             }
                         }
-                        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                        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);
                             }
-                            finally { if (e_8) throw e_8.error; }
+                            finally { if (e_7) throw e_7.error; }
                         }
                         try {
                             for (pens_3 = __values(pens), pens_3_1 = pens_3.next(); !pens_3_1.done; pens_3_1 = pens_3.next()) {
@@ -2894,12 +2933,12 @@ var Canvas = /** @class */ (function () {
                                 this.store.pens[pen.id] = pen;
                             }
                         }
-                        catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                        catch (e_8_1) { e_8 = { error: e_8_1 }; }
                         finally {
                             try {
                                 if (pens_3_1 && !pens_3_1.done && (_b = pens_3.return)) _b.call(pens_3);
                             }
-                            finally { if (e_9) throw e_9.error; }
+                            finally { if (e_8) throw e_8.error; }
                         }
                         try {
                             // // 计算区域
@@ -2921,12 +2960,12 @@ var Canvas = /** @class */ (function () {
                                 }
                             }
                         }
-                        catch (e_10_1) { e_10 = { error: e_10_1 }; }
+                        catch (e_9_1) { e_9 = { error: e_9_1 }; }
                         finally {
                             try {
                                 if (pens_4_1 && !pens_4_1.done && (_c = pens_4.return)) _c.call(pens_4);
                             }
-                            finally { if (e_10) throw e_10.error; }
+                            finally { if (e_9) throw e_9.error; }
                         }
                         width = this.store.data.width || this.store.options.width;
                         height = this.store.data.height || this.store.options.height;
@@ -2959,12 +2998,12 @@ var Canvas = /** @class */ (function () {
                                     }
                                 }
                             }
-                            catch (e_11_1) { e_11 = { error: e_11_1 }; }
+                            catch (e_10_1) { e_10 = { error: e_10_1 }; }
                             finally {
                                 try {
                                     if (pens_5_1 && !pens_5_1.done && (_d = pens_5.return)) _d.call(pens_5);
                                 }
-                                finally { if (e_11) throw e_11.error; }
+                                finally { if (e_10) throw e_10.error; }
                             }
                             if (flag) {
                                 console.info('画笔在大屏范围外');
@@ -2983,7 +3022,7 @@ var Canvas = /** @class */ (function () {
         });
     };
     Canvas.prototype.randomCombineId = function (pen, pens, parentId) {
-        var e_12, _a;
+        var e_11, _a;
         randomId(pen);
         pen.parentId = parentId;
         var newChildren = [];
@@ -3000,12 +3039,12 @@ var Canvas = /** @class */ (function () {
                     _loop_4(childId);
                 }
             }
-            catch (e_12_1) { e_12 = { error: e_12_1 }; }
+            catch (e_11_1) { e_11 = { error: e_11_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_12) throw e_12.error; }
+                finally { if (e_11) throw e_11.error; }
             }
         }
         pen.children = newChildren;
@@ -3014,7 +3053,7 @@ 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_13, _b;
+            var e_12, _b;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
@@ -3039,12 +3078,12 @@ var Canvas = /** @class */ (function () {
                                 list.push(pen);
                             }
                         }
-                        catch (e_13_1) { e_13 = { error: e_13_1 }; }
+                        catch (e_12_1) { e_12 = { error: e_12_1 }; }
                         finally {
                             try {
                                 if (pens_6_1 && !pens_6_1.done && (_b = pens_6.return)) _b.call(pens_6);
                             }
-                            finally { if (e_13) throw e_13.error; }
+                            finally { if (e_12) throw e_12.error; }
                         }
                         this.render();
                         this.store.emitter.emit('add', list);
@@ -3314,7 +3353,7 @@ var Canvas = /** @class */ (function () {
         this.patchFlags = true;
     };
     Canvas.prototype.active = function (pens, emit) {
-        var e_14, _a, _b;
+        var e_13, _a, _b;
         if (emit === void 0) { emit = true; }
         if (this.store.active) {
             emit && this.store.emitter.emit('inactive', this.store.active);
@@ -3326,12 +3365,12 @@ var Canvas = /** @class */ (function () {
                     setChildrenActive(pen, false);
                 }
             }
-            catch (e_14_1) { e_14 = { error: e_14_1 }; }
+            catch (e_13_1) { e_13 = { error: e_13_1 }; }
             finally {
                 try {
                     if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                 }
-                finally { if (e_14) throw e_14.error; }
+                finally { if (e_13) throw e_13.error; }
             }
         }
         this.store.active = [];
@@ -3517,7 +3556,7 @@ var Canvas = /** @class */ (function () {
         return HoverType.None;
     };
     Canvas.prototype.resize = function (w, h) {
-        var e_15, _a;
+        var e_14, _a;
         w = w || this.parentElement.clientWidth;
         h = h || this.parentElement.clientHeight;
         this.width = w;
@@ -3558,12 +3597,12 @@ var Canvas = /** @class */ (function () {
                 calcInView(pen);
             }
         }
-        catch (e_15_1) { e_15 = { error: e_15_1 }; }
+        catch (e_14_1) { e_14 = { error: e_14_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_15) throw e_15.error; }
+            finally { if (e_14) throw e_14.error; }
         }
     };
     Canvas.prototype.clearCanvas = function () {
@@ -3628,7 +3667,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_16, _a;
+            var e_15, _a;
             var found;
             if (action.initPens) {
                 try {
@@ -3639,12 +3678,12 @@ var Canvas = /** @class */ (function () {
                         }
                     }
                 }
-                catch (e_16_1) { e_16 = { error: e_16_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_16) throw e_16.error; }
+                    finally { if (e_15) throw e_15.error; }
                 }
             }
             if (found) {
@@ -4293,7 +4332,7 @@ var Canvas = /** @class */ (function () {
         this.onMovePens();
     };
     Canvas.prototype.onMovePens = function () {
-        var e_17, _a;
+        var e_16, _a;
         var _b;
         var map = this.parent.map;
         if (map && map.isShow) {
@@ -4318,12 +4357,12 @@ var Canvas = /** @class */ (function () {
                 }
             }
         }
-        catch (e_17_1) { e_17 = { error: e_17_1 }; }
+        catch (e_16_1) { e_16 = { error: e_16_1 }; }
         finally {
             try {
                 if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_17) throw e_17.error; }
+            finally { if (e_16) throw e_16.error; }
         }
     };
     /**
@@ -4383,7 +4422,7 @@ var Canvas = /** @class */ (function () {
         });
     };
     Canvas.prototype.rotatePens = function (e) {
-        var e_18, _a;
+        var e_17, _a;
         var _this = this;
         if (!this.initPens) {
             this.initPens = deepClone(this.getAllByPens(this.store.active));
@@ -4410,12 +4449,12 @@ var Canvas = /** @class */ (function () {
                 this.updateLines(pen);
             }
         }
-        catch (e_18_1) { e_18 = { error: e_18_1 }; }
+        catch (e_17_1) { e_17 = { error: e_17_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_18) throw e_18.error; }
+            finally { if (e_17) throw e_17.error; }
         }
         this.lastRotate = this.activeRect.rotate;
         this.getSizeCPs();
@@ -4482,6 +4521,7 @@ var Canvas = /** @class */ (function () {
             var sign = [1, 3].includes(this.resizeIndex) ? -1 : 1;
             offsetY = (sign * (offsetX * h)) / w;
         }
+        this.activeRect.ratio = this.initPens[0].ratio;
         resizeRect(this.activeRect, offsetX, offsetY, this.resizeIndex);
         calcCenter(this.activeRect);
         var scaleX = this.activeRect.width / w;
@@ -5310,7 +5350,7 @@ var Canvas = /** @class */ (function () {
             return;
         }
         requestAnimationFrame(function () {
-            var e_19, _a;
+            var e_18, _a;
             var now = Date.now();
             if (now - _this.lastAnimateRender < _this.store.options.animateInterval) {
                 if (_this.store.animates.size > 0) {
@@ -5395,12 +5435,12 @@ var Canvas = /** @class */ (function () {
                     _loop_5(pen);
                 }
             }
-            catch (e_19_1) { e_19 = { error: e_19_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_19) throw e_19.error; }
+                finally { if (e_18) throw e_18.error; }
             }
             if (active) {
                 _this.calcActiveRect();
@@ -5487,7 +5527,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_20, _d;
+            var e_19, _d;
             return __generator(this, function (_e) {
                 switch (_e.label) {
                     case 0:
@@ -5560,12 +5600,12 @@ var Canvas = /** @class */ (function () {
                                 this.pastePen(pen, undefined);
                             }
                         }
-                        catch (e_20_1) { e_20 = { error: e_20_1 }; }
+                        catch (e_19_1) { e_19 = { error: e_19_1 }; }
                         finally {
                             try {
                                 if (rootPens_1_1 && !rootPens_1_1.done && (_d = rootPens_1.return)) _d.call(rootPens_1);
                             }
-                            finally { if (e_20) throw e_20.error; }
+                            finally { if (e_19) throw e_19.error; }
                         }
                         sessionStorage.setItem('page', clipboard.page);
                         this.active(rootPens);
@@ -5583,7 +5623,7 @@ var Canvas = /** @class */ (function () {
      * @param pens 不包含子节点
      */
     Canvas.prototype.getAllByPens = function (pens) {
-        var e_21, _a;
+        var e_20, _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()) {
@@ -5591,12 +5631,12 @@ var Canvas = /** @class */ (function () {
                 retPens.push.apply(retPens, __spreadArray([], __read(deepClone(getAllChildren(pen, this.store), true)), false));
             }
         }
-        catch (e_21_1) { e_21 = { error: e_21_1 }; }
+        catch (e_20_1) { e_20 = { error: e_20_1 }; }
         finally {
             try {
                 if (pens_8_1 && !pens_8_1.done && (_a = pens_8.return)) _a.call(pens_8);
             }
-            finally { if (e_21) throw e_21.error; }
+            finally { if (e_20) throw e_20.error; }
         }
         return retPens.concat(pens);
     };
@@ -5639,7 +5679,7 @@ var Canvas = /** @class */ (function () {
      * @param pastePens 此处复制的全部 pens (包含子节点)
      */
     Canvas.prototype.changeNodeConnectedLine = function (oldId, line, pastePens) {
-        var e_22, _a;
+        var e_21, _a;
         var _b;
         var from = line.anchors[0];
         var to = line.anchors[line.anchors.length - 1];
@@ -5675,12 +5715,12 @@ var Canvas = /** @class */ (function () {
                 _loop_7(anchor);
             }
         }
-        catch (e_22_1) { e_22 = { error: e_22_1 }; }
+        catch (e_21_1) { e_21 = { error: e_21_1 }; }
         finally {
             try {
                 if (anchors_1_1 && !anchors_1_1.done && (_a = anchors_1.return)) _a.call(anchors_1);
             }
-            finally { if (e_22) throw e_22.error; }
+            finally { if (e_21) throw e_21.error; }
         }
     };
     Canvas.prototype.delete = function (pens, canDelLocked, history) {
@@ -6194,7 +6234,7 @@ var Canvas = /** @class */ (function () {
         };
     };
     Canvas.prototype.toPng = function (padding, callback, containBkImg) {
-        var e_23, _a;
+        var e_22, _a;
         if (padding === void 0) { padding = 2; }
         if (containBkImg === void 0) { containBkImg = false; }
         var rect = getRect(this.store.data.pens);
@@ -6282,12 +6322,12 @@ var Canvas = /** @class */ (function () {
                 pen.calculative.active = active;
             }
         }
-        catch (e_23_1) { e_23 = { error: e_23_1 }; }
+        catch (e_22_1) { e_22 = { error: e_22_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_23) throw e_23.error; }
+            finally { if (e_22) throw e_22.error; }
         }
         if (callback) {
             canvas.toBlob(callback);
@@ -6295,6 +6335,66 @@ var Canvas = /** @class */ (function () {
         }
         return canvas.toDataURL();
     };
+    Canvas.prototype.activeToPng = function (padding) {
+        var e_23, _a;
+        if (padding === void 0) { padding = 2; }
+        var allPens = this.getAllByPens(this.store.active);
+        var ids = allPens.map(function (pen) { return pen.id; });
+        var rect = getRect(allPens);
+        if (!isFinite(rect.width)) {
+            throw new Error('can not to png, because width is not finite');
+        }
+        var oldRect = deepClone(rect);
+        var p = formatPadding(padding);
+        rect.x -= p[3];
+        rect.y -= p[0];
+        rect.width += p[3] + p[1];
+        rect.height += p[0] + p[2];
+        calcRightBottom(rect);
+        var canvas = document.createElement('canvas');
+        canvas.width = rect.width;
+        canvas.height = rect.height;
+        if (canvas.width > 32767 ||
+            canvas.height > 32767 ||
+            (!navigator.userAgent.includes('Firefox') &&
+                canvas.height * canvas.width > 268435456) ||
+            (navigator.userAgent.includes('Firefox') &&
+                canvas.height * canvas.width > 472907776)) {
+            throw new Error('can not to png, because the size exceeds the browser limit');
+        }
+        var ctx = canvas.getContext('2d');
+        ctx.textBaseline = 'middle'; // 默认垂直居中
+        // // 平移画布，画笔的 worldRect 不变化
+        ctx.translate(-oldRect.x, -oldRect.y);
+        try {
+            for (var _b = __values(this.store.data.pens), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var pen = _c.value;
+                if (ids.includes(pen.id)) {
+                    // 不使用 calculative.inView 的原因是，如果 pen 在 view 之外，那么它的 calculative.inView 为 false，但是它的绘制还是需要的
+                    if (!isShowChild(pen, this.store) || pen.visible == false) {
+                        continue;
+                    }
+                    var active = pen.calculative.active;
+                    pen.calculative.active = false;
+                    if (pen.calculative.img) {
+                        renderPenRaw(ctx, pen);
+                    }
+                    else {
+                        renderPen(ctx, pen);
+                    }
+                    pen.calculative.active = active;
+                }
+            }
+        }
+        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_23) throw e_23.error; }
+        }
+        return canvas.toDataURL();
+    };
     Canvas.prototype.toggleAnchorMode = function () {
         var _a;
         if (!this.hotkeyType) {