@meta2d/core 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meta2d/core",
-    "version": "1.0.11",
+    "version": "1.0.13",
     "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;
@@ -360,6 +361,7 @@ export declare class Canvas {
     private ondblclick;
     showInput: (pen: Pen, rect?: Rect, background?: string) => void;
     setInputStyle: (pen: Pen) => void;
+    convertSpecialCharacter(str: any): any;
     hideInput: () => void;
     private createInput;
     clearDropdownList(): void;

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();
@@ -2429,6 +2392,7 @@ var Canvas = /** @class */ (function () {
                     .replace(/\<br\>/g, '')
                     .replace(/&nbsp;/g, ' ')
                     .replace(/(<([^>]+)>)/gi, '');
+                _this.inputDiv.dataset.value = _this.convertSpecialCharacter(_this.inputDiv.dataset.value);
                 if (pen.onInput) {
                     pen.onInput(pen, _this.inputDiv.dataset.value);
                 }
@@ -3210,6 +3174,7 @@ var Canvas = /** @class */ (function () {
             setChildrenActive(pen);
         });
         (_b = this.store.active).push.apply(_b, __spreadArray([], __read(pens), false));
+        this.activeRect = undefined;
         this.calcActiveRect();
         this.patchFlags = true;
         emit && this.store.emitter.emit('active', this.store.active);
@@ -3234,6 +3199,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;
@@ -3246,7 +3262,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) &&
@@ -3551,6 +3569,9 @@ var Canvas = /** @class */ (function () {
                     if (i > -1) {
                         _this.store.data.pens.splice(i, 1);
                         _this.store.pens[pen.id] = undefined;
+                        if (!pen.calculative) {
+                            pen.calculative = {};
+                        }
                         pen.calculative.canvas = _this;
                         _this.store.animates.delete(pen);
                         _this.store.animateMap.delete(pen);
@@ -3592,8 +3613,12 @@ var Canvas = /** @class */ (function () {
                 break;
             case EditType.Delete:
                 action.pens.forEach(function (aPen) {
+                    var _a;
                     var pen = deepClone(aPen, true);
-                    _this.store.data.pens.splice(pen.calculative.layer, 0, pen);
+                    if (!pen.calculative) {
+                        pen.calculative = {};
+                    }
+                    _this.store.data.pens.splice((_a = pen.calculative) === null || _a === void 0 ? void 0 : _a.layer, 0, pen);
                     // 先放进去，pens 可能是子节点在前，而父节点在后
                     _this.store.pens[pen.id] = pen;
                     pen.calculative.canvas = _this;
@@ -4165,6 +4190,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;
@@ -4483,8 +4509,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 &&
@@ -4810,7 +4869,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;
                         }
@@ -5582,6 +5641,12 @@ var Canvas = /** @class */ (function () {
             }
         });
     };
+    Canvas.prototype.convertSpecialCharacter = function (str) {
+        var arrEntities = { lt: '<', gt: '>', nbsp: ' ', amp: '&', quot: '"' };
+        return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) {
+            return arrEntities[t];
+        });
+    };
     Canvas.prototype.createInput = function () {
         var _this = this;
         this.inputParent.classList.add('meta2d-input');
@@ -5828,6 +5893,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;
         }