【乐吾乐2D可视化组态编辑器】事件

事件

乐吾乐2D可视化组态编辑器demo：https://2d.le5le.com/  

仅当画布锁定后(meta2d.store.data.locked = 1 or 2)，触发事件。否则，干扰编辑。

定义

图元下的events属性为事件列表。

const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       action: EventAction.Link, // 执行动作       where: { type:'comparison',  key: "text", comparison: "==", value: "矩形" }, // 触发条件       value: "2d.le5le.com",     },   ], };

Copy

events对象说明

• name - 事件类型
• action - 事件行为
• value - 事件附属数据
• params - 事件参数
• where - 触发条件

事件类型

事件类型name值如下：

• 鼠标进入 enter
• 鼠标离开 leave
• 选中 active
• 取消选中 inactive
• 单击 click
• 双击 dblclick
• 鼠标按下 mousedown
• 鼠标抬起 mouseup
• 值变化 valueUpdate

const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       action: EventAction.Link, // 执行动作       where: { type:'comparison',  key: "text", comparison: "==", value: "矩形" }, // 触发条件       value: "2d.le5le.com",     },   ], }; meta2d.addPen(pen);

事件行为

事件行为action为一个枚举值：

enum EventAction {   Link,           // 打开链接     SetProps,       // 更改属性   StartAnimate,   // 执行动画   PauseAnimate,   // 暂停动画   StopAnimate,    // 停止动画   JS,             // 执行JS代码   GlobalFn,       // 执行全局函数   Emit,           // 发送消息   StartVideo,     // 播放视频   PauseVideo,     // 暂停视频   StopVideo,      // 停止视频   SendPropData,   // 发送图元数据   SendVarData,    // 发送绑定变量 }

打开链接

const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       action: EventAction.Link,       value: "2d.le5le.com",     },   ], };

更改属性

const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       action: EventAction.SetProps,       params:'id/tag',//目标图元，你要更改属性的图元的id/tag       value: {         color:'red',         text:'le5le'         //...需要更改的其他属性       },     },   ], };

动画执行/暂停/停止

const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       action: EventAction.StartAnimate,//PauseAnimate StopAnimate       value:'id/tag'//目标图元，要执行/暂停/停止动画的图元的id/tag     },   ], };

执行JS代码

const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       action: EventAction.JS,       params: "我是参数",//传递到代码块的参数       value:`console.log('arguments',arguments);               console.log('当前点击的图元', pen);               console.log('参数',params);               console.log('上下文',context);`//代码块     },   ], };  //请求接口示例 //value:"fetch('/api/device/data?mock=1').then((e) => {e.text().then(data=>{console.log(data)});})" 

执行全局函数

globalThis.le5leFn= (pen,params) =>{   console.log('当前图元：',pen,'参数：',params); };  const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       action: EventAction.GlobalFn,       params: "我是参数",//传到代码块的参数       value:"le5leFn" //全局函数名     },   ], };

发送消息

//meta2d监听该消息 meta2d.on('le5le-emit',(e)=>{console.log(e)});  const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       action: EventAction.Emit,       params: "我是参数",//传到代码块的参数       value:"le5le-emit" //消息名     },   ], };

视频播放/暂停/停止

const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       action: EventAction.StartVideo,//PauseVideo StopVideo       value:'id/tag'//目标图元，要播放/暂停/停止视频图元的id/tag     },   ], };

发送图元数据

const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       action: EventAction.SendPropData,       params:'id/tag',//目标图元的id/tag，你要发送哪个图元的数据       value: {         color:'red', //有值发送该值         text:'' //为空会从拿到目标图元的属性值         //发送的数据       },       extend: "topic1,topic2"//建立mqtt通信时填写该参数，表示你发送数据到哪几个topic     },   ], };

发送绑定变量

const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       action: EventAction.SendVarData,       params:'id/tag',//目标图元的id/tag，你要发送哪个图元的数据       value: {         bindId:'value' //绑定的变量及值，值为空则从目标图元中拿到绑定变量对应属性的值       },       extend: "topic1,topic2"//建立mqtt通信时填写该参数，表示你发送数据到哪几个topic     },   ], };

条件触发

条件触发是指满足指定条件才触发事件。

const pen = {   name: "rectangle",   text: "矩形",   x: 100,   y: 100,   width: 100,   height: 100,   events: [     {       name: "click",       // 执行动作       action: EventAction.Link,        // 运算符触发条件。text属性值 == “矩形” 触发       where: { type:'comparison', key: "text", comparison: "==", value: "矩形" },        value: "2d.le5le.com",     },     {       name: "click",       action: EventAction.Link,        // 通过自定义条件函数返回值触发条件       where: { type: "fn", fn:()=>{return bool;} },         value: "2d.le5le.com",     },     {       name: "click",       action: EventAction.Link,        // 通过js代码返回值触发条件。       where: { type: "温度过高", fnJs:"伪代码;return bool;" },         value: "2d.le5le.com",     },     {       name: "click",       action: EventAction.Link,        // 通过js代码返回值触发条件。       where: { type: "电流过高", fnJs:"伪代码;return bool;" },         value: "2d.le5le.com",     },   ], }; meta2d.addPen(pen);

数据结构

where数据属性结构如下：

• type - 任意值，推荐使用条件的功能名称方便阅读。为空时，表示没有触发条件。
• fn - 条件函数，返回一个bool值。最高优先级。
• fnJs - 条件的js代码文本，可获取'pen'和 'context'参数，返回一个bool值。高优先级。
• key - 通过属性名进行条件比较。低优先级。
• comparison - 属性比较条件，配合key使用。
  • “>” - 大于
  • “>=” - 大于等于
  • “<” - 小于
  • “<=” - 小于等于
  • “=” - 等于
  • “!=” - 不等于
  • “[)” - 介于，与数学上相同，例如：[0, 100) 0~100，包含0不包含100； [0,100] 0~100,包含0和100
  • “![)” - 不介于，“介于”以外的
  • “[]” - 属于,集合，例如：[1,20,30..50,65] ，1.0.48版本后支持字符串，例如 [1,20,aaa,值1]
  • “![]” - 不属于，上述集合以外的
• value - 属性比较值，配合key使用。