@meta2d/core 1.0.16 → 1.0.18

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';
@@ -97,6 +97,7 @@ 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) {
@@ -123,6 +124,8 @@ var Canvas = /** @class */ (function () {
         this.animateRendering = false;
         this.pointSize = 8;
         this.pasteOffset = 10;
+        this.opening = false;
+        this.maxZindex = 4;
         this.inputParent = document.createElement('div');
         // input = document.createElement('textarea');
         this.inputDiv = document.createElement('div');
@@ -236,69 +239,50 @@ var Canvas = /** @class */ (function () {
             if (_this.pencil) {
                 return;
             }
-            e.preventDefault();
-            e.stopPropagation();
             if (_this.store.options.disableScale) {
                 return;
             }
+            e.preventDefault();
+            e.stopPropagation();
             if (_this.store.data.locked === LockState.Disable)
                 return;
             if (_this.store.data.locked === LockState.DisableScale)
                 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 && Math.abs(e.wheelDelta) < 100) {
+                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);
+            var scaleOff = 0.015;
+            var isMac = /mac os /i.test(navigator.userAgent);
+            if (isMac) {
+                if (!e.ctrlKey) {
+                    scaleOff *= e.wheelDeltaY / 240;
+                }
+                else if (e.deltaY > 0) {
+                    scaleOff *= -1;
+                }
             }
             else {
-                if (e.deltaY < 0) {
-                    _this.scale(_this.store.data.scale + _scale, { x: x, y: y });
+                if (e.deltaY > 0) {
+                    scaleOff = -0.2;
                 }
                 else {
-                    _this.scale(_this.store.data.scale - _scale, { x: x, y: y });
+                    scaleOff = 0.2;
                 }
             }
+            var x = e.offsetX, y = e.offsetY;
+            _this.scale(_this.store.data.scale + scaleOff, { x: x, y: y });
             _this.externalElements.focus(); // 聚焦
         };
         this.onkeydown = function (e) {
@@ -603,34 +587,40 @@ var Canvas = /** @class */ (function () {
                             console.warn('canvas is locked, can not drop');
                             return [2 /*return*/];
                         }
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 4, , 5]);
-                        // TODO: 若画布锁定，阻止默认行为不再执行。在 firefox 上拖拽图片会打开新页
+                        // Fix bug: 在 firefox 上拖拽图片会打开新页
                         event.preventDefault();
                         event.stopPropagation();
                         json = event.dataTransfer.getData('Meta2d') ||
                             event.dataTransfer.getData('Text');
                         obj = null;
-                        if (!!json) return [3 /*break*/, 3];
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 5, , 6]);
+                        if (!json) return [3 /*break*/, 2];
+                        obj = JSON.parse(json);
+                        return [3 /*break*/, 4];
+                    case 2:
                         files = event.dataTransfer.files;
-                        if (!(files.length && files[0].type.match('image.*'))) return [3 /*break*/, 3];
+                        if (!(files.length && files[0].type.match('image.*'))) return [3 /*break*/, 4];
                         isGif = files[0].type === 'image/gif';
                         return [4 /*yield*/, this.fileToPen(files[0], isGif)];
-                    case 2:
-                        obj = _a.sent();
-                        _a.label = 3;
                     case 3:
-                        !obj && (obj = JSON.parse(json));
-                        obj = Array.isArray(obj) ? obj : [obj];
-                        pt = { x: event.offsetX, y: event.offsetY };
-                        this.calibrateMouse(pt);
-                        this.dropPens(obj, pt);
-                        return [3 /*break*/, 5];
+                        obj = _a.sent();
+                        _a.label = 4;
                     case 4:
+                        if (obj && obj.draggable !== false) {
+                            obj = Array.isArray(obj) ? obj : [obj];
+                            pt = { x: event.offsetX, y: event.offsetY };
+                            this.calibrateMouse(pt);
+                            this.dropPens(obj, pt);
+                        }
+                        return [3 /*break*/, 6];
+                    case 5:
                         e_1 = _a.sent();
-                        return [3 /*break*/, 5];
-                    case 5: return [2 /*return*/];
+                        return [3 /*break*/, 6];
+                    case 6:
+                        this.store.emitter.emit('drop', obj || json);
+                        return [2 /*return*/];
                 }
             });
         }); };
