@meta2d/core 1.0.18 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meta2d/core",
-    "version": "1.0.18",
+    "version": "1.0.20",
     "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;
@@ -77,6 +78,7 @@ export declare class Canvas {
     pasteOffset: number;
     opening: boolean;
     maxZindex: number;
+    canMoveLine: boolean;
     /**
      * @deprecated 改用 beforeAddPens
      */
@@ -98,6 +100,7 @@ export declare class Canvas {
     inputRight: HTMLDivElement;
     dropdown: HTMLUListElement;
     tooltip: Tooltip;
+    title: Title;
     mousePos: Point;
     scroll: Scroll;
     movingAnchor: Point;

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) {
@@ -126,6 +127,7 @@ var Canvas = /** @class */ (function () {
         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');
@@ -244,6 +246,10 @@ var Canvas = /** @class */ (function () {
             }
             e.preventDefault();
             e.stopPropagation();
+            //移动画笔过程中不允许缩放
+            if (_this.mouseDown &&
+                (_this.hoverType === HoverType.Node || _this.hoverType === HoverType.Line))
+                return;
             if (_this.store.data.locked === LockState.Disable)
                 return;
             if (_this.store.data.locked === LockState.DisableScale)
@@ -287,6 +293,14 @@ var Canvas = /** @class */ (function () {
         };
         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') {
@@ -560,17 +574,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();
             }
@@ -579,7 +601,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:
@@ -593,32 +615,38 @@ var Canvas = /** @class */ (function () {
                         json = event.dataTransfer.getData('Meta2d') ||
                             event.dataTransfer.getData('Text');
                         obj = null;
-                        _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:
+                        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*/, 4];
+                        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 3:
+                    case 1:
                         obj = _a.sent();
-                        _a.label = 4;
-                    case 4:
+                        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:
                         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 = [];
                         }
-                        return [3 /*break*/, 6];
-                    case 5:
-                        e_1 = _a.sent();
-                        return [3 /*break*/, 6];
-                    case 6:
                         this.store.emitter.emit('drop', obj || json);
                         return [2 /*return*/];
                 }
@@ -1591,7 +1619,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 ||
@@ -1604,12 +1632,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";
@@ -1619,7 +1671,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; }
                         }
@@ -1682,7 +1734,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 },
@@ -1710,7 +1762,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; }
                                 }
@@ -2540,6 +2592,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);
         }
@@ -2804,6 +2857,10 @@ var Canvas = /** @class */ (function () {
                                     pen.height *= this.store.data.scale;
                                     pen.x = e.x - pen.width / 2;
                                     pen.y = e.y - pen.height / 2;
+                                    if (pen.tags && pen.tags.includes('meta3d')) {
+                                        pen.x = this.store.data.origin.x;
+                                        pen.y = this.store.data.origin.y;
+                                    }
                                 }
                             }
                         }
@@ -2834,7 +2891,11 @@ var Canvas = /** @class */ (function () {
                                             { 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); })) {
+                                        if ((pen.x === rect_1.x &&
+                                            pen.y === rect_1.y &&
+                                            pen.width === rect_1.width &&
+                                            pen.height === rect_1.height) ||
+                                            points.some(function (point) { return pointInRect(point, rect_1); })) {
                                             flag = false;
                                             break;
                                         }
@@ -3182,6 +3243,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);
@@ -3195,10 +3257,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);
                 }
             }
@@ -3957,7 +4021,7 @@ var Canvas = /** @class */ (function () {
     };
     Canvas.prototype.loadImage = function (pen) {
         var _this = this;
-        if (pen.image !== pen.calculative.image) {
+        if (pen.image !== pen.calculative.image || !pen.calculative.img) {
             pen.calculative.img = undefined;
             if (pen.image) {
                 if (globalStore.htmlElements[pen.image]) {
@@ -4404,6 +4468,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))) {
@@ -4487,7 +4552,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) ||
@@ -4831,7 +4896,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);
@@ -6260,10 +6325,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(); };