@meta2d/core 1.0.61 → 1.0.63

package/src/core.d.ts

@@ -9,6 +9,7 @@ import { Rect } from './rect';
 import { Event, TriggerCondition } from './event';
 import { ViewMap } from './map';
 import { MqttClient } from 'mqtt';
+import { MessageOptions } from './message';
 export declare class Meta2d {
     store: Meta2dStore;
     canvas: Canvas;
@@ -29,7 +30,7 @@ export declare class Meta2d {
         url?: string;
         method?: string;
     }) => boolean | string;
-    events: Record<number, (pen: Pen, e: Event) => void>;
+    events: Record<number, (pen: Pen, e: Event, params?: any) => void>;
     map: ViewMap;
     mapTimer: any;
     constructor(parent: string | HTMLElement, opts?: Options);
@@ -60,6 +61,8 @@ export declare class Meta2d {
     setDatabyOptions(options?: Options): void;
     private init;
     initEventFns(): void;
+    message(options: MessageOptions): void;
+    closeAll(): void;
     navigatorTo(id: string): Promise<void>;
     doSendDataEvent(value: any, topics?: string): void;
     sendDataToNetWork(value: any, pen: Pen, e: any): Promise<void>;
@@ -68,8 +71,8 @@ export declare class Meta2d {
      *
      * @param emit 是否发送消息
      */
-    addPen(pen: Pen, history?: boolean, emit?: boolean): Promise<Pen>;
-    addPens(pens: Pen[], history?: boolean): Promise<Pen[]>;
+    addPen(pen: Pen, history?: boolean, emit?: boolean, abs?: boolean): Promise<Pen>;
+    addPens(pens: Pen[], history?: boolean, abs?: boolean): Promise<Pen[]>;
     render(patchFlags?: boolean | number): void;
     setBackgroundImage(url: string, data?: any): Promise<void>;
     setBackgroundColor(color?: string): void;
@@ -87,6 +90,8 @@ export declare class Meta2d {
     cacheData(id: string): void;
     loadCacheData(id: string): void;
     initBindDatas(): void;
+    jetLinksList: any[];
+    jetLinksClient: any;
     initBinds(): void;
     connectSocket(): void;
     /**
@@ -172,6 +177,7 @@ export declare class Meta2d {
     active(pens: Pen[], emit?: boolean): void;
     inactive(): void;
     activeAll(): void;
+    focus(id: string): void;
     /**
      * 删除画笔
      * @param pens 需要删除的画笔们
@@ -343,7 +349,7 @@ export declare class Meta2d {
     formatPainter(): void;
     clearFormatPainter(): void;
     alignNodes(align: string, pens?: Pen[], rect?: Rect): void;
-    alignNodesV(align: string, pens?: Pen[]): void;
+    alignNodesV(align: string, pens?: Pen[], whole?: boolean): void;
     /**
      * 对齐画笔，基于第一个画笔
      * @param align 左对齐，右对齐，上对齐，下对齐，居中对齐

package/src/core.js

@@ -15,6 +15,7 @@ import { Scroll } from './scroll';
 import { getter } from './utils/object';
 import { queryURLParams } from './utils/url';
 import { HotkeyType } from './data';
+import { Message, messageList } from './message';
 export class Meta2d {
     store;
     canvas;
@@ -262,7 +263,7 @@ export class Meta2d {
             }
             console.warn('[meta2d] StopVideo event value is not a string');
         };
-        this.events[EventAction.JS] = (pen, e) => {
+        this.events[EventAction.JS] = (pen, e, params) => {
             if (e.value && !e.fn) {
                 try {
                     if (typeof e.value !== 'string') {
@@ -275,7 +276,7 @@ export class Meta2d {
                     console.error('[meta2d]: Error on make a function:', err);
                 }
             }
-            e.fn?.(pen, e.params, { meta2d: this, eventName: e.name });
+            e.fn?.(pen, params || e.params, { meta2d: this, eventName: e.name });
         };
         this.events[EventAction.GlobalFn] = (pen, e) => {
             if (typeof e.value !== 'string') {
@@ -359,6 +360,52 @@ export class Meta2d {
         this.events[EventAction.SendData] = (pen, e) => {
             if (e.list?.length) {
                 // if (e.targetType === 'id') {
+                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: {}
+                        };
+                        for (let key in item.value) {
+                            if (item.value[key] === undefined || item.value[key] === '') {
+                                //找到绑定了这个设备属性的图元属性
+                                const realTime = _pen.realTimes?.find((item) => item.propertyId === key);
+                                if (realTime) {
+                                    list[index].properties[key] = _pen[realTime.key];
+                                }
+                            }
+                            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]];
+                                }
+                            }
+                            else {
+                                list[index].properties[key] = item.value[key];
+                            }
+                        }
+                    });
+                    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
+                                    }
+                                },
+                                "id": item.productId + '/' + item.deviceId + '-' + s8()
+                            }));
+                        });
+                    }
+                    return;
+                }
                 const value = {};
                 e.list.forEach((item) => {
                     const _pen = item.params ? this.findOne(item.params) : pen;
@@ -474,6 +521,22 @@ export class Meta2d {
             window.parent.postMessage(JSON.stringify({ name: e.value, value }), '*');
             return;
         };
+        this.events[EventAction.Message] = (pen, e) => {
+            this.message({
+                theme: e.params,
+                content: e.value,
+                ...e.extend
+            });
+        };
+    }
+    message(options) {
+        const message = new Message(this.canvas.parentElement, options);
+        message.init();
+    }
+    closeAll() {
+        for (let key in messageList) {
+            messageList[key].close();
+        }
     }
     async navigatorTo(id) {
         if (!id) {
@@ -660,11 +723,11 @@ export class Meta2d {
      *
      * @param emit 是否发送消息
      */
-    async addPen(pen, history, emit = true) {
-        return await this.canvas.addPen(pen, history, emit);
+    async addPen(pen, history, emit = true, abs = false) {
+        return await this.canvas.addPen(pen, history, emit, abs);
     }
-    async addPens(pens, history) {
-        return await this.canvas.addPens(pens, history);
+    async addPens(pens, history, abs = false) {
+        return await this.canvas.addPens(pens, history, abs);
     }
     render(patchFlags) {
         this.canvas?.render(patchFlags);
@@ -779,6 +842,12 @@ export class Meta2d {
         this.startVideo();
         this.doInitJS();
         this.doInitFn();
+        setTimeout(() => {
+            const pen = this.store.data.pens.find((pen) => pen.autofocus);
+            if (pen) {
+                this.focus(pen.id);
+            }
+        }, 100);
         if (this.store.data.iconUrls) {
             for (const item of this.store.data.iconUrls) {
                 loadCss(item, () => {
@@ -866,7 +935,10 @@ export class Meta2d {
             });
         });
     }
+    jetLinksList = [];
+    jetLinksClient;
     initBinds() {
+        this.jetLinksList = [];
         this.store.bind = {};
         this.store.data.pens.forEach((pen) => {
             pen.realTimes?.forEach((realTime) => {
@@ -878,6 +950,26 @@ export class Meta2d {
                         id: pen.id,
                         key: realTime.key,
                     });
+                    //JetLinks
+                    const productId = realTime.productId || pen.productId;
+                    const deviceId = realTime.deviceId || pen.deviceId;
+                    const propertyId = realTime.propertyId;
+                    if (productId && deviceId && propertyId) {
+                        const index = this.jetLinksList.findIndex((item) => item.topic.startsWith(`/${productId}/${deviceId}`));
+                        if (index > -1) {
+                            const properties = this.jetLinksList[index].properties;
+                            if (!properties.includes(realTime.propertyId)) {
+                                this.jetLinksList[index].properties.push(realTime.propertyId);
+                            }
+                        }
+                        else {
+                            this.jetLinksList.push({
+                                topic: `/${productId}/${deviceId}`,
+                                deviceId,
+                                properties: [realTime.propertyId]
+                            });
+                        }
+                    }
                 }
             });
         });
@@ -1524,6 +1616,14 @@ export class Meta2d {
         this.canvas.active(this.store.data.pens.filter((pen) => !pen.parentId && pen.locked !== LockState.Disable));
         this.render();
     }
+    focus(id) {
+        const pen = this.findOne(id);
+        if (pen) {
+            this.store.hover = pen;
+            this.store.hover.calculative.hover = true;
+            this.showInput(pen);
+        }
+    }
     /**
      * 删除画笔
      * @param pens 需要删除的画笔们
@@ -1920,7 +2020,41 @@ export class Meta2d {
                         sqlIndex += 1;
                     }
                 }
-                // }
+                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.onmessage = (e) => {
+                            const mess = JSON.parse(e.data);
+                            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]
+                                        });
+                                    }
+                                }
+                                this.setDatas(data, { history: false });
+                            }
+                        };
+                        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
+                                    },
+                                    "id": item.topic + '-' + s8()
+                                }));
+                            });
+                        };
+                    }
+                }
             });
         }
         this.onNetworkConnect(https);
@@ -2586,6 +2720,14 @@ export class Meta2d {
                 }
                 break;
             case 'click':
+                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;
+                        e.pen.calculative.gradient = undefined;
+                        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);
                 break;
@@ -2748,8 +2890,13 @@ export class Meta2d {
             });
         }
         else {
-            pen.events?.forEach((event, index) => {
+            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)) {
+                            return;
+                        }
+                    }
                     event.actions.forEach((action) => {
                         if (action.timeout) {
                             let timer = setTimeout(() => {
@@ -3869,7 +4016,7 @@ export class Meta2d {
         });
     }
     //对齐大屏
-    alignNodesV(align, pens = this.store.data.pens) {
+    alignNodesV(align, pens = this.store.data.pens, whole = false) {
         const width = this.store.data.width || this.store.options.width;
         const height = this.store.data.height || this.store.options.height;
         let rect = {
@@ -3879,8 +4026,41 @@ export class Meta2d {
             height,
         };
         const initPens = deepClone(pens); // 原 pens ，深拷贝一下
-        for (const item of pens) {
-            this.alignPen(align, item, rect);
+        if (whole) {
+            const scale = this.store.data.scale;
+            const rect = this.getRect(pens);
+            const x = (rect.x - this.store.data.origin.x) / scale;
+            const y = (rect.y - this.store.data.origin.y) / scale;
+            const w = rect.width / scale;
+            const h = rect.height / scale;
+            let moveX = 0;
+            let moveY = 0;
+            switch (align) {
+                case 'left':
+                    moveX = -x;
+                    break;
+                case 'right':
+                    moveX = width - (x + w);
+                    break;
+                case 'top':
+                    moveY = -y;
+                    break;
+                case 'bottom':
+                    moveY = height - (y + h);
+                    break;
+                case 'center':
+                    moveX = width / 2 - (x + w / 2);
+                    break;
+                case 'middle':
+                    moveY = height / 2 - (y + h / 2);
+                    break;
+            }
+            this.translatePens(pens, moveX * scale, moveY * scale);
+        }
+        else {
+            for (const item of pens) {
+                this.alignPen(align, item, rect);
+            }
         }
         this.initImageCanvas(pens);
         this.initTemplateCanvas(pens);
@@ -4857,6 +5037,7 @@ export class Meta2d {
         this.stopDataMock();
         this.closeSocket();
         this.closeNetwork();
+        this.closeAll();
         this.store.emitter.all.clear(); // 内存释放
         this.canvas.destroy();
         this.canvas = undefined;