@@ -782,7 +772,9 @@ var Canvas = /** @class */ (function () {
                 altKey: event.altKey,
                 buttons: 1,
             });
-            _this.render();
+            setTimeout(function () {
+                _this.render();
+            }, 20);
         };
         this.onGesturestart = function (e) {
             e.preventDefault();
@@ -1461,6 +1453,7 @@ var Canvas = /** @class */ (function () {
             _this.clearDock();
             _this.dragRect = undefined;
             _this.initActiveRect = undefined;
+            _this.render();
         };
         this.clearDock = function () {
             var _a, _b, _c, _d;
@@ -1809,6 +1802,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();
@@ -2322,7 +2321,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') {
@@ -2563,66 +2562,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 () {
@@ -2759,10 +2754,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()) {
@@ -2819,9 +2814,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(); // 聚焦
@@ -2831,7 +2865,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 = [];
@@ -2848,12 +2882,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;
@@ -2861,8 +2895,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:
@@ -2878,8 +2912,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;
                                 }
@@ -2887,12 +2921,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);
@@ -3158,7 +3192,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 {
@@ -3168,12 +3202,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 = [];
@@ -3312,18 +3346,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];
@@ -3371,7 +3393,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;
@@ -3412,12 +3434,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 () {
@@ -3482,7 +3504,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 {
@@ -3493,12 +3515,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) {
@@ -3556,11 +3578,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) {
@@ -3649,6 +3671,7 @@ var Canvas = /** @class */ (function () {
         else {
             this.initImageCanvas(action.pens);
         }
+        this.parent.onSizeUpdate();
         this.render();
         this.store.emitter.emit(undo ? 'undo' : 'redo', action);
     };
@@ -3953,7 +3976,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') ||
@@ -3962,6 +3988,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;
@@ -4142,7 +4169,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) {
@@ -4167,12 +4194,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; }
         }
     };
     /**
@@ -4232,7 +4259,7 @@ var Canvas = /** @class */ (function () {
         });
     };
     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));
@@ -4259,12 +4286,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();
@@ -5128,7 +5155,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) {
@@ -5213,12 +5240,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();
@@ -5238,7 +5265,8 @@ var Canvas = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    Canvas.prototype.copy = function (pens) {
+    Canvas.prototype.copy = function (pens, emit) {
+        if (emit === void 0) { emit = true; }
         return __awaiter(this, void 0, void 0, function () {
             var page, _a, origin, scale, copyPens, clipboard, _b;
             var _this = this;
@@ -5288,20 +5316,23 @@ var Canvas = /** @class */ (function () {
                     case 5:
                         localStorage.setItem(this.clipboardName, JSON.stringify(clipboard));
                         _c.label = 6;
-                    case 6: return [2 /*return*/];
+                    case 6:
+                        emit && this.store.emitter.emit('copy', clipboard.pens);
+                        return [2 /*return*/];
                 }
             });
         });
     };
     Canvas.prototype.cut = function (pens) {
-        this.copy(pens);
+        this.copy(pens, false);
         this.delete(pens);
+        this.store.emitter.emit('cut', pens);
     };
     Canvas.prototype.paste = 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:
@@ -5370,18 +5401,19 @@ 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);
                         this.pushHistory({ type: EditType.Add, pens: this.store.clipboard.pens });
                         this.render();
                         this.store.emitter.emit('add', this.store.clipboard.pens);
+                        this.store.emitter.emit('paste', this.store.clipboard.pens);
                         return [2 /*return*/];
                 }
             });
@@ -5392,20 +5424,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);
     };
@@ -5448,7 +5480,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];
@@ -5484,12 +5516,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) {
@@ -5871,6 +5903,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) {
@@ -5999,7 +6035,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);
@@ -6087,12 +6123,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);
@@ -6232,17 +6268,13 @@ var Canvas = /** @class */ (function () {
         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: