@meta2d/core 1.0.46 → 1.0.48

package/package.json

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

@@ -195,6 +195,8 @@ export declare class Canvas {
         button?: number;
     }) => void;
     private addRuleLine;
+    clearRuleLines(): void;
+    get ruleLines(): Pen[];
     /**
      * @description 调整pen的坐标，让pen按照网格自动对齐
      * @author Joseph Ho
@@ -227,6 +229,7 @@ export declare class Canvas {
     onScroll: () => void;
     calibrateMouse: (pt: Point) => Point;
     clearHover(): void;
+    private getContainerHover;
     private getHover;
     private inPens;
     private dockInAnchor;
@@ -428,6 +431,7 @@ export declare class Canvas {
     };
     toPng(padding?: Padding, callback?: BlobCallback, containBkImg?: boolean, maxWidth?: number): string;
     activeToPng(padding?: Padding): string;
+    pensToPng(pens?: Pen[], padding?: Padding): string;
     toggleAnchorMode(): void;
     addAnchorHand(): void;
     removeAnchorHand(): void;

package/src/canvas/canvas.js

@@ -100,6 +100,7 @@ import { Dialog } from '../dialog';
 import { setter } from '../utils/object';
 import { Title } from '../title';
 import { CanvasTemplate } from './canvasTemplate';
+import { getLinePoints } from '../diagrams/line';
 export var movingSuffix = '-moving';
 var Canvas = /** @class */ (function () {
     function Canvas(parent, parentElement, store) {
@@ -639,9 +640,16 @@ var Canvas = /** @class */ (function () {
                         _this.store.active.forEach(function (pen) {
                             if (pen.type) {
                                 pen.close = !pen.close;
+                                if (pen.close) {
+                                    getLinePoints(pen);
+                                }
                                 _this.store.path2dMap.set(pen, globalStore.path2dDraws.line(pen));
                                 getLineLength(pen);
                             }
+                            else {
+                                //图元进入编辑模式
+                                pen.calculative.focus = !pen.calculative.focus;
+                            }
                         });
                         _this.render();
                     }
@@ -1343,11 +1351,17 @@ var Canvas = /** @class */ (function () {
                         }
                         if (_this.store.active.length === 1) {
                             var activePen = _this.store.active[0];
-                            if (activePen.locked < LockState.DisableMove) {
+                            if (activePen.locked === undefined || activePen.locked < LockState.DisableMove) {
                                 (_e = activePen === null || activePen === void 0 ? void 0 : activePen.onMouseMove) === null || _e === void 0 ? void 0 : _e.call(activePen, activePen, _this.mousePos);
                             }
+                            if (activePen.calculative.focus) {
+                                //执行图元的操作
+                                return;
+                            }
                         }
                         _this.movePens(e);
+                        //图元是否进入容器图元
+                        _this.getContainerHover(e);
                         return;
                     }
                 }
@@ -1446,11 +1460,17 @@ var Canvas = /** @class */ (function () {
                 return;
             }
             if (_this.mouseRight === MouseRight.Down) {
-                _this.store.emitter.emit('contextmenu', {
-                    e: e,
-                    clientRect: _this.clientRect,
-                    pen: _this.store.hover,
-                });
+                if (_this.store.hover && _this.store.hover.calculative.focus) {
+                    _this.store.hover.onContextmenu &&
+                        _this.store.hover.onContextmenu(_this.store.hover, e);
+                }
+                else {
+                    _this.store.emitter.emit('contextmenu', {
+                        e: e,
+                        clientRect: _this.clientRect,
+                        pen: _this.store.hover,
+                    });
+                }
             }
             _this.mouseRight = MouseRight.None;
             _this.calibrateMouse(e);
@@ -1696,6 +1716,27 @@ var Canvas = /** @class */ (function () {
             pt.y -= _this.store.data.y;
             return pt;
         };
+        this.getContainerHover = function (pt) {
+            var _a;
+            if (_this.dragRect) {
+                return;
+            }
+            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) {
+                    var pen = containerPens[i];
+                    if (pen.visible == false ||
+                        pen.calculative.inView == false ||
+                        pen.locked === LockState.Disable ||
+                        pen.calculative.active) {
+                        continue;
+                    }
+                    if (pointInRect(pt, pen.calculative.worldRect)) {
+                        (_a = pen === null || pen === void 0 ? void 0 : pen.onMouseMove) === null || _a === void 0 ? void 0 : _a.call(pen, pen, pt);
+                    }
+                }
+            }
+        };
         this.getHover = function (pt) {
             var _a, _b;
             if (_this.dragRect) {
@@ -1878,6 +1919,9 @@ var Canvas = /** @class */ (function () {
                         else {
                             _this.externalElements.style.cursor = _this.store.options.hoverCursor;
                         }
+                        if (pen.calculative.disabled) {
+                            _this.externalElements.style.cursor = 'not-allowed';
+                        }
                         _this.store.hover = pen;
                         _this.store.pointAt = pos.point;
                         _this.store.pointAtIndex = pos.i;
@@ -1922,6 +1966,9 @@ var Canvas = /** @class */ (function () {
                         else {
                             _this.externalElements.style.cursor = _this.store.options.hoverCursor;
                         }
+                        if (pen.calculative.disabled) {
+                            _this.externalElements.style.cursor = 'not-allowed';
+                        }
                         _this.store.hover = pen;
                         _this.initTemplateCanvas([_this.store.hover]);
                         hoverType = HoverType.Node;
@@ -2465,7 +2512,8 @@ var Canvas = /** @class */ (function () {
                 !_this.store.hover ||
                 _this.store.hover.locked ||
                 _this.store.hover.externElement ||
-                _this.store.hover.disableInput) {
+                _this.store.hover.disableInput ||
+                _this.store.hover.disabled) {
                 return;
             }
             if (_this.inputDiv.dataset.penId === pen.id) {
@@ -2489,7 +2537,7 @@ var Canvas = /** @class */ (function () {
             }
             var textRect = rect || pen.calculative.worldTextRect;
             //value和innerText问题
-            var preInputText = pen.calculative.tempText || pen.text + '' || '';
+            var preInputText = pen.calculative.tempText === undefined ? (pen.text + '' || '') : pen.calculative.tempText;
             var textArr = preInputText.replace(/\x20/g, '&nbsp;').split(/[\s\n]/);
             var finalText = (textArr.join('</div><div>') + "</div>")
                 .replace('</div>', '')
@@ -2743,7 +2791,8 @@ var Canvas = /** @class */ (function () {
         this.setDropdownList = function (search) {
             var e_6, _a;
             _this.clearDropdownList();
-            if (!_this.store.data.locked) {
+            var pen = _this.store.pens[_this.inputDiv.dataset.penId];
+            if (!_this.store.data.locked && !['table'].includes(pen.name)) {
                 return;
             }
             _this.dropdown.style.display = 'block';
@@ -2752,7 +2801,6 @@ var Canvas = /** @class */ (function () {
                 _this.inputRight.style.transform = 'rotate(315deg)';
                 _this.inputRight.style.zoom = _this.store.data.scale;
             });
-            var pen = _this.store.pens[_this.inputDiv.dataset.penId];
             if (!pen || !pen.dropdownList) {
                 _this.dropdown.style.display = 'none';
                 _this.inputRight.style.display = 'none';
@@ -3471,6 +3519,16 @@ var Canvas = /** @class */ (function () {
             ],
         });
     };
+    Canvas.prototype.clearRuleLines = function () {
+        this.delete(this.ruleLines);
+    };
+    Object.defineProperty(Canvas.prototype, "ruleLines", {
+        get: function () {
+            return this.store.data.pens.filter(function (p) { return p.isRuleLine; });
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @description 调整pen的坐标，让pen按照网格自动对齐
      * @author Joseph Ho
@@ -4078,7 +4136,7 @@ var Canvas = /** @class */ (function () {
             this.doEditAction(action_1, true);
             step--;
         }
-        if (action.type == EditType.Add || action.type == EditType.Delete) {
+        if (action.type == EditType.Add || action.type == EditType.Delete || action.type == EditType.Update) {
             this.activeHistory();
         }
     };
@@ -4096,19 +4154,27 @@ var Canvas = /** @class */ (function () {
             this.doEditAction(action_2, false);
             step--;
         }
-        if (action.type == EditType.Add || action.type == EditType.Delete) {
+        if (action.type == EditType.Add || action.type == EditType.Delete || action.type == EditType.Update) {
             this.activeHistory();
         }
     };
     Canvas.prototype.activeHistory = function () {
         var _this = this;
+        var now = this.store.histories[this.store.historyIndex + 1];
+        var pens = [];
+        if (now && (now.type === EditType.Update)) {
+            now.pens.forEach(function (pen) {
+                pens.push(_this.store.pens[pen.id]);
+            });
+            this.active(pens);
+            return;
+        }
         var before = this.store.histories[this.store.historyIndex];
-        if (before && before.type === EditType.Add) {
-            var pens_8 = [];
+        if (before && (before.type === EditType.Add || before.type === EditType.Delete)) {
             before.pens.forEach(function (pen) {
-                pens_8.push(_this.store.pens[pen.id]);
+                pens.push(_this.store.pens[pen.id]);
             });
-            this.active(pens_8);
+            this.active(pens);
         }
     };
     Canvas.prototype.doEditAction = function (action, undo) {
@@ -4206,7 +4272,7 @@ var Canvas = /** @class */ (function () {
                 break;
             case EditType.Replace: {
                 // undo pens则为新的pen
-                var pens_9 = undo ? action.initPens : action.pens;
+                var pens_8 = undo ? action.initPens : action.pens;
                 var unPens_2 = undo ? action.pens : action.initPens;
                 // 删除旧的
                 unPens_2.forEach(function (aPen) {
@@ -4227,7 +4293,7 @@ var Canvas = /** @class */ (function () {
                     }
                 });
                 // 放置新的
-                pens_9.reverse().forEach(function (aPen) {
+                pens_8.reverse().forEach(function (aPen) {
                     var _a, _b;
                     var pen = deepClone(aPen, true);
                     if (!pen.calculative) {
@@ -4245,7 +4311,7 @@ var Canvas = /** @class */ (function () {
                     }
                     pen.calculative.canvas = _this;
                 });
-                pens_9.reverse().forEach(function (aPen) {
+                pens_8.reverse().forEach(function (aPen) {
                     var pen = _this.store.data.pens.find(function (i) { return i.id === aPen.id; });
                     var rect = _this.getPenRect(pen, action.origin, action.scale);
                     _this.setPenRect(pen, rect, false);
@@ -5397,8 +5463,18 @@ var Canvas = /** @class */ (function () {
                 }
             }
             else {
-                offsetX = pt.x - this.store.activeAnchor.x;
-                offsetY = pt.y - this.store.activeAnchor.y;
+                if (!keyOptions.ctrlKey && keyOptions.shiftKey) {
+                    offsetX = pt.x - this.store.activeAnchor.x;
+                    offsetY = 0;
+                }
+                else if (keyOptions.ctrlKey && !keyOptions.shiftKey) {
+                    offsetX = 0;
+                    offsetY = pt.y - this.store.activeAnchor.y;
+                }
+                else {
+                    offsetX = pt.x - this.store.activeAnchor.x;
+                    offsetY = pt.y - this.store.activeAnchor.y;
+                }
             }
             translatePoint(this.store.activeAnchor, offsetX, offsetY);
             if (this.store.hover &&
@@ -6220,6 +6296,10 @@ var Canvas = /** @class */ (function () {
                         //根据pens顺序复制
                         copyPens.forEach(function (activePen) {
                             activePen.copyIndex = _this.store.data.pens.findIndex(function (pen) { return pen.id === activePen.id; });
+                            if (activePen.pathId) {
+                                //复制svgpath
+                                activePen.path = _this.store.data.paths[activePen.pathId];
+                            }
                         });
                         copyPens.sort(function (a, b) {
                             return a.copyIndex - b.copyIndex;
@@ -6369,15 +6449,15 @@ var Canvas = /** @class */ (function () {
         var e_21, _a;
         var retPens = [];
         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;
+            for (var pens_9 = __values(pens), pens_9_1 = pens_9.next(); !pens_9_1.done; pens_9_1 = pens_9.next()) {
+                var pen = pens_9_1.value;
                 retPens.push.apply(retPens, __spreadArray([], __read(deepClone(getAllChildren(pen, this.store), true)), false));
             }
         }
         catch (e_21_1) { e_21 = { error: e_21_1 }; }
         finally {
             try {
-                if (pens_10_1 && !pens_10_1.done && (_a = pens_10.return)) _a.call(pens_10);
+                if (pens_9_1 && !pens_9_1.done && (_a = pens_9.return)) _a.call(pens_9);
             }
             finally { if (e_21) throw e_21.error; }
         }
@@ -6724,6 +6804,16 @@ var Canvas = /** @class */ (function () {
             }, 300);
         };
         this.inputDiv.oninput = function (e) {
+            var pen = _this.store.pens[_this.inputDiv.dataset.penId];
+            if (pen.inputType === 'number') {
+                var value = e.target.innerText;
+                var numericValue = value.replace(/[^0-9]/g, ''); // 移除非数字字符
+                // 如果输入的值不是纯数字，则替换为纯数字
+                if (value !== numericValue) {
+                    e.preventDefault();
+                    e.target.innerText = numericValue;
+                }
+            }
             // //无文本时，光标确保居中
             if (navigator.userAgent.includes('Firefox')) {
                 if (!e.target.innerText.trim()) {
@@ -7217,9 +7307,17 @@ var Canvas = /** @class */ (function () {
         return canvas.toDataURL();
     };
     Canvas.prototype.activeToPng = function (padding) {
+        if (padding === void 0) { padding = 2; }
+        return this.pensToPng(this.store.active, padding);
+    };
+    Canvas.prototype.pensToPng = function (pens, padding) {
         var e_24, _a;
+        if (pens === void 0) { pens = this.store.active; }
         if (padding === void 0) { padding = 2; }
-        var allPens = this.getAllByPens(this.store.active);
+        if (pens.length === 0) {
+            return;
+        }
+        var allPens = this.getAllByPens(pens);
         var ids = allPens.map(function (pen) { return pen.id; });
         var rect = getRect(allPens);
         if (!isFinite(rect.width)) {