@meta2d/core 1.0.80 → 1.0.81-alpha.1

package/src/core.d.ts

@@ -3,7 +3,7 @@ import { Canvas } from './canvas';
 import { Options, PenPlugin, PluginOptions } from './options';
 import { calcTextDrawRect, calcTextLines, calcTextRect, facePen, getWords, LockState, Pen, renderPenRaw, IValue, setElemPosition } from './pen';
 import { Point } from './point';
-import { EditAction, register, registerAnchors, registerCanvasDraw, registerLineAnimateDraws, Meta2dData, Meta2dStore, Network, HttpOptions, Sql } from './store';
+import { EditAction, register, registerAnchors, registerCanvasDraw, Meta2dData, Meta2dStore, Network, HttpOptions, Sql } from './store';
 import { Padding } from './utils';
 import { Rect } from './rect';
 import { Event, TriggerCondition } from './event';
@@ -149,7 +149,8 @@ export declare class Meta2d {
     register: typeof register;
     registerCanvasDraw: typeof registerCanvasDraw;
     registerAnchors: typeof registerAnchors;
-    registerLineAnimateDraws: typeof registerLineAnimateDraws;
+    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;

package/src/core.js

@@ -2,7 +2,7 @@ import { commonAnchors, commonPens, cube, reset, updateFormData } from './diagra
 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, } from './pen';
 import { rotatePoint } from './point';
-import { clearStore, EditType, globalStore, register, registerAnchors, registerCanvasDraw, registerLineAnimateDraws, useStore, } from './store';
+import { clearStore, EditType, globalStore, register, registerAnchors, registerCanvasDraw, useStore, } from './store';
 import { formatPadding, loadCss, s8, valueInArray, valueInRange, } from './utils';
 import { calcCenter, calcRelativeRect, calcRightBottom, getRect, rectInRect, } from './rect';
 import { deepClone } from './utils/clone';
@@ -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] || this.getDynamicParam(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;
@@ -404,7 +434,7 @@ export class Meta2d {
                     let keys = e.params.match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
                     if (keys) {
                         keys?.forEach((key) => {
-                            url = url.replace(`\${${key}}`, pen[key]);
+                            url = url.replace(`\${${key}}`, pen[key] || this.getDynamicParam(key));
                         });
                     }
                 }
@@ -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);
+                    }
                 }
             }
         });
@@ -956,6 +998,7 @@ export class Meta2d {
         this.render();
     }
     loadLineAnimateDraws() {
+        globalStore.lineAnimateDraws = {};
         Object.entries(this.store.data.lineAnimateDraws).forEach(([key, drawFunc]) => {
             globalStore.lineAnimateDraws[key] = eval(drawFunc);
         });
@@ -1326,7 +1369,22 @@ export class Meta2d {
     register = register;
     registerCanvasDraw = registerCanvasDraw;
     registerAnchors = registerAnchors;
-    registerLineAnimateDraws = registerLineAnimateDraws;
+    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:
     // {
@@ -1476,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);
@@ -2330,7 +2389,24 @@ 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,
@@ -2352,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) {
@@ -3169,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) {