@meta2d/core 1.0.23 → 1.0.25

package/package.json

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

@@ -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

@@ -82,7 +82,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 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 { 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, calcTextAutoWidth, } from '../pen';
 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';
@@ -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;
             }
@@ -307,6 +313,9 @@ var Canvas = /** @class */ (function () {
                 e.target.tagName === 'TEXTAREA') {
                 return;
             }
+            if (_this.store.options.unavailableKeys.includes(e.key)) {
+                return;
+            }
             var x = 10;
             var y = 10;
             switch (e.key) {
@@ -378,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;
@@ -392,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;
@@ -406,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;
@@ -419,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;
@@ -989,7 +1000,7 @@ var Canvas = /** @class */ (function () {
                         _this.store.data.rule &&
                             !_this.store.options.disableRuleLine &&
                             _this.addRuleLine(e);
-                        // this.inactive();
+                        _this.inactive();
                         break;
                     case HoverType.Node:
                     case HoverType.Line:
@@ -1421,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;
@@ -1662,7 +1683,7 @@ var Canvas = /** @class */ (function () {
                             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, anchor.penId ? _this.store.pens[anchor.penId] : undefined)) {
-                                    _this.title.show(anchor);
+                                    _this.title.show(anchor, pen);
                                     if (anchor.title) {
                                         return "break-outer";
                                     }
@@ -2237,7 +2258,7 @@ var Canvas = /** @class */ (function () {
         };
         this.ondblclick = function (e) {
             if (_this.store.hover &&
-                !_this.store.data.locked &&
+                (!_this.store.data.locked || _this.store.hover.dbInput) &&
                 !_this.store.options.disableInput) {
                 if (_this.store.hover.onShowInput) {
                     _this.store.hover.onShowInput(_this.store.hover, e);
@@ -2273,9 +2294,13 @@ var Canvas = /** @class */ (function () {
                 return;
             }
             //过滤table2图元
-            if (!rect) {
+            if (!rect && !pen.dbInput) {
                 _this.setInputStyle(pen);
             }
+            else {
+                _this.inputDiv.style.width = '100%';
+                _this.inputDiv.style.height = '100%';
+            }
             var textRect = rect || pen.calculative.worldTextRect;
             //value和innerText问题
             var preInputText = pen.calculative.tempText || pen.text + '' || '';
@@ -2500,6 +2525,9 @@ var Canvas = /** @class */ (function () {
                     pen.text = _this.inputDiv.dataset.value;
                     pen.calculative.text = pen.text;
                     _this.inputDiv.dataset.penId = undefined;
+                    if (pen.name === 'text' && pen.textAutoAdjust) {
+                        calcTextAutoWidth(pen);
+                    }
                     calcTextRect(pen);
                     _this.patchFlags = true;
                     _this.pushHistory({
@@ -2713,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;
@@ -3148,7 +3187,6 @@ var Canvas = /** @class */ (function () {
                 },
             ],
         });
-        this.inactive();
     };
     /**
      * 拖拽结束，数据更新到 active.pens
@@ -3189,6 +3227,9 @@ var Canvas = /** @class */ (function () {
         // active 消息表示拖拽结束
         // this.store.emitter.emit('active', this.store.active);
         this.initImageCanvas(this.store.active);
+        // 避免选中图元的出错情况，this.dock为undefined
+        if (!this.dock)
+            return;
         var _a = this.dock, xDock = _a.xDock, yDock = _a.yDock;
         var dockPen;
         if (xDock) {
@@ -4470,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;
@@ -4625,7 +4667,8 @@ var Canvas = /** @class */ (function () {
             // 线宽为 0 ，看不到外边框，拖动过程中给个外边框
             pen.lineWidth === 0 && (value.lineWidth = 1);
             // TODO: 例如 pen.name = 'triangle' 的情况，但有图片，是否还需要变成矩形呢？
-            if (isDomShapes.includes(pen.name) ||
+            if (pen.name.endsWith('Dom') ||
+                isDomShapes.includes(pen.name) ||
                 _this.store.options.domShapes.includes(pen.name) ||
                 pen.image) {
                 // 修改名称会执行 onDestroy ，清空它
@@ -4934,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;
         }
@@ -6282,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) {