@meta2d/core 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meta2d/core",
-    "version": "1.0.19",
+    "version": "1.0.21",
     "description": "@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .",
     "main": "index.js",
     "types": "index.d.ts",

package/src/canvas/canvas.js

@@ -83,7 +83,7 @@ var __values = (this && this.__values) || function(o) {
 };
 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, } from '../pen';
-import { calcRotate, distance, hitPoint, PrevNextType, rotatePoint, samePoint, scalePoint, translatePoint, TwoWay, } from '../point';
+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';
 import { deepClone, fileToBase64, uploadFile, formatPadding, rgba, s8, } from '../utils';
@@ -246,6 +246,10 @@ var Canvas = /** @class */ (function () {
             }
             e.preventDefault();
             e.stopPropagation();
+            //移动画笔过程中不允许缩放
+            if (_this.mouseDown &&
+                (_this.hoverType === HoverType.Node || _this.hoverType === HoverType.Line))
+                return;
             if (_this.store.data.locked === LockState.Disable)
                 return;
             if (_this.store.data.locked === LockState.DisableScale)
@@ -626,7 +630,7 @@ var Canvas = /** @class */ (function () {
                         obj = _a.sent();
                         return [3 /*break*/, 3];
                     case 2:
-                        if (this.addCaches.length) {
+                        if (this.addCaches && this.addCaches.length) {
                             obj = this.addCaches;
                             this.addCaches = [];
                         }
@@ -860,8 +864,13 @@ var Canvas = /** @class */ (function () {
                 // 单击在锚点上，完成绘画
                 if (_this.store.hoverAnchor) {
                     var to_1 = getToAnchor(_this.drawingLine);
-                    to_1.x = _this.store.hoverAnchor.x;
-                    to_1.y = _this.store.hoverAnchor.y;
+                    if (_this.store.hoverAnchor.type === PointType.Line) {
+                        getDistance(to_1, _this.store.hoverAnchor, _this.store);
+                    }
+                    else {
+                        to_1.x = _this.store.hoverAnchor.x;
+                        to_1.y = _this.store.hoverAnchor.y;
+                    }
                     connectLine(_this.store.hover, _this.store.hoverAnchor, _this.drawingLine, to_1);
                     _this.drawline();
                     _this.finishDrawline(true);
@@ -1245,8 +1254,10 @@ var Canvas = /** @class */ (function () {
                     }
                     if (_this.hoverType === HoverType.NodeAnchor ||
                         _this.hoverType === HoverType.LineAnchor) {
-                        to.x = _this.store.hoverAnchor.x;
-                        to.y = _this.store.hoverAnchor.y;
+                        if (_this.store.hoverAnchor.type !== PointType.Line) {
+                            to.x = _this.store.hoverAnchor.x;
+                            to.y = _this.store.hoverAnchor.y;
+                        }
                         to.connectTo = _this.store.hoverAnchor.penId;
                         if (_this.drawingLineName === 'polyline') {
                             to.isTemp = false;
@@ -1305,8 +1316,13 @@ var Canvas = /** @class */ (function () {
                 // 在锚点上，完成绘画
                 if (_this.store.hoverAnchor) {
                     var to = getToAnchor(_this.drawingLine);
-                    to.x = _this.store.hoverAnchor.x;
-                    to.y = _this.store.hoverAnchor.y;
+                    if (_this.store.hoverAnchor.type === PointType.Line) {
+                        getDistance(to, _this.store.hoverAnchor, _this.store);
+                    }
+                    else {
+                        to.x = _this.store.hoverAnchor.x;
+                        to.y = _this.store.hoverAnchor.y;
+                    }
                     connectLine(_this.store.hover, _this.store.hoverAnchor, _this.drawingLine, to);
                     _this.drawline();
                     _this.finishDrawline(true);
@@ -1372,8 +1388,16 @@ var Canvas = /** @class */ (function () {
                     else {
                         // 连接连线
                         if (_this.store.activeAnchor) {
-                            _this.store.activeAnchor.x = _this.store.hoverAnchor.x;
-                            _this.store.activeAnchor.y = _this.store.hoverAnchor.y;
+                            /**
+                             * 线的锚点需要存所连接锚点的位置
+                             */
+                            if (_this.store.hoverAnchor.type === PointType.Line) {
+                                getDistance(_this.store.activeAnchor, _this.store.hoverAnchor, _this.store);
+                            }
+                            else {
+                                _this.store.activeAnchor.x = _this.store.hoverAnchor.x;
+                                _this.store.activeAnchor.y = _this.store.hoverAnchor.y;
+                            }
                             connectLine(_this.store.hover, _this.store.hoverAnchor, line_1, _this.store.activeAnchor);
                         }
                     }
@@ -1394,7 +1418,7 @@ var Canvas = /** @class */ (function () {
                 }
             }
             // Add pen
-            if (_this.addCaches) {
+            if (_this.addCaches && _this.addCaches.length) {
                 if (!_this.store.data.locked) {
                     _this.dropPens(_this.addCaches, e);
                 }
@@ -1635,7 +1659,7 @@ var Canvas = /** @class */ (function () {
                         try {
                             for (var _d = (e_1 = void 0, __values(pen.calculative.worldAnchors)), _e = _d.next(); !_e.done; _e = _d.next()) {
                                 var anchor = _e.value;
-                                if (hitPoint(pt, anchor, _this.pointSize)) {
+                                if (hitPoint(pt, anchor, _this.pointSize, anchor.penId ? _this.store.pens[anchor.penId] : undefined)) {
                                     _this.title.show(anchor);
                                     if (anchor.title) {
                                         return "break-outer";
@@ -2026,7 +2050,32 @@ var Canvas = /** @class */ (function () {
                                 size = _this.store.hover.calculative.lineWidth;
                             }
                         }
-                        ctx.arc(anchor.x, anchor.y, size, 0, Math.PI * 2);
+                        if (anchor.type === PointType.Line) {
+                            //旋转的情况
+                            var _rotate = _this.store.pens[anchor.penId].rotate;
+                            if (_this.store.pens[anchor.penId].calculative.flipX) {
+                                _rotate *= -1;
+                            }
+                            if (_this.store.pens[anchor.penId].calculative.flipY) {
+                                _rotate *= -1;
+                            }
+                            var rotate = anchor.rotate + _rotate;
+                            if (_this.store.pens[anchor.penId].calculative.flipX) {
+                                rotate *= -1;
+                            }
+                            if (_this.store.pens[anchor.penId].calculative.flipY) {
+                                rotate *= -1;
+                            }
+                            ctx.save();
+                            ctx.translate(anchor.x, anchor.y);
+                            ctx.rotate((rotate * Math.PI) / 180);
+                            ctx.translate(-anchor.x, -anchor.y);
+                            ctx.rect(anchor.x - (anchor.length * _this.store.data.scale) / 2, anchor.y - size, anchor.length * _this.store.data.scale, size * 2);
+                            ctx.restore();
+                        }
+                        else {
+                            ctx.arc(anchor.x, anchor.y, size, 0, Math.PI * 2);
+                        }
                         if (_this.store.hover.type && _this.store.hoverAnchor === anchor) {
                             ctx.save();
                             ctx.strokeStyle =
@@ -2853,6 +2902,10 @@ var Canvas = /** @class */ (function () {
                                     pen.height *= this.store.data.scale;
                                     pen.x = e.x - pen.width / 2;
                                     pen.y = e.y - pen.height / 2;
+                                    if (pen.tags && pen.tags.includes('meta3d')) {
+                                        pen.x = this.store.data.origin.x;
+                                        pen.y = this.store.data.origin.y;
+                                    }
                                 }
                             }
                         }
@@ -2883,7 +2936,11 @@ var Canvas = /** @class */ (function () {
                                             { x: pen.x, y: pen.y + pen.height },
                                             { x: pen.x + pen.width, y: pen.y + pen.height },
                                         ];
-                                        if (points.some(function (point) { return pointInRect(point, rect_1); })) {
+                                        if ((pen.x === rect_1.x &&
+                                            pen.y === rect_1.y &&
+                                            pen.width === rect_1.width &&
+                                            pen.height === rect_1.height) ||
+                                            points.some(function (point) { return pointInRect(point, rect_1); })) {
                                             flag = false;
                                             break;
                                         }
@@ -3392,7 +3449,7 @@ var Canvas = /** @class */ (function () {
                 return HoverType.None;
             }
         }
-        if (hitPoint(pt, anchor, this.pointSize)) {
+        if (hitPoint(pt, anchor, this.pointSize, anchor.penId ? this.store.pens[anchor.penId] : undefined)) {
             if (anchor !== this.store.hoverAnchor) {
                 this.patchFlags = true;
             }
@@ -4009,7 +4066,7 @@ var Canvas = /** @class */ (function () {
     };
     Canvas.prototype.loadImage = function (pen) {
         var _this = this;
-        if (pen.image !== pen.calculative.image) {
+        if (pen.image !== pen.calculative.image || !pen.calculative.img) {
             pen.calculative.img = undefined;
             if (pen.image) {
                 if (globalStore.htmlElements[pen.image]) {
@@ -4643,8 +4700,15 @@ var Canvas = /** @class */ (function () {
             if (this.store.hover &&
                 this.store.hoverAnchor &&
                 this.store.hoverAnchor.penId !== this.store.activeAnchor.penId) {
-                offsetX = this.store.hoverAnchor.x - this.store.activeAnchor.x;
-                offsetY = this.store.hoverAnchor.y - this.store.activeAnchor.y;
+                if (this.store.hoverAnchor.type === PointType.Line) {
+                    offsetX = pt.x - this.store.activeAnchor.x;
+                    offsetY = pt.y - this.store.activeAnchor.y;
+                    getDistance(this.store.activeAnchor, this.store.hoverAnchor, this.store);
+                }
+                else {
+                    offsetX = this.store.hoverAnchor.x - this.store.activeAnchor.x;
+                    offsetY = this.store.hoverAnchor.y - this.store.activeAnchor.y;
+                }
                 translatePoint(this.store.activeAnchor, offsetX, offsetY);
                 to.prev = undefined;
                 // 重新自动计算连线
@@ -4717,7 +4781,9 @@ var Canvas = /** @class */ (function () {
     };
     Canvas.prototype.moveLineAnchorNext = function (e) {
         var _this = this;
-        if (!this.activeRect || this.store.data.locked) {
+        if (!this.activeRect ||
+            this.store.data.locked ||
+            !this.store.activeAnchor) {
             return;
         }
         if (!this.initPens) {
@@ -5054,9 +5120,29 @@ var Canvas = /** @class */ (function () {
             if (!penAnchor) {
                 return;
             }
-            translatePoint(lineAnchor, penAnchor.x - lineAnchor.x, penAnchor.y - lineAnchor.y);
+            var rotate = pen.rotate;
+            if (pen.flipX) {
+                rotate *= -1;
+            }
+            if (pen.flipY) {
+                rotate *= -1;
+            }
+            var offsetX = lineAnchor.distance *
+                _this.store.data.scale *
+                Math.cos(((rotate + penAnchor.rotate) / 180) * Math.PI) || 0;
+            var offsetY = lineAnchor.distance *
+                _this.store.data.scale *
+                Math.sin(((rotate + penAnchor.rotate) / 180) * Math.PI) || 0;
+            if (pen.flipX) {
+                offsetX = -offsetX;
+            }
+            if (pen.flipY) {
+                offsetY = -offsetY;
+            }
+            translatePoint(lineAnchor, penAnchor.x - lineAnchor.x + offsetX, penAnchor.y - lineAnchor.y + offsetY);
             if (_this.store.options.autoPolyline &&
                 line.autoPolyline !== false &&
+                line.calculative.autoPolylineFlag === true &&
                 line.lineName === 'polyline') {
                 var from = getFromAnchor(line);
                 var to = getToAnchor(line);