【乐吾乐2D可视化组态编辑器】生命周期

乐吾乐科技2024-07-22 5:07

生命周期

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

全局生命周期函数

meta2d.beforeAddPens = async (pens: Pen[]) => {
  console.log("addPens", pens);

  // showDialog 伪代码
  const res = await showDialog("是否添加此图元？");
  // 返回 true 允许 remove
  return res.ok;
};

// 删除组合节点时， beforeRemovePens 会多次触发
meta2d.beforeRemovePens = async (pens: Pen[]) => {
  console.log("removePens", pens);
  // showDialog 伪代码
  const res = await showDialog("是否删除所选图元？");
  // 返回 true 允许 remove
  return res.ok;
};

meta2d.beforeAddAnchor = async (pen: Pen, anchor: Point) => {
  // showDialog 伪代码
  return await showModal("添加锚点");
};

meta2d.beforeRemoveAnchor = async (pen: Pen, anchor: Point) => {
  // showDialog 伪代码
  return await showModal("删除锚点");
};

// 定义一个pen，矩形
const pen = {
  name: "rectangle",
  text: "矩形",
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  tag: ["aaa"],
};
meta2d.addPen(pen);

画笔生命周期函数

生命周期函数类型均为：(pen: Pen) => void , 除了 onBeforeValue, onChangeId

onAdd 画笔添加到画布后
onDestroy 画笔被删除后

其他相关函数：

onBeforeValue 属性值发生改变前
onValue 属性值发生修改
onMove 被移动拖拽
onResize 修改大小
onRotate 旋转
onClick 单击
onMouseDown 鼠标按下
onMouseMove 鼠标移动
onMouseUp 鼠标抬起
onMouseEnter 鼠标经过
onMouseLeave 鼠标离开
onShowInput 开始输入
onInput 完成输入
onChangeId id 改变
onKeyDown 键盘按下
onScale 缩放
onBinds 绑定变量处理
onStartVideo 开始视频
onPauseVideo 暂停视频
onStopVideo 停止视频
onRenderPenRaw 下载png/svg前，pen绘制处理。
onWheel 鼠标经过图元，滚轮缩放 (version>=1.0.25)

const onAddPen = (pen: Pen) => {
console.log("onAddPen", pen);
};

// 定义一个pen，矩形
const pen = {
name: "rectangle",
text: "矩形",
x: 100,
y: 100,
width: 100,
height: 100,
onAdd: onAddPen,
};
meta2d.addPen(pen);