@meta2d/core 1.0.48 → 1.0.50

package/package.json

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

@@ -371,6 +371,8 @@ export declare class Canvas {
      * @param pens 不包含子节点
      */
     getAllByPens(pens: Pen[]): Pen[];
+    getAllFollowersByPens(pens: Pen[], deep?: boolean): Pen[];
+    setFollowers(pens?: Pen[]): void;
     /**
      *
      * @param pen 当前复制的画笔

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, setElemPosition, } 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, getAllFollowers, } 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, pointInPolygon } from '../rect';
 import { EditType, globalStore, } from '../store';
@@ -289,25 +289,33 @@ var Canvas = /** @class */ (function () {
                 return;
             }
             var scaleOff = 0.015;
-            var isMac = /mac os /i.test(navigator.userAgent);
-            if (isMac) {
-                if (!e.ctrlKey) {
-                    scaleOff *= e.wheelDeltaY / 240;
-                }
-                else if (e.deltaY > 0) {
-                    scaleOff *= -1;
+            if (_this.store.options.scaleOff) {
+                scaleOff = _this.store.options.scaleOff;
+                if (e.deltaY > 0) {
+                    scaleOff = -_this.store.options.scaleOff;
                 }
             }
             else {
-                var offset = 0.2;
-                if (e.deltaY.toString().indexOf('.') !== -1) {
-                    offset = 0.01;
-                }
-                if (e.deltaY > 0) {
-                    scaleOff = -offset;
+                var isMac = /mac os /i.test(navigator.userAgent);
+                if (isMac) {
+                    if (!e.ctrlKey) {
+                        scaleOff *= e.wheelDeltaY / 240;
+                    }
+                    else if (e.deltaY > 0) {
+                        scaleOff *= -1;
+                    }
                 }
                 else {
-                    scaleOff = offset;
+                    var offset = 0.2;
+                    if (e.deltaY.toString().indexOf('.') !== -1) {
+                        offset = 0.01;
+                    }
+                    if (e.deltaY > 0) {
+                        scaleOff = -offset;
+                    }
+                    else {
+                        scaleOff = offset;
+                    }
                 }
             }
             var x = e.offsetX, y = e.offsetY;
@@ -719,6 +727,10 @@ var Canvas = /** @class */ (function () {
                     //置顶
                     _this.parent.top();
                     break;
+                case 'F':
+                case 'f':
+                    _this.setFollowers();
+                    break;
             }
             _this.render(false);
         };
@@ -1145,10 +1157,12 @@ var Canvas = /** @class */ (function () {
                                     _this.willInactivePen = pen;
                                 }
                                 else {
-                                    pen.calculative.active = true;
-                                    setChildrenActive(pen); // 子节点也设置为active
-                                    _this.store.active.push(pen);
-                                    _this.store.emitter.emit('active', _this.store.active);
+                                    if (_this.store.active.length > 0) {
+                                        pen.calculative.active = true;
+                                        setChildrenActive(pen); // 子节点也设置为active
+                                        _this.store.active.push(pen);
+                                        _this.store.emitter.emit('active', _this.store.active);
+                                    }
                                 }
                                 _this.patchFlags = true;
                             }
@@ -1156,10 +1170,12 @@ var Canvas = /** @class */ (function () {
                                 _this.active([_this.store.hover]);
                             }
                             else {
-                                if (!pen.calculative.active) {
-                                    _this.active([pen]);
-                                    if (_this.store.options.resizeMode) {
-                                        _this.hotkeyType = HotkeyType.Resize;
+                                if (!(_this.activeRect && pointInRect({ x: e.x, y: e.y }, _this.activeRect)) || _this.store.active.length == 1) {
+                                    if (!pen.calculative.active) {
+                                        _this.active([pen]);
+                                        if (_this.store.options.resizeMode) {
+                                            _this.hotkeyType = HotkeyType.Resize;
+                                        }
                                     }
                                 }
                             }
@@ -1282,7 +1298,7 @@ var Canvas = /** @class */ (function () {
                         return;
                     }
                     // 框选
-                    if (e.buttons === 1 && !_this.hoverType && !_this.hotkeyType) {
+                    if (e.buttons === 1 && (e.ctrlKey || !_this.hoverType && !_this.hotkeyType)) {
                         _this.dragRect = {
                             x: Math.min(_this.mouseDown.x, e.x),
                             y: Math.min(_this.mouseDown.y, e.y),
@@ -1619,7 +1635,7 @@ var Canvas = /** @class */ (function () {
                         pen.parentId || pen.isRuleLine) {
                         return false;
                     }
-                    if (rectInRect(pen.calculative.worldRect, _this.dragRect, _this.store.options.dragAllIn)) {
+                    if (rectInRect(pen.calculative.worldRect, _this.dragRect, e.ctrlKey || _this.store.options.dragAllIn)) {
                         // 先判断在区域内，若不在区域内，则锚点肯定不在框选区域内，避免每条连线过度计算
                         if (pen.type === PenType.Line && !_this.store.options.dragAllIn) {
                             return lineInRect(pen, _this.dragRect);
@@ -1646,6 +1662,11 @@ var Canvas = /** @class */ (function () {
                     y: e.y,
                     pen: _this.store.hover,
                 });
+                _this.store.emitter.emit('mouseup', {
+                    x: e.x,
+                    y: e.y,
+                    pen: _this.store.hoverContainer,
+                });
             }
             if (_this.willInactivePen) {
                 _this.willInactivePen.calculative.active = undefined;
@@ -1721,6 +1742,7 @@ var Canvas = /** @class */ (function () {
             if (_this.dragRect) {
                 return;
             }
+            _this.store.hoverContainer = undefined;
             var containerPens = _this.store.data.pens.filter(function (pen) { var _a; return pen.container || ((_a = _this.store.options.containerShapes) === null || _a === void 0 ? void 0 : _a.includes(pen.name)); });
             if (containerPens.length) {
                 for (var i = containerPens.length - 1; i >= 0; --i) {
@@ -1732,7 +1754,31 @@ var Canvas = /** @class */ (function () {
                         continue;
                     }
                     if (pointInRect(pt, pen.calculative.worldRect)) {
+                        _this.store.hoverContainer = pen;
                         (_a = pen === null || pen === void 0 ? void 0 : pen.onMouseMove) === null || _a === void 0 ? void 0 : _a.call(pen, pen, pt);
+                        if (_this.store.lastHoverContainer !== _this.store.hoverContainer) {
+                            _this.patchFlags = true;
+                            if (_this.store.lastHoverContainer) {
+                                _this.store.lastHoverContainer.calculative.containerHover = false;
+                                _this.store.emitter.emit('leave', _this.store.lastHoverContainer);
+                            }
+                            if (_this.store.hoverContainer) {
+                                _this.store.hoverContainer.calculative.containerHover = true;
+                                _this.store.emitter.emit('enter', _this.store.hoverContainer);
+                            }
+                            _this.store.lastHoverContainer = _this.store.hoverContainer;
+                        }
+                    }
+                    else {
+                        _this.store.hoverContainer = undefined;
+                        if (_this.store.lastHoverContainer !== _this.store.hoverContainer) {
+                            _this.patchFlags = true;
+                            if (_this.store.lastHoverContainer) {
+                                _this.store.lastHoverContainer.calculative.containerHover = false;
+                                _this.store.emitter.emit('leave', _this.store.lastHoverContainer);
+                            }
+                            _this.store.lastHoverContainer = _this.store.hoverContainer;
+                        }
                     }
                 }
             }
@@ -1765,7 +1811,7 @@ var Canvas = /** @class */ (function () {
                         y: _this.activeRect.y - 30,
                     };
                     if (_this.activeRect.rotate) {
-                        rotatePoint(rotatePt, _this.activeRect.rotate, _this.activeRect.center);
+                        rotatePoint(rotatePt, _this.activeRect.rotate, _this.activeRect.pivot || _this.activeRect.center);
                     }
                     // 旋转控制点
                     if (!_this.hotkeyType && hitPoint(pt, rotatePt, _this.pointSize)) {
@@ -2215,10 +2261,11 @@ var Canvas = /** @class */ (function () {
                     var ctx = _this.offscreen.getContext('2d');
                     ctx.save();
                     ctx.translate(0.5, 0.5);
+                    var pivot = _this.activeRect.pivot || _this.activeRect.center;
                     if (_this.activeRect.rotate) {
-                        ctx.translate(_this.activeRect.center.x, _this.activeRect.center.y);
+                        ctx.translate(pivot.x, pivot.y);
                         ctx.rotate((_this.activeRect.rotate * Math.PI) / 180);
-                        ctx.translate(-_this.activeRect.center.x, -_this.activeRect.center.y);
+                        ctx.translate(-pivot.x, -pivot.y);
                     }
                     ctx.strokeStyle = _this.store.options.activeColor;
                     ctx.globalAlpha = _this.store.options.activeGlobalAlpha === undefined ? 0.3 : _this.store.options.activeGlobalAlpha;
@@ -3142,7 +3189,7 @@ var Canvas = /** @class */ (function () {
     Canvas.prototype.dropPens = function (pens, e) {
         var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var pens_2, pens_2_1, pen, pens_3, pens_3_1, pen, pens_4, pens_4_1, pen, pens_5, pens_5_1, pen, width, height, rect_1, flag, pens_6, pens_6_1, pen, points;
+            var pens_2, pens_2_1, pen, pens_3, pens_3_1, pen, pens_4, pens_4_1, pen, num, lastH, lastW, pens_5, pens_5_1, pen, width, height, rect_1, flag, pens_6, pens_6_1, pen, points;
             var e_7, _b, e_8, _c, e_9, _d, e_10, _e, e_11, _f;
             var _this = this;
             return __generator(this, function (_g) {
@@ -3206,23 +3253,33 @@ var Canvas = /** @class */ (function () {
                             }
                             finally { if (e_9) throw e_9.error; }
                         }
+                        num = 0;
+                        lastH = 0;
+                        lastW = 0;
                         try {
-                            // // 计算区域
-                            // for (const pen of pens) {
-                            //   // 组合节点才需要提前计算
-                            //   Array.isArray(pen.children) && pen.children.length > 0 && this.updatePenRect(pen);
-                            // }
                             for (pens_5 = __values(pens), pens_5_1 = pens_5.next(); !pens_5_1.done; pens_5_1 = pens_5.next()) {
                                 pen = pens_5_1.value;
                                 if (!pen.parentId) {
                                     pen.width *= this.store.data.scale;
                                     pen.height *= this.store.data.scale;
-                                    pen.x = e.x - pen.width / 2;
-                                    pen.y = e.y - pen.height / 2;
+                                    pen.x = e.x - pen.width / 2 + lastW;
+                                    pen.y = e.y - pen.height / 2 + lastH;
                                     if (pen.tags && pen.tags.includes('meta3d')) {
                                         pen.x = this.store.data.origin.x;
                                         pen.y = this.store.data.origin.y;
                                     }
+                                    if (pen.dataset) {
+                                        if (num % 2 === 0) {
+                                            lastW = pen.width + 10;
+                                        }
+                                        else {
+                                            lastW = 0;
+                                        }
+                                        num++;
+                                        if (num % 2 === 0) {
+                                            lastH += pen.height + 10;
+                                        }
+                                    }
                                 }
                             }
                         }
@@ -3566,13 +3623,19 @@ var Canvas = /** @class */ (function () {
     Canvas.prototype.movedActivePens = function (readyConnect) {
         var _this = this;
         // 鼠标松手才更新，此处是更新前的值
-        var initPens = deepClone(this.store.active, true);
+        //follower
+        var movedPens = this.getAllFollowersByPens(this.store.active, false);
+        var initPens = deepClone(movedPens, true);
         // const pens = deepClone(this.store.active, true);
         var gridSize = this.store.data.gridSize || this.store.options.gridSize;
         var _a = this.store.data, origin = _a.origin, scale = _a.scale;
         var autoAlignGrid = this.store.options.autoAlignGrid && this.store.data.grid;
-        this.store.active.forEach(function (pen, i) {
+        movedPens.forEach(function (pen) {
             var _a;
+            var i = _this.movingPens.findIndex(function (item) { return item.id === pen.id + movingSuffix; });
+            if (i < 0) {
+                return;
+            }
             var _b = _this.movingPens[i], x = _b.x, y = _b.y;
             var obj = { x: x, y: y };
             // 根据是否开启了自动网格对齐，来修正坐标
@@ -4816,10 +4879,10 @@ var Canvas = /** @class */ (function () {
                 : pen.textHeight * scale;
         pen.calculative.textLeft =
             pen.textLeft < 1 && pen.textLeft > -1
-                ? pen.textLeft
+                ? pen.textLeft * pen.calculative.worldRect.width
                 : pen.textLeft * scale;
         pen.calculative.textTop =
-            pen.textTop < 1 && pen.textTop > -1 ? pen.textTop : pen.textTop * scale;
+            pen.textTop < 1 && pen.textTop > -1 ? pen.textTop * pen.calculative.worldRect.height : pen.textTop * scale;
         if (pen.type === PenType.Line && pen.borderWidth) {
             pen.calculative.borderWidth = pen.borderWidth * scale;
         }
@@ -5374,6 +5437,7 @@ var Canvas = /** @class */ (function () {
             }
         }
         this.movingPens = deepClone(this.store.active, true);
+        this.movingPens = this.getAllFollowersByPens(this.movingPens);
         var containChildPens = this.getAllByPens(this.movingPens);
         var copyContainChildPens = deepClone(containChildPens, true);
         // 考虑父子关系，修改 id
@@ -6463,6 +6527,71 @@ var Canvas = /** @class */ (function () {
         }
         return retPens.concat(pens);
     };
+    Canvas.prototype.getAllFollowersByPens = function (pens, deep) {
+        var e_22, _a, e_23, _b;
+        if (deep === void 0) { deep = true; }
+        var retPens = pens;
+        try {
+            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;
+                var followers = getAllFollowers(pen, this.store);
+                if (deep) {
+                    followers = deepClone(followers, true);
+                }
+                var _loop_6 = function (follower) {
+                    if (!retPens.find(function (p) { return p.id === follower.id; })) {
+                        retPens.push(follower);
+                    }
+                };
+                try {
+                    for (var followers_1 = (e_23 = void 0, __values(followers)), followers_1_1 = followers_1.next(); !followers_1_1.done; followers_1_1 = followers_1.next()) {
+                        var follower = followers_1_1.value;
+                        _loop_6(follower);
+                    }
+                }
+                catch (e_23_1) { e_23 = { error: e_23_1 }; }
+                finally {
+                    try {
+                        if (followers_1_1 && !followers_1_1.done && (_b = followers_1.return)) _b.call(followers_1);
+                    }
+                    finally { if (e_23) throw e_23.error; }
+                }
+            }
+        }
+        catch (e_22_1) { e_22 = { error: e_22_1 }; }
+        finally {
+            try {
+                if (pens_10_1 && !pens_10_1.done && (_a = pens_10.return)) _a.call(pens_10);
+            }
+            finally { if (e_22) throw e_22.error; }
+        }
+        return retPens;
+    };
+    Canvas.prototype.setFollowers = function (pens) {
+        if (pens === void 0) { pens = this.store.active; }
+        if (!pens) {
+            return;
+        }
+        if (pens.length < 2) {
+            pens[0].followers = [];
+        }
+        else {
+            //以最后一个
+            var ids = pens.map(function (pen) { return pen.id; });
+            ids.pop();
+            var lastPen_1 = pens[pens.length - 1];
+            if (!lastPen_1.followers) {
+                lastPen_1.followers = ids;
+            }
+            else {
+                ids.forEach(function (id) {
+                    if (!lastPen_1.followers.includes(id)) {
+                        lastPen_1.followers.push(id);
+                    }
+                });
+            }
+        }
+    };
     /**
      * 修改对应连线的 anchors
      * @param oldId 老 id
@@ -6473,7 +6602,7 @@ var Canvas = /** @class */ (function () {
         if (!Array.isArray(pen.connectedLines)) {
             return;
         }
-        var _loop_6 = function (index) {
+        var _loop_7 = function (index) {
             var lineId = pen.connectedLines[index].lineId;
             var line = pastePens.find(function (pen) { return pen.id === lineId; });
             if (line) {
@@ -6491,7 +6620,7 @@ var Canvas = /** @class */ (function () {
         };
         var out_index_1;
         for (var index = 0; index < pen.connectedLines.length; index++) {
-            _loop_6(index);
+            _loop_7(index);
             index = out_index_1;
         }
     };
@@ -6502,13 +6631,13 @@ var Canvas = /** @class */ (function () {
      * @param pastePens 此处复制的全部 pens (包含子节点)
      */
     Canvas.prototype.changeNodeConnectedLine = function (oldId, line, pastePens) {
-        var e_22, _a;
+        var e_24, _a;
         var _b;
         var from = line.anchors[0];
         var to = line.anchors[line.anchors.length - 1];
         // 修改对应节点的 connectedLines
         var anchors = [from, to];
-        var _loop_7 = function (anchor) {
+        var _loop_8 = function (anchor) {
             var nodeId = anchor.connectTo;
             if (nodeId) {
                 var node = pastePens.find(function (pen) { return pen.id === nodeId; });
@@ -6535,15 +6664,15 @@ var Canvas = /** @class */ (function () {
         try {
             for (var anchors_1 = __values(anchors), anchors_1_1 = anchors_1.next(); !anchors_1_1.done; anchors_1_1 = anchors_1.next()) {
                 var anchor = anchors_1_1.value;
-                _loop_7(anchor);
+                _loop_8(anchor);
             }
         }
-        catch (e_22_1) { e_22 = { error: e_22_1 }; }
+        catch (e_24_1) { e_24 = { error: e_24_1 }; }
         finally {
             try {
                 if (anchors_1_1 && !anchors_1_1.done && (_a = anchors_1.return)) _a.call(anchors_1);
             }
-            finally { if (e_22) throw e_22.error; }
+            finally { if (e_24) throw e_24.error; }
         }
     };
     Canvas.prototype.delete = function (pens, canDelLocked, history) {
@@ -6686,7 +6815,7 @@ var Canvas = /** @class */ (function () {
         var _this = this;
         var _a;
         if (pen.connectedLines) {
-            var _loop_8 = function (i) {
+            var _loop_9 = function (i) {
                 var _b = pen.connectedLines[i], lineId = _b.lineId, lineAnchor = _b.lineAnchor;
                 var line = this_2.store.pens[lineId];
                 if (line) {
@@ -6708,7 +6837,7 @@ var Canvas = /** @class */ (function () {
             };
             var this_2 = this;
             for (var i = 0; i < pen.connectedLines.length; i++) {
-                _loop_8(i);
+                _loop_9(i);
             }
         }
         if (!pen.type) {
@@ -7161,7 +7290,7 @@ var Canvas = /** @class */ (function () {
         };
     };
     Canvas.prototype.toPng = function (padding, callback, containBkImg, maxWidth) {
-        var e_23, _a;
+        var e_25, _a;
         if (padding === void 0) { padding = 2; }
         if (containBkImg === void 0) { containBkImg = false; }
         var rect = getRect(this.store.data.pens);
@@ -7293,12 +7422,12 @@ var Canvas = /** @class */ (function () {
                 pen.calculative.active = active;
             }
         }
-        catch (e_23_1) { e_23 = { error: e_23_1 }; }
+        catch (e_25_1) { e_25 = { error: e_25_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_23) throw e_23.error; }
+            finally { if (e_25) throw e_25.error; }
         }
         if (callback) {
             canvas.toBlob(callback);
@@ -7311,7 +7440,7 @@ var Canvas = /** @class */ (function () {
         return this.pensToPng(this.store.active, padding);
     };
     Canvas.prototype.pensToPng = function (pens, padding) {
-        var e_24, _a;
+        var e_26, _a;
         if (pens === void 0) { pens = this.store.active; }
         if (padding === void 0) { padding = 2; }
         if (pens.length === 0) {
@@ -7365,12 +7494,12 @@ var Canvas = /** @class */ (function () {
                 }
             }
         }
-        catch (e_24_1) { e_24 = { error: e_24_1 }; }
+        catch (e_26_1) { e_26 = { error: e_26_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_24) throw e_24.error; }
+            finally { if (e_26) throw e_26.error; }
         }
         return canvas.toDataURL();
     };