@meta2d/core 1.0.79 → 1.0.81

package/src/core.d.ts

@@ -103,6 +103,7 @@ export declare class Meta2d {
     open(data?: Meta2dData, render?: boolean): void;
     cacheData(id: string): void;
     loadCacheData(id: string): void;
+    loadLineAnimateDraws(): void;
     statistics(): {
         图元总数量: number;
         图片图元数量: number;
@@ -148,6 +149,8 @@ export declare class Meta2d {
     register: typeof register;
     registerCanvasDraw: typeof registerCanvasDraw;
     registerAnchors: typeof registerAnchors;
+    registerLineAnimateDraws: (name: any, drawFunc: any) => void;
+    updateLineAnimateDraws(name: any, option: any): void;
     registerMoveDock(dock: (store: Meta2dStore, rect: Rect, pens: Pen[], offset: Point) => {
         xDock: Point;
         yDock: Point;
@@ -278,6 +281,7 @@ export declare class Meta2d {
         topic?: string;
         url?: string;
         method?: string;
+        name?: string;
     }): void;
     setDatas(datas: {
         dataId?: string;

package/src/core.js

@@ -229,7 +229,16 @@ export class Meta2d {
     initEventFns() {
         this.events[EventAction.Link] = (pen, e) => {
             if (window && e.value && typeof e.value === 'string') {
-                window.open(e.value, e.params ?? '_blank');
+                let url = e.value;
+                if (url.includes('${')) {
+                    let keys = url.match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+                    if (keys) {
+                        keys?.forEach((key) => {
+                            url = url.replace(`\${${key}}`, pen[key]);
+                        });
+                    }
+                }
+                window.open(url, e.params ?? '_blank');
                 return;
             }
             console.warn('[meta2d] Link param is not a string');
@@ -239,13 +248,34 @@ export class Meta2d {
             const value = e.value;
             if (value && typeof value === 'object') {
                 const pens = e.params ? this.find(e.params) : this.find(pen.id);
+                const _value = {};
+                for (let key in value) {
+                    if (value[key]?.id) {
+                        _value[key] = this.store.pens[value[key].id]?.[value[key].key];
+                    }
+                    else {
+                        if (typeof value[key] === 'string' && value[key].includes('${')) {
+                            let __value = value[key];
+                            let keys = __value.match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+                            if (keys) {
+                                keys.forEach((key) => {
+                                    __value = __value.replace(`\${${key}}`, pen[key] || this.getDynamicParam(key));
+                                });
+                            }
+                            _value[key] = __value;
+                        }
+                        else {
+                            _value[key] = value[key];
+                        }
+                    }
+                }
                 pens.forEach((pen) => {
-                    if (value.hasOwnProperty('visible')) {
-                        if (pen.visible !== value.visible) {
-                            this.setVisible(pen, value.visible);
+                    if (_value.hasOwnProperty('visible')) {
+                        if (pen.visible !== _value.visible) {
+                            this.setVisible(pen, _value.visible);
                         }
                     }
-                    this.setValue({ id: pen.id, ...value }, { render: false, doEvent: false });
+                    this.setValue({ id: pen.id, ..._value }, { render: false, doEvent: false });
                 });
                 this.render();
                 return;
@@ -526,7 +556,19 @@ export class Meta2d {
                     value[item.prop] = pen[item.key];
                 }
                 else {
-                    value[item.prop] = this.convertType(item.value, item.type);
+                    if (typeof item.value === 'string' && item.value.includes('${')) {
+                        let _value = item.value;
+                        let keys = _value.match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+                        if (keys) {
+                            keys.forEach((key) => {
+                                _value = _value.replace(`\${${key}}`, this.getDynamicParam(key));
+                            });
+                        }
+                        value[item.prop] = _value;
+                    }
+                    else {
+                        value[item.prop] = this.convertType(item.value, item.type);
+                    }
                 }
             }
         });
@@ -876,6 +918,7 @@ export class Meta2d {
         this.initBindDatas();
         this.initBinds();
         this.doInitFn();
+        this.loadLineAnimateDraws();
         this.initMessageEvents();
         this.initGlobalTriggers();
         this.startAnimate();
@@ -954,6 +997,12 @@ export class Meta2d {
         });
         this.render();
     }
+    loadLineAnimateDraws() {
+        globalStore.lineAnimateDraws = {};
+        Object.entries(this.store.data.lineAnimateDraws).forEach(([key, drawFunc]) => {
+            globalStore.lineAnimateDraws[key] = eval(drawFunc);
+        });
+    }
     statistics() {
         const num = this.store.data.pens.length;
         const imgNum = this.store.data.pens.filter((pen) => pen.image).length;
@@ -1320,6 +1369,22 @@ export class Meta2d {
     register = register;
     registerCanvasDraw = registerCanvasDraw;
     registerAnchors = registerAnchors;
+    registerLineAnimateDraws = (name, drawFunc) => {
+        drawFunc = typeof drawFunc === 'string' ? drawFunc : drawFunc.toString();
+        this.store.data.lineAnimateDraws[name] = drawFunc;
+        // 同步到store
+        globalStore.lineAnimateDraws[name] = eval(drawFunc);
+    };
+    updateLineAnimateDraws(name, option) {
+        if (!option)
+            return;
+        delete this.store.data.lineAnimateDraws[name];
+        delete globalStore.lineAnimateDraws[name];
+        if (option === -1) { // -1 表示删除
+            return;
+        }
+        this.registerLineAnimateDraws(option.name || name, option.code);
+    }
     // customeDock = (store, rect, pens, offset) => {xDock, yDock}
     // customDock return:
     // {
@@ -1469,6 +1534,7 @@ export class Meta2d {
             pen.currentAnimation = undefined;
             pen.calculative.pause = undefined;
             pen.calculative.start = undefined;
+            pen.calculative.cycleStart = undefined;
             pen.calculative.duration = undefined;
             pen.calculative.animatePos = 0;
             this.store.animates.delete(pen);
@@ -1885,6 +1951,9 @@ export class Meta2d {
             ...Object.keys(this.store.bind),
             ...Object.keys(this.store.bindDatas),
         ];
+        Object.entries(globalStore.lineAnimateDraws).forEach(([key, drawFunc]) => {
+            data.lineAnimateDraws[key] = drawFunc.toString();
+        });
         return data;
     }
     copy(pens) {
@@ -2291,7 +2360,7 @@ export class Meta2d {
     connectSSE(net) {
         this.eventSources[net.index] = new EventSource(net.url, { withCredentials: net.withCredentials });
         this.eventSources[net.index].onmessage = (e) => {
-            this.socketCallback(e.data, { type: 'SSE', url: net.url });
+            this.socketCallback(e.data, { type: 'SSE', url: net.url, name: net.name });
         };
         this.eventSources[net.index].onerror = (error) => {
             this.store.emitter.emit('error', { type: 'SSE', error });
@@ -2320,12 +2389,30 @@ export class Meta2d {
             }
         }
         net.times = 0;
-        this.mqttClients[net.index] = mqtt.connect(url, net.options);
+        let options = deepClone(net.options);
+        if (options?.username && options.username.includes('${')) {
+            let keys = options.username.match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+            if (keys) {
+                keys.forEach((key) => {
+                    options.username = options.username.replace(`\${${key}}`, this.getDynamicParam(key));
+                });
+            }
+        }
+        if (options?.password && options.password.includes('${')) {
+            let keys = options.password.match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+            if (keys) {
+                keys.forEach((key) => {
+                    options.password = options.password.replace(`\${${key}}`, this.getDynamicParam(key));
+                });
+            }
+        }
+        this.mqttClients[net.index] = mqtt.connect(url, options);
         this.mqttClients[net.index].on('message', (topic, message) => {
             this.socketCallback(message.toString(), {
                 topic,
                 type: 'mqtt',
                 url: net.url,
+                name: net.name
             });
         });
         this.mqttClients[net.index].on('error', (error) => {
@@ -2341,7 +2428,16 @@ export class Meta2d {
             }
         });
         if (net.topics) {
-            this.mqttClients[net.index].subscribe(net.topics.split(','));
+            let topics = net.topics;
+            if (topics.indexOf('${') > -1) {
+                let keys = topics.match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+                if (keys) {
+                    keys.forEach((key) => {
+                        topics = topics.replace(`\${${key}}`, this.getDynamicParam(key));
+                    });
+                }
+            }
+            this.mqttClients[net.index].subscribe(topics.split(','));
         }
     }
     connectNetWebSocket(net) {
@@ -2361,7 +2457,7 @@ export class Meta2d {
         }
         this.websockets[net.index] = new WebSocket(url, net.protocols || undefined);
         this.websockets[net.index].onmessage = (e) => {
-            this.socketCallback(e.data, { type: 'websocket', url: net.url });
+            this.socketCallback(e.data, { type: 'websocket', url: net.url, name: net.name });
         };
         this.websockets[net.index].onerror = (error) => {
             this.store.emitter.emit('error', { type: 'websocket', error });
@@ -2735,7 +2831,7 @@ export class Meta2d {
             });
             if (res.ok) {
                 const data = await res.text();
-                this.socketCallback(data, { type: 'http', url: req.url });
+                this.socketCallback(data, { type: 'http', url: req.url, name: req.name });
             }
             else {
                 _req.times++;
@@ -3158,13 +3254,19 @@ export class Meta2d {
                 break;
             case 'change':
                 e.pen && updateFormData(e.pen);
-                this.store.data.locked &&
-                    e &&
-                    !e.disabled &&
-                    this.doEvent(e, eventName);
+                if (e.pen) {
+                    this.store.data.locked && !e.pen.disabled &&
+                        this.doEvent(e.pen, eventName);
+                }
+                else {
+                    this.store.data.locked &&
+                        e &&
+                        !e.disabled &&
+                        this.doEvent(e, eventName);
+                }
                 break;
         }
-        this.doMessageEvent(eventName);
+        this.doMessageEvent(eventName, e);
     };
     doEvent = (pen, eventName) => {
         if (!pen) {
@@ -3936,7 +4038,7 @@ export class Meta2d {
                     else {
                         right = 0;
                     }
-                    let ratio = (this.canvas.width - left - right) / (rect.width);
+                    let ratio = (this.canvas.width - left - right) / (rect.width - left - right);
                     pens.forEach((pen) => {
                         if (pen.image && pen.imageRatio) {
                             if (pen.calculative.worldRect.width / this.canvas.width > 0.1) {
@@ -3959,7 +4061,7 @@ export class Meta2d {
                         if (pen.externElement) {
                             pen.onResize?.(pen);
                         }
-                        if (pen.children.length) {
+                        if (pen.children?.length) {
                             const cPens = getAllChildren(pen, this.store);
                             cPens.forEach((cPen) => {
                                 if (cPen.externElement) {