@meta2d/core 1.0.20 → 1.0.22

package/package.json

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

@@ -75,7 +75,7 @@ export declare class Canvas {
     renderTimer: number;
     initPens?: Pen[];
     pointSize: 8;
-    pasteOffset: number;
+    pasteOffset: boolean;
     opening: boolean;
     maxZindex: number;
     canMoveLine: boolean;
@@ -108,6 +108,7 @@ export declare class Canvas {
     canvasImageBottom: CanvasImage;
     magnifierCanvas: MagnifierCanvas;
     dialog: Dialog;
+    autoPolylineFlag: boolean;
     stopPropagation: (e: MouseEvent) => void;
     constructor(parent: Meta2d, parentElement: HTMLElement, store: Meta2dStore);
     curve: typeof curve;

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';
@@ -124,7 +124,7 @@ var Canvas = /** @class */ (function () {
         this.lastAnimateRender = 0;
         this.animateRendering = false;
         this.pointSize = 8;
-        this.pasteOffset = 10;
+        this.pasteOffset = true;
         this.opening = false;
         this.maxZindex = 4;
         this.canMoveLine = false; //moveConnectedLine=false
@@ -134,6 +134,7 @@ var Canvas = /** @class */ (function () {
         this.inputRight = document.createElement('div');
         this.dropdown = document.createElement('ul');
         this.mousePos = { x: 0, y: 0 };
+        this.autoPolylineFlag = false; //标记open不自动计算
         this.stopPropagation = function (e) {
             e.stopPropagation();
         };
@@ -630,7 +631,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 = [];
                         }
@@ -864,8 +865,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);
@@ -1249,8 +1255,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;
@@ -1309,8 +1317,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);
@@ -1376,8 +1389,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);
                         }
                     }
@@ -1398,7 +1419,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);
                 }
@@ -1420,7 +1441,7 @@ var Canvas = /** @class */ (function () {
             if (_this.dragRect) {
                 var pens = _this.store.data.pens.filter(function (pen) {
                     if (pen.visible === false ||
-                        pen.locked === LockState.Disable ||
+                        pen.locked >= LockState.DisableMove ||
                         pen.parentId) {
                         return false;
                     }
@@ -1432,6 +1453,7 @@ var Canvas = /** @class */ (function () {
                         return true;
                     }
                 });
+                //框选
                 _this.active(pens);
             }
             if (e.button !== 2) {
@@ -1639,7 +1661,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";
@@ -2030,7 +2052,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 =
@@ -3211,7 +3258,7 @@ var Canvas = /** @class */ (function () {
             return __assign(__assign({}, pen), { x: x, y: y });
         }));
         // 偏移量 0
-        this.pasteOffset = 0;
+        this.pasteOffset = false;
         this.paste();
     };
     /**
@@ -3404,7 +3451,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;
             }
@@ -3661,6 +3708,7 @@ var Canvas = /** @class */ (function () {
                     var pen = deepClone(aPen, true);
                     var i = _this.store.data.pens.findIndex(function (item) { return item.id === pen.id; });
                     if (i > -1) {
+                        (_a = pen.onDestroy) === null || _a === void 0 ? void 0 : _a.call(pen, _this.store.pens[pen.id]);
                         _this.store.data.pens.splice(i, 1);
                         _this.store.pens[pen.id] = undefined;
                         if (!pen.calculative) {
@@ -3669,7 +3717,6 @@ var Canvas = /** @class */ (function () {
                         pen.calculative.canvas = _this;
                         _this.store.animates.delete(pen);
                         _this.store.animateMap.delete(pen);
-                        (_a = pen.onDestroy) === null || _a === void 0 ? void 0 : _a.call(pen, pen);
                     }
                 });
                 action.type = EditType.Delete;
@@ -4655,8 +4702,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;
                 // 重新自动计算连线
@@ -4729,7 +4783,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) {
@@ -5066,8 +5122,28 @@ 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 &&
+                !_this.autoPolylineFlag &&
                 line.autoPolyline !== false &&
                 line.lineName === 'polyline') {
                 var from = getFromAnchor(line);
@@ -5455,6 +5531,10 @@ var Canvas = /** @class */ (function () {
                             this.store.clipboard.pos = { x: this.mousePos.x, y: this.mousePos.y };
                             this.store.clipboard.offset = 0;
                         }
+                        else if (!this.pasteOffset) {
+                            this.store.clipboard.offset = 0;
+                            this.pasteOffset = true;
+                        }
                         else {
                             offset && (this.store.clipboard.offset = offset);
                             pos && (this.store.clipboard.pos = pos);