【乐吾乐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使用。
相关推荐
周亚鑫2 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.18 分钟前
CSS3新增边框属性(五)
前端·css·css3
neter.asia35 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫35 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
嚣张农民42 分钟前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189111 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
ajsbxi1 小时前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Ocean☾1 小时前
前端基础-html-注册界面
前端·算法·html