LogicFlow 学习笔记——8. LogicFlow 基础 事件 Event

事件 Event

当我们使用鼠标或其他方式与画布交互时，会触发对应的事件。通过监听这些事件，可以获取其在触发时所产生的数据，根据这些数据来实现需要的功能。详细可监听事件见事件API。

监听事件

lf实例上提供on方法支持监听事件。

lf.on("node:dnd-add", (data) => {
   
   });

LogicFlow 支持用逗号分割事件名。

lf.on("node:click,edge:click", (data) => {
   
   });

自定义事件

除了 lf 上支持的监听事件外，还可以使用eventCenter对象来监听和触发事件。eventCenter是一个graphModel上的一个属性。所以在自定义节点的时候，我们可以使用eventCenter触发自定义事件。

class ButtonNode extends HtmlNode {
   
   
  setHtml(rootEl) {
   
   
    const {
   
    properties } = this.props.model;

    const el = document.createElement("div");
    el.className = "uml-wrapper";
    const html = `
      <div>
        <div class="uml-head">Head</div>
        <div class="uml-body">
          <div><button οnclick="setData()">+</button> ${
     
     properties.name}</div>
          <div>${
     
     properties.body}</div>
        </div>
        <div class="uml-footer">
          <div>setHead(Head $head)</div>
          <div>setBody(Body $body)</div>
        </div>
      </div>
    `;
    el.innerHTML = html;
    rootEl.innerHTML = "";
    rootEl.appendChild(el);
    window.setData = () => {