@meta2d/core 1.0.24 → 1.0.25

package/package.json

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

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

package/src/canvas/canvas.js

@@ -242,6 +242,12 @@ var Canvas = /** @class */ (function () {
             if (_this.pencil) {
                 return;
             }
+            if (_this.store.hover) {
+                if (_this.store.hover.onWheel) {
+                    _this.store.hover.onWheel(_this.store.hover, e);
+                    return;
+                }
+            }
             if (_this.store.options.disableScale) {
                 return;
             }
@@ -381,12 +387,12 @@ var Canvas = /** @class */ (function () {
                         _this.translateAnchor(-1, 0);
                         break;
                     }
-                    x = -10;
+                    x = -1;
                     if (e.shiftKey) {
                         x = -5;
                     }
                     if (e.ctrlKey || e.metaKey) {
-                        x = -1;
+                        x = -10;
                     }
                     _this.translatePens(_this.store.active, x, 0);
                     break;
@@ -395,12 +401,12 @@ var Canvas = /** @class */ (function () {
                         _this.translateAnchor(0, -1);
                         break;
                     }
-                    y = -10;
+                    y = -1;
                     if (e.shiftKey) {
                         y = -5;
                     }
                     if (e.ctrlKey || e.metaKey) {
-                        y = -1;
+                        y = -10;
                     }
                     _this.translatePens(_this.store.active, 0, y);
                     break;
@@ -409,11 +415,12 @@ var Canvas = /** @class */ (function () {
                         _this.translateAnchor(1, 0);
                         break;
                     }
+                    x = 1;
                     if (e.shiftKey) {
                         x = 5;
                     }
                     if (e.ctrlKey || e.metaKey) {
-                        x = 1;
+                        x = 10;
                     }
                     _this.translatePens(_this.store.active, x, 0);
                     break;
@@ -422,11 +429,12 @@ var Canvas = /** @class */ (function () {
                         _this.translateAnchor(0, 1);
                         break;
                     }
+                    y = 1;
                     if (e.shiftKey) {
                         y = 5;
                     }
                     if (e.ctrlKey || e.metaKey) {
-                        y = 1;
+                        y = 10;
                     }
                     _this.translatePens(_this.store.active, 0, y);
                     break;
@@ -1424,6 +1432,16 @@ var Canvas = /** @class */ (function () {
             // Add pen
             if (_this.addCaches && _this.addCaches.length) {
                 if (!_this.store.data.locked) {
+                    if (_this.dragRect) {
+                        // 只存在一个缓存图元
+                        if (_this.addCaches.length === 1) {
+                            var target = _this.addCaches[0];
+                            target.width = _this.dragRect.width;
+                            target.height = _this.dragRect.height;
+                            e.x = (_this.dragRect.x + _this.dragRect.ex) / 2;
+                            e.y = (_this.dragRect.y + _this.dragRect.ey) / 2;
+                        }
+                    }
                     _this.dropPens(_this.addCaches, e);
                 }
                 _this.addCaches = undefined;
@@ -2723,6 +2741,17 @@ var Canvas = /** @class */ (function () {
             });
         };
         this.externalElements.onmouseleave = function (e) {
+            //离开画布取消所有选中
+            _this.store.data.pens.forEach(function (pen) {
+                if (pen.calculative.hover) {
+                    pen.calculative.hover = false;
+                }
+            });
+            if (_this.store.hover) {
+                _this.store.hover.calculative.hover = false;
+                _this.store.hover = undefined;
+            }
+            _this.render();
             if (e.toElement !== _this.tooltip.box) {
                 _this.tooltip.hide();
                 _this.store.lastHover = undefined;
@@ -4482,6 +4511,7 @@ var Canvas = /** @class */ (function () {
             var sign = [1, 3].includes(this.resizeIndex) ? -1 : 1;
             offsetY = (sign * (offsetX * h)) / w;
         }
+        this.activeRect.ratio = this.initPens[0].ratio;
         resizeRect(this.activeRect, offsetX, offsetY, this.resizeIndex);
         calcCenter(this.activeRect);
         var scaleX = this.activeRect.width / w;
@@ -4947,6 +4977,8 @@ var Canvas = /** @class */ (function () {
     Canvas.prototype.translatePens = function (pens, x, y, doing) {
         var _this = this;
         if (pens === void 0) { pens = this.store.active; }
+        x = x * this.store.data.scale;
+        y = y * this.store.data.scale;
         if (!pens || !pens.length) {
             return;
         }
@@ -6295,6 +6327,66 @@ var Canvas = /** @class */ (function () {
         }
         return canvas.toDataURL();
     };
+    Canvas.prototype.activeToPng = function (padding) {
+        var e_24, _a;
+        if (padding === void 0) { padding = 2; }
+        var allPens = this.getAllByPens(this.store.active);
+        var ids = allPens.map(function (pen) { return pen.id; });
+        var rect = getRect(allPens);
+        if (!isFinite(rect.width)) {
+            throw new Error('can not to png, because width is not finite');
+        }
+        var oldRect = deepClone(rect);
+        var p = formatPadding(padding);
+        rect.x -= p[3];
+        rect.y -= p[0];
+        rect.width += p[3] + p[1];
+        rect.height += p[0] + p[2];
+        calcRightBottom(rect);
+        var canvas = document.createElement('canvas');
+        canvas.width = rect.width;
+        canvas.height = rect.height;
+        if (canvas.width > 32767 ||
+            canvas.height > 32767 ||
+            (!navigator.userAgent.includes('Firefox') &&
+                canvas.height * canvas.width > 268435456) ||
+            (navigator.userAgent.includes('Firefox') &&
+                canvas.height * canvas.width > 472907776)) {
+            throw new Error('can not to png, because the size exceeds the browser limit');
+        }
+        var ctx = canvas.getContext('2d');
+        ctx.textBaseline = 'middle'; // 默认垂直居中
+        // // 平移画布，画笔的 worldRect 不变化
+        ctx.translate(-oldRect.x, -oldRect.y);
+        try {
+            for (var _b = __values(this.store.data.pens), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var pen = _c.value;
+                if (ids.includes(pen.id)) {
+                    // 不使用 calculative.inView 的原因是，如果 pen 在 view 之外，那么它的 calculative.inView 为 false，但是它的绘制还是需要的
+                    if (!isShowChild(pen, this.store) || pen.visible == false) {
+                        continue;
+                    }
+                    var active = pen.calculative.active;
+                    pen.calculative.active = false;
+                    if (pen.calculative.img) {
+                        renderPenRaw(ctx, pen);
+                    }
+                    else {
+                        renderPen(ctx, pen);
+                    }
+                    pen.calculative.active = active;
+                }
+            }
+        }
+        catch (e_24_1) { e_24 = { error: e_24_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_24) throw e_24.error; }
+        }
+        return canvas.toDataURL();
+    };
     Canvas.prototype.toggleAnchorMode = function () {
         var _a;
         if (!this.hotkeyType) {