@meta2d/core 1.0.31 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meta2d/core",
-    "version": "1.0.31",
+    "version": "1.0.33",
     "description": "@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .",
     "main": "index.js",
     "types": "index.d.ts",
@@ -36,4 +36,4 @@
         "access": "public"
     },
     "gitHead": "78f2a53ca1839c89b56e2e498d17ba4eb987ad14"
-}
+}

package/src/canvas/canvas.d.ts

@@ -412,7 +412,7 @@ export declare class Canvas {
         width: number;
         height: number;
     };
-    toPng(padding?: Padding, callback?: BlobCallback, containBkImg?: boolean): string;
+    toPng(padding?: Padding, callback?: BlobCallback, containBkImg?: boolean, maxWidth?: number): string;
     activeToPng(padding?: Padding): string;
     toggleAnchorMode(): void;
     addAnchorHand(): void;

package/src/canvas/canvas.js

@@ -265,12 +265,15 @@ var Canvas = /** @class */ (function () {
             if (_this.store.data.locked === LockState.DisableMoveScale)
                 return;
             // e.ctrlKey: false - 平移； true - 缩放。老windows触摸板不支持
-            if (!e.ctrlKey && Math.abs(e.wheelDelta) < 100) {
+            if (!e.ctrlKey &&
+                Math.abs(e.wheelDelta) < 100 &&
+                e.deltaY.toString().indexOf('.') === -1) {
                 if (_this.store.options.scroll && !e.metaKey && _this.scroll) {
                     _this.scroll.wheel(e.deltaY < 0);
                     return;
                 }
-                _this.translate(-e.deltaX, -e.deltaY);
+                var scale = _this.store.data.scale || 1;
+                _this.translate(-e.deltaX / scale, -e.deltaY / scale);
                 return;
             }
             if (Math.abs(e.wheelDelta) > 100) {
@@ -296,10 +299,10 @@ var Canvas = /** @class */ (function () {
             }
             else {
                 if (e.deltaY > 0) {
-                    scaleOff = -0.2;
+                    scaleOff = -0.05;
                 }
                 else {
-                    scaleOff = 0.2;
+                    scaleOff = 0.05;
                 }
             }
             var x = e.offsetX, y = e.offsetY;
@@ -326,6 +329,19 @@ var Canvas = /** @class */ (function () {
             }
             var x = 10;
             var y = 10;
+            var vRect = null;
+            if (_this.store.options.strictScope) {
+                var width = _this.store.data.width || _this.store.options.width;
+                var height = _this.store.data.height || _this.store.options.height;
+                if (width && height) {
+                    vRect = {
+                        x: _this.store.data.origin.x,
+                        y: _this.store.data.origin.y,
+                        width: width * _this.store.data.scale,
+                        height: height * _this.store.data.scale,
+                    };
+                }
+            }
             switch (e.key) {
                 case ' ':
                     _this.hotkeyType = HotkeyType.Translate;
@@ -350,7 +366,9 @@ var Canvas = /** @class */ (function () {
                     }
                     else if (!_this.hotkeyType) {
                         _this.patchFlags = true;
-                        _this.hotkeyType = HotkeyType.Resize;
+                        if (!_this.store.options.resizeMode) {
+                            _this.hotkeyType = HotkeyType.Resize;
+                        }
                     }
                     break;
                 case 'Alt':
@@ -403,6 +421,9 @@ var Canvas = /** @class */ (function () {
                         x = -10;
                     }
                     x = x * _this.store.data.scale;
+                    if (vRect && _this.activeRect.x + x < vRect.x) {
+                        x = vRect.x - _this.activeRect.x;
+                    }
                     _this.translatePens(_this.store.active, x, 0);
                     break;
                 case 'ArrowUp':
@@ -418,6 +439,9 @@ var Canvas = /** @class */ (function () {
                         y = -10;
                     }
                     y = y * _this.store.data.scale;
+                    if (vRect && _this.activeRect.y + y < vRect.y) {
+                        y = vRect.y - _this.activeRect.y;
+                    }
                     _this.translatePens(_this.store.active, 0, y);
                     break;
                 case 'ArrowRight':
@@ -433,6 +457,11 @@ var Canvas = /** @class */ (function () {
                         x = 10;
                     }
                     x = x * _this.store.data.scale;
+                    if (vRect &&
+                        _this.activeRect.x + _this.activeRect.width + x > vRect.x + vRect.width) {
+                        x =
+                            vRect.x + vRect.width - (_this.activeRect.x + _this.activeRect.width);
+                    }
                     _this.translatePens(_this.store.active, x, 0);
                     break;
                 case 'ArrowDown':
@@ -448,6 +477,14 @@ var Canvas = /** @class */ (function () {
                         y = 10;
                     }
                     y = y * _this.store.data.scale;
+                    if (vRect &&
+                        _this.activeRect.y + _this.activeRect.height + y >
+                            vRect.y + vRect.height) {
+                        y =
+                            vRect.y +
+                                vRect.height -
+                                (_this.activeRect.y + _this.activeRect.height);
+                    }
                     _this.translatePens(_this.store.active, 0, y);
                     break;
                 case 'd':
@@ -1014,6 +1051,9 @@ var Canvas = /** @class */ (function () {
                         _this.store.data.rule &&
                             !_this.store.options.disableRuleLine &&
                             _this.addRuleLine(e);
+                        if (_this.store.options.resizeMode) {
+                            _this.hotkeyType = HotkeyType.None;
+                        }
                         _this.inactive();
                         break;
                     case HoverType.Node:
@@ -1038,6 +1078,9 @@ var Canvas = /** @class */ (function () {
                             else {
                                 if (!pen.calculative.active) {
                                     _this.active([pen]);
+                                    if (_this.store.options.resizeMode) {
+                                        _this.hotkeyType = HotkeyType.Resize;
+                                    }
                                 }
                             }
                             _this.calcActiveRect();
@@ -3020,6 +3063,21 @@ var Canvas = /** @class */ (function () {
                                             pen.height === rect_1.height) ||
                                             points.some(function (point) { return pointInRect(point, rect_1); })) {
                                             flag = false;
+                                            //严格范围模式下对齐大屏边界
+                                            if (this.store.options.strictScope) {
+                                                if (pen.x < rect_1.x) {
+                                                    pen.x = rect_1.x;
+                                                }
+                                                if (pen.y < rect_1.y) {
+                                                    pen.y = rect_1.y;
+                                                }
+                                                if (pen.x + pen.width > rect_1.x + rect_1.width) {
+                                                    pen.x = rect_1.x + rect_1.width - pen.width;
+                                                }
+                                                if (pen.y + pen.height > rect_1.y + rect_1.height) {
+                                                    pen.y = rect_1.y + rect_1.height - pen.height;
+                                                }
+                                            }
                                             break;
                                         }
                                     }
@@ -4391,6 +4449,43 @@ var Canvas = /** @class */ (function () {
         this.store.data.y += y * this.store.data.scale;
         this.store.data.x = Math.round(this.store.data.x);
         this.store.data.y = Math.round(this.store.data.y);
+        if (this.store.options.padding) {
+            var p = formatPadding(this.store.options.padding);
+            var width = this.store.data.width || this.store.options.width;
+            var height = this.store.data.height || this.store.options.height;
+            if (this.width < (width + p[1] + p[3]) * this.store.data.scale) {
+                if (this.store.data.x + this.store.data.origin.x >
+                    p[3] * this.store.data.scale) {
+                    this.store.data.x =
+                        p[3] * this.store.data.scale - this.store.data.origin.x;
+                }
+                if (this.store.data.x +
+                    this.store.data.origin.x +
+                    width * this.store.data.scale <
+                    this.width - p[1] * this.store.data.scale) {
+                    this.store.data.x =
+                        this.width -
+                            p[1] * this.store.data.scale -
+                            (this.store.data.origin.x + width * this.store.data.scale);
+                }
+            }
+            if (this.height < (height + p[0] + p[2]) * this.store.data.scale) {
+                if (this.store.data.y + this.store.data.origin.y >
+                    p[0] * this.store.data.scale) {
+                    this.store.data.y =
+                        p[0] * this.store.data.scale - this.store.data.origin.y;
+                }
+                if (this.store.data.y +
+                    this.store.data.origin.y +
+                    height * this.store.data.scale <
+                    this.height - p[2] * this.store.data.scale) {
+                    this.store.data.y =
+                        this.height -
+                            p[2] * this.store.data.scale -
+                            (this.store.data.origin.y + height * this.store.data.scale);
+                }
+            }
+        }
         setTimeout(function () {
             _this.canvasTemplate.init();
             _this.canvasImage.init();
@@ -4638,6 +4733,48 @@ var Canvas = /** @class */ (function () {
         }
         this.activeRect.ratio = this.initPens[0].ratio;
         resizeRect(this.activeRect, offsetX, offsetY, this.resizeIndex);
+        //大屏区域
+        if (this.store.options.strictScope) {
+            var width = this.store.data.width || this.store.options.width;
+            var height = this.store.data.height || this.store.options.height;
+            if (width && height) {
+                var vRect = {
+                    x: this.store.data.origin.x,
+                    y: this.store.data.origin.y,
+                    width: width * this.store.data.scale,
+                    height: height * this.store.data.scale,
+                };
+                if (this.activeRect.x < vRect.x) {
+                    this.activeRect.width =
+                        this.activeRect.width - (vRect.x - this.activeRect.x);
+                    this.activeRect.x = vRect.x;
+                }
+                if (this.activeRect.y < vRect.y) {
+                    this.activeRect.height =
+                        this.activeRect.height - (vRect.y - this.activeRect.y);
+                    this.activeRect.y = vRect.y;
+                }
+                if (this.activeRect.x + this.activeRect.width > vRect.x + vRect.width) {
+                    this.activeRect.width =
+                        this.activeRect.width -
+                            (this.activeRect.x +
+                                this.activeRect.width -
+                                (vRect.x + vRect.width));
+                    this.activeRect.x = vRect.x + vRect.width - this.activeRect.width;
+                    this.activeRect.ex = this.activeRect.x + this.activeRect.width;
+                }
+                if (this.activeRect.y + this.activeRect.height >
+                    vRect.y + vRect.height) {
+                    this.activeRect.height =
+                        this.activeRect.height -
+                            (this.activeRect.y +
+                                this.activeRect.height -
+                                (vRect.y + vRect.height));
+                    this.activeRect.y = vRect.y + vRect.height - this.activeRect.height;
+                    this.activeRect.ey = this.activeRect.y + this.activeRect.height;
+                }
+            }
+        }
         calcCenter(this.activeRect);
         var scaleX = this.activeRect.width / w;
         var scaleY = this.activeRect.height / h;
@@ -4706,11 +4843,40 @@ var Canvas = /** @class */ (function () {
         e.ctrlKey && (x = 0);
         var rect = deepClone(this.initActiveRect);
         translateRect(rect, x, y);
+        var vFlag = false;
+        if (this.store.options.strictScope) {
+            var width = this.store.data.width || this.store.options.width;
+            var height = this.store.data.height || this.store.options.height;
+            if (width && height) {
+                var vRect = {
+                    x: this.store.data.origin.x,
+                    y: this.store.data.origin.y,
+                    width: width * this.store.data.scale,
+                    height: height * this.store.data.scale,
+                };
+                if (rect.x < vRect.x) {
+                    rect.x = vRect.x;
+                    vFlag = true;
+                }
+                if (rect.y < vRect.y) {
+                    rect.y = vRect.y;
+                    vFlag = true;
+                }
+                if (rect.x + rect.width > vRect.x + vRect.width) {
+                    rect.x = vRect.x + vRect.width - rect.width;
+                    vFlag = true;
+                }
+                if (rect.y + rect.height > vRect.y + vRect.height) {
+                    rect.y = vRect.y + vRect.height - rect.height;
+                    vFlag = true;
+                }
+            }
+        }
         var offset = {
             x: rect.x - this.activeRect.x,
             y: rect.y - this.activeRect.y,
         };
-        if (!this.store.options.disableDock) {
+        if (!this.store.options.disableDock && !vFlag) {
             this.clearDock();
             var moveDock = this.customMoveDock || calcMoveDock;
             this.dock = moveDock(this.store, rect, this.movingPens, offset);
@@ -6398,11 +6564,12 @@ var Canvas = /** @class */ (function () {
             height: pen.height / scale,
         };
     };
-    Canvas.prototype.toPng = function (padding, callback, containBkImg) {
+    Canvas.prototype.toPng = function (padding, callback, containBkImg, maxWidth) {
         var e_22, _a;
         if (padding === void 0) { padding = 2; }
         if (containBkImg === void 0) { containBkImg = false; }
         var rect = getRect(this.store.data.pens);
+        var _scale = this.store.data.scale;
         if (!isFinite(rect.width)) {
             throw new Error('can not to png, because width is not finite');
         }
@@ -6430,10 +6597,16 @@ var Canvas = /** @class */ (function () {
         }
         // 有背景图，也添加 padding
         var p = formatPadding(padding);
-        rect.x -= p[3];
-        rect.y -= p[0];
-        rect.width += p[3] + p[1];
-        rect.height += p[0] + p[2];
+        rect.x -= p[3] * _scale;
+        rect.y -= p[0] * _scale;
+        rect.width += (p[3] + p[1]) * _scale;
+        rect.height += (p[0] + p[2]) * _scale;
+        // 扩大图
+        // const scale =
+        //   rect.width > rect.height ? longSide / rect.width : longSide / rect.height;
+        var scale = (maxWidth || 1920) / rect.width;
+        rect.width *= scale;
+        rect.height *= scale;
         calcRightBottom(rect);
         var canvas = document.createElement('canvas');
         canvas.width = rect.width;
@@ -6447,7 +6620,15 @@ var Canvas = /** @class */ (function () {
             throw new Error('can not to png, because the size exceeds the browser limit');
         }
         var ctx = canvas.getContext('2d');
+        // if (window.devicePixelRatio > 1) {
+        //   canvas.width *= window.devicePixelRatio;
+        //   canvas.height *= window.devicePixelRatio;
+        //   canvas.style.width = `${canvas.width / window.devicePixelRatio}`;
+        //   canvas.style.height = `${canvas.height / window.devicePixelRatio}`;
+        //   ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+        // }
         ctx.textBaseline = 'middle'; // 默认垂直居中
+        ctx.scale(scale, scale);
         if (isDrawBkImg) {
             var x = rect.x < 0 ? -rect.x : 0;
             var y = rect.y < 0 ? -rect.y : 0;
@@ -6458,7 +6639,7 @@ var Canvas = /** @class */ (function () {
             // 绘制背景颜色
             ctx.save();
             ctx.fillStyle = background;
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.fillRect(0, 0, oldRect.width + (p[3] + p[1]) * _scale, oldRect.height + (p[0] + p[2]) * _scale);
             ctx.restore();
         }
         if (!isDrawBkImg) {