@meta2d/core 1.0.38 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meta2d/core",
-    "version": "1.0.38",
+    "version": "1.0.39",
     "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();
@@ -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) {
@@ -4297,6 +4360,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) {
@@ -5325,6 +5390,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 +6094,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 +6966,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 生命周期函数