@meta2d/core 1.0.38 → 1.0.40

package/package.json

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

@@ -81,6 +81,12 @@ export declare class Canvas {
     maxZindex: number;
     canMoveLine: boolean;
     randomIdObj: object;
+    keyOptions?: {
+        shiftKey?: boolean;
+        altKey?: boolean;
+        ctrlKey?: boolean;
+        metaKey?: boolean;
+    };
     /**
      * @deprecated 改用 beforeAddPens
      */

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, CanvasLayer, ctxFlip, ctxRotate, setGlobalAlpha, drawImage, } 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, setElemPosition, } 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';
@@ -333,6 +333,13 @@ var Canvas = /** @class */ (function () {
             if (_this.store.options.unavailableKeys.includes(e.key)) {
                 return;
             }
+            if (!_this.keyOptions) {
+                _this.keyOptions = {};
+            }
+            _this.keyOptions.altKey = e.altKey;
+            _this.keyOptions.shiftKey = e.shiftKey;
+            _this.keyOptions.ctrlKey = e.ctrlKey;
+            _this.keyOptions.metaKey = e.metaKey;
             var x = 10;
             var y = 10;
             var vRect = null;
@@ -427,6 +434,13 @@ var Canvas = /** @class */ (function () {
                         x = -10;
                     }
                     x = x * _this.store.data.scale;
+                    if (_this.store.activeAnchor &&
+                        _this.store.active &&
+                        _this.store.active.length === 1 &&
+                        _this.store.active[0].type) {
+                        _this.moveLineAnchor({ x: _this.store.activeAnchor.x + x, y: _this.store.activeAnchor.y }, {});
+                        break;
+                    }
                     if (vRect && _this.activeRect.x + x < vRect.x) {
                         x = vRect.x - _this.activeRect.x;
                     }
@@ -448,6 +462,13 @@ var Canvas = /** @class */ (function () {
                     if (vRect && _this.activeRect.y + y < vRect.y) {
                         y = vRect.y - _this.activeRect.y;
                     }
+                    if (_this.store.activeAnchor &&
+                        _this.store.active &&
+                        _this.store.active.length === 1 &&
+                        _this.store.active[0].type) {
+                        _this.moveLineAnchor({ x: _this.store.activeAnchor.x, y: _this.store.activeAnchor.y + y }, {});
+                        break;
+                    }
                     _this.translatePens(_this.store.active, 0, y);
                     break;
                 case 'ArrowRight':
@@ -463,6 +484,13 @@ var Canvas = /** @class */ (function () {
                         x = 10;
                     }
                     x = x * _this.store.data.scale;
+                    if (_this.store.activeAnchor &&
+                        _this.store.active &&
+                        _this.store.active.length === 1 &&
+                        _this.store.active[0].type) {
+                        _this.moveLineAnchor({ x: _this.store.activeAnchor.x + x, y: _this.store.activeAnchor.y }, {});
+                        break;
+                    }
                     if (vRect &&
                         _this.activeRect.x + _this.activeRect.width + x > vRect.x + vRect.width) {
                         x =
@@ -491,6 +519,13 @@ var Canvas = /** @class */ (function () {
                                 vRect.height -
                                 (_this.activeRect.y + _this.activeRect.height);
                     }
+                    if (_this.store.activeAnchor &&
+                        _this.store.active &&
+                        _this.store.active.length === 1 &&
+                        _this.store.active[0].type) {
+                        _this.moveLineAnchor({ x: _this.store.activeAnchor.x, y: _this.store.activeAnchor.y + y }, {});
+                        break;
+                    }
                     _this.translatePens(_this.store.active, 0, y);
                     break;
                 case 'd':
@@ -541,6 +576,7 @@ var Canvas = /** @class */ (function () {
                         _this.cut();
                     }
                     break;
+                case '√': //MAC OPTION + V
                 case 'v':
                 case 'V':
                     if (!e.ctrlKey && !e.metaKey) {
@@ -555,7 +591,9 @@ var Canvas = /** @class */ (function () {
                             _this.drawingLineName = _this.store.options.drawingLineName;
                         }
                     }
-                    if ((e.ctrlKey || e.metaKey) && _this.store.options.disableClipboard) {
+                    if ((e.ctrlKey || e.metaKey) && (_this.store.options.disableClipboard ||
+                        (!_this.store.options.disableClipboard && e.altKey)) //alt按下，paste事件无效
+                    ) {
                         _this.paste();
                     }
                     break;
@@ -657,6 +695,22 @@ var Canvas = /** @class */ (function () {
                 case 'L':
                     _this.canMoveLine = true;
                     break;
+                case '[':
+                    //下一层
+                    _this.parent.down();
+                    break;
+                case ']':
+                    //上一层
+                    _this.parent.up();
+                    break;
+                case '{':
+                    // 置底
+                    _this.parent.bottom();
+                    break;
+                case '}':
+                    //置顶
+                    _this.parent.top();
+                    break;
             }
             _this.render(false);
         };
@@ -1241,7 +1295,7 @@ var Canvas = /** @class */ (function () {
                         var pt = { x: e.x, y: e.y };
                         // Move line anchor
                         if (_this.hoverType === HoverType.LineAnchor) {
-                            if ((_this.store.active[0].lineName === 'line' || _this.dockInAnchor(e)) &&
+                            if ((_this.dockInAnchor(e) || _this.store.active[0].lineName === 'line') &&
                                 !_this.store.options.disableDock &&
                                 !_this.store.options.disableLineDock) {
                                 _this.clearDock();
@@ -2103,7 +2157,7 @@ var Canvas = /** @class */ (function () {
                         ctx.translate(-_this.activeRect.center.x, -_this.activeRect.center.y);
                     }
                     ctx.strokeStyle = _this.store.options.activeColor;
-                    ctx.globalAlpha = _this.store.options.activeGlobalAlpha || 0.3;
+                    ctx.globalAlpha = _this.store.options.activeGlobalAlpha === undefined ? 0.3 : _this.store.options.activeGlobalAlpha;
                     ctx.beginPath();
                     ctx.lineWidth = _this.store.options.activeLineWidth || 1;
                     ctx.setLineDash(_this.store.options.activeLineDash || []);
@@ -2335,8 +2389,16 @@ var Canvas = /** @class */ (function () {
                     pen.x -= initRect.center.x - _this.store.clipboard.pos.x;
                     pen.y -= initRect.center.y - _this.store.clipboard.pos.y;
                 }
-                pen.x += _this.store.clipboard.offset * _this.store.data.scale;
-                pen.y += _this.store.clipboard.offset * _this.store.data.scale;
+                if (_this.keyOptions && _this.keyOptions.altKey && (_this.keyOptions.ctrlKey || _this.keyOptions.metaKey)) {
+                    pen.x = -_this.store.data.x + _this.width / 2 - pen.width / 2;
+                    pen.y = -_this.store.data.y + _this.height / 2 - pen.height / 2;
+                }
+                else if (_this.keyOptions && _this.keyOptions.shiftKey && (_this.keyOptions.ctrlKey || _this.keyOptions.metaKey)) {
+                }
+                else {
+                    pen.x += _this.store.clipboard.offset * _this.store.data.scale;
+                    pen.y += _this.store.clipboard.offset * _this.store.data.scale;
+                }
             }
             _this.makePen(pen);
             var newChildren = [];
@@ -2360,6 +2422,7 @@ var Canvas = /** @class */ (function () {
                 }
             }
             pen.children = newChildren;
+            calcInView(pen, true);
             return pen;
         };
         this.ondblclick = function (e) {
@@ -2649,6 +2712,9 @@ var Canvas = /** @class */ (function () {
                     });
                     _this.store.emitter.emit('valueUpdate', pen);
                 }
+                else if (pen.text === _this.inputDiv.dataset.value && pen.calculative.textLines.length == 0) {
+                    calcTextRect(pen);
+                }
                 _this.initTemplateCanvas([pen]);
             }
             _this.inputDiv.dataset.penId = undefined;
@@ -4297,6 +4363,8 @@ var Canvas = /** @class */ (function () {
         calcPadding(pen, rect);
         calcTextRect(pen);
         calcInView(pen);
+        pen.calculative &&
+            (pen.calculative.gradientAnimatePath = undefined);
         this.store.path2dMap.set(pen, globalStore.path2dDraws[pen.name](pen));
         if (pen.calculative.worldAnchors) {
             pen.anchors = pen.calculative.worldAnchors.map(function (pt) {
@@ -4317,6 +4385,7 @@ var Canvas = /** @class */ (function () {
     Canvas.prototype.finishDrawline = function (end) {
         return __awaiter(this, void 0, void 0, function () {
             var from, to, line, rect, allowAdd, _a;
+            var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -4341,6 +4410,7 @@ var Canvas = /** @class */ (function () {
                         if (!from.connectTo || !to.connectTo) {
                             if (this.store.options.disableEmptyLine) {
                                 // 有一端未连线，且 禁止创建空线条
+                                this.store.pens[from.connectTo].connectedLines = this.store.pens[from.connectTo].connectedLines.filter(function (item) { return item.lineId !== _this.drawingLine.id; });
                                 this.drawingLine = undefined;
                                 this.render();
                                 return [2 /*return*/];
@@ -4703,7 +4773,6 @@ var Canvas = /** @class */ (function () {
         }, 50);
     };
     Canvas.prototype.translate = function (x, y) {
-        var _this = this;
         if (x === void 0) { x = 0; }
         if (y === void 0) { y = 0; }
         this.store.data.x += x * this.store.data.scale;
@@ -4747,12 +4816,13 @@ var Canvas = /** @class */ (function () {
                 }
             }
         }
-        setTimeout(function () {
-            _this.canvasTemplate.init();
-            _this.canvasImage.init();
-            _this.canvasImageBottom.init();
-            _this.render();
-        });
+        //TODO 当初为什么加异步
+        // setTimeout(() => {
+        this.canvasTemplate.init();
+        this.canvasImage.init();
+        this.canvasImageBottom.init();
+        this.render();
+        // });
         this.store.emitter.emit('translate', {
             x: this.store.data.x,
             y: this.store.data.y,
@@ -4843,17 +4913,17 @@ var Canvas = /** @class */ (function () {
             _this.execPenResize(pen);
         });
         this.calcActiveRect();
-        setTimeout(function () {
-            _this.canvasTemplate.init();
-            _this.canvasImage.init();
-            _this.canvasImageBottom.init();
-            var map = _this.parent.map;
-            if (map && map.isShow) {
-                map.setView();
-            }
-            _this.render();
-            _this.store.emitter.emit('scale', _this.store.data.scale);
-        });
+        // setTimeout(() => {
+        this.canvasTemplate.init();
+        this.canvasImage.init();
+        this.canvasImageBottom.init();
+        var map = this.parent.map;
+        if (map && map.isShow) {
+            map.setView();
+        }
+        this.render();
+        this.store.emitter.emit('scale', this.store.data.scale);
+        // });
     };
     Canvas.prototype.templateScale = function (scale, center) {
         var _this = this;
@@ -5325,6 +5395,10 @@ var Canvas = /** @class */ (function () {
         this.render();
         this.store.active[0].calculative &&
             (this.store.active[0].calculative.gradientAnimatePath = undefined);
+        this.store.emitter.emit('moveLineAnchor', {
+            pen: this.store.active[0],
+            anchor: this.store.activeAnchor,
+        });
         if (this.timer) {
             clearTimeout(this.timer);
         }
@@ -6025,6 +6099,9 @@ var Canvas = /** @class */ (function () {
                                 if (pen.calculative[k] === undefined) {
                                     continue;
                                 }
+                                if (k === 'length') {
+                                    continue;
+                                }
                                 if (typeof pen[k] !== 'object' || k === 'lineDash') {
                                     if (k === 'lineWidth') {
                                         pen[k] =
@@ -6894,6 +6971,10 @@ var Canvas = /** @class */ (function () {
             pen.canvasLayer === CanvasLayer.CanvasTemplate) {
             this.initTemplateCanvas([pen]);
         }
+        if (data.zIndex !== undefined) {
+            pen.calculative.singleton.div &&
+                setElemPosition(pen, pen.calculative.singleton.div);
+        }
     };
     /**
      * 执行 pen ，以及 pen 的子孙节点的 onResize 生命周期函数