@meta2d/core 1.0.33 → 1.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meta2d/core",
-    "version": "1.0.33",
+    "version": "1.0.34",
     "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

@@ -343,7 +343,7 @@ export declare class Canvas {
      */
     rotatePen(pen: Pen, angle: number, rect: Rect): void;
     nextAnimate(pen: Pen): void;
-    getFrameProps(pen: any): {};
+    getFrameProps(pen: Pen): {};
     animate(): void;
     get clipboardName(): string;
     copy(pens?: Pen[], emit?: boolean): Promise<void>;

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, } 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, } 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';
@@ -298,11 +298,15 @@ var Canvas = /** @class */ (function () {
                 }
             }
             else {
+                var offset = 0.2;
+                if (e.deltaY.toString().indexOf('.') !== -1) {
+                    offset = 0.01;
+                }
                 if (e.deltaY > 0) {
-                    scaleOff = -0.05;
+                    scaleOff = -offset;
                 }
                 else {
-                    scaleOff = 0.05;
+                    scaleOff = offset;
                 }
             }
             var x = e.offsetX, y = e.offsetY;
@@ -1374,6 +1378,7 @@ var Canvas = /** @class */ (function () {
                 _this.store.emitter.emit('contextmenu', {
                     e: e,
                     clientRect: _this.clientRect,
+                    pen: _this.store.hover,
                 });
             }
             _this.mouseRight = MouseRight.None;
@@ -2514,7 +2519,12 @@ var Canvas = /** @class */ (function () {
                 if (tem < 0) {
                     tem = 0;
                 }
-                style += "height:" + (pen.fontSize * scale < 12 ? tem * font_scale : tem * scale * font_scale) + "px;";
+                var height = pen.fontSize * scale < 12 ? tem * font_scale : tem * scale * font_scale;
+                if (height < pen.fontSize * pen.lineHeight * scale) {
+                    height = pen.fontSize * pen.lineHeight * scale;
+                    style += "top:-" + height / 2 + "px;";
+                }
+                style += "height:" + height + "px;";
             }
             var _textWidth = null;
             if (pen.textWidth) {
@@ -3902,12 +3912,14 @@ var Canvas = /** @class */ (function () {
                 break;
             case EditType.Delete:
                 action.pens.forEach(function (aPen) {
-                    var _a;
+                    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, 0, pen);
+                    _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;
                     pen.calculative.canvas = _this;
@@ -4000,6 +4012,7 @@ var Canvas = /** @class */ (function () {
         }
         !pen.rotate && (pen.rotate = 0);
         this.loadImage(pen);
+        this.parent.penNetwork(pen);
     };
     Canvas.prototype.drawline = function (mouse) {
         var _a;
@@ -5547,6 +5560,9 @@ var Canvas = /** @class */ (function () {
             }
             _this.store.path2dMap.set(line, globalStore.path2dDraws[line.name](line));
             _this.patchFlagsLines.add(line);
+            if (line.calculative.gradientSmooth) {
+                line.calculative.gradientAnimatePath = getGradientAnimatePath(line);
+            }
             change && getLineLength(line);
         });
     };
@@ -5634,7 +5650,7 @@ var Canvas = /** @class */ (function () {
             return;
         }
         pens.forEach(function (pen) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (pen.calculative.pause) {
                 var d = Date.now() - pen.calculative.pause;
                 pen.calculative.pause = undefined;
@@ -5647,9 +5663,26 @@ var Canvas = /** @class */ (function () {
                     (_a = pen.calculative.media) === null || _a === void 0 ? void 0 : _a.play();
                     (_b = pen.onStartVideo) === null || _b === void 0 ? void 0 : _b.call(pen, pen);
                 }
-                else if (pen.type || ((_c = pen.frames) === null || _c === void 0 ? void 0 : _c.length)) {
+                else if (pen.type ||
+                    ((_c = pen.frames) === null || _c === void 0 ? void 0 : _c.length) ||
+                    (pen.animations && pen.animations.length)) {
                     //存储动画初始状态
                     if (!pen.type) {
+                        if (!pen.frames && pen.animations && pen.animations.length) {
+                            //无活动动画
+                            var autoIndex = (_d = pen.animations) === null || _d === void 0 ? void 0 : _d.findIndex(function (i) { return i.autoPlay; });
+                            var index = autoIndex === -1 ? 0 : autoIndex;
+                            var animate = deepClone(pen.animations[index]);
+                            delete animate.name;
+                            animate.currentAnimation = index;
+                            if (!pen.type && animate.frames) {
+                                animate.showDuration = _this.parent.calcAnimateDuration(animate);
+                            }
+                            _this.parent.setValue(__assign({ id: pen.id }, animate), {
+                                doEvent: false,
+                                history: false,
+                            });
+                        }
                         _this.store.animateMap.set(pen, _this.getFrameProps(pen));
                     }
                     _this.store.animates.add(pen);
@@ -6079,7 +6112,7 @@ var Canvas = /** @class */ (function () {
                             return [2 /*return*/];
                         }
                         deletePens = [];
-                        this._del(pens, deletePens);
+                        this._del(pens, deletePens, canDelLocked);
                         this.initImageCanvas(deletePens);
                         this.initTemplateCanvas(deletePens);
                         this.inactive();
@@ -6095,15 +6128,14 @@ var Canvas = /** @class */ (function () {
             });
         });
     };
-    Canvas.prototype._del = function (pens, delPens) {
+    Canvas.prototype._del = function (pens, delPens, canDelLocked) {
         var _this = this;
         if (!pens) {
             return;
         }
         pens.forEach(function (pen) {
             if (!pen.parentId) {
-                if (pen.locked) {
-                    // TODO: canDelLocked 是 true ， locked 仍然删不掉
+                if (!canDelLocked && pen.locked) {
                     return;
                 }
                 else {
@@ -6269,9 +6301,60 @@ var Canvas = /** @class */ (function () {
             sheet.insertRule('.meta2d-input ul li{padding: 5px 12px;line-height: 22px;white-space: nowrap;cursor: pointer;}');
             sheet.insertRule('.meta2d-input ul li:hover{background: #eeeeee;}');
             sheet.insertRule(".input-div::-webkit-scrollbar {display:none}");
+            sheet.insertRule(".input-div{scrollbar-width: none;}");
             sheet.insertRule('.meta2d-input .input-div{resize:none;border:none;outline:none;background:transparent;flex-grow:1;height:100%;width: 100%;left:0;top:0;display:flex;text-align: center;justify-content: center;flex-direction: column;}');
             sheet.insertRule(".input-div div{}");
         }
+        this.inputDiv.onfocus = function (e) {
+            if (navigator.userAgent.includes('Firefox')) {
+                if (!e.target.innerText) {
+                    var left = _this.inputDiv.offsetWidth / 2;
+                    var inputDivStyle = window.getComputedStyle(_this.inputDiv, null);
+                    if (inputDivStyle.textAlign !== 'center') {
+                        left = 0;
+                    }
+                    _this.inputDiv.innerHTML = "<br style=\"margin-left:" + left + "px;margin-top:4px;\" />";
+                }
+            }
+            else {
+                //无文本时，光标确保居中
+                if (!e.target.innerText) {
+                    var inputDivStyle = window.getComputedStyle(_this.inputDiv, null);
+                    if (inputDivStyle.justifyContent === 'center') {
+                        _this.inputDiv.style.paddingTop = " " + (_this.inputDiv.offsetHeight / 2 -
+                            parseFloat(inputDivStyle.lineHeight) / 2) + "px";
+                    }
+                }
+                else {
+                    _this.inputDiv.style.paddingTop = '';
+                }
+            }
+        };
+        this.inputDiv.oninput = function (e) {
+            // //无文本时，光标确保居中
+            if (navigator.userAgent.includes('Firefox')) {
+                if (!e.target.innerText.trim()) {
+                    var left = _this.inputDiv.offsetWidth / 2;
+                    var inputDivStyle = window.getComputedStyle(_this.inputDiv, null);
+                    if (inputDivStyle.textAlign !== 'center') {
+                        left = 0;
+                    }
+                    _this.inputDiv.innerHTML = "<br style=\"margin-left:" + left + "px;margin-top:4px;\" />";
+                }
+            }
+            else {
+                if (!e.target.innerText) {
+                    var inputDivStyle = window.getComputedStyle(_this.inputDiv, null);
+                    if (inputDivStyle.justifyContent === 'center') {
+                        _this.inputDiv.style.paddingTop = " " + (_this.inputDiv.offsetHeight / 2 -
+                            parseFloat(inputDivStyle.lineHeight) / 2) + "px";
+                    }
+                }
+                else {
+                    _this.inputDiv.style.paddingTop = '';
+                }
+            }
+        };
         this.inputDiv.onclick = function (e) {
             e.stopPropagation();
             var pen = _this.store.pens[_this.inputDiv.dataset.penId];
@@ -6403,37 +6486,45 @@ var Canvas = /** @class */ (function () {
         var oldRotate = undefined;
         var willRenderImage = false; // 是否需要重新渲染图片
         for (var k in data) {
-            if (k === 'rotate') {
-                oldRotate = pen.calculative.rotate || 0;
-            }
-            if (typeof pen[k] !== 'object' || k === 'lineDash') {
-                pen.calculative[k] = data[k];
-            }
-            if (needCalcTextRectProps.includes(k)) {
-                willCalcTextRect = true;
-            }
-            if (['name', 'borderRadius'].includes(k)) {
-                willUpdatePath = true;
-            }
-            if (needSetPenProps.includes(k)) {
-                willSetPenRect = true;
-            }
-            if (needPatchFlagsPenRectProps.includes(k)) {
-                willPatchFlagsPenRect = true;
-            }
-            if (needCalcIconRectProps.includes(k)) {
-                willCalcIconRect = true;
-            }
-            if (k === 'isBottom') {
-                containIsBottom = true;
-            }
-            if (k === 'image') {
-                willRenderImage = true;
+            // 单属性
+            if (k.indexOf('.') === -1) {
+                if (k === 'rotate') {
+                    oldRotate = pen.calculative.rotate || 0;
+                }
+                else if (k === 'isBottom') {
+                    containIsBottom = true;
+                }
+                else if (k === 'image') {
+                    willRenderImage = true;
+                }
+                if (typeof pen[k] !== 'object' || k === 'lineDash') {
+                    pen.calculative[k] = data[k];
+                }
+                if (needCalcTextRectProps.includes(k)) {
+                    willCalcTextRect = true;
+                }
+                if (['name', 'borderRadius'].includes(k)) {
+                    willUpdatePath = true;
+                }
+                if (needSetPenProps.includes(k)) {
+                    willSetPenRect = true;
+                }
+                if (needPatchFlagsPenRectProps.includes(k)) {
+                    willPatchFlagsPenRect = true;
+                }
+                if (needCalcIconRectProps.includes(k)) {
+                    willCalcIconRect = true;
+                }
             }
-            if (k.indexOf('.') !== -1) {
+            else {
+                // 复合属性，如abc.def.ghi
                 delete pen[k];
                 setter(pen, k, data[k]);
             }
+            // anchors 或者 anchors.x都去执行
+            if (k.split('.')[0] === 'anchors') {
+                calcWorldAnchors(pen);
+            }
         }
         this.setCalculativeByScale(pen); // 该方法计算量并不大，所以每次修改都计算一次
         if (isChangedName) {
@@ -6450,6 +6541,11 @@ var Canvas = /** @class */ (function () {
             };
             this.setPenRect(pen, rect, false);
             this.updateLines(pen, true);
+            if (this.store.active &&
+                this.store.active.length &&
+                pen.id === this.store.active[0].id) {
+                this.calcActiveRect();
+            }
         }
         else if (willPatchFlagsPenRect) {
             this.updatePenRect(pen);
@@ -6595,6 +6691,16 @@ var Canvas = /** @class */ (function () {
             isRight = rect.x === 0;
             isBottom = rect.y === 0;
         }
+        var width = this.store.data.width || this.store.options.width;
+        var height = this.store.data.height || this.store.options.height;
+        //大屏
+        if (width && height) {
+            rect.x = this.store.data.origin.x;
+            rect.y = this.store.data.origin.y;
+            rect.width = width * this.store.data.scale;
+            rect.height = height * this.store.data.scale;
+        }
+        var vRect = deepClone(rect);
         // 有背景图，也添加 padding
         var p = formatPadding(padding);
         rect.x -= p[3] * _scale;
@@ -6629,25 +6735,40 @@ var Canvas = /** @class */ (function () {
         // }
         ctx.textBaseline = 'middle'; // 默认垂直居中
         ctx.scale(scale, scale);
-        if (isDrawBkImg) {
-            var x = rect.x < 0 ? -rect.x : 0;
-            var y = rect.y < 0 ? -rect.y : 0;
-            ctx.drawImage(this.store.bkImg, x, y, this.canvasRect.width, this.canvasRect.height);
-        }
         var background = this.store.data.background || this.store.options.background;
         if (background) {
             // 绘制背景颜色
             ctx.save();
             ctx.fillStyle = background;
-            ctx.fillRect(0, 0, oldRect.width + (p[3] + p[1]) * _scale, oldRect.height + (p[0] + p[2]) * _scale);
+            if (width && height) {
+                ctx.fillRect(0, 0, vRect.width + (p[1] + p[3]) * _scale, vRect.height + (p[0] + p[2]) * _scale);
+            }
+            else {
+                ctx.fillRect(0, 0, oldRect.width + (p[3] + p[1]) * _scale, oldRect.height + (p[0] + p[2]) * _scale);
+            }
             ctx.restore();
         }
+        if (isDrawBkImg) {
+            if (width && height) {
+                ctx.drawImage(this.store.bkImg, p[3] * _scale || 0, p[0] * _scale || 0, vRect.width, vRect.height);
+            }
+            else {
+                var x = rect.x < 0 ? -rect.x : 0;
+                var y = rect.y < 0 ? -rect.y : 0;
+                ctx.drawImage(this.store.bkImg, x, y, this.canvasRect.width, this.canvasRect.height);
+            }
+        }
         if (!isDrawBkImg) {
             ctx.translate(-rect.x, -rect.y);
         }
         else {
             // 平移画布，画笔的 worldRect 不变化
-            ctx.translate(isRight ? storeData.x : -oldRect.x, isBottom ? storeData.y : -oldRect.y);
+            if (width && height) {
+                ctx.translate(-oldRect.x + p[3] * _scale || 0, -oldRect.y + p[0] * _scale || 0);
+            }
+            else {
+                ctx.translate((isRight ? storeData.x : -oldRect.x) + p[3] * _scale || 0, (isBottom ? storeData.y : -oldRect.y) + p[0] * _scale || 0);
+            }
         }
         try {
             for (var _b = __values(this.store.data.pens), _c = _b.next(); !_c.done; _c = _b.next()) {