【乐吾乐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使用。
相关推荐
指针满天飞3 分钟前
同步、异步、Promise、then、async/await
前端·javascript·vue.js
Alang8 分钟前
记一次错误使用 useEffect 导致电脑差点“报废”
前端·react.js
牛奶26 分钟前
前端学AI:LangGraph学习-基础概念
前端·langchain·ai编程
welkin30 分钟前
算法区间合并问题
前端·算法
Mintopia37 分钟前
Three.js高效几何体创建指南:BufferGeometry深度解析
前端·javascript·three.js
ak啊40 分钟前
Webpack Loader 执行机制
前端·webpack·源码
牛马喜喜41 分钟前
如何从零实现一个todo list(1)
前端
牛马喜喜41 分钟前
Vue编写一个自己的树形组件
前端
Mintopia1 小时前
vue3 element-plus 二次封装Drawer抽屉,关闭时添加二次对话,开箱即用
前端·javascript·vue.js
悟空非空也1 小时前
超级简单,Trae 开发Chrome浏览器插件,AI编程时代来了
前端