【乐吾乐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使用。