@meta2d/core 1.0.63 → 1.0.65

package/src/core.js

@@ -1,6 +1,6 @@
 import { commonAnchors, commonPens, cube } from './diagrams';
 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 } from './pen';
+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, getGlobalColor, } from './pen';
 import { rotatePoint } from './point';
 import { clearStore, EditType, globalStore, register, registerAnchors, registerCanvasDraw, useStore, } from './store';
 import { formatPadding, loadCss, s8, valueInArray, valueInRange, } from './utils';
@@ -13,7 +13,7 @@ import pkg from '../package.json';
 import { lockedError } from './utils/error';
 import { Scroll } from './scroll';
 import { getter } from './utils/object';
-import { queryURLParams } from './utils/url';
+import { getCookie, getMeta2dData, queryURLParams } from './utils/url';
 import { HotkeyType } from './data';
 import { Message, messageList } from './message';
 export class Meta2d {
@@ -92,7 +92,9 @@ export class Meta2d {
             // });
             this.canvas && (this.canvas.canvasTemplate.bgPatchFlags = true);
         }
-        if (opts.rule !== undefined || opts.ruleColor !== undefined || opts.ruleOptions !== undefined) {
+        if (opts.rule !== undefined ||
+            opts.ruleColor !== undefined ||
+            opts.ruleOptions !== undefined) {
             // this.setRule({
             //   rule: opts.rule,
             //   ruleColor: opts.ruleColor,
@@ -115,7 +117,8 @@ export class Meta2d {
         }
         if (opts.width !== undefined || opts.height !== undefined) {
             this.canvas && (this.canvas.canvasTemplate.bgPatchFlags = true);
-            if (this.canvas && this.canvas.canvasTemplate.canvas.style.backgroundImage) {
+            if (this.canvas &&
+                this.canvas.canvasTemplate.canvas.style.backgroundImage) {
                 this.canvas.canvasTemplate.canvas.style.backgroundImage = '';
             }
         }
@@ -136,11 +139,12 @@ export class Meta2d {
     setTheme(theme) {
         this.store.data.theme = theme;
         this.setBackgroundColor(this.store.theme[theme].background);
-        this.canvas.parentElement.style.background = this.store.theme[theme].parentBackground;
+        this.canvas.parentElement.style.background =
+            this.store.theme[theme].parentBackground;
         this.store.data.color = this.store.theme[theme].color;
         this.setOptions({
             ruleColor: this.store.theme[theme].ruleColor,
-            ruleOptions: this.store.theme[theme].ruleOptions
+            ruleOptions: this.store.theme[theme].ruleOptions,
         });
         this.render();
     }
@@ -160,7 +164,7 @@ export class Meta2d {
             fromArrow,
             toArrow,
             x,
-            y
+            y,
         });
     }
     init(parent) {
@@ -204,7 +208,9 @@ export class Meta2d {
             if (e.value) {
                 _pen = this.findOne(e.value);
             }
-            if (this.store.animates.has(_pen) && !_pen.calculative.pause && _pen.animateName === e.params) {
+            if (this.store.animates.has(_pen) &&
+                !_pen.calculative.pause &&
+                _pen.animateName === e.params) {
                 return;
             }
             if (e.targetType && e.params) {
@@ -343,8 +349,7 @@ export class Meta2d {
             }
         };
         this.events[EventAction.Dialog] = (pen, e) => {
-            if (e.params &&
-                typeof e.params === 'string') {
+            if (e.params && typeof e.params === 'string') {
                 let url = e.params;
                 if (e.params.includes('${')) {
                     let keys = e.params.match(/(?<=\$\{).*?(?=\})/g);
@@ -354,20 +359,21 @@ export class Meta2d {
                         });
                     }
                 }
-                this.canvas.dialog.show(e.value, url, e.extend);
+                const data = this.getEventData(e.list, pen);
+                this.canvas.dialog.show(e.value, url, e.extend, data);
             }
         };
         this.events[EventAction.SendData] = (pen, e) => {
             if (e.list?.length) {
                 // if (e.targetType === 'id') {
-                if (e.network && e.network.protocol === "jetLinks") {
+                if (e.network && e.network.protocol === 'jetLinks') {
                     const list = [];
                     e.list.forEach((item, index) => {
                         const _pen = item.params ? this.findOne(item.params) : pen;
                         list[index] = {
                             deviceId: _pen.deviceId,
                             productId: _pen.productId,
-                            properties: {}
+                            properties: {},
                         };
                         for (let key in item.value) {
                             if (item.value[key] === undefined || item.value[key] === '') {
@@ -377,10 +383,12 @@ export class Meta2d {
                                     list[index].properties[key] = _pen[realTime.key];
                                 }
                             }
-                            else if (typeof item.value[key] === 'string' && item.value[key]?.indexOf('${') > -1) {
+                            else if (typeof item.value[key] === 'string' &&
+                                item.value[key]?.indexOf('${') > -1) {
                                 let keys = item.value[key].match(/(?<=\$\{).*?(?=\})/g);
                                 if (keys?.length) {
-                                    list[index].properties[key] = _pen[keys[0]];
+                                    list[index].properties[key] =
+                                        _pen[keys[0]] ?? this.getDynamicParam(keys[0]);
                                 }
                             }
                             else {
@@ -391,39 +399,22 @@ export class Meta2d {
                     if (this.jetLinksClient && list.length) {
                         list.forEach((item) => {
                             this.jetLinksClient.send(JSON.stringify({
-                                "type": "sub",
-                                "topic": `/device-message-sender/${item.productId}/${item.deviceId}`,
-                                "parameter": {
-                                    "messageType": "WRITE_PROPERTY",
-                                    "properties": item.properties,
-                                    "headers": {
-                                        "async": false
-                                    }
+                                type: 'sub',
+                                topic: `/device-message-sender/${item.productId}/${item.deviceId}`,
+                                parameter: {
+                                    messageType: 'WRITE_PROPERTY',
+                                    properties: item.properties,
+                                    headers: {
+                                        async: false,
+                                    },
                                 },
-                                "id": item.productId + '/' + item.deviceId + '-' + s8()
+                                id: item.productId + '/' + item.deviceId + '-' + s8(),
                             }));
                         });
                     }
                     return;
                 }
-                const value = {};
-                e.list.forEach((item) => {
-                    const _pen = item.params ? this.findOne(item.params) : pen;
-                    for (let key in item.value) {
-                        if (item.value[key] === undefined || item.value[key] === '') {
-                            value[key] = _pen[key];
-                        }
-                        else if (typeof item.value[key] === 'string' && item.value[key]?.indexOf('${') > -1) {
-                            let keys = item.value[key].match(/(?<=\$\{).*?(?=\})/g);
-                            if (keys?.length) {
-                                value[key] = _pen[keys[0]];
-                            }
-                        }
-                        else {
-                            value[key] = item.value[key];
-                        }
-                    }
-                });
+                const value = this.getEventData(e.list, pen);
                 if (pen.deviceId) {
                     value.deviceId = pen.deviceId;
                 }
@@ -439,10 +430,11 @@ export class Meta2d {
                         if (value[key] === undefined || value[key] === '') {
                             value[key] = _pen[key];
                         }
-                        else if (typeof value[key] === 'string' && value[key]?.indexOf('${') > -1) {
+                        else if (typeof value[key] === 'string' &&
+                            value[key]?.indexOf('${') > -1) {
                             let keys = value[key].match(/(?<=\$\{).*?(?=\})/g);
                             if (keys?.length) {
-                                value[key] = _pen[keys[0]];
+                                value[key] = _pen[keys[0]] ?? this.getDynamicParam(keys[0]);
                             }
                         }
                     }
@@ -466,30 +458,11 @@ export class Meta2d {
                 return;
             }
             let params = queryURLParams(_pen.iframe.split('?')[1]);
-            const value = {};
-            if (e.list?.length) {
-                e.list.forEach((item) => {
-                    const _pen = item.params ? this.findOne(item.params) : pen;
-                    for (let key in item.value) {
-                        if (item.value[key] === undefined || item.value[key] === '') {
-                            value[key] = _pen[key];
-                        }
-                        else if (typeof item.value[key] === 'string' && item.value[key]?.indexOf('${') > -1) {
-                            let keys = item.value[key].match(/(?<=\$\{).*?(?=\})/g);
-                            if (keys?.length) {
-                                value[key] = _pen[keys[0]];
-                            }
-                        }
-                        else {
-                            value[key] = item.value[key];
-                        }
-                    }
-                });
-            }
+            const value = this.getEventData(e.list, _pen);
             _pen.calculative.singleton.div.children[0].contentWindow.postMessage(JSON.stringify({
                 name: e.value,
                 id: params.id,
-                value
+                data: value,
             }), '*');
             return;
         };
@@ -498,37 +471,46 @@ export class Meta2d {
                 console.warn('[meta2d] Emit value must be a string');
                 return;
             }
-            const value = {};
-            if (e.list?.length) {
-                e.list.forEach((item) => {
-                    const _pen = item.params ? this.findOne(item.params) : pen;
-                    for (let key in item.value) {
-                        if (item.value[key] === undefined || item.value[key] === '') {
-                            value[key] = _pen[key];
-                        }
-                        else if (typeof item.value[key] === 'string' && item.value[key]?.indexOf('${') > -1) {
-                            let keys = item.value[key].match(/(?<=\$\{).*?(?=\})/g);
-                            if (keys?.length) {
-                                value[key] = _pen[keys[0]];
-                            }
-                        }
-                        else {
-                            value[key] = item.value[key];
-                        }
-                    }
-                });
-            }
-            window.parent.postMessage(JSON.stringify({ name: e.value, value }), '*');
+            const value = this.getEventData(e.list, pen);
+            window.parent.postMessage(JSON.stringify({ name: e.value, data: value }), '*');
             return;
         };
         this.events[EventAction.Message] = (pen, e) => {
             this.message({
                 theme: e.params,
                 content: e.value,
-                ...e.extend
+                ...e.extend,
             });
         };
     }
+    getEventData(list, pen) {
+        const value = {};
+        if (list?.length) {
+            list.forEach((item) => {
+                const _pen = item.params ? this.findOne(item.params) : pen;
+                for (let key in item.value) {
+                    if (item.value[key] === undefined || item.value[key] === '') {
+                        value[key] = _pen[key];
+                    }
+                    else if (typeof item.value[key] === 'string' &&
+                        item.value[key]?.indexOf('${') > -1) {
+                        let keys = item.value[key].match(/(?<=\$\{).*?(?=\})/g);
+                        if (keys?.length) {
+                            value[key] = _pen[keys[0]] ?? this.getDynamicParam(keys[0]);
+                        }
+                    }
+                    else {
+                        value[key] = item.value[key];
+                    }
+                }
+            });
+        }
+        if (Object.keys(value).length) {
+            return value;
+        }
+        else
+            return null;
+    }
     message(options) {
         const message = new Message(this.canvas.parentElement, options);
         message.init();
@@ -553,35 +535,17 @@ export class Meta2d {
         //   }
         // }
         //路径参数更新
-        const url = new URL(window.location);
-        url.searchParams.set('id', id);
-        history.pushState({}, '', url);
+        let hasId = queryURLParams()?.id;
+        if (hasId) {
+            const url = new URL(window.location);
+            url.searchParams.set('id', id);
+            history.pushState({}, '', url);
+        }
         //图纸更新
-        const netWork = this.store.options.navigatorNetWork;
-        const collection = (location.href.includes('2d.') || location.href.includes('/2d')) ? '2d' : 'v';
-        const res = await fetch((netWork?.url || `/api/data/${collection}/get`) + (netWork?.method === 'GET' ? `?id=${id}` : ''), {
-            headers: {
-                Authorization: `Bearer ${this.getCookie('token') || localStorage.getItem('token') || new URLSearchParams(location.search).get('token') || ''}`,
-            },
-            method: netWork?.method || 'POST',
-            body: netWork?.method === 'GET' ? undefined : JSON.stringify({ id: id }),
-        });
-        if (res.ok) {
-            let data = await res.text();
-            if (data.constructor === Object || data.constructor === Array) {
-                data = JSON.parse(JSON.stringify(data));
-            }
-            else if (typeof data === 'string') {
-                data = JSON.parse(data);
-            }
-            if (data.data) {
-                data = data.data;
-            }
+        const data = await getMeta2dData(this.store, id);
+        if (data) {
             this.open(data);
         }
-        else {
-            this.store.emitter.emit('error', { type: 'http', error: res });
-        }
     }
     doSendDataEvent(value, topics) {
         let data = JSON.stringify(value);
@@ -671,11 +635,11 @@ export class Meta2d {
             }
         }
         else if (network.protocol === 'mqtt') {
-            const clients = this.mqttClients.filter((client) => client.options.href === network.url);
+            const clients = this.mqttClients?.filter((client) => client.options.href === network.url);
             if (clients && clients.length) {
                 if (clients[0].connected) {
                     network.topics.split(',').forEach((topic) => {
-                        clients[0].publish(topic, value);
+                        clients[0].publish(topic, JSON.stringify(value));
                     });
                 }
             }
@@ -685,17 +649,19 @@ export class Meta2d {
                 mqttClient.on('connect', () => {
                     console.info('mqtt连接成功');
                     network.topics.split(',').forEach((topic) => {
-                        mqttClient.publish(topic, value);
-                        mqttClient?.end();
+                        mqttClient.publish(topic, JSON.stringify(value));
+                        setTimeout(() => {
+                            mqttClient?.end();
+                        }, 1000);
                     });
                 });
             }
         }
         else if (network.protocol === 'websocket') {
-            const websockets = this.websockets.filter((socket) => socket.url === network.url);
+            const websockets = this.websockets?.filter((socket) => socket.url === network.url);
             if (websockets && websockets.length) {
                 if (websockets[0].readyState === 1) {
-                    websockets[0].send(value);
+                    websockets[0].send(JSON.stringify(value));
                 }
             }
             else {
@@ -703,7 +669,7 @@ export class Meta2d {
                 let websocket = new WebSocket(network.url, network.protocols || undefined);
                 websocket.onopen = function () {
                     console.info('websocket连接成功');
-                    websocket.send(value);
+                    websocket.send(JSON.stringify(value));
                     setTimeout(() => {
                         websocket.close();
                     }, 100);
@@ -829,19 +795,19 @@ export class Meta2d {
         if (!render) {
             this.canvas.opening = true;
         }
+        this.doInitJS();
+        this.doInitFn();
         this.initBindDatas();
         this.initBinds();
         this.initMessageEvents();
         this.initGlobalTriggers();
-        this.render();
+        this.startAnimate();
+        this.startVideo();
         this.listenSocket();
         this.connectSocket();
         this.connectNetwork();
         this.startDataMock();
-        this.startAnimate();
-        this.startVideo();
-        this.doInitJS();
-        this.doInitFn();
+        this.render();
         setTimeout(() => {
             const pen = this.store.data.pens.find((pen) => pen.autofocus);
             if (pen) {
@@ -966,7 +932,7 @@ export class Meta2d {
                             this.jetLinksList.push({
                                 topic: `/${productId}/${deviceId}`,
                                 deviceId,
-                                properties: [realTime.propertyId]
+                                properties: [realTime.propertyId],
                             });
                         }
                     }
@@ -1003,7 +969,7 @@ export class Meta2d {
                     binds.push({
                         id: key.replace('bind-', ''),
                         dataId: key.replace('bind-', ''),
-                        value: params[key]
+                        value: params[key],
                     });
                 }
             }
@@ -1034,7 +1000,8 @@ export class Meta2d {
         this.store.data.pens.forEach((pen) => {
             if (pen.externElement === true) {
                 // pen.onMove && pen.onMove(pen);
-                pen.calculative.singleton?.div && setElemPosition(pen, pen.calculative.singleton.div);
+                pen.calculative.singleton?.div &&
+                    setElemPosition(pen, pen.calculative.singleton.div);
             }
         });
         if (lock > 0) {
@@ -1374,8 +1341,9 @@ export class Meta2d {
      * 组合
      * @param pens 组合的画笔们
      * @param showChild 组合后展示第几个孩子
+     * @param active 是否激活组合后的画笔
      */
-    combine(pens = this.store.active, showChild) {
+    combine(pens = this.store.active, showChild, active = true) {
         if (!pens || !pens.length) {
             return;
         }
@@ -1421,7 +1389,9 @@ export class Meta2d {
             if (index < minIndex) {
                 minIndex = index;
             }
-            if (pen === parent || pen.parentId === parent.id || pen.id === parent.id) {
+            if (pen === parent ||
+                pen.parentId === parent.id ||
+                pen.id === parent.id) {
                 return;
             }
             // pen 来自于 store.active ，不存在有 parentId 的情况
@@ -1430,12 +1400,13 @@ export class Meta2d {
             const childRect = calcRelativeRect(pen.calculative.worldRect, rect);
             Object.assign(pen, childRect);
             pen.locked = pen.lockedOnCombine ?? LockState.None;
-            pen.locked = (pen.interaction || isInteraction.includes(pen.name)) ? 0 : pen.locked;
+            pen.locked =
+                pen.interaction || isInteraction.includes(pen.name) ? 0 : pen.locked;
         });
         //将组合后的父节点置底
         this.store.data.pens.splice(minIndex, 0, parent);
         this.store.data.pens.pop();
-        this.canvas.active([parent]);
+        active && this.canvas.active([parent]);
         let step = 1;
         // if (!oneIsParent) {
         //   step = 2;
@@ -1523,7 +1494,7 @@ export class Meta2d {
         if (pens.length < 2) {
             return;
         }
-        const pIdx = pens.findIndex(pen => pen.name === 'combine' && pen.showChild !== undefined);
+        const pIdx = pens.findIndex((pen) => pen.name === 'combine' && pen.showChild !== undefined);
         if (pIdx !== -1) {
             let parent = pens[pIdx];
             // this.pushChildren(parent,[...pens.slice(0, pIdx), ...pens.slice(pIdx + 1)]);
@@ -1531,7 +1502,7 @@ export class Meta2d {
             Object.assign(parent, rect);
             Object.assign(parent.calculative.worldRect, rect);
             calcWorldAnchors(parent);
-            parent.children.forEach(penId => {
+            parent.children.forEach((penId) => {
                 const pen = this.store.pens[penId];
                 const childRect = calcRelativeRect(pen.calculative.worldRect, rect);
                 Object.assign(pen, childRect);
@@ -1543,7 +1514,10 @@ export class Meta2d {
                     const childRect = calcRelativeRect(pen.calculative.worldRect, rect);
                     Object.assign(pen, childRect);
                     pen.locked = pen.lockedOnCombine ?? LockState.DisableMove;
-                    pen.locked = (pen.interaction || isInteraction.includes(pen.name)) ? 0 : pen.locked;
+                    pen.locked =
+                        pen.interaction || isInteraction.includes(pen.name)
+                            ? 0
+                            : pen.locked;
                     calcInView(pen, true);
                 }
             });
@@ -1579,7 +1553,7 @@ export class Meta2d {
                 width: ex - x,
                 height: ey - y,
                 ex,
-                ey
+                ey,
             };
             if (!parent.parentId) {
                 Object.assign(parent, parent.calculative.worldRect);
@@ -1664,7 +1638,10 @@ export class Meta2d {
                 }
             }
         }
-        data.dataPoints = [...Object.keys(this.store.bind), ...Object.keys(this.store.bindDatas)];
+        data.dataPoints = [
+            ...Object.keys(this.store.bind),
+            ...Object.keys(this.store.bindDatas),
+        ];
         return data;
     }
     copy(pens) {
@@ -1989,7 +1966,7 @@ export class Meta2d {
                                 topic: `le5le-iot/properties/${token}`,
                                 type: 'iot',
                                 url: net.url,
-                                method: 'mqtt'
+                                method: 'mqtt',
                             });
                         });
                         this.mqttClients[mqttIndex].on('error', (error) => {
@@ -2022,17 +1999,24 @@ export class Meta2d {
                 }
                 else if (net.protocol === 'jetLinks') {
                     if (this.jetLinksList.length) {
-                        this.jetLinksClient = new WebSocket(`${net.url}/${localStorage.getItem('X-Access-Token') || this.getCookie('X-Access-Token') || new URLSearchParams(location.search).get('X-Access-Token') || ''}`);
+                        this.jetLinksClient = new WebSocket(`${net.url}/${localStorage.getItem('X-Access-Token') ||
+                            getCookie('X-Access-Token') ||
+                            new URLSearchParams(location.search).get('X-Access-Token') ||
+                            ''}`
+                        // 'ws://8.134.86.52:29000/api/messaging/961d8b395298d3ec3a021df70d6b6ca4'
+                        );
                         //消息接收
                         this.jetLinksClient.onmessage = (e) => {
                             const mess = JSON.parse(e.data);
-                            if (mess.payload && mess.payload.success && mess.payload?.properties) {
+                            if (mess.payload &&
+                                mess.payload.success &&
+                                mess.payload?.properties) {
                                 const data = [];
                                 for (let key in mess.payload.properties) {
                                     if (!key.startsWith('_')) {
                                         data.push({
                                             id: `${mess.payload.headers.productId}#${mess.payload.deviceId}#${key}`,
-                                            value: mess.payload.properties[key]
+                                            value: mess.payload.properties[key],
                                         });
                                     }
                                 }
@@ -2042,14 +2026,14 @@ export class Meta2d {
                         this.jetLinksClient.onopen = () => {
                             this.jetLinksList.forEach((item) => {
                                 this.jetLinksClient.send(JSON.stringify({
-                                    "type": "sub",
-                                    "topic": `/device${item.topic}/message/property/report`,
-                                    "parameter": {
-                                        "deviceId": item.deviceId,
-                                        "properties": item.properties,
-                                        "history": 1
+                                    type: 'sub',
+                                    topic: `/device${item.topic}/message/property/report`,
+                                    parameter: {
+                                        deviceId: item.deviceId,
+                                        properties: item.properties,
+                                        history: 1,
                                     },
-                                    "id": item.topic + '-' + s8()
+                                    id: item.topic + '-' + s8(),
                                 }));
                             });
                         };
@@ -2102,12 +2086,15 @@ export class Meta2d {
     async doSqlCode(type, dbid, sql) {
         const res = await fetch(`/api/iot/data/sql/${type}`, {
             method: 'POST',
-            body: JSON.stringify({ dbid, sql, }),
+            body: JSON.stringify({ dbid, sql }),
         });
         if (res.ok) {
             const data = await res.text();
             if (data) {
-                this.socketCallback(data, { type: 'sql', url: `/api/iot/data/sql/${type}` });
+                this.socketCallback(data, {
+                    type: 'sql',
+                    url: `/api/iot/data/sql/${type}`,
+                });
             }
         }
     }
@@ -2242,7 +2229,7 @@ export class Meta2d {
             if (value !== undefined) {
                 arr.push({
                     id: data.id,
-                    value
+                    value,
                 });
             }
         });
@@ -2310,20 +2297,19 @@ export class Meta2d {
             delete this.store.pensNetwork[pen.id];
         }
     }
-    getCookie(name) {
-        let arr;
-        const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
-        if ((arr = document.cookie.match(reg))) {
-            return decodeURIComponent(arr[2]);
-        }
-        else {
-            return '';
-        }
-    }
+    // getCookie(name: string) {
+    //   let arr: RegExpMatchArray | null;
+    //   const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
+    //   if ((arr = document.cookie.match(reg))) {
+    //     return decodeURIComponent(arr[2]);
+    //   } else {
+    //     return '';
+    //   }
+    // }
     //获取动态参数
     getDynamicParam(key) {
         let params = queryURLParams();
-        let value = params[key] || localStorage[key] || this.getCookie(key) || '';
+        let value = params[key] || localStorage[key] || getCookie(key) || '';
         return value;
     }
     onNetworkConnect(https) {
@@ -2443,7 +2429,7 @@ export class Meta2d {
                 type: context.type,
                 topic: context.topic,
                 url: context.url,
-                method: context.method
+                method: context.method,
             });
             if (!_message) {
                 return;
@@ -2617,10 +2603,9 @@ export class Meta2d {
                 binds.push({
                     dataId: key,
                     id: key,
-                    value: data[key]
+                    value: data[key],
                 });
             }
-            ;
             if (binds.length) {
                 this.setDatas(binds, {
                     render,
@@ -2720,7 +2705,7 @@ export class Meta2d {
                 }
                 break;
             case 'click':
-                if (this.store.data.locked && e.pen && (!e.pen.disabled)) {
+                if (this.store.data.locked && e.pen && !e.pen.disabled) {
                     if (e.pen.switch) {
                         e.pen.checked = !e.pen.checked;
                         e.pen.calculative.checked = e.pen.checked;
@@ -2728,29 +2713,50 @@ export class Meta2d {
                         e.pen.calculative.radialGradient = undefined;
                     }
                 }
-                e.pen && e.pen.onClick && (!e.pen.disabled) && e.pen.onClick(e.pen, this.canvas.mousePos);
-                this.store.data.locked && e.pen && (!e.pen.disabled) && this.doEvent(e.pen, eventName);
+                e.pen &&
+                    e.pen.onClick &&
+                    !e.pen.disabled &&
+                    e.pen.onClick(e.pen, this.canvas.mousePos);
+                this.store.data.locked &&
+                    e.pen &&
+                    !e.pen.disabled &&
+                    this.doEvent(e.pen, eventName);
                 break;
             case 'contextmenu':
                 e.pen &&
-                    e.pen.onContextmenu && (!e.pen.disabled) &&
+                    e.pen.onContextmenu &&
+                    !e.pen.disabled &&
                     e.pen.onContextmenu(e.pen, this.canvas.mousePos);
-                this.store.data.locked && e.pen && (!e.pen.disabled) && this.doEvent(e.pen, eventName);
+                this.store.data.locked &&
+                    e.pen &&
+                    !e.pen.disabled &&
+                    this.doEvent(e.pen, eventName);
                 break;
             case 'mousedown':
                 e.pen &&
-                    e.pen.onMouseDown && (!e.pen.disabled) &&
+                    e.pen.onMouseDown &&
+                    !e.pen.disabled &&
                     e.pen.onMouseDown(e.pen, this.canvas.mousePos);
-                this.store.data.locked && e.pen && (!e.pen.disabled) && this.doEvent(e.pen, eventName);
+                this.store.data.locked &&
+                    e.pen &&
+                    !e.pen.disabled &&
+                    this.doEvent(e.pen, eventName);
                 break;
             case 'mouseup':
                 e.pen &&
-                    e.pen.onMouseUp && (!e.pen.disabled) &&
+                    e.pen.onMouseUp &&
+                    !e.pen.disabled &&
                     e.pen.onMouseUp(e.pen, this.canvas.mousePos);
-                this.store.data.locked && e.pen && (!e.pen.disabled) && this.doEvent(e.pen, eventName);
+                this.store.data.locked &&
+                    e.pen &&
+                    !e.pen.disabled &&
+                    this.doEvent(e.pen, eventName);
                 break;
             case 'dblclick':
-                this.store.data.locked && e.pen && (!e.pen.disabled) && this.doEvent(e.pen, eventName);
+                this.store.data.locked &&
+                    e.pen &&
+                    !e.pen.disabled &&
+                    this.doEvent(e.pen, eventName);
                 break;
             case 'valueUpdate':
                 this.store.data.locked && this.doEvent(e, eventName);
@@ -2770,10 +2776,16 @@ export class Meta2d {
                 this.navigatorTo(e.params);
                 break;
             case 'input':
-                this.store.data.locked && e && (!e.disabled) && this.doEvent(e, eventName);
+                this.store.data.locked &&
+                    e &&
+                    !e.disabled &&
+                    this.doEvent(e, eventName);
                 break;
             case 'change':
-                this.store.data.locked && e && (!e.disabled) && this.doEvent(e, eventName);
+                this.store.data.locked &&
+                    e &&
+                    !e.disabled &&
+                    this.doEvent(e, eventName);
                 break;
         }
         this.doMessageEvent(eventName);
@@ -2893,7 +2905,7 @@ export class Meta2d {
             pen.events?.forEach(async (event, index) => {
                 if (indexArr.includes(index)) {
                     if (event.confirm) {
-                        if (!await this.canvas.popconfirm.showModal(pen, this.canvas.mousePos, event.confirmTitle)) {
+                        if (!(await this.canvas.popconfirm.showModal(pen, this.canvas.mousePos, event.confirmTitle))) {
                             return;
                         }
                     }
@@ -3074,14 +3086,14 @@ export class Meta2d {
                 }
                 if (flag) {
                     item.event.actions.forEach((action) => {
-                        this.events[action.action](item.pen, action);
+                        this.events[action.action](item.pen, action, data);
                     });
                 }
             });
         }
     }
     doDataEvent = (datas) => {
-        if (!(this.store.data.dataEvents?.length)) {
+        if (!this.store.data.dataEvents?.length) {
             return;
         }
         const data = datas.reduce((accumulator, { dataId, id, value }) => {
@@ -3304,7 +3316,8 @@ export class Meta2d {
             const childRect = calcRelativeRect(pen.calculative.worldRect, parent.calculative.worldRect);
             Object.assign(pen, childRect);
             pen.locked = pen.lockedOnCombine ?? LockState.DisableMove;
-            pen.locked = (pen.interaction || isInteraction.includes(pen.name)) ? 0 : pen.locked;
+            pen.locked =
+                pen.interaction || isInteraction.includes(pen.name) ? 0 : pen.locked;
             if (!oldPen) {
                 addPens.push(deepClone(pen, true));
             }
@@ -3371,10 +3384,14 @@ export class Meta2d {
         rect.y -= 10;
         const ctx = new window.C2S(rect.width + 20, rect.height + 20);
         ctx.textBaseline = 'middle';
+        ctx.strokeStyle = getGlobalColor(this.store);
         for (const pen of this.store.data.pens) {
             if (pen.visible == false || !isShowChild(pen, this.store)) {
                 continue;
             }
+            if (pen.name === 'combine' && !pen.draw) {
+                continue;
+            }
             renderPenRaw(ctx, pen, rect, true);
         }
         let mySerializedSVG = ctx.getSerializedSvg();
@@ -3491,9 +3508,14 @@ export class Meta2d {
                                 pen.imageRatio = false;
                             }
                         }
-                        pen.calculative.worldRect.x = rect.x - wGap / 2 + left + (pen.calculative.worldRect.x - rect.x) * ratio; //(fit.leftValue || 0)+ (pen.calculative.worldRect.x + pen.calculative.worldRect.width/2)-( pen.calculative.worldRect.width*ratio)*(range/2- (fit.rightValue || 0))/(range- (fit.leftValue || 0)-(fit.rightValue || 0));
+                        pen.calculative.worldRect.x =
+                            rect.x -
+                                wGap / 2 +
+                                left +
+                                (pen.calculative.worldRect.x - rect.x) * ratio; //(fit.leftValue || 0)+ (pen.calculative.worldRect.x + pen.calculative.worldRect.width/2)-( pen.calculative.worldRect.width*ratio)*(range/2- (fit.rightValue || 0))/(range- (fit.leftValue || 0)-(fit.rightValue || 0));
                         pen.calculative.worldRect.width *= ratio;
-                        pen.calculative.worldRect.ex = pen.calculative.worldRect.x + pen.calculative.worldRect.width;
+                        pen.calculative.worldRect.ex =
+                            pen.calculative.worldRect.x + pen.calculative.worldRect.width;
                         pen.calculative.width = pen.calculative.worldRect.width;
                         pen.calculative.x = pen.calculative.worldRect.x;
                         pen.width = pen.calculative.worldRect.width;
@@ -3508,14 +3530,21 @@ export class Meta2d {
                     //左移
                     r = -r;
                     if (fit.leftValue) {
-                        r += (Math.abs(fit.leftValue) < 1 ? fit.leftValue * this.canvas.width : fit.leftValue);
+                        r +=
+                            Math.abs(fit.leftValue) < 1
+                                ? fit.leftValue * this.canvas.width
+                                : fit.leftValue;
                     }
                     this.translatePens(pens, r, 0);
                 }
                 else if (fit.right) {
                     //右移
                     if (fit.rightValue) {
-                        r = r - (Math.abs(fit.rightValue) < 1 ? fit.rightValue * this.canvas.width : fit.rightValue);
+                        r =
+                            r -
+                                (Math.abs(fit.rightValue) < 1
+                                    ? fit.rightValue * this.canvas.width
+                                    : fit.rightValue);
                     }
                     this.translatePens(pens, r, 0);
                 }
@@ -3526,8 +3555,7 @@ export class Meta2d {
                 if (worldRect.width / this.store.data.scale > rect.width * 0.8) {
                     let bfW = worldRect.width;
                     pen.calculative.worldRect.x = worldRect.x - wGap / 2;
-                    pen.calculative.worldRect.width =
-                        worldRect.width + wGap;
+                    pen.calculative.worldRect.width = worldRect.width + wGap;
                     pen.calculative.worldRect.ex = worldRect.ex + wGap;
                     pen.operationalRect.x =
                         (pen.operationalRect.x * bfW) / pen.calculative.worldRect.width;
@@ -3561,7 +3589,8 @@ export class Meta2d {
                         top = 0;
                     }
                     if (bottom) {
-                        bottom = Math.abs(bottom) < 1 ? bottom * this.canvas.height : bottom;
+                        bottom =
+                            Math.abs(bottom) < 1 ? bottom * this.canvas.height : bottom;
                     }
                     else {
                         bottom = 0;
@@ -3573,9 +3602,14 @@ export class Meta2d {
                                 pen.imageRatio = false;
                             }
                         }
-                        pen.calculative.worldRect.y = rect.y - hGap / 2 + top + (pen.calculative.worldRect.y - rect.y) * ratio; //(fit.leftValue || 0)+ (pen.calculative.worldRect.x + pen.calculative.worldRect.width/2)-( pen.calculative.worldRect.width*ratio)*(range/2- (fit.rightValue || 0))/(range- (fit.leftValue || 0)-(fit.rightValue || 0));
+                        pen.calculative.worldRect.y =
+                            rect.y -
+                                hGap / 2 +
+                                top +
+                                (pen.calculative.worldRect.y - rect.y) * ratio; //(fit.leftValue || 0)+ (pen.calculative.worldRect.x + pen.calculative.worldRect.width/2)-( pen.calculative.worldRect.width*ratio)*(range/2- (fit.rightValue || 0))/(range- (fit.leftValue || 0)-(fit.rightValue || 0));
                         pen.calculative.worldRect.height *= ratio;
-                        pen.calculative.worldRect.ey = pen.calculative.worldRect.y + pen.calculative.worldRect.height;
+                        pen.calculative.worldRect.ey =
+                            pen.calculative.worldRect.y + pen.calculative.worldRect.height;
                         pen.calculative.height = pen.calculative.worldRect.height;
                         pen.calculative.y = pen.calculative.worldRect.y;
                         pen.height = pen.calculative.worldRect.height;
@@ -3589,13 +3623,20 @@ export class Meta2d {
                 else if (fit.top) {
                     r = -r;
                     if (fit.topValue) {
-                        r += (Math.abs(fit.topValue) < 1 ? fit.topValue * this.canvas.height : fit.topValue);
+                        r +=
+                            Math.abs(fit.topValue) < 1
+                                ? fit.topValue * this.canvas.height
+                                : fit.topValue;
                     }
                     this.translatePens(pens, 0, r);
                 }
                 else if (fit.bottom) {
                     if (fit.bottomValue) {
-                        r = r - (Math.abs(fit.bottomValue) < 1 ? fit.bottomValue * this.canvas.height : fit.bottomValue);
+                        r =
+                            r -
+                                (Math.abs(fit.bottomValue) < 1
+                                    ? fit.bottomValue * this.canvas.height
+                                    : fit.bottomValue);
                     }
                     this.translatePens(pens, 0, r);
                 }
@@ -3606,8 +3647,7 @@ export class Meta2d {
                 if (worldRect.height / this.store.data.scale > rect.height * 0.8) {
                     let bfH = worldRect.height;
                     pen.calculative.worldRect.y = worldRect.y - hGap / 2;
-                    pen.calculative.worldRect.height =
-                        worldRect.height + hGap;
+                    pen.calculative.worldRect.height = worldRect.height + hGap;
                     pen.calculative.worldRect.ey = worldRect.ey + hGap;
                     pen.operationalRect.y =
                         (pen.operationalRect.y * bfH) / pen.calculative.worldRect.width;
@@ -3622,6 +3662,7 @@ export class Meta2d {
                 }
             });
         }
+        this.canvas.canvasTemplate.fit = true;
         this.canvas.canvasTemplate.init();
         this.canvas.canvasImage.init();
         this.canvas.canvasImageBottom.init();
@@ -3934,10 +3975,11 @@ export class Meta2d {
             const firstPen = pens[0];
             formatAttrs.forEach((attr) => {
                 attrs[attr] =
-                    firstPen[attr] !== undefined ? firstPen[attr] :
-                        (this.store.options.defaultFormat[attr] ||
+                    firstPen[attr] !== undefined
+                        ? firstPen[attr]
+                        : this.store.options.defaultFormat[attr] ||
                             this.store.data[attr] ||
-                            this.store.options[attr]);
+                            this.store.options[attr];
             });
         }
         else {
@@ -4941,7 +4983,7 @@ export class Meta2d {
             pen.locked = pen.lockedOnCombine ?? LockState.DisableMove;
             // pen.type = PenType.Node;
         });
-        return (oneIsParent || parents.length === 1)
+        return oneIsParent || parents.length === 1
             ? deepClone(components)
             : deepClone([parent, ...components]);
     }
@@ -4954,10 +4996,14 @@ export class Meta2d {
         if (!pen.tag && !pen.name && !pen.id)
             return;
         let type;
-        pen.id ? type = 'id' :
-            pen.tag ? type = 'tag' :
-                pen.name ? type = 'name' : '';
-        plugins.forEach(pluginConfig => {
+        pen.id
+            ? (type = 'id')
+            : pen.tag
+                ? (type = 'tag')
+                : pen.name
+                    ? (type = 'name')
+                    : '';
+        plugins.forEach((pluginConfig) => {
             let plugin = pluginConfig.plugin;
             let option = pluginConfig.options;
             if (!plugin)
@@ -4980,7 +5026,7 @@ export class Meta2d {
                     else {
                         this.penPluginMap.get(plugin).push({
                             [type]: pen[type],
-                            option
+                            option,
                         });
                     }
                 }
@@ -4989,16 +5035,20 @@ export class Meta2d {
     }
     uninstallPenPlugins(pen, plugins) {
         let type;
-        pen.id ? type = 'id' :
-            pen.tag ? type = 'tag' :
-                pen.name ? type = 'name' : '';
+        pen.id
+            ? (type = 'id')
+            : pen.tag
+                ? (type = 'tag')
+                : pen.name
+                    ? (type = 'name')
+                    : '';
         if (!type)
             return;
-        plugins.forEach(pluginConfig => {
+        plugins.forEach((pluginConfig) => {
             let plugin = pluginConfig.plugin;
             plugin.uninstall(pen, pluginConfig.options);
             let mapList = this.penPluginMap.get(plugin);
-            let op = mapList.findIndex(i => i[type] === pen[type]);
+            let op = mapList.findIndex((i) => i[type] === pen[type]);
             if (op !== -1) {
                 mapList.splice(op, 1);
                 // TODO 在运行时 插件卸载后是否需要移除？