@meta2d/core 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meta2d/core",
-    "version": "1.0.17",
+    "version": "1.0.19",
     "description": "@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .",
     "main": "index.js",
     "types": "index.d.ts",

package/src/canvas/canvas.d.ts

@@ -12,6 +12,7 @@ import { CanvasImage } from './canvasImage';
 import { MagnifierCanvas } from './magnifierCanvas';
 import { Meta2d } from '../core';
 import { Dialog } from '../dialog';
+import { Title } from '../title';
 export declare const movingSuffix: "-moving";
 export declare class Canvas {
     parent: Meta2d;
@@ -76,6 +77,8 @@ export declare class Canvas {
     pointSize: 8;
     pasteOffset: number;
     opening: boolean;
+    maxZindex: number;
+    canMoveLine: boolean;
     /**
      * @deprecated 改用 beforeAddPens
      */
@@ -97,6 +100,7 @@ export declare class Canvas {
     inputRight: HTMLDivElement;
     dropdown: HTMLUListElement;
     tooltip: Tooltip;
+    title: Title;
     mousePos: Point;
     scroll: Scroll;
     movingAnchor: Point;
@@ -324,7 +328,7 @@ export declare class Canvas {
     getFrameProps(pen: any): {};
     animate(): void;
     get clipboardName(): string;
-    copy(pens?: Pen[]): Promise<void>;
+    copy(pens?: Pen[], emit?: boolean): Promise<void>;
     cut(pens?: Pen[]): void;
     paste(): Promise<void>;
     /**

package/src/canvas/canvas.js

@@ -98,6 +98,7 @@ import { MagnifierCanvas } from './magnifierCanvas';
 import { lockedError } from '../utils/error';
 import { Dialog } from '../dialog';
 import { setter } from '../utils/object';
+import { Title } from '../title';
 export var movingSuffix = '-moving';
 var Canvas = /** @class */ (function () {
     function Canvas(parent, parentElement, store) {
@@ -125,6 +126,8 @@ var Canvas = /** @class */ (function () {
         this.pointSize = 8;
         this.pasteOffset = 10;
         this.opening = false;
+        this.maxZindex = 4;
+        this.canMoveLine = false; //moveConnectedLine=false
         this.inputParent = document.createElement('div');
         // input = document.createElement('textarea');
         this.inputDiv = document.createElement('div');
@@ -238,11 +241,11 @@ 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)
@@ -250,7 +253,7 @@ var Canvas = /** @class */ (function () {
             if (_this.store.data.locked === LockState.DisableMoveScale)
                 return;
             // e.ctrlKey: false - 平移； true - 缩放。老windows触摸板不支持
-            if (!e.ctrlKey) {
+            if (!e.ctrlKey && Math.abs(e.wheelDelta) < 100) {
                 if (_this.store.options.scroll && !e.metaKey && _this.scroll) {
                     _this.scroll.wheel(e.deltaY < 0);
                     return;
@@ -262,17 +265,38 @@ var Canvas = /** @class */ (function () {
             if (_this.store.options.disableTouchPadScale) {
                 return;
             }
-            var x = e.offsetX, y = e.offsetY;
-            if (e.deltaY < 0) {
-                _this.scale(_this.store.data.scale + 0.015, { x: x, y: y });
+            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 {
-                _this.scale(_this.store.data.scale - 0.015, { x: x, y: y });
+                if (e.deltaY > 0) {
+                    scaleOff = -0.2;
+                }
+                else {
+                    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) {
             var _a, _b, _c;
+            if (_this.store.data.locked >= LockState.DisableEdit &&
+                e.target.tagName !== 'INPUT' &&
+                e.target.tagName !== 'TEXTAREA') {
+                _this.store.active.forEach(function (pen) {
+                    var _a;
+                    (_a = pen.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(pen, pen, e.key);
+                });
+            }
             if (_this.store.data.locked >= LockState.DisableEdit ||
                 e.target.tagName === 'INPUT' ||
                 e.target.tagName === 'TEXTAREA') {
@@ -546,17 +570,25 @@ var Canvas = /** @class */ (function () {
                         e.stopPropagation();
                     }
                     break;
+                case 'l':
+                case 'L':
+                    _this.canMoveLine = true;
+                    break;
             }
             _this.render(false);
         };
         this.onkeyup = function (e) {
-            // switch (e.key) {
-            //   case 'Alt':
-            //     if (this.drawingLine) {
-            //       this.store.options.autoAnchor = !this.store.options.autoAnchor;
-            //     }
-            //     break;
-            // }
+            switch (e.key) {
+                case 'l':
+                case 'L':
+                    _this.canMoveLine = false;
+                    break;
+                // case 'Alt':
+                //   if (this.drawingLine) {
+                //     this.store.options.autoAnchor = !this.store.options.autoAnchor;
+                //   }
+                //   break;
+            }
             if (_this.hotkeyType) {
                 _this.render();
             }
@@ -565,7 +597,7 @@ var Canvas = /** @class */ (function () {
             }
         };
         this.ondrop = function (event) { return __awaiter(_this, void 0, void 0, function () {
-            var json, obj, files, isGif, pt, e_1;
+            var json, obj, files, isGif, pt;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -573,34 +605,46 @@ 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];
+                        try {
+                            if (json) {
+                                obj = JSON.parse(json);
+                            }
+                        }
+                        catch (e) { }
+                        if (!!obj) return [3 /*break*/, 3];
                         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*/, 2];
                         isGif = files[0].type === 'image/gif';
                         return [4 /*yield*/, this.fileToPen(files[0], isGif)];
-                    case 2:
+                    case 1:
                         obj = _a.sent();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        if (this.addCaches.length) {
+                            obj = this.addCaches;
+                            this.addCaches = [];
+                        }
+                        else {
+                            this.store.emitter.emit('drop', undefined);
+                            return [2 /*return*/];
+                        }
                         _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];
-                    case 4:
-                        e_1 = _a.sent();
-                        return [3 /*break*/, 5];
-                    case 5: return [2 /*return*/];
+                        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);
+                            this.addCaches = [];
+                        }
+                        this.store.emitter.emit('drop', obj || json);
+                        return [2 /*return*/];
                 }
             });
         }); };
@@ -1571,7 +1615,7 @@ var Canvas = /** @class */ (function () {
         this.inPens = function (pt, pens) {
             var hoverType = HoverType.None;
             var _loop_2 = function (i) {
-                var e_2, _a, e_3, _b;
+                var e_1, _a, e_2, _b, e_3, _c;
                 var pen = pens[i];
                 if (pen.visible == false ||
                     pen.calculative.inView == false ||
@@ -1584,12 +1628,36 @@ var Canvas = /** @class */ (function () {
                     !pointInRect(pt, pen.calculative.worldRect)) {
                     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)) {
+                                    _this.title.show(anchor);
+                                    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 && _this.hotkeyType !== HotkeyType.Resize) {
                     if (pen.calculative.worldAnchors) {
                         try {
-                            for (var _c = (e_2 = void 0, __values(pen.calculative.worldAnchors)), _d = _c.next(); !_d.done; _d = _c.next()) {
-                                var anchor = _d.value;
+                            for (var _f = (e_2 = void 0, __values(pen.calculative.worldAnchors)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                                var anchor = _g.value;
                                 hoverType = _this.inAnchor(pt, pen, anchor);
                                 if (hoverType) {
                                     return "break-outer";
@@ -1599,7 +1667,7 @@ var Canvas = /** @class */ (function () {
                         catch (e_2_1) { e_2 = { error: e_2_1 }; }
                         finally {
                             try {
-                                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                                if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
                             }
                             finally { if (e_2) throw e_2.error; }
                         }
@@ -1662,7 +1730,7 @@ var Canvas = /** @class */ (function () {
                         _this.store.pointAt = pt;
                         // 锚点贴边吸附
                         if (!pt.ctrlKey) {
-                            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;
+                            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;
                             if (rotate_1) {
                                 var pts = [
                                     { x: x, y: y },
@@ -1690,7 +1758,7 @@ var Canvas = /** @class */ (function () {
                                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                                 finally {
                                     try {
-                                        if (pts_1_1 && !pts_1_1.done && (_b = pts_1.return)) _b.call(pts_1);
+                                        if (pts_1_1 && !pts_1_1.done && (_c = pts_1.return)) _c.call(pts_1);
                                     }
                                     finally { if (e_3) throw e_3.error; }
                                 }
@@ -2520,6 +2588,7 @@ var Canvas = /** @class */ (function () {
             setHover(hover, false);
         };
         this.dialog = new Dialog(parentElement);
+        this.title = new Title(parentElement);
         if (this.store.options.scroll) {
             this.scroll = new Scroll(this);
         }
@@ -3162,6 +3231,7 @@ var Canvas = /** @class */ (function () {
         this.store.active.forEach(function (pen) {
             pen.calculative.active = undefined;
             pen.calculative.activeAnchor = undefined;
+            pen.calculative.hover = false;
             setChildrenActive(pen, false);
         });
         !drawing && this.store.emitter.emit('inactive', this.store.active);
@@ -3175,10 +3245,12 @@ var Canvas = /** @class */ (function () {
         var e_14, _a, _b;
         if (emit === void 0) { emit = true; }
         if (this.store.active) {
+            emit && this.store.emitter.emit('inactive', this.store.active);
             try {
                 for (var _c = __values(this.store.active), _d = _c.next(); !_d.done; _d = _c.next()) {
                     var pen = _d.value;
                     pen.calculative.active = undefined;
+                    pen.calculative.hover = false;
                     setChildrenActive(pen, false);
                 }
             }
@@ -3651,6 +3723,7 @@ var Canvas = /** @class */ (function () {
         else {
             this.initImageCanvas(action.pens);
         }
+        this.parent.onSizeUpdate();
         this.render();
         this.store.emitter.emit(undo ? 'undo' : 'redo', action);
     };
@@ -4383,6 +4456,7 @@ var Canvas = /** @class */ (function () {
             return;
         }
         if (!this.store.options.moveConnectedLine &&
+            !this.canMoveLine &&
             this.store.active.length === 1 &&
             (((_a = this.store.active[0].anchors[0]) === null || _a === void 0 ? void 0 : _a.connectTo) ||
                 ((_b = this.store.active[0].anchors[this.store.active[0].anchors.length - 1]) === null || _b === void 0 ? void 0 : _b.connectTo))) {
@@ -4466,7 +4540,7 @@ var Canvas = /** @class */ (function () {
     Canvas.prototype.initMovingPens = function () {
         var _this = this;
         var _a, _b;
-        if (!this.store.options.moveConnectedLine) {
+        if (!this.store.options.moveConnectedLine && !this.canMoveLine) {
             for (var i = 0; i < this.store.active.length; i++) {
                 var pen = this.store.active[i];
                 if (((_a = pen.anchors[0]) === null || _a === void 0 ? void 0 : _a.connectTo) ||
@@ -4810,7 +4884,7 @@ var Canvas = /** @class */ (function () {
                 return;
             }
             if (pen.type === PenType.Line) {
-                if (!_this.store.options.moveConnectedLine) {
+                if (!_this.store.options.moveConnectedLine && !_this.canMoveLine) {
                     return;
                 }
                 translateLine(pen, x, y);
@@ -5244,7 +5318,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;
@@ -5294,14 +5369,17 @@ 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;
@@ -5388,6 +5466,7 @@ var Canvas = /** @class */ (function () {
                         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*/];
                 }
             });
@@ -6234,10 +6313,11 @@ var Canvas = /** @class */ (function () {
         this.render();
     };
     Canvas.prototype.destroy = function () {
-        var _a, _b;
+        var _a, _b, _c;
         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();
+        (_c = this.title) === null || _c === void 0 ? void 0 : _c.destroy();
         // ios
         this.externalElements.removeEventListener('gesturestart', this.onGesturestart);
         this.externalElements.ondragover = function (e) { return e.preventDefault(); };