@meta2d/core 1.1.22 → 1.1.24

package/package.json

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

@@ -22,6 +22,7 @@ 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;
@@ -82,6 +83,8 @@ export class Canvas {
     lastAnimateRender = 0;
     animateRendering = false;
     renderTimer;
+    viewAnimation;
+    viewAnimationTimer;
     initPens;
     pointSize = 8;
     pasteOffset = true;
@@ -125,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';
@@ -415,6 +418,7 @@ export class Canvas {
         }
     };
     onwheel = (e) => {
+        this.viewAnimation = undefined;
         //输入模式不允许滚动
         if (this.inputDiv.contentEditable === 'true') {
             return;
@@ -1376,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;
@@ -1638,6 +1672,7 @@ export class Canvas {
         };
     }
     onMouseDown = (e) => {
+        this.viewAnimation = undefined;
         if (e.buttons === 2 && !this.drawingLine) {
             this.mouseRight = MouseRight.Down;
         }
@@ -3571,6 +3606,12 @@ export class Canvas {
                     const i = this.store.data.pens.findIndex((item) => item.id === pen.id);
                     if (i > -1) {
                         pen.onDestroy?.(this.store.pens[pen.id]);
+                        const parent = pen.parentId
+                            ? this.store.pens[pen.parentId]
+                            : undefined;
+                        if (parent?.children) {
+                            parent.children = parent.children.filter((item) => item !== pen.id);
+                        }
                         this.store.data.pens.splice(i, 1);
                         this.store.pens[pen.id] = undefined;
                         if (!pen.calculative) {
@@ -3643,6 +3684,13 @@ export class Canvas {
                     }
                     // 先放进去，pens 可能是子节点在前，而父节点在后
                     this.store.pens[pen.id] = pen;
+                    if (pen.parentId) {
+                        !this.store.pens[pen.parentId].children &&
+                            (this.store.pens[pen.parentId].children = []);
+                        if (!this.store.pens[pen.parentId].children.includes(pen.id)) {
+                            this.store.pens[pen.parentId].children.push(pen.id);
+                        }
+                    }
                     if (pen.type && pen.lastConnected) {
                         for (let key in pen.lastConnected) {
                             this.store.pens[key] && (this.store.pens[key].connectedLines = pen.lastConnected[key]);
@@ -4367,6 +4415,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) {
@@ -4766,11 +4818,11 @@ export class Canvas {
             if (anchor.label) {
                 ctx.save();
                 ctx.font = getFont({
-                    fontStyle,
-                    fontWeight,
-                    fontFamily,
-                    fontSize,
-                    lineHeight,
+                    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;
@@ -4824,7 +4876,7 @@ export class Canvas {
                         }
                     }
                 }
-                ctx.fillStyle = getTextColor(pen, this.store);
+                ctx.fillStyle = anchor.labelStyle?.textColor || getTextColor(pen, this.store);
                 ctx.fillText(anchor.label, anchor.x + xGap, anchor.y + yGap);
                 ctx.restore();
             }
@@ -4995,6 +5047,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)) {
@@ -6899,11 +7129,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
@@ -6960,7 +7189,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') {
             //   //回车换行
@@ -6987,9 +7216,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);