@meta2d/core 1.1.21 → 1.1.23

package/package.json

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

@@ -81,6 +81,8 @@ export declare class Canvas {
     private lastAnimateRender;
     animateRendering: boolean;
     renderTimer: number;
+    private viewAnimation?;
+    private viewAnimationTimer?;
     initPens?: Pen[];
     pointSize: 8;
     pasteOffset: boolean;
@@ -153,6 +155,7 @@ export declare class Canvas {
     dropPens(pens: Pen[], e: Point): Promise<void>;
     randomCombineId(pen: Pen, pens: Pen[], parentId?: string): Pen;
     addPens(pens: Pen[], history?: boolean, abs?: boolean): Promise<Pen[]>;
+    addPensSync(pens: Pen[], history?: boolean, abs?: boolean): Pen[];
     ontouchstart: (e: TouchEvent) => void;
     ontouchmove: (event: TouchEvent) => void;
     ontouchend: (event: TouchEvent) => void;
@@ -305,6 +308,16 @@ export declare class Canvas {
         x: number;
         y: number;
     }): void;
+    animateView(options: {
+        x?: number;
+        y?: number;
+        scale?: number;
+        pen?: Pen;
+        duration?: number;
+        easing?: string;
+        center?: Point;
+    }): void;
+    private animateViewFrame;
     templateScale(scale: number, center?: {
         x: number;
         y: number;

package/src/canvas/canvas.js

@@ -4,7 +4,7 @@ import { calcRotate, distance, getDistance, hitPoint, PointType, PrevNextType, r
 import { calcCenter, calcRightBottom, calcRelativePoint, getRect, getRectOfPoints, pointInRect, pointInSimpleRect, rectInRect, rectToPoints, resizeRect, translateRect, pointInPolygon } from '../rect';
 import { EditType, globalStore, } from '../store';
 import { deepClone, fileToBase64, uploadFile, formatPadding, rgba, s8, toNumber, } from '../utils';
-import { inheritanceProps, defaultCursors, defaultDrawLineFns, HotkeyType, HoverType, MouseRight, rotatedCursors, } from '../data';
+import { inheritanceProps, defaultCursors, defaultDrawLineFns, HotkeyType, HoverType, MouseRight, rotatedCursors, Direction, } from '../data';
 import { createOffscreen } from './offscreen';
 import { curve, mind, getLineLength, getLineRect, pointInLine, simplify, smoothLine, lineSegment, getLineR, lineInRect, } from '../diagrams';
 import { polyline, translatePolylineAnchor } from '../diagrams/line/polyline';
@@ -21,6 +21,8 @@ import { CanvasTemplate } from './canvasTemplate';
 import { getLinePoints } from '../diagrams/line';
 import { Popconfirm } from '../popconfirm';
 import { le5leTheme, themeKeys } from '../theme';
+import { getFont } from '../pen/render';
+import { getEasingFunction } from '../utils/easing';
 export const movingSuffix = '-moving';
 export class Canvas {
     parent;
@@ -81,6 +83,8 @@ export class Canvas {
     lastAnimateRender = 0;
     animateRendering = false;
     renderTimer;
+    viewAnimation;
+    viewAnimationTimer;
     initPens;
     pointSize = 8;
     pasteOffset = true;
@@ -124,7 +128,7 @@ export class Canvas {
         this.parent = parent;
         this.parentElement = parentElement;
         this.store = store;
-        this.canvasTemplate = new CanvasTemplate(parentElement, store);
+        this.canvasTemplate = new CanvasTemplate(parentElement, store, this);
         this.canvasTemplate.canvas.style.zIndex = '1';
         this.canvasImageBottom = new CanvasImage(parentElement, store, true);
         this.canvasImageBottom.canvas.style.zIndex = '2';
@@ -414,6 +418,7 @@ export class Canvas {
         }
     };
     onwheel = (e) => {
+        this.viewAnimation = undefined;
         //输入模式不允许滚动
         if (this.inputDiv.contentEditable === 'true') {
             return;
@@ -1375,7 +1380,37 @@ export class Canvas {
         }
         return list;
     }
+    addPensSync(pens, history, abs) {
+        const list = [];
+        // for (const pen of pens) {
+        //   if (!pen.id) {
+        //     pen.id = s8();
+        //   }
+        //   !pen.calculative && (pen.calculative = { canvas: this });
+        //   this.store.pens[pen.id] = pen;
+        // }
+        for (const pen of pens) {
+            if (this.beforeAddPen && this.beforeAddPen(pen) != true) {
+                continue;
+            }
+            if (abs && !pen.parentId) {
+                pen.x = pen.x * this.store.data.scale + this.store.data.origin.x;
+                pen.y = pen.y * this.store.data.scale + this.store.data.origin.y;
+                pen.width = pen.width * this.store.data.scale;
+                pen.height = pen.height * this.store.data.scale;
+            }
+            this.makePen(pen);
+            list.push(pen);
+        }
+        this.render();
+        this.store.emitter.emit('add', list);
+        if (history) {
+            this.pushHistory({ type: EditType.Add, pens: deepClone(list, true) });
+        }
+        return list;
+    }
     ontouchstart = (e) => {
+        this.viewAnimation = undefined;
         this.lastTouchY = e.touches[0].clientY;
         if (this.store.data.locked === LockState.Disable) {
             return;
@@ -1637,6 +1672,7 @@ export class Canvas {
         };
     }
     onMouseDown = (e) => {
+        this.viewAnimation = undefined;
         if (e.buttons === 2 && !this.drawingLine) {
             this.mouseRight = MouseRight.Down;
         }
@@ -4366,6 +4402,10 @@ export class Canvas {
             now = performance.now();
         }
         if (!this.patchFlags) {
+            if (this.store.options.gridAlwaysRender && (this.store.options.grid || this.store.data.grid)) {
+                this.canvasTemplate.bgPatchFlags = true;
+                this.canvasTemplate.render();
+            }
             return;
         }
         if (patchFlags != null) {
@@ -4695,7 +4735,9 @@ export class Canvas {
         ctx.translate(0.5, 0.5);
         ctx.strokeStyle = pen.anchorColor || this.store.styles.anchorColor;
         ctx.fillStyle = pen.anchorBackground || this.store.options.anchorBackground;
-        pen.calculative.worldAnchors.forEach((anchor) => {
+        const { fontStyle, fontWeight, fontSize, fontFamily, lineHeight } = pen.calculative;
+        const scale = this.store.data.scale;
+        pen.calculative.worldAnchors.forEach((anchor, index) => {
             if (anchor.hidden || anchor.locked > LockState.DisableEdit) {
                 return;
             }
@@ -4760,6 +4802,71 @@ export class Canvas {
             else if (anchor.color || anchor.background) {
                 ctx.restore();
             }
+            if (anchor.label) {
+                ctx.save();
+                ctx.font = getFont({
+                    fontStyle: anchor.labelStyle?.fontStyle || fontStyle,
+                    fontWeight: anchor.labelStyle?.fontWeight || fontWeight,
+                    fontFamily: anchor.labelStyle?.fontFamily || fontFamily,
+                    lineHeight: anchor.labelStyle?.lineHeight || lineHeight,
+                    fontSize: anchor.labelStyle?.fontSize * scale || fontSize,
+                });
+                const rX = pen.anchors[index].x;
+                const rY = pen.anchors[index].y;
+                let xGap = 0;
+                let yGap = 0;
+                if (anchor.labelDirection !== undefined) {
+                    if (anchor.labelDirection === Direction.Left) {
+                        ctx.textAlign = 'right';
+                        ctx.textBaseline = 'middle';
+                        xGap = -(anchor.labelGap || 10) * scale;
+                    }
+                    else if (anchor.labelDirection === Direction.Right) {
+                        ctx.textAlign = 'left';
+                        ctx.textBaseline = 'middle';
+                        xGap = (anchor.labelGap || 10) * scale;
+                    }
+                    else if (anchor.labelDirection === Direction.Up) {
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'bottom';
+                        yGap = -(anchor.labelGap || 5) * scale;
+                    }
+                    else if (anchor.labelDirection === Direction.Bottom) {
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'top';
+                        yGap = (anchor.labelGap || 5) * scale;
+                    }
+                }
+                else {
+                    if (rX < 0.1) {
+                        ctx.textAlign = 'left';
+                        ctx.textBaseline = 'middle';
+                        xGap = (anchor.labelGap || 10) * scale;
+                    }
+                    else if (rX > 0.9) {
+                        ctx.textAlign = 'right';
+                        ctx.textBaseline = 'middle';
+                        xGap = -(anchor.labelGap || 10) * scale;
+                    }
+                    else {
+                        ctx.textAlign = 'center';
+                        if (rY < 0.1) {
+                            ctx.textBaseline = 'top';
+                            yGap = (anchor.labelGap || 5) * scale;
+                        }
+                        else if (rY > 0.9) {
+                            ctx.textBaseline = 'bottom';
+                            yGap = -(anchor.labelGap || 5) * scale;
+                        }
+                        else {
+                            ctx.textBaseline = 'middle';
+                        }
+                    }
+                }
+                ctx.fillStyle = anchor.labelStyle?.textColor || getTextColor(pen, this.store);
+                ctx.fillText(anchor.label, anchor.x + xGap, anchor.y + yGap);
+                ctx.restore();
+            }
             //根父节点
             if (!pen.parentId && pen.children && pen.children.length > 0) {
                 if (anchor === this.store.hoverAnchor) {
@@ -4927,6 +5034,184 @@ export class Canvas {
         this.store.emitter.emit('scale', this.store.data.scale);
         // });
     }
+    animateView(options) {
+        if (this.viewAnimationTimer) {
+            cancelAnimationFrame(this.viewAnimationTimer);
+            this.viewAnimationTimer = undefined;
+        }
+        this.viewAnimation = undefined;
+        const duration = options.duration ?? 300;
+        const easingName = options.easing ?? 'easeOutCubic';
+        const center = options.center
+            ? { ...options.center }
+            : {
+                x: this.width / 2,
+                y: this.height / 2,
+            };
+        let toX = options.x !== undefined ? options.x : this.store.data.x;
+        let toY = options.y !== undefined ? options.y : this.store.data.y;
+        let toScale = options.scale !== undefined ? options.scale : this.store.data.scale;
+        const minScale = this.store.data.minScale || this.store.options.minScale;
+        const maxScale = this.store.data.maxScale || this.store.options.maxScale;
+        if (toScale < minScale)
+            toScale = minScale;
+        if (toScale > maxScale)
+            toScale = maxScale;
+        if (options.pen) {
+            const viewCenter = {
+                x: this.width / 2,
+                y: this.height / 2,
+            };
+            toX =
+                viewCenter.x -
+                    options.pen.calculative.worldRect.x -
+                    options.pen.calculative.worldRect.width / 2;
+            toY =
+                viewCenter.y -
+                    options.pen.calculative.worldRect.y -
+                    options.pen.calculative.worldRect.height / 2;
+        }
+        if (!options.pen &&
+            Math.abs(toX - this.store.data.x) < 0.5 &&
+            Math.abs(toY - this.store.data.y) < 0.5 &&
+            Math.abs(toScale - this.store.data.scale) < 0.001) {
+            return;
+        }
+        this.calibrateMouse(center);
+        this.viewAnimation = {
+            startTime: performance.now(),
+            duration,
+            fromX: this.store.data.x,
+            fromY: this.store.data.y,
+            fromScale: this.store.data.scale,
+            toX,
+            toY,
+            toScale,
+            easing: getEasingFunction(easingName),
+            center,
+            pen: options.pen,
+        };
+        this.animateViewFrame();
+    }
+    animateViewFrame = () => {
+        if (!this.viewAnimation) {
+            return;
+        }
+        const now = performance.now();
+        const { startTime, duration, fromX, fromY, fromScale, toX, toY, toScale, easing, center, pen, } = this.viewAnimation;
+        let progress = Math.min(1, (now - startTime) / duration);
+        progress = easing(progress);
+        const prevScale = this.store.data.scale;
+        const currentScale = fromScale + (toScale - fromScale) * progress;
+        const s = currentScale / prevScale;
+        if (s !== 1) {
+            this.store.data.scale = currentScale;
+            this.store.data.center = center;
+            scalePoint(this.store.data.origin, s, center);
+            this.store.data.pens.forEach((p) => {
+                p.onScale && p.onScale(p);
+                if (p.parentId) {
+                    return;
+                }
+                scalePen(p, s, center);
+                if (p.isRuleLine) {
+                    const lineScale = 1 / s;
+                    const lineCenter = p.calculative.worldRect.center;
+                    if (!p.width) {
+                        scalePen(p, lineScale, lineCenter);
+                    }
+                    else if (!p.height) {
+                        scalePen(p, lineScale, lineCenter);
+                    }
+                }
+                this.updatePenRect(p, { worldRectIsReady: true });
+                this.execPenResize(p);
+            });
+            this.calcActiveRect();
+        }
+        // Calculate current x, y
+        let currentX;
+        let currentY;
+        if (pen) {
+            // 参考 gotoView 的计算方式，基于当前 worldRect 实时计算
+            const viewCenter = {
+                x: this.width / 2,
+                y: this.height / 2,
+            };
+            const targetX = viewCenter.x -
+                pen.calculative.worldRect.x -
+                pen.calculative.worldRect.width / 2;
+            const targetY = viewCenter.y -
+                pen.calculative.worldRect.y -
+                pen.calculative.worldRect.height / 2;
+            currentX = fromX + (targetX - fromX) * progress;
+            currentY = fromY + (targetY - fromY) * progress;
+        }
+        else {
+            currentX = fromX + (toX - fromX) * progress;
+            currentY = fromY + (toY - fromY) * progress;
+        }
+        const prevX = this.store.data.x;
+        const prevY = this.store.data.y;
+        this.store.data.x = currentX;
+        this.store.data.y = currentY;
+        if (this.scroll && this.scroll.isShow) {
+            this.scroll.translate(currentX - prevX, currentY - prevY);
+        }
+        this.onMovePens();
+        this.canvasTemplate.init();
+        this.canvasImage.init();
+        this.canvasImageBottom.init();
+        this.render();
+        if (progress < 1) {
+            this.viewAnimationTimer = requestAnimationFrame(this.animateViewFrame);
+        }
+        else {
+            // Ensure final values are exact
+            if (!pen) {
+                this.store.data.x = toX;
+                this.store.data.y = toY;
+            }
+            if (Math.abs(this.store.data.scale - toScale) > 0.001) {
+                const finalS = toScale / this.store.data.scale;
+                this.store.data.scale = toScale;
+                this.store.data.center = center;
+                scalePoint(this.store.data.origin, finalS, center);
+                this.store.data.pens.forEach((p) => {
+                    p.onScale && p.onScale(p);
+                    if (p.parentId) {
+                        return;
+                    }
+                    scalePen(p, finalS, center);
+                    if (p.isRuleLine) {
+                        const lineScale = 1 / finalS;
+                        const lineCenter = p.calculative.worldRect.center;
+                        if (!p.width) {
+                            scalePen(p, lineScale, lineCenter);
+                        }
+                        else if (!p.height) {
+                            scalePen(p, lineScale, lineCenter);
+                        }
+                    }
+                    this.updatePenRect(p, { worldRectIsReady: true });
+                    this.execPenResize(p);
+                });
+                this.calcActiveRect();
+                this.onMovePens();
+                this.canvasTemplate.init();
+                this.canvasImage.init();
+                this.canvasImageBottom.init();
+                this.render();
+            }
+            this.viewAnimation = undefined;
+            this.viewAnimationTimer = undefined;
+            this.store.emitter.emit('scale', this.store.data.scale);
+            this.store.emitter.emit('translate', {
+                x: this.store.data.x,
+                y: this.store.data.y,
+            });
+        }
+    };
     templateScale(scale, center = { x: 0, y: 0 }) {
         const { minScale, maxScale } = this.store.options;
         if (!(scale >= minScale && scale <= maxScale)) {
@@ -6831,11 +7116,10 @@ export class Canvas {
         if (pen.fontWeight) {
             style += `font-weight: ${pen.fontWeight};`;
         }
+        let ml = 0;
         if (pen.textLeft) {
-            style += `margin-left:${scale > 1
-                ? pen.textLeft * scale
-                : (pen.textLeft * scale) // scale
-            }px;`;
+            ml = scale > 1 ? pen.textLeft * scale : (pen.textLeft * scale);
+            style += `margin-left:${ml}px;`;
         }
         if (pen.textTop) {
             style += `margin-top:${scale > 1
@@ -6892,7 +7176,7 @@ export class Canvas {
                 if (tem < 0) {
                     tem = 0;
                 }
-                style += `width:${pen.fontSize * scale < 12 ? tem * scale : tem * scale}px;`;
+                style += `width:${pen.fontSize * scale < 12 ? tem * scale - ml : tem * scale - ml}px;`;
             }
             // if (pen.whiteSpace === 'pre-line') {
             //   //回车换行
@@ -6919,9 +7203,9 @@ export class Canvas {
                 Math.floor(pen.calculative.worldRect.height /
                     scale /
                     (pen.lineHeight * pen.fontSize));
-            if (textWidth > contentWidth) {
-                style += 'justify-content: start;';
-            }
+            // if (textWidth > contentWidth) {
+            //   style += 'justify-content: start;';
+            // }
         }
         sheet.deleteRule(0);
         sheet.deleteRule(0);
@@ -7019,7 +7303,9 @@ export class Canvas {
             sheet.insertRule('.meta2d-input ul{position:absolute;top:100%;margin-top:4px; width:calc(100% + 10px);min-height:30px;border-radius: 2px;box-shadow: 0 2px 8px #00000026;list-style-type: none;background-color: #fff;padding: 4px 0;max-height: 105px;overflow-y: auto;}');
             sheet.insertRule('.meta2d-input ul li{padding: 5px 12px;line-height: 22px;white-space: nowrap;cursor: pointer;}');
             sheet.insertRule('.meta2d-input ul li:hover{background: #eeeeee;}');
-            sheet.insertRule(`.input-div::-webkit-scrollbar {display:none}`);
+            if (CSS.supports?.('selector(.input-div::-webkit-scrollbar)')) {
+                sheet.insertRule(`.input-div::-webkit-scrollbar {display:none}`);
+            }
             sheet.insertRule(`.input-div{scrollbar-width: none;}`);
             sheet.insertRule('.meta2d-input .input-div{resize:none;border:none;outline:none;background:transparent;flex-grow:1;height:100%;width: 100%;left:0;top:0;display:flex;text-align: center;justify-content: center;flex-direction: column;}');
             sheet.insertRule(`.input-div div{}`);