@meta2d/core 1.0.12 → 1.0.14

package/package.json

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

@@ -198,6 +198,7 @@ export declare class Canvas {
     inactive(drawing?: boolean): void;
     active(pens: Pen[], emit?: boolean): void;
     getSizeCPs(): void;
+    getSpecialAngle(to: Point, last: Point): void;
     onResize: () => void;
     onScroll: () => void;
     calibrateMouse: (pt: Point) => Point;

package/src/canvas/canvas.js

@@ -930,6 +930,19 @@ var Canvas = /** @class */ (function () {
                         _this.hoverType = HoverType.None;
                     }
                 }
+                else if (_this.hoverType === HoverType.NodeAnchor) {
+                    //钢笔模式下 可以连节点锚点
+                    _this.drawingLineName = _this.store.options.drawingLineName;
+                    var pt = {
+                        id: s8(),
+                        x: _this.store.hoverAnchor.x,
+                        y: _this.store.hoverAnchor.y,
+                    };
+                    _this.drawingLine = _this.createDrawingLine(pt);
+                    _this.drawingLine.calculative.activeAnchor = pt;
+                    connectLine(_this.store.hover, _this.store.hoverAnchor, _this.drawingLine, pt);
+                    // this.drawline();
+                }
                 else if (!_this.drawingLine && _this.drawingLineName !== 'curve') {
                     _this.inactive(true);
                     var pt = { id: s8(), x: e.x, y: e.y };
@@ -1232,58 +1245,8 @@ var Canvas = /** @class */ (function () {
                                 _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.getSpecialAngle(to, last);
                         }
                     }
                     _this.drawline();
@@ -2550,17 +2513,22 @@ var Canvas = /** @class */ (function () {
             _this.store.emitter.emit('valueUpdate', pen);
         };
         this.canvasImageBottom = new CanvasImage(parentElement, store, true);
+        this.canvasImageBottom.canvas.style.zIndex = '1';
         parentElement.appendChild(this.canvas);
         this.canvas.style.position = 'absolute';
         this.canvas.style.backgroundRepeat = 'no-repeat';
         this.canvas.style.backgroundSize = '100% 100%';
+        this.canvas.style.zIndex = '2';
         this.canvasImage = new CanvasImage(parentElement, store);
+        this.canvasImage.canvas.style.zIndex = '3';
         this.magnifierCanvas = new MagnifierCanvas(this, parentElement, store);
+        this.magnifierCanvas.canvas.style.zIndex = '4';
         this.externalElements.style.position = 'absolute';
         this.externalElements.style.left = '0';
         this.externalElements.style.top = '0';
         this.externalElements.style.outline = 'none';
         this.externalElements.style.background = 'transparent';
+        this.externalElements.style.zIndex = '4';
         parentElement.style.position = 'relative';
         parentElement.appendChild(this.externalElements);
         this.createInput();
@@ -2780,6 +2748,7 @@ var Canvas = /** @class */ (function () {
                             img.onerror = function (e) {
                                 reject(e);
                             };
+                            img.crossOrigin = 'anonymous';
                             img.src = url;
                         })];
                 }
@@ -3236,6 +3205,57 @@ var Canvas = /** @class */ (function () {
             _this.sizeCPs.push(p);
         });
     };
