@meta2d/core 1.1.21 → 1.1.23

package/src/core.js

@@ -2,7 +2,7 @@ import { clearIframes, commonAnchors, commonPens, cube, updateIframes, reset, up
 import { Canvas } from './canvas';
 import { calcInView, calcTextDrawRect, calcTextLines, calcTextRect, facePen, formatAttrs, getAllChildren, getFromAnchor, getParent, getToAnchor, getWords, LockState, PenType, renderPenRaw, setElemPosition, connectLine, nearestAnchor, setChildValue, isAncestor, isShowChild, CanvasLayer, validationPlugin, setLifeCycleFunc, getAllFollowers, isInteraction, calcWorldAnchors, isDomShapes, defaultFormat, findOutliersByZScore, } from './pen';
 import { rotatePoint } from './point';
-import { clearStore, EditType, globalStore, register, registerAnchors, registerCanvasDraw, useStore, } from './store';
+import { clearStore, EditType, globalStore, register, registerAnchors, registerCanvasDraw, registerGridDrawer, unregisterGridDrawer, useStore, } from './store';
 import { formatPadding, loadCss, s8, valueInArray, valueInRange, } from './utils';
 import { calcCenter, calcRelativeRect, calcRightBottom, getRect, rectInRect, } from './rect';
 import { deepClone } from './utils/clone';
@@ -32,6 +32,12 @@ export class Meta2d {
     events = {};
     map;
     mapTimer;
+    /**
+     * fillView 首次填充前各 fit 顶层图元的原始几何快照（设计坐标系，与 scale/origin 无关）。
+     * 用于保证多次调用 fillView 的幂等性：每次填充前先还原到原始几何，再执行拉伸，
+     * 避免在已拉伸的结果上重复拉伸导致超出屏幕。open 新图纸时置空。
+     */
+    fillViewSnapshot = null;
     constructor(parent, opts = {}) {
         this.store = useStore(s8());
         this.setOptions(opts);
@@ -201,12 +207,14 @@ export class Meta2d {
         this.render();
     }
     setDatabyOptions(options = {}) {
-        const { color, activeColor, activeBackground, grid, gridColor, gridSize, fromArrow, toArrow, rule, ruleColor, textColor, x = 0, y = 0, } = options;
+        const { color, activeColor, activeBackground, grid, gridColor, gridSize, gridType, gridScope, fromArrow, toArrow, rule, ruleColor, textColor, x = 0, y = 0, } = options;
         this.setRule({ rule, ruleColor });
         this.setGrid({
             grid,
             gridColor,
             gridSize,
+            gridType,
+            gridScope,
         });
         this.store.data = Object.assign(this.store.data, {
             textColor,
@@ -927,9 +935,12 @@ export class Meta2d {
     async addPen(pen, history, emit = true, abs = false) {
         return await this.canvas.addPen(pen, history, emit, abs);
     }
-    addPenSync(pen, history, emit = true, abs = false) {
+    addPenSync(pen, history, emit = true, abs = true) {
         return this.canvas.addPenSync(pen, history, emit, abs);
     }
+    addPensSync(pens, history, abs = true) {
+        return this.canvas.addPensSync(pens, history, abs);
+    }
     async addPens(pens, history, abs = false) {
         return await this.canvas.addPens(pens, history, abs);
     }
@@ -986,11 +997,13 @@ export class Meta2d {
         // this.store.patchFlagsBackground = true;
         this.canvas && (this.canvas.canvasTemplate.bgPatchFlags = true);
     }
-    setGrid({ grid = this.store.data.grid, gridColor = this.store.data.gridColor, gridSize = this.store.data.gridSize, gridRotate = this.store.data.gridRotate, } = {}) {
+    setGrid({ grid = this.store.data.grid, gridColor = this.store.data.gridColor, gridSize = this.store.data.gridSize, gridRotate = this.store.data.gridRotate, gridType = this.store.data.gridType, gridScope = this.store.data.gridScope, } = {}) {
         this.store.data.grid = grid;
         this.store.data.gridColor = gridColor;
         this.store.data.gridSize = gridSize < 0 ? 0 : gridSize;
         this.store.data.gridRotate = gridRotate;
+        this.store.data.gridType = gridType;
+        this.store.data.gridScope = gridScope;
         // this.store.patchFlagsBackground = true;
         this.canvas && (this.canvas.canvasTemplate.bgPatchFlags = true);
     }
@@ -1001,6 +1014,8 @@ export class Meta2d {
     }
     open(data, render = true) {
         this.clear(false, data?.template);
+        // 打开新图纸，原始几何快照失效，下次 fillView 时重新采集
+        this.fillViewSnapshot = null;
         this.canvas.autoPolylineFlag = true;
         if (data) {
             // 根据图纸的主题设置主题
@@ -1583,6 +1598,8 @@ export class Meta2d {
     register = register;
     registerCanvasDraw = registerCanvasDraw;
     registerAnchors = registerAnchors;
+    registerGridDrawer = registerGridDrawer;
+    unregisterGridDrawer = unregisterGridDrawer;
     registerLineAnimateDraws = (name, drawFunc) => {
         this.store.data.lineAnimateDraws[name] = drawFunc;
         // 同步到store
@@ -1696,6 +1713,9 @@ export class Meta2d {
                 }
                 if (index !== -1 && index !== undefined) {
                     const animate = deepClone(pen.animations[index]);
+                    if (!animate.animateCycle) {
+                        animate.animateCycle = 0;
+                    }
                     animate.animateName = animate.name;
                     delete animate.name;
                     animate.currentAnimation = index;
@@ -2230,7 +2250,13 @@ export class Meta2d {
             this.store.data.websocket = websocket;
         }
         if (this.store.data.websocket) {
-            this.websocket = new WebSocket(this.store.data.websocket, this.store.data.websocketProtocols || undefined);
+            try {
+                this.websocket = new WebSocket(this.store.data.websocket, this.store.data.websocketProtocols || undefined);
+            }
+            catch (error) {
+                this.store.emitter.emit('error', { type: 'websocket', error });
+                return;
+            }
             this.websocket.onmessage = (e) => {
                 this.socketCallback(e.data, {
                     type: 'websocket',
@@ -2494,7 +2520,10 @@ export class Meta2d {
         this.connectSqls();
     }
     reconnectNetwork(index) {
-        const net = this.store.data.networks[index];
+        const net = this.store.data.networks?.[index];
+        if (!net) {
+            return;
+        }
         if (net.protocol === 'mqtt') {
             this.mqttClients && this.mqttClients[net.index]?.end();
             this.connectNetMqtt(net);
@@ -3173,6 +3202,9 @@ export class Meta2d {
         }
     }
     penNetwork(pen) {
+        if (!pen.apiUrl) {
+            return;
+        }
         const penNetwork = {
             url: pen.apiUrl,
             method: pen.apiMethod,
@@ -3268,8 +3300,8 @@ export class Meta2d {
     }
     async requestHttp(_req) {
         let req = deepClone(_req);
-        const net = this.store.data.networks.filter((item) => item.protocol === 'http')[req.index];
-        if (net.preJs) {
+        const net = this.store.data.networks?.filter((item) => item.protocol === 'http')[req.index];
+        if (net?.preJs) {
             if (!net.preFn) {
                 const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
                 net.preFn = new AsyncFunction('network', net.preJs);
@@ -3912,11 +3944,9 @@ export class Meta2d {
                     }
                     event.actions.forEach((action) => {
                         if (action.timeout) {
-                            let timer = setTimeout(() => {
+                            setTimeout(() => {
                                 if (this.events[action.action]) {
                                     this.events[action.action](pen, action);
-                                    clearTimeout(timer);
-                                    timer = null;
                                 }
                             }, action.timeout);
                         }
@@ -3962,11 +3992,9 @@ export class Meta2d {
                     if (indexArr.includes(index)) {
                         trigger.actions?.forEach((event) => {
                             if (event.timeout) {
-                                let timer = setTimeout(() => {
+                                setTimeout(() => {
                                     if (this.events[event.action]) {
                                         this.events[event.action](pen, event);
-                                        clearTimeout(timer);
-                                        timer = null;
                                     }
                                 }, event.timeout);
                             }
@@ -4005,11 +4033,9 @@ export class Meta2d {
                 if (indexArr.includes(index)) {
                     trigger.actions?.forEach((event) => {
                         if (event.timeout) {
-                            let timer = setTimeout(() => {
+                            setTimeout(() => {
                                 if (this.events[event.action]) {
                                     this.events[event.action](pen, event);
-                                    clearTimeout(timer);
-                                    timer = null;
                                 }
                             }, event.timeout);
                         }
@@ -4044,11 +4070,9 @@ export class Meta2d {
                             if (flag) {
                                 state.actions?.forEach((event) => {
                                     if (event.timeout) {
-                                        let timer = setTimeout(() => {
+                                        setTimeout(() => {
                                             if (this.events[event.action]) {
                                                 this.events[event.action](pen, event);
-                                                clearTimeout(timer);
-                                                timer = null;
                                             }
                                         }, event.timeout);
                                     }
@@ -4087,7 +4111,14 @@ export class Meta2d {
                 }
                 if (flag) {
                     item.event.actions.forEach((action) => {
-                        this.events[action.action](item.pen, action, data);
+                        if (action.timeout) {
+                            setTimeout(() => {
+                                this.events[action.action](item.pen, action, data);
+                            }, action.timeout);
+                        }
+                        else {
+                            this.events[action.action](item.pen, action, data);
+                        }
                     });
                 }
             });
@@ -4553,6 +4584,75 @@ export class Meta2d {
             rect = this.getRect();
         }
         // const rect = this.getRect();
+        // 幂等处理：首次填充前记录各 fit 顶层图元的原始几何（设计坐标系，除以 scale、
+        // 相对 origin，从而与当前缩放/平移无关）；后续每次填充前先还原到原始几何，
+        // 避免在上一次已拉伸的基础上再次拉伸，导致多次适应屏幕时内容超出屏幕。
+        const { origin: _origin, scale: _scale } = this.store.data;
+        if (!this.fillViewSnapshot) {
+            this.fillViewSnapshot = new Map();
+            this.store.data.fits?.forEach((fit) => {
+                fit.children.forEach((id) => {
+                    const pen = this.store.pens[id];
+                    if (!pen) {
+                        return;
+                    }
+                    const wr = pen.calculative.worldRect;
+                    this.fillViewSnapshot.set(id, {
+                        x: (wr.x - _origin.x) / _scale,
+                        y: (wr.y - _origin.y) / _scale,
+                        width: wr.width / _scale,
+                        height: wr.height / _scale,
+                        textWidth: pen.textWidth != null ? pen.textWidth / _scale : undefined,
+                        colWidth: pen.colWidth,
+                        styleWidths: pen.styles?.map((style) => style.width),
+                        imageRatio: pen.imageRatio,
+                        ratio: pen.ratio,
+                    });
+                });
+            });
+        }
+        else {
+            this.fillViewSnapshot.forEach((snap, id) => {
+                const pen = this.store.pens[id];
+                if (!pen) {
+                    return;
+                }
+                pen.x = _origin.x + snap.x * _scale;
+                pen.y = _origin.y + snap.y * _scale;
+                pen.width = snap.width * _scale;
+                pen.height = snap.height * _scale;
+                if (snap.textWidth !== undefined) {
+                    pen.textWidth = snap.textWidth * _scale;
+                }
+                if (snap.colWidth !== undefined) {
+                    pen.colWidth = snap.colWidth;
+                }
+                if (snap.styleWidths) {
+                    pen.styles?.forEach((style, i) => {
+                        if (snap.styleWidths[i] !== undefined) {
+                            style.width = snap.styleWidths[i];
+                        }
+                    });
+                }
+                if (snap.imageRatio !== undefined) {
+                    pen.imageRatio = snap.imageRatio;
+                }
+                if (snap.ratio !== undefined) {
+                    pen.ratio = snap.ratio;
+                }
+                this.canvas.updatePenRect(pen, { worldRectIsReady: false });
+                if (pen.externElement) {
+                    pen.onResize?.(pen);
+                }
+                if (pen.children?.length) {
+                    getAllChildren(pen, this.store).forEach((cPen) => {
+                        if (cPen.externElement) {
+                            cPen.onResize?.(cPen);
+                        }
+                    });
+                }
+            });
+        }
         const wGap = this.canvas.width - rect.width;
         const hGap = this.canvas.height - rect.height;
         //宽度拉伸
@@ -5518,6 +5618,9 @@ export class Meta2d {
         this.canvas.canvasImageBottom.init();
         this.render();
     }
+    animateView(options) {
+        this.canvas.animateView(options);
+    }
     showMap() {
         if (!this.map) {
             this.map = new ViewMap(this.canvas);