@meta2d/core 1.0.35 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meta2d/core",
-    "version": "1.0.35",
+    "version": "1.0.36",
     "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';
@@ -719,8 +719,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 +1239,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 +2037,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 +3395,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 +3405,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 +3433,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 +3563,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 +4049,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;
@@ -4096,7 +4132,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 +4159,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 +4421,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 +4442,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 +4475,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 +4506,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 +4536,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();
                         }
                     };
@@ -6648,7 +6704,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 +6808,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]);
         }
     };