@meta2d/core 1.0.0 → 1.0.2

package/package.json

@@ -1,39 +1,39 @@
 {
-  "name": "@meta2d/core",
-  "version": "1.0.0",
-  "description": "@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "scripts": {
-    "copy": "shx cp package.build.json ../../dist/core/package.json",
-    "build": "tsc && npm run copy"
-  },
-  "keywords": [
-    "meta2d",
-    "diagram",
-    "2D",
-    "canvas"
-  ],
-  "author": "alsmile123@qq.com",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/le5le-com/meta2d.js.git"
-  },
-  "bugs": {
-    "url": "https://github.com/le5le-com/meta2d.js/issues"
-  },
-  "homepage": "https://github.com/le5le-com/meta2d.js#readme",
-  "devDependencies": {
-    "@types/marked": "^4.0.3",
-    "@types/offscreencanvas": "latest"
-  },
-  "dependencies": {
-    "mitt": "^2.1.0",
-    "mqtt": "^4.2.6"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "78f2a53ca1839c89b56e2e498d17ba4eb987ad14"
-}
+    "name": "@meta2d/core",
+    "version": "1.0.2",
+    "description": "@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .",
+    "main": "index.js",
+    "types": "index.d.ts",
+    "scripts": {
+        "copy": "shx cp package.build.json ../../dist/core/package.json",
+        "build": "tsc && npm run copy"
+    },
+    "keywords": [
+        "meta2d",
+        "diagram",
+        "2D",
+        "canvas"
+    ],
+    "author": "alsmile123@qq.com",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/le5le-com/meta2d.js.git"
+    },
+    "bugs": {
+        "url": "https://github.com/le5le-com/meta2d.js/issues"
+    },
+    "homepage": "https://github.com/le5le-com/meta2d.js#readme",
+    "devDependencies": {
+        "@types/marked": "^4.0.3",
+        "@types/offscreencanvas": "latest"
+    },
+    "dependencies": {
+        "mitt": "^2.1.0",
+        "mqtt": "^4.2.6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "78f2a53ca1839c89b56e2e498d17ba4eb987ad14"
+}

package/src/canvas/canvas.js

