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

生命周期

乐吾乐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);