@meta2d/core 1.0.35 → 1.0.37-alpha.1

package/package.json

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

package/src/canvas/canvas.js

@@ -82,7 +82,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 import { KeydownType } from '../options';
-import { addLineAnchor, calcIconRect, calcTextRect, calcWorldAnchors, calcWorldRects, LockState, nearestAnchor, PenType, pushPenAnchor, removePenAnchor, renderPen, scalePen, translateLine, deleteTempAnchor, connectLine, disconnectLine, getAnchor, calcAnchorDock, calcMoveDock, calcTextLines, setNodeAnimate, setLineAnimate, calcPenRect, setChildrenActive, getParent, setHover, randomId, getPensLock, getToAnchor, getFromAnchor, calcPadding, getPensDisableRotate, getPensDisableResize, needCalcTextRectProps, calcResizeDock, needPatchFlagsPenRectProps, needCalcIconRectProps, isDomShapes, renderPenRaw, needSetPenProps, getAllChildren, calcInView, isShowChild, getTextColor, getGlobalColor, clearLifeCycle, rotatePen, calcTextAutoWidth, getGradientAnimatePath, } from '../pen';
+import { addLineAnchor, calcIconRect, calcTextRect, calcWorldAnchors, calcWorldRects, LockState, nearestAnchor, PenType, pushPenAnchor, removePenAnchor, renderPen, scalePen, translateLine, deleteTempAnchor, connectLine, disconnectLine, getAnchor, calcAnchorDock, calcMoveDock, calcTextLines, setNodeAnimate, setLineAnimate, calcPenRect, setChildrenActive, getParent, setHover, randomId, getPensLock, getToAnchor, getFromAnchor, calcPadding, getPensDisableRotate, getPensDisableResize, needCalcTextRectProps, calcResizeDock, needPatchFlagsPenRectProps, needCalcIconRectProps, isDomShapes, renderPenRaw, needSetPenProps, getAllChildren, calcInView, isShowChild, getTextColor, getGlobalColor, clearLifeCycle, rotatePen, calcTextAutoWidth, getGradientAnimatePath, CanvasLayer, ctxFlip, ctxRotate, setGlobalAlpha, drawImage, } from '../pen';
 import { calcRotate, distance, getDistance, hitPoint, PointType, 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';
@@ -317,7 +317,8 @@ var Canvas = /** @class */ (function () {
             var _a, _b, _c;
             if (_this.store.data.locked >= LockState.DisableEdit &&
                 e.target.tagName !== 'INPUT' &&
-                e.target.tagName !== 'TEXTAREA') {
+                e.target.tagName !== 'TEXTAREA' &&
+                !e.target.dataset.meta2dIgnore) {
                 _this.store.active.forEach(function (pen) {
                     var _a;
                     (_a = pen.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(pen, pen, e.key);
@@ -325,7 +326,8 @@ var Canvas = /** @class */ (function () {
             }
             if (_this.store.data.locked >= LockState.DisableEdit ||
                 e.target.tagName === 'INPUT' ||
-                e.target.tagName === 'TEXTAREA') {
+                e.target.tagName === 'TEXTAREA' ||
+                e.target.dataset.meta2dIgnore) {
                 return;
             }
             if (_this.store.options.unavailableKeys.includes(e.key)) {
@@ -719,8 +721,8 @@ var Canvas = /** @class */ (function () {
                         }
                         _a.label = 3;
                     case 3:
-                        if (obj && obj.draggable !== false) {
-                            obj = Array.isArray(obj) ? obj : [obj];
+                        obj = Array.isArray(obj) ? obj : [obj];
+                        if (obj[0] && obj[0].draggable !== false) {
                             pt = { x: event.offsetX, y: event.offsetY };
                             this.calibrateMouse(pt);
                             this.dropPens(obj, pt);
@@ -1239,7 +1241,7 @@ var Canvas = /** @class */ (function () {
                         var pt = { x: e.x, y: e.y };
                         // Move line anchor
                         if (_this.hoverType === HoverType.LineAnchor) {
-                            if (_this.dockInAnchor(e) &&
+                            if ((_this.store.active[0].lineName === 'line' || _this.dockInAnchor(e)) &&
                                 !_this.store.options.disableDock &&
                                 !_this.store.options.disableLineDock) {
                                 _this.clearDock();
@@ -2037,10 +2039,24 @@ var Canvas = /** @class */ (function () {
                     if (!isFinite(pen.x)) {
                         continue;
                     }
-                    if (pen.template) {
+                    // if (pen.template) {
+                    if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
                         continue;
                     }
                     if (pen.calculative.inView) {
+                        if (pen.canvasLayer === CanvasLayer.CanvasMain &&
+                            pen.name !== 'gif' &&
+                            pen.image &&
+                            pen.calculative.img) {
+                            ctx.save();
+                            ctxFlip(ctx, pen);
+                            if (pen.calculative.rotate) {
+                                ctxRotate(ctx, pen);
+                            }
+                            setGlobalAlpha(ctx, pen);
+                            drawImage(ctx, pen);
+                            ctx.restore();
+                        }
                         renderPen(ctx, pen);
                     }
                 }
@@ -3381,7 +3397,8 @@ var Canvas = /** @class */ (function () {
     Canvas.prototype.alignPenToGrid = function (pen) {
         var _a;
         var autoAlignGrid = this.store.options.autoAlignGrid && this.store.data.grid;
-        if (autoAlignGrid) {
+        // 如果开启了自动网格,并且不是连线，则使pen对齐网格
+        if (autoAlignGrid && !pen.type) {
             var gridSize = this.store.data.gridSize || this.store.options.gridSize;
             var _b = this.store.data, origin_2 = _b.origin, scale = _b.scale;
             var x = pen.x, y = pen.y;
@@ -3390,7 +3407,6 @@ var Canvas = /** @class */ (function () {
             // 算出偏移了多少个网格
             var m = parseInt((rect.x / gridSize).toFixed());
             var n = parseInt((rect.y / gridSize).toFixed());
-            console.log(m, n);
             var x1 = m * gridSize;
             var y1 = n * gridSize;
             // 算出最终的偏移坐标
@@ -3419,7 +3435,7 @@ var Canvas = /** @class */ (function () {
             var _b = _this.movingPens[i], x = _b.x, y = _b.y;
             var obj = { x: x, y: y };
             // 根据是否开启了自动网格对齐，来修正坐标
-            if (autoAlignGrid) {
+            if (autoAlignGrid && !_this.movingPens[i].type) {
                 var rect = _this.getPenRect(_this.movingPens[i]);
                 // 算出偏移了多少个网格
                 var m = parseInt((rect.x / gridSize).toFixed());
@@ -3549,14 +3565,34 @@ var Canvas = /** @class */ (function () {
             this.canvasImageBottom.init();
     };
     Canvas.prototype.initTemplateCanvas = function (pens) {
-        pens.some(function (pen) { return pen.template !== undefined; }) &&
+        // pens.some((pen) => pen.template !== undefined) &&
+        //   this.canvasTemplate.init();
+        pens.some(function (pen) { return pen.canvasLayer === CanvasLayer.CanvasTemplate; }) &&
             this.canvasTemplate.init();
     };
     Canvas.prototype.hasImage = function (pen, isBottom) {
         var _this = this;
         var _a;
-        if (pen.image && pen.name !== 'gif' && !pen.isBottom == !isBottom) {
-            return true;
+        // if (pen.image && pen.name !== 'gif' && !pen.isBottom == !isBottom) {
+        //   return true;
+        // }
+        if (pen.image && pen.name !== 'gif') {
+            if (isBottom) {
+                if (pen.canvasLayer === CanvasLayer.CanvasImageBottom) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                if (pen.canvasLayer === CanvasLayer.CanvasImage) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
         }
         return (_a = pen.children) === null || _a === void 0 ? void 0 : _a.some(function (childId) {
             var child = _this.store.pens[childId];
@@ -4015,9 +4051,11 @@ var Canvas = /** @class */ (function () {
                     var i = _this.store.data.pens.findIndex(function (item) { return item.id === pen.id; });
                     if (i > -1) {
                         pen.calculative = _this.store.data.pens[i].calculative;
-                        if (_this.store.data.pens[i].type && _this.store.data.pens[i].lastConnected) {
+                        if (_this.store.data.pens[i].type &&
+                            _this.store.data.pens[i].lastConnected) {
                             for (var key in _this.store.data.pens[i].lastConnected) {
-                                _this.store.pens[key].connectedLines = _this.store.data.pens[i].lastConnected[key];
+                                _this.store.pens[key].connectedLines =
+                                    _this.store.data.pens[i].lastConnected[key];
                             }
                         }
                         _this.store.data.pens[i] = pen;
@@ -4073,6 +4111,59 @@ var Canvas = /** @class */ (function () {
                 });
                 action.type = EditType.Add;
                 break;
+            case EditType.Replace: {
+                // undo pens则为新的pen
+                var pens_9 = undo ? action.initPens : action.pens;
+                var unPens_2 = undo ? action.pens : action.initPens;
+                // 删除旧的
+                unPens_2.forEach(function (aPen) {
+                    var _a;
+                    var pen = deepClone(aPen, true);
+                    var i = _this.store.data.pens.findIndex(function (item) { return item.id === pen.id; });
+                    if (i > -1) {
+                        (_a = pen.onDestroy) === null || _a === void 0 ? void 0 : _a.call(pen, _this.store.data.pens.find(function (i) { return i.id === pen.id; }));
+                        var i_1 = _this.store.data.pens.findIndex(function (item) { return item.id === pen.id; });
+                        _this.store.data.pens.splice(i_1, 1);
+                        _this.store.pens[pen.id] = undefined;
+                        if (!pen.calculative) {
+                            pen.calculative = {};
+                        }
+                        pen.calculative.canvas = _this;
+                        _this.store.animates.delete(pen);
+                        _this.store.animateMap.delete(pen);
+                    }
+                });
+                // 放置新的
+                pens_9.reverse().forEach(function (aPen) {
+                    var _a, _b;
+                    var pen = deepClone(aPen, true);
+                    if (!pen.calculative) {
+                        pen.calculative = {};
+                    }
+                    _this.store.data.pens.splice(((_a = pen.calculative) === null || _a === void 0 ? void 0 : _a.layer) !== -1
+                        ? (_b = pen.calculative) === null || _b === void 0 ? void 0 : _b.layer
+                        : _this.store.data.pens.length, 0, pen);
+                    // 先放进去，pens 可能是子节点在前，而父节点在后
+                    _this.store.pens[pen.id] = pen;
+                    if (pen.type && pen.lastConnected) {
+                        for (var key in pen.lastConnected) {
+                            _this.store.pens[key].connectedLines = pen.lastConnected[key];
+                        }
+                    }
+                    pen.calculative.canvas = _this;
+                });
+                pens_9.reverse().forEach(function (aPen) {
+                    var pen = _this.store.data.pens.find(function (i) { return i.id === aPen.id; });
+                    var rect = _this.getPenRect(pen, action.origin, action.scale);
+                    _this.setPenRect(pen, rect, false);
+                    pen.calculative.image = undefined;
+                    pen.calculative.backgroundImage = undefined;
+                    pen.calculative.strokeImage = undefined;
+                    _this.loadImage(pen);
+                });
+                action.type = EditType.Replace;
+                break;
+            }
         }
         if (action.type === EditType.Update) {
             var pens = __spreadArray(__spreadArray([], __read(action.pens), false), __read(action.initPens), false);
@@ -4096,7 +4187,8 @@ var Canvas = /** @class */ (function () {
         if (Math.abs(this.store.lastScale - this.store.data.scale) < 0.0001 &&
             this.store.sameTemplate &&
             this.store.templatePens[pen.id] &&
-            pen.template) {
+            // pen.template
+            pen.canvasLayer === CanvasLayer.CanvasTemplate) {
             pen = this.store.templatePens[pen.id];
             this.store.data.pens.push(pen);
             this.updatePenRect(pen);
@@ -4122,6 +4214,18 @@ var Canvas = /** @class */ (function () {
         if (!pen.lineHeight) {
             pen.lineHeight = lineHeight;
         }
+        if (pen.image && pen.name !== 'gif' && pen.canvasLayer === undefined) {
+            if (pen.isBottom) {
+                pen.canvasLayer = CanvasLayer.CanvasImageBottom;
+            }
+            else {
+                pen.canvasLayer = CanvasLayer.CanvasImage;
+            }
+            delete pen.isBottom;
+        }
+        if (pen.template) {
+            pen.canvasLayer = CanvasLayer.CanvasTemplate;
+        }
         pen.calculative = { canvas: this, singleton: (_a = pen.calculative) === null || _a === void 0 ? void 0 : _a.singleton };
         if (pen.video || pen.audio) {
             pen.calculative.onended = function (pen) {
@@ -4372,7 +4476,8 @@ var Canvas = /** @class */ (function () {
                 pen.calculative.imgNaturalHeight = img.naturalHeight || pen.iconHeight;
                 globalStore.htmlElements[pen.image] = img;
                 _this.imageLoaded();
-                if (pen.template) {
+                // if (pen.template) {
+                if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
                     _this.templateImageLoaded();
                 }
             };
@@ -4392,7 +4497,8 @@ var Canvas = /** @class */ (function () {
                     pen.calculative.imgNaturalHeight =
                         img.naturalHeight || pen.iconHeight;
                     this.imageLoaded(); // TODO: 重绘图片层 有延时器，可能卡顿
-                    if (pen.template) {
+                    // if (pen.template) {
+                    if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
                         this.templateImageLoaded();
                     }
                 }
@@ -4424,7 +4530,8 @@ var Canvas = /** @class */ (function () {
                                 img_1.naturalHeight || pen.iconHeight;
                             globalStore.htmlElements[pen.image] = img_1;
                             _this.imageLoaded();
-                            if (pen.template) {
+                            // if (pen.template) {
+                            if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
                                 _this.templateImageLoaded();
                             }
                         };
@@ -4454,7 +4561,8 @@ var Canvas = /** @class */ (function () {
                         pen.calculative.backgroundImg = img_2;
                         globalStore.htmlElements[pen.backgroundImage] = img_2;
                         _this.imageLoaded();
-                        if (pen.template) {
+                        // if (pen.template) {
+                        if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
                             _this.templateImageLoaded();
                         }
                     };
@@ -4483,7 +4591,10 @@ var Canvas = /** @class */ (function () {
                         pen.calculative.strokeImg = img_3;
                         globalStore.htmlElements[pen.strokeImage] = img_3;
                         _this.imageLoaded();
-                        if (pen.template && pen.name !== 'gif') {
+                        if (
+                        // pen.template
+                        pen.canvasLayer === CanvasLayer.CanvasTemplate &&
+                            pen.name !== 'gif') {
                             _this.templateImageLoaded();
                         }
                     };
@@ -6140,15 +6251,15 @@ var Canvas = /** @class */ (function () {
         var e_21, _a;
         var retPens = [];
         try {
-            for (var pens_9 = __values(pens), pens_9_1 = pens_9.next(); !pens_9_1.done; pens_9_1 = pens_9.next()) {
-                var pen = pens_9_1.value;
+            for (var pens_10 = __values(pens), pens_10_1 = pens_10.next(); !pens_10_1.done; pens_10_1 = pens_10.next()) {
+                var pen = pens_10_1.value;
                 retPens.push.apply(retPens, __spreadArray([], __read(deepClone(getAllChildren(pen, this.store), true)), false));
             }
         }
         catch (e_21_1) { e_21 = { error: e_21_1 }; }
         finally {
             try {
-                if (pens_9_1 && !pens_9_1.done && (_a = pens_9.return)) _a.call(pens_9);
+                if (pens_10_1 && !pens_10_1.done && (_a = pens_10.return)) _a.call(pens_10);
             }
             finally { if (e_21) throw e_21.error; }
         }
@@ -6274,6 +6385,8 @@ var Canvas = /** @class */ (function () {
                         this.render();
                         // TODO: 连线的删除 ，连接的 node 的 connectLines 会变化（删除 node ，line 的 anchors 类似），未记历史记录
                         if (history) {
+                            if (deletePens.length === 0)
+                                return [2 /*return*/];
                             this.pushHistory({ type: EditType.Delete, pens: deletePens });
                         }
                         this.store.emitter.emit('delete', pens);
@@ -6648,7 +6761,7 @@ var Canvas = /** @class */ (function () {
                 if (k === 'rotate') {
                     oldRotate = pen.calculative.rotate || 0;
                 }
-                else if (k === 'isBottom') {
+                else if (k === 'canvasLayer' || k === 'isBottom') {
                     containIsBottom = true;
                 }
                 else if (k === 'image') {
@@ -6752,17 +6865,30 @@ var Canvas = /** @class */ (function () {
         }
         else if (willRenderImage) {
             // 存在先有 image 后无 image 的情况
-            if (pen.isBottom) {
+            // if (pen.isBottom) {
+            //   this.canvasImageBottom.init();
+            // } else {
+            //   this.canvasImage.init();
+            // }
+            if (pen.canvasLayer === undefined) {
+                pen.canvasLayer = CanvasLayer.CanvasImageBottom;
+                pen.calculative.canvasLayer = CanvasLayer.CanvasImageBottom;
+            }
+            if (pen.canvasLayer === CanvasLayer.CanvasImageBottom) {
                 this.canvasImageBottom.init();
             }
-            else {
+            else if (pen.canvasLayer === CanvasLayer.CanvasImage) {
                 this.canvasImage.init();
             }
         }
         else {
             this.initImageCanvas([pen]);
         }
-        if (data.template !== undefined || pen.template) {
+        // if (data.template !== undefined || pen.template) {
+        //   this.initTemplateCanvas([pen]);
+        // }
+        if (data.canvasLayer !== undefined ||
+            pen.canvasLayer === CanvasLayer.CanvasTemplate) {
             this.initTemplateCanvas([pen]);
         }
     };