@@ -253,9 +253,19 @@ var Canvas = /** @class */ (function () {
             // 触摸板平移
             var isTouchPad = !(!e.deltaX && e.deltaY);
             var now = performance.now();
+            var _scale = 0.1;
             if (now - _this.touchStart < 50) {
                 return;
             }
+            if (now - _this.touchStart < 100) {
+                _scale = 0.5;
+            }
+            else if (now - _this.touchStart < 200) {
+                _scale = 0.3;
+            }
+            else {
+                _scale = 0.1;
+            }
             _this.touchStart = now;
             var x = e.offsetX, y = e.offsetY;
             if (isTouchPad) {
@@ -263,10 +273,10 @@ var Canvas = /** @class */ (function () {
             }
             else {
                 if (e.deltaY < 0) {
-                    _this.scale(_this.store.data.scale + 0.1, { x: x, y: y });
+                    _this.scale(_this.store.data.scale + _scale, { x: x, y: y });
                 }
                 else {
-                    _this.scale(_this.store.data.scale - 0.1, { x: x, y: y });
+                    _this.scale(_this.store.data.scale - _scale, { x: x, y: y });
                 }
             }
             _this.externalElements.focus(); // 聚焦
@@ -430,6 +440,9 @@ var Canvas = /** @class */ (function () {
                         _this.store.hover === _this.store.active[0]) {
                         _this.splitLine(_this.store.active[0], _this.store.hoverAnchor);
                     }
+                    // 保存
+                    (e.ctrlKey || e.metaKey) &&
+                        _this.store.emitter.emit('save', { event: e });
                     break;
                 case 'c':
                 case 'C':
@@ -524,6 +537,11 @@ var Canvas = /** @class */ (function () {
                         _this.patchFlags = true;
                     }
                     break;
+                case 'E':
+                case 'e':
+                    _this.store.options.disableAnchor = !_this.store.options.disableAnchor;
+                    _this.store.emitter.emit('disableAnchor', _this.store.options.disableAnchor);
+                    break;
             }
             _this.render(false);
         };
@@ -736,7 +754,7 @@ var Canvas = /** @class */ (function () {
             e.preventDefault();
         };
         this.onMouseDown = function (e) {
-            var _a, _b;
+            var _a, _b, _c;
             if (e.buttons === 2 && !_this.drawingLine) {
                 _this.mouseRight = MouseRight.Down;
             }
@@ -759,6 +777,25 @@ var Canvas = /** @class */ (function () {
                 _this.setAnchor(_this.store.pointAt);
                 return;
             }
+            //shift 快捷添加锚点并连线
+            if (!_this.store.options.autoAnchor && !_this.drawingLine) {
+                if (e.shiftKey) {
+                    _this.setAnchor(_this.store.pointAt);
+                    _this.drawingLineName = _this.store.options.drawingLineName;
+                    var anchor = _this.store.activeAnchor;
+                    var pt = {
+                        id: s8(),
+                        x: anchor.x,
+                        y: anchor.y,
+                    };
+                    _this.drawingLine = _this.createDrawingLine(pt);
+                    var _pt = getFromAnchor(_this.drawingLine);
+                    _this.drawingLine.calculative.activeAnchor = _pt;
+                    connectLine(_this.store.hover, anchor, _this.drawingLine, pt);
+                    _this.drawline();
+                    return;
+                }
+            }
             // Translate
             if (_this.hotkeyType === HotkeyType.Translate ||
                 (_this.mouseRight === MouseRight.Down &&
@@ -777,12 +814,29 @@ var Canvas = /** @class */ (function () {
                     _this.finishDrawline(true);
                     return;
                 }
+                //shift快捷添加锚点并完成连线
+                if (!_this.store.options.autoAnchor) {
+                    if (e.shiftKey) {
+                        _this.setAnchor(_this.store.pointAt);
+                        var to_2 = getToAnchor(_this.drawingLine);
+                        var anchor = _this.store.activeAnchor;
+                        to_2.x = anchor.x;
+                        to_2.y = anchor.y;
+                        connectLine(_this.store.hover, anchor, _this.drawingLine, to_2);
+                        _this.drawline();
+                        _this.finishDrawline(true);
+                        return;
+                    }
+                }
                 // 右键，完成绘画
                 if (e.buttons === 2 ||
                     (_this.drawingLineName === 'mind' &&
-                        ((_a = _this.drawingLine) === null || _a === void 0 ? void 0 : _a.calculative.worldAnchors.length) > 1)) {
+                        ((_a = _this.drawingLine) === null || _a === void 0 ? void 0 : _a.calculative.worldAnchors.length) > 1) ||
+                    (_this.store.options.drawingLineLength &&
+                        ((_b = _this.drawingLine) === null || _b === void 0 ? void 0 : _b.calculative.worldAnchors.length) >
+                            _this.store.options.drawingLineLength)) {
                     _this.finishDrawline(true);
-                    if ((_b = _this.store.active[0]) === null || _b === void 0 ? void 0 : _b.anchors[0].connectTo) {
+                    if ((_c = _this.store.active[0]) === null || _c === void 0 ? void 0 : _c.anchors[0].connectTo) {
                         _this.drawingLineName = '';
                     }
                     else {
@@ -792,12 +846,12 @@ var Canvas = /** @class */ (function () {
                 }
                 // 自动锚点（单击节点），完成绘画
                 if (_this.store.options.autoAnchor && _this.hoverType === HoverType.Node) {
-                    var to_2 = getToAnchor(_this.drawingLine);
+                    var to_3 = getToAnchor(_this.drawingLine);
                     var anchor = nearestAnchor(_this.store.hover, e);
-                    to_2.x = anchor.x;
-                    to_2.y = anchor.y;
+                    to_3.x = anchor.x;
+                    to_3.y = anchor.y;
                     _this.drawingLine.autoTo = true;
-                    connectLine(_this.store.hover, anchor, _this.drawingLine, to_2);
+                    connectLine(_this.store.hover, anchor, _this.drawingLine, to_3);
                     _this.drawline();
                     _this.finishDrawline(true);
                     return;
@@ -1130,14 +1184,68 @@ var Canvas = /** @class */ (function () {
                         }
                     }
                     if (_this.drawingLineName === 'line') {
-                        if (e.ctrlKey) {
+                        if (e.ctrlKey && !e.shiftKey) {
                             to.x =
                                 _this.drawingLine.calculative.worldAnchors[_this.drawingLine.calculative.worldAnchors.length - 2].x;
                         }
-                        else if (e.shiftKey) {
+                        else if (e.shiftKey && !e.ctrlKey) {
                             to.y =
                                 _this.drawingLine.calculative.worldAnchors[_this.drawingLine.calculative.worldAnchors.length - 2].y;
                         }
+                        else if (e.shiftKey && e.ctrlKey) {
+                            //快捷定位到特殊角度
+                            var last = _this.drawingLine.calculative.worldAnchors[_this.drawingLine.calculative.worldAnchors.length - 2];
+                            var angle = 0;
+                            var angleArr = [0, 30, 45, 60, 90, 120, 150, 135, 180];
+                            //获取实际角度
+                            if (to.x - last.x !== 0) {
+                                angle =
+                                    (Math.atan((last.y - to.y) / (to.x - last.x)) * 180) / Math.PI;
+                                if (to.x < last.x) {
+                                    if (angle > 0) {
+                                        angle -= 180;
+                                    }
+                                    else {
+                                        angle += 180;
+                                    }
+                                }
+                            }
+                            else {
+                                if (last.y > to.y) {
+                                    angle = 90;
+                                }
+                                else if (last.y < to.y) {
+                                    angle = -90;
+                                }
+                            }
+                            //取最近角度
+                            var _min = 999;
+                            var index = -1;
+                            for (var i = 0; i < angleArr.length; i++) {
+                                if (angle < 0) {
+                                    if (Math.abs(angle + angleArr[i]) < _min) {
+                                        index = i;
+                                        _min = Math.abs(angle + angleArr[i]);
+                                    }
+                                }
+                                else {
+                                    if (Math.abs(angle - angleArr[i]) < _min) {
+                                        index = i;
+                                        _min = Math.abs(angle - angleArr[i]);
+                                    }
+                                }
+                            }
+                            if (angle < 0) {
+                                angle = -angleArr[index];
+                            }
+                            else {
+                                angle = angleArr[index];
+                            }
+                            var length_1 = Math.sqrt((last.x - to.x) * (last.x - to.x) +
+                                (last.y - to.y) * (last.y - to.y));
+                            to.x = last.x + Math.cos((angle / 180) * Math.PI) * length_1;
+                            to.y = last.y - Math.sin((angle / 180) * Math.PI) * length_1;
+                        }
                     }
                     _this.drawline();
                 }
@@ -1330,7 +1438,7 @@ var Canvas = /** @class */ (function () {
                 _this.render();
             }
             if (_this.movingPens) {
-                if (e.ctrlKey && !e.shiftKey) {
+                if (e.altKey && !e.shiftKey) {
                     _this.copyMovedPens();
                 }
                 else {
@@ -1889,6 +1997,24 @@ var Canvas = /** @class */ (function () {
                         else if (anchor.color || anchor.background) {
                             ctx.restore();
                         }
+                        //根父节点
+                        if (!_this.store.hover.parentId &&
+                            _this.store.hover.children &&
+                            _this.store.hover.children.length > 0) {
+                            if (anchor === _this.store.hoverAnchor) {
+                                ctx.save();
+                                ctx.beginPath();
+                                ctx.lineWidth = 3;
+                                var hoverAnchorColor = _this.store.hover.hoverAnchorColor ||
+                                    _this.store.options.hoverAnchorColor;
+                                if (globalThis.pSBC) {
+                                    ctx.strokeStyle = globalThis.pSBC(0.5, hoverAnchorColor);
+                                }
+                                ctx.arc(anchor.x, anchor.y, size + 1.5, 0, Math.PI * 2);
+                                ctx.stroke();
+                                ctx.restore();
+                            }
+                        }
                     });
                 }
             }
@@ -2252,7 +2378,8 @@ var Canvas = /** @class */ (function () {
                     .replace(/\<div\>/g, '\n')
                     .replace(/\<\/div\>/g, '')
                     .replace(/\<br\>/g, '')
-                    .replace(/&nbsp;/g, ' ');
+                    .replace(/&nbsp;/g, ' ')
+                    .replace(/(<([^>]+)>)/gi, '');
                 if (pen.onInput) {
                     pen.onInput(pen, _this.inputDiv.dataset.value);
                 }
@@ -2963,6 +3090,7 @@ var Canvas = /** @class */ (function () {
              * 所以 patchFlagsLines 需要放到 copyMovedPens 前
              * */
             var _a = _this.movingPens[i], x = _a.x, y = _a.y;
+            _this.updateLines(pen); //复制前更新被复制节点的连接关系
             return __assign(__assign({}, pen), { x: x, y: y });
         }));
         // 偏移量 0
@@ -3326,7 +3454,7 @@ var Canvas = /** @class */ (function () {
             this.doEditAction(action_1, true);
             step--;
         }
-        if (action.type == EditType.Add || EditType.Delete) {
+        if (action.type == EditType.Add || action.type == EditType.Delete) {
             this.activeHistory();
         }
     };
@@ -3344,7 +3472,7 @@ var Canvas = /** @class */ (function () {
             this.doEditAction(action_2, false);
             step--;
         }
-        if (action.type == EditType.Add || EditType.Delete) {
+        if (action.type == EditType.Add || action.type == EditType.Delete) {
             this.activeHistory();
         }
     };
@@ -4050,12 +4178,8 @@ var Canvas = /** @class */ (function () {
         var x = p2.x - p1.x;
         var y = p2.y - p1.y;
         var rect = deepClone(this.initActiveRect);
-        if (e.shiftKey) {
-            // if (x / y > rect.width / rect.height) {
-            //   y = (rect.height / rect.width) * x;
-            // } else {
-            //   x = (rect.width / rect.height) * y;
-            // }
+        if (e.shiftKey ||
+            (this.initPens.length == 1 && this.initPens[0].ratio)) {
             x = (rect.width / rect.height) * y;
         }
         // 得到最准确的 rect 即 resize 后的
@@ -4317,7 +4441,8 @@ var Canvas = /** @class */ (function () {
                 this.store.activeAnchor.next.y = e.y;
                 rotatePoint(this.store.activeAnchor.next, 180, this.store.activeAnchor);
             }
-            else if (this.store.activeAnchor.prevNextType === PrevNextType.Bilateral) {
+            else if (this.store.activeAnchor.prevNextType === PrevNextType.Bilateral &&
+                this.prevAnchor) {
                 var rotate = calcRotate(e, this.store.activeAnchor);
                 var prevRotate = calcRotate(this.prevAnchor, this.store.activeAnchor);
                 this.store.activeAnchor.next.x = this.nextAnchor.x;
@@ -4358,7 +4483,8 @@ var Canvas = /** @class */ (function () {
                 this.store.activeAnchor.prev.y = e.y;
                 rotatePoint(this.store.activeAnchor.prev, 180, this.store.activeAnchor);
             }
-            else if (this.store.activeAnchor.prevNextType === PrevNextType.Bilateral) {
+            else if (this.store.activeAnchor.prevNextType === PrevNextType.Bilateral &&
+                this.nextAnchor) {
                 var rotate = calcRotate(e, this.store.activeAnchor);
                 var nextRotate = calcRotate(this.nextAnchor, this.store.activeAnchor);
                 this.store.activeAnchor.prev.x = this.prevAnchor.x;
@@ -5202,7 +5328,7 @@ var Canvas = /** @class */ (function () {
                         }
                         deletePens = [];
                         this._del(pens, deletePens);
-                        this.initImageCanvas(pens);
+                        this.initImageCanvas(deletePens);
                         this.inactive();
                         this.clearHover();
                         this.render();