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