+    Canvas.prototype.getSpecialAngle = function (to, last) {
+        //快捷定位到特殊角度
+        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 = 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;
+        to.y = last.y - Math.sin((angle / 180) * Math.PI) * length;
+    };
     Canvas.prototype.clearHover = function () {
         this.hoverType = HoverType.None;
         this.store.hover = null;
@@ -3248,7 +3268,9 @@ var Canvas = /** @class */ (function () {
         if (!anchor || anchor.locked > LockState.DisableEdit) {
             return HoverType.None;
         }
-        if (this.store.options.disableAnchor || pen.disableAnchor) {
+        if ((!(pen.type && pen.calculative.active) &&
+            this.store.options.disableAnchor) ||
+            pen.disableAnchor) {
             return HoverType.None;
         }
         if ((this.mouseDown || this.drawingLine) &&
@@ -4174,6 +4196,7 @@ var Canvas = /** @class */ (function () {
                 return;
             }
             scalePen(pen, s, center);
+            pen.onScale && pen.onScale(pen);
             if (pen.isRuleLine) {
                 // 扩大线的比例，若是放大，即不缩小，若是缩小，会放大
                 var lineScale = s > 1 ? 1 : 1 / s / s;
@@ -4492,8 +4515,41 @@ var Canvas = /** @class */ (function () {
             translatePolylineAnchor(line, this.store.activeAnchor, pt);
         }
         else {
-            var offsetX = pt.x - this.store.activeAnchor.x;
-            var offsetY = pt.y - this.store.activeAnchor.y;
+            var offsetX = 0;
+            var offsetY = 0;
+            if (line.lineName === 'line' &&
+                line.calculative.worldAnchors[line.calculative.worldAnchors.length - 1] === this.store.activeAnchor) {
+                if (keyOptions.ctrlKey && keyOptions.shiftKey) {
+                    var _pt = deepClone(pt);
+                    this.getSpecialAngle(_pt, line.calculative.worldAnchors[line.calculative.worldAnchors.length - 2]);
+                    offsetX = _pt.x - this.store.activeAnchor.x;
+                    offsetY = _pt.y - this.store.activeAnchor.y;
+                }
+                else if (!keyOptions.ctrlKey && keyOptions.shiftKey) {
+                    var _pt = {
+                        x: pt.x,
+                        y: line.calculative.worldAnchors[line.calculative.worldAnchors.length - 2].y,
+                    };
+                    offsetX = _pt.x - this.store.activeAnchor.x;
+                    offsetY = _pt.y - this.store.activeAnchor.y;
+                }
+                else if (keyOptions.ctrlKey && !keyOptions.shiftKey) {
+                    var _pt = {
+                        x: line.calculative.worldAnchors[line.calculative.worldAnchors.length - 2].x,
+                        y: pt.y,
+                    };
+                    offsetX = _pt.x - this.store.activeAnchor.x;
+                    offsetY = _pt.y - this.store.activeAnchor.y;
+                }
+                else {
+                    offsetX = pt.x - this.store.activeAnchor.x;
+                    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 &&
                 this.store.hoverAnchor &&
@@ -4819,7 +4875,7 @@ var Canvas = /** @class */ (function () {
                         k !== 'height' &&
                         k !== 'initRect' &&
                         (typeof pen[k] !== 'object' || k === 'lineDash')) {
-                        if (k === 'fontSize') {
+                        if (k === 'fontSize' || k === 'lineWidth') {
                             pen[k] =
                                 pen.calculative[k] / pen.calculative.canvas.store.data.scale;
                         }
@@ -5175,7 +5231,8 @@ var Canvas = /** @class */ (function () {
     });
     Canvas.prototype.copy = function (pens) {
         return __awaiter(this, void 0, void 0, function () {
-            var page, _a, origin, scale, clipboard, _b;
+            var page, _a, origin, scale, copyPens, clipboard, _b;
+            var _this = this;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
@@ -5184,9 +5241,20 @@ var Canvas = /** @class */ (function () {
                         this.store.clipboard = undefined;
                         localStorage.removeItem(this.clipboardName);
                         sessionStorage.setItem('page', page);
+                        copyPens = this.getAllByPens(deepClone(pens || this.store.active, true));
+                        //根据pens顺序复制
+                        copyPens.forEach(function (activePen) {
+                            activePen.copyIndex = _this.store.data.pens.findIndex(function (pen) { return pen.id === activePen.id; });
+                        });
+                        copyPens.sort(function (a, b) {
+                            return a.copyIndex - b.copyIndex;
+                        });
+                        copyPens.forEach(function (activePen) {
+                            delete activePen.copyIndex;
+                        });
                         clipboard = {
                             meta2d: true,
-                            pens: this.getAllByPens(deepClone(pens || this.store.active, true)),
+                            pens: copyPens,
                             origin: deepClone(origin),
                             scale: scale,
                             page: page,
@@ -5843,6 +5911,10 @@ var Canvas = /** @class */ (function () {
             pen.calculative.gradient = undefined;
             pen.calculative.radialGradient = undefined;
         }
+        if (data.gradientRadius) {
+            pen.calculative.gradient = undefined;
+            pen.calculative.radialGradient = undefined;
+        }
         if (data.animateLineWidth) {
             pen.calculative.gradientAnimatePath = undefined;
         }