@meta2d/core 1.0.15 → 1.0.17

package/src/canvas/canvas.js

@@ -86,7 +86,7 @@ import { addLineAnchor, calcIconRect, calcTextRect, calcWorldAnchors, calcWorldR
 import { calcRotate, distance, hitPoint, 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';
-import { deepClone, fileToBase64, uploadFile, formatPadding, isMobile, rgba, s8, } from '../utils';
+import { deepClone, fileToBase64, uploadFile, formatPadding, rgba, s8, } from '../utils';
 import { inheritanceProps, defaultCursors, defaultDrawLineFns, HotkeyType, HoverType, MouseRight, rotatedCursors, } from '../data';
 import { createOffscreen } from './offscreen';
 import { curve, mind, getLineLength, getLineRect, pointInLine, simplify, smoothLine, lineSegment, getLineR, lineInRect, } from '../diagrams';
@@ -96,6 +96,8 @@ import { Scroll } from '../scroll';
 import { CanvasImage } from './canvasImage';
 import { MagnifierCanvas } from './magnifierCanvas';
 import { lockedError } from '../utils/error';
+import { Dialog } from '../dialog';
+import { setter } from '../utils/object';
 export var movingSuffix = '-moving';
 var Canvas = /** @class */ (function () {
     function Canvas(parent, parentElement, store) {
@@ -122,6 +124,7 @@ var Canvas = /** @class */ (function () {
         this.animateRendering = false;
         this.pointSize = 8;
         this.pasteOffset = 10;
+        this.opening = false;
         this.inputParent = document.createElement('div');
         // input = document.createElement('textarea');
         this.inputDiv = document.createElement('div');
@@ -246,57 +249,25 @@ var Canvas = /** @class */ (function () {
                 return;
             if (_this.store.data.locked === LockState.DisableMoveScale)
                 return;
-            //禁止触摸屏双指缩放操作
-            if (_this.store.options.disableTouchPadScale &&
-                e.ctrlKey &&
-                e.deltaY !== 0) {
-                return;
-            }
-            //window触控板只允许平移 触摸屏一般不超过100
-            var isWin = navigator.userAgent.indexOf('Win') !== -1;
-            if (isWin && !e.ctrlKey && Math.abs(e.deltaY) < 100) {
-                _this.translate(-e.deltaX, -e.deltaY);
-                return;
-            }
-            //mac触控板只允许平移（排除普通鼠标的情况）
-            var isMac = /macintosh|mac os x/i.test(navigator.userAgent) ||
-                navigator.platform.indexOf('Mac') !== -1;
-            if (isMac && !e.ctrlKey && e.wheelDeltaY % 240 !== 0) {
+            // e.ctrlKey: false - 平移； true - 缩放。老windows触摸板不支持
+            if (!e.ctrlKey) {
+                if (_this.store.options.scroll && !e.metaKey && _this.scroll) {
+                    _this.scroll.wheel(e.deltaY < 0);
+                    return;
+                }
                 _this.translate(-e.deltaX, -e.deltaY);
                 return;
             }
-            if (_this.store.options.scroll && !e.ctrlKey && !e.metaKey && _this.scroll) {
-                _this.scroll.wheel(e.deltaY < 0);
-                return;
-            }
-            // 触摸板平移
-            var isTouchPad = !(!e.deltaX && e.deltaY);
-            var now = performance.now();
-            var _scale = 0.1;
-            if (now - _this.touchStart < 50) {
+            //禁止触摸屏双指缩放操作
+            if (_this.store.options.disableTouchPadScale) {
                 return;
             }
-            if (now - _this.touchStart < 100) {
-                _scale = 0.5;
-            }
-            else if (now - _this.touchStart < 200) {
-                _scale = 0.3;
-            }
-            else {
-                _scale = 0.1;
-            }
-            _this.touchStart = now;
             var x = e.offsetX, y = e.offsetY;
-            if (isTouchPad) {
-                _this.translate(e.deltaX, e.deltaY);
+            if (e.deltaY < 0) {
+                _this.scale(_this.store.data.scale + 0.015, { x: x, y: y });
             }
             else {
-                if (e.deltaY < 0) {
-                    _this.scale(_this.store.data.scale + _scale, { x: x, y: y });
-                }
-                else {
-                    _this.scale(_this.store.data.scale - _scale, { x: x, y: y });
-                }
+                _this.scale(_this.store.data.scale - 0.015, { x: x, y: y });
             }
             _this.externalElements.focus(); // 聚焦
         };
@@ -781,7 +752,9 @@ var Canvas = /** @class */ (function () {
                 altKey: event.altKey,
                 buttons: 1,
             });
-            _this.render();
+            setTimeout(function () {
+                _this.render();
+            }, 20);
         };
         this.onGesturestart = function (e) {
             e.preventDefault();
@@ -1460,6 +1433,7 @@ var Canvas = /** @class */ (function () {
             _this.clearDock();
             _this.dragRect = undefined;
             _this.initActiveRect = undefined;
+            _this.render();
         };
         this.clearDock = function () {
             var _a, _b, _c, _d;
@@ -1808,6 +1782,12 @@ var Canvas = /** @class */ (function () {
             }
         };
         this.render = function (patchFlags) {
+            if (patchFlags) {
+                _this.opening = false;
+            }
+            if (_this.opening) {
+                return;
+            }
             var now;
             if (patchFlags == null || patchFlags === true || patchFlags === Infinity) {
                 now = performance.now();
@@ -2321,7 +2301,7 @@ var Canvas = /** @class */ (function () {
             var _textWidth = null;
             if (pen.textWidth) {
                 _textWidth =
-                    (pen.textWidth < 1 && pen.textWidth) > -1
+                    pen.textWidth < 1 && pen.textWidth > -1
                         ? pen.textWidth * pen.calculative.worldRect.width
                         : pen.textWidth;
                 if (pen.whiteSpace !== 'pre-line') {
@@ -2539,6 +2519,7 @@ var Canvas = /** @class */ (function () {
             var hover = _this.store.data.pens.find(function (item) { return item.calculative.hover === true; });
             setHover(hover, false);
         };
+        this.dialog = new Dialog(parentElement);
         if (this.store.options.scroll) {
             this.scroll = new Scroll(this);
         }
@@ -2561,66 +2542,62 @@ var Canvas = /** @class */ (function () {
         this.externalElements.ondragover = function (e) { return e.preventDefault(); };
         this.externalElements.ondrop = this.ondrop;
         this.externalElements.oncontextmenu = function (e) { return e.preventDefault(); };
-        if (isMobile()) {
-            this.store.options.interval = 50;
-            this.externalElements.ontouchstart = this.ontouchstart;
-            this.externalElements.ontouchmove = this.ontouchmove;
-            this.externalElements.ontouchend = this.ontouchend;
-        }
-        else {
-            this.externalElements.onmousedown = function (e) {
-                _this.onMouseDown({
-                    x: e.offsetX,
-                    y: e.offsetY,
-                    clientX: e.clientX,
-                    clientY: e.clientY,
-                    pageX: e.pageX,
-                    pageY: e.pageY,
-                    ctrlKey: e.ctrlKey || e.metaKey,
-                    shiftKey: e.shiftKey,
-                    altKey: e.altKey,
-                    buttons: e.buttons,
-                });
-            };
-            this.externalElements.onmousemove = function (e) {
-                if (e.target !== _this.externalElements) {
-                    return;
-                }
-                _this.onMouseMove({
-                    x: e.offsetX,
-                    y: e.offsetY,
-                    clientX: e.clientX,
-                    clientY: e.clientY,
-                    pageX: e.pageX,
-                    pageY: e.pageY,
-                    ctrlKey: e.ctrlKey || e.metaKey,
-                    shiftKey: e.shiftKey,
-                    altKey: e.altKey,
-                    buttons: e.buttons,
-                });
-            };
-            this.externalElements.onmouseup = function (e) {
-                _this.onMouseUp({
-                    x: e.offsetX,
-                    y: e.offsetY,
-                    clientX: e.clientX,
-                    clientY: e.clientY,
-                    pageX: e.pageX,
-                    pageY: e.pageY,
-                    ctrlKey: e.ctrlKey || e.metaKey,
-                    shiftKey: e.shiftKey,
-                    altKey: e.altKey,
-                    buttons: e.buttons,
-                    button: e.button,
-                });
-            };
-            this.externalElements.onmouseleave = function (e) {
-                if (e.toElement !== _this.tooltip.box) {
-                    _this.tooltip.hide();
-                    _this.store.lastHover = undefined;
-                }
-            };
-        }
+        this.store.options.interval = 50;
+        this.externalElements.ontouchstart = this.ontouchstart;
+        this.externalElements.ontouchmove = this.ontouchmove;
+        this.externalElements.ontouchend = this.ontouchend;
+        this.externalElements.onmousedown = function (e) {
+            _this.onMouseDown({
+                x: e.offsetX,
+                y: e.offsetY,
+                clientX: e.clientX,
+                clientY: e.clientY,
+                pageX: e.pageX,
+                pageY: e.pageY,
+                ctrlKey: e.ctrlKey || e.metaKey,
+                shiftKey: e.shiftKey,
+                altKey: e.altKey,
+                buttons: e.buttons,
+            });
+        };
+        this.externalElements.onmousemove = function (e) {
+            if (e.target !== _this.externalElements) {
+                return;
+            }
+            _this.onMouseMove({
+                x: e.offsetX,
+                y: e.offsetY,
+                clientX: e.clientX,
+                clientY: e.clientY,
+                pageX: e.pageX,
+                pageY: e.pageY,
+                ctrlKey: e.ctrlKey || e.metaKey,
+                shiftKey: e.shiftKey,
+                altKey: e.altKey,
+                buttons: e.buttons,
+            });
+        };
+        this.externalElements.onmouseup = function (e) {
+            _this.onMouseUp({
+                x: e.offsetX,
+                y: e.offsetY,
+                clientX: e.clientX,
+                clientY: e.clientY,
+                pageX: e.pageX,
+                pageY: e.pageY,
+                ctrlKey: e.ctrlKey || e.metaKey,
+                shiftKey: e.shiftKey,
+                altKey: e.altKey,
+                buttons: e.buttons,
+                button: e.button,
+            });
+        };
+        this.externalElements.onmouseleave = function (e) {
+            if (e.toElement !== _this.tooltip.box) {
+                _this.tooltip.hide();
+                _this.store.lastHover = undefined;
+            }
+        };
         this.externalElements.ondblclick = this.ondblclick;
         this.externalElements.tabIndex = 0;
         this.externalElements.onblur = function () {
@@ -2757,10 +2734,10 @@ 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;
-            var e_8, _a, e_9, _b, e_10, _c;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
+            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;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0:
                         try {
                             for (pens_2 = __values(pens), pens_2_1 = pens_2.next(); !pens_2_1.done; pens_2_1 = pens_2.next()) {
@@ -2817,9 +2794,48 @@ var Canvas = /** @class */ (function () {
                             }
                             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;
+                        if (width && height) {
+                            rect_1 = {
+                                x: this.store.data.origin.x,
+                                y: this.store.data.origin.y,
+                                width: width * this.store.data.scale,
+                                height: height * this.store.data.scale,
+                            };
+                            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;
+                                    if (!pen.parentId) {
+                                        points = [
+                                            { x: pen.x, y: pen.y },
+                                            { x: pen.x + pen.width, y: pen.y },
+                                            { x: pen.x, y: pen.y + pen.height },
+                                            { x: pen.x + pen.width, y: pen.y + pen.height },
+                                        ];
+                                        if (points.some(function (point) { return pointInRect(point, rect_1); })) {
+                                            flag = false;
+                                            break;
+                                        }
+                                    }
+                                }
+                            }
+                            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);
+                                }
+                                finally { if (e_11) throw e_11.error; }
+                            }
+                            if (flag) {
+                                console.info('画笔在大屏范围外');
+                                return [2 /*return*/];
+                            }
+                        }
                         return [4 /*yield*/, this.addPens(pens, true)];
                     case 1:
-                        _d.sent();
+                        _e.sent();
                         this.active(pens.filter(function (pen) { return !pen.parentId; }));
                         this.render();
                         this.externalElements.focus(); // 聚焦
@@ -2829,7 +2845,7 @@ var Canvas = /** @class */ (function () {
         });
     };
     Canvas.prototype.randomCombineId = function (pen, pens, parentId) {
-        var e_11, _a;
+        var e_12, _a;
         randomId(pen);
         pen.parentId = parentId;
         var newChildren = [];
@@ -2846,12 +2862,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;
@@ -2859,8 +2875,8 @@ var Canvas = /** @class */ (function () {
     };
     Canvas.prototype.addPens = function (pens, history) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, list, pens_5, pens_5_1, pen;
-            var e_12, _b;
+            var _a, list, pens_6, pens_6_1, pen;
+            var e_13, _b;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
@@ -2876,8 +2892,8 @@ var Canvas = /** @class */ (function () {
                         }
                         list = [];
                         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 (this.beforeAddPen && this.beforeAddPen(pen) != true) {
                                     continue;
                                 }
@@ -2885,12 +2901,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_5_1 && !pens_5_1.done && (_b = pens_5.return)) _b.call(pens_5);
+                                if (pens_6_1 && !pens_6_1.done && (_b = pens_6.return)) _b.call(pens_6);
                             }
-                            finally { if (e_12) throw e_12.error; }
+                            finally { if (e_13) throw e_13.error; }
                         }
                         this.render();
                         this.store.emitter.emit('add', list);
@@ -3156,7 +3172,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) {
             try {
@@ -3166,12 +3182,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 = [];
@@ -3310,18 +3326,6 @@ var Canvas = /** @class */ (function () {
             }
             this.store.hoverAnchor = anchor;
             this.store.hover = pen;
-            // if (pen.name === 'line' && anchor.connectTo) {
-            //   const connectPen = this.findOne(anchor.connectTo);
-            //   if (!connectPen.calculative.active) {
-            //     this.store.hover = connectPen;
-            //     const connectAnchor = connectPen.calculative.worldAnchors.find(
-            //       (item) => item.id === anchor.anchorId
-            //     );
-            //     this.store.hoverAnchor = connectAnchor;
-            //     console.log('hover', connectAnchor);
-            //   }
-            // }
-            // console.log('hover', pen, anchor);
             if (pen.type) {
                 if (anchor.connectTo && !pen.calculative.active) {
                     this.store.hover = this.store.pens[anchor.connectTo];
@@ -3369,7 +3373,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;
@@ -3410,12 +3414,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 () {
@@ -3480,7 +3484,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 {
@@ -3491,12 +3495,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) {
@@ -3554,11 +3558,11 @@ var Canvas = /** @class */ (function () {
         var _this = this;
         var before = this.store.histories[this.store.historyIndex];
         if (before && before.type === EditType.Add) {
-            var pens_6 = [];
+            var pens_7 = [];
             before.pens.forEach(function (pen) {
-                pens_6.push(_this.store.pens[pen.id]);
+                pens_7.push(_this.store.pens[pen.id]);
             });
-            this.active(pens_6);
+            this.active(pens_7);
         }
     };
     Canvas.prototype.doEditAction = function (action, undo) {
@@ -3951,7 +3955,10 @@ var Canvas = /** @class */ (function () {
                     }
                     else {
                         var img_1 = new Image();
-                        img_1.crossOrigin = 'anonymous';
+                        img_1.crossOrigin =
+                            pen.crossOrigin === 'undefined'
+                                ? undefined
+                                : pen.crossOrigin || 'anonymous';
                         img_1.src = pen.image;
                         if (this.store.options.cdn &&
                             !(pen.image.startsWith('http') ||
@@ -3960,6 +3967,7 @@ var Canvas = /** @class */ (function () {
                             img_1.src = this.store.options.cdn + pen.image;
                         }
                         img_1.onload = function () {
+                            // TODO: 连续的加载两张图片，若后开始加载 的图片先加载完成，可能会导致展示的是 先开始加载的图片
                             pen.calculative.img = img_1;
                             pen.calculative.imgNaturalWidth =
                                 img_1.naturalWidth || pen.iconWidth;
@@ -4117,15 +4125,18 @@ var Canvas = /** @class */ (function () {
         }, 50);
     };
     Canvas.prototype.translate = function (x, y) {
+        var _this = this;
         if (x === void 0) { x = 0; }
         if (y === void 0) { y = 0; }
         this.store.data.x += x * this.store.data.scale;
         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);
-        this.canvasImage.init();
-        this.canvasImageBottom.init();
-        this.render();
+        setTimeout(function () {
+            _this.canvasImage.init();
+            _this.canvasImageBottom.init();
+            _this.render();
+        });
         this.store.emitter.emit('translate', {
             x: this.store.data.x,
             y: this.store.data.y,
@@ -4137,7 +4148,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) {
@@ -4162,12 +4173,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; }
         }
     };
     /**
@@ -4215,17 +4226,19 @@ var Canvas = /** @class */ (function () {
             _this.execPenResize(pen);
         });
         this.calcActiveRect();
-        this.canvasImage.init();
-        this.canvasImageBottom.init();
-        var map = this.parent.map;
-        if (map && map.isShow) {
-            map.setView();
-        }
-        this.render();
-        this.store.emitter.emit('scale', this.store.data.scale);
+        setTimeout(function () {
+            _this.canvasImage.init();
+            _this.canvasImageBottom.init();
+            var map = _this.parent.map;
+            if (map && map.isShow) {
+                map.setView();
+            }
+            _this.render();
+            _this.store.emitter.emit('scale', _this.store.data.scale);
+        });
     };
     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));
@@ -4252,12 +4265,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();
@@ -4478,7 +4491,9 @@ var Canvas = /** @class */ (function () {
             // 线宽为 0 ，看不到外边框，拖动过程中给个外边框
             pen.lineWidth === 0 && (value.lineWidth = 1);
             // TODO: 例如 pen.name = 'triangle' 的情况，但有图片，是否还需要变成矩形呢？
-            if (isDomShapes.includes(pen.name) || pen.image) {
+            if (isDomShapes.includes(pen.name) ||
+                _this.store.options.domShapes.includes(pen.name) ||
+                pen.image) {
                 // 修改名称会执行 onDestroy ，清空它
                 value.name = 'rectangle';
                 value.onDestroy = undefined;
@@ -5119,7 +5134,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) {
@@ -5204,12 +5219,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();
@@ -5292,7 +5307,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:
@@ -5361,12 +5376,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);
@@ -5383,20 +5398,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_7 = __values(pens), pens_7_1 = pens_7.next(); !pens_7_1.done; pens_7_1 = pens_7.next()) {
-                var pen = pens_7_1.value;
+            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;
                 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_7_1 && !pens_7_1.done && (_a = pens_7.return)) _a.call(pens_7);
+                if (pens_8_1 && !pens_8_1.done && (_a = pens_8.return)) _a.call(pens_8);
             }
-            finally { if (e_20) throw e_20.error; }
+            finally { if (e_21) throw e_21.error; }
         }
         return retPens.concat(pens);
     };
@@ -5439,7 +5454,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];
@@ -5475,12 +5490,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) {
@@ -5862,6 +5877,10 @@ var Canvas = /** @class */ (function () {
             if (k === 'image') {
                 willRenderImage = true;
             }
+            if (k.indexOf('.') !== -1) {
+                delete pen[k];
+                setter(pen, k, data[k]);
+            }
         }
         this.setCalculativeByScale(pen); // 该方法计算量并不大，所以每次修改都计算一次
         if (isChangedName) {
@@ -5990,7 +6009,7 @@ var Canvas = /** @class */ (function () {
         };
     };
     Canvas.prototype.toPng = function (padding, callback, containBkImg) {
-        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);
@@ -6078,12 +6097,12 @@ var Canvas = /** @class */ (function () {
                 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);
@@ -6215,24 +6234,21 @@ var Canvas = /** @class */ (function () {
         this.render();
     };
     Canvas.prototype.destroy = function () {
-        var _a;
+        var _a, _b;
         this.scroll && this.scroll.destroy();
         (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.dialog) === null || _b === void 0 ? void 0 : _b.destroy();
         // ios
         this.externalElements.removeEventListener('gesturestart', this.onGesturestart);
         this.externalElements.ondragover = function (e) { return e.preventDefault(); };
         this.externalElements.ondrop = undefined;
-        if (isMobile()) {
-            this.externalElements.ontouchstart = undefined;
-            this.externalElements.ontouchmove = undefined;
-            this.externalElements.ontouchend = undefined;
-        }
-        else {
-            this.externalElements.onmousedown = undefined;
-            this.externalElements.onmousemove = undefined;
-            this.externalElements.onmouseup = undefined;
-            this.externalElements.onmouseleave = undefined;
-        }
+        this.externalElements.ontouchstart = undefined;
+        this.externalElements.ontouchmove = undefined;
+        this.externalElements.ontouchend = undefined;
+        this.externalElements.onmousedown = undefined;
+        this.externalElements.onmousemove = undefined;
+        this.externalElements.onmouseup = undefined;
+        this.externalElements.onmouseleave = undefined;
         this.externalElements.ondblclick = undefined;
         switch (this.store.options.keydown) {
             case KeydownType.Document: