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 = () => {const { graphModel, model } = this.props;graphModel.eventCenter.emit("custom:button-click", model);};}
}

例子:
新建 src/views/Example/LogicFlow/component/CustomNode/index.ts 代码如下：

import { HtmlNode, HtmlNodeModel } from '@logicflow/core'// 扩展全局 Window 接口
declare global {interface Window {stopPropagation: (ev: Event) => voidsetDatas: () => void}
}class ButtonNode extends HtmlNode {setHtml(rootEl: HTMLElement): void {const properties = this.props.model.propertiesconst el: HTMLDivElement = document.createElement('div')el.className = 'uml-wrapper'const html: string = `<div><div class="uml-head">Head</div><div class="uml-body"><div><button οnclick="setDatas()" οnmοusedοwn="stopPropagation(event)">+</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 = htmlrootEl.innerHTML = ''rootEl.appendChild(el)// 实现这些方法window.stopPropagation = (ev: Event) => {ev.stopPropagation()}window.setDatas = () => {const { graphModel, model } = this.propsgraphModel.eventCenter.emit('custom:button-click', model)}}
}class ButtonNodeModel extends HtmlNodeModel {setAttributes(): void {this.width = 300this.height = 150this.text.editable = false}
}// TypeScript 中不使用 default export 时，需要显式地声明每个被导出的成员。
export const CustomNode = {type: 'CustomNode',view: ButtonNode,model: ButtonNodeModel
}

新建 src/views/Example/LogicFlow/Example13.vue 代码如下：

<script setup lang="ts">
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import { CustomNode } from './component/CustomNode'
import { onMounted } from 'vue'const data = {nodes: [{id: '1',type: 'CustomNode',x: 300,y: 100,properties: {name: 'hello',body: 'world'}}],edges: []
}// 在组件挂载时执行
onMounted(() => {// 创建 LogicFlow 实例const lf = new LogicFlow({container: document.getElementById('container')!, // 指定容器元素grid: true // 启用网格})lf.register(CustomNode)// 渲染图表数据lf.render(data)lf.on('custom:button-click', (model) => {console.log(model.properties)switch (model.properties.body) {case 'world':lf.setProperties(model.id, {body: 'LogicFlow'})breakdefault:lf.setProperties(model.id, {body: 'world'})}})
})
</script><template><h3>Example13</h3><div id="container"></div><!-- 用于显示 LogicFlow 图表的容器 -->
</template><style>
#container {/* 容器宽度 */width: 100%;/* 容器高度 */height: 500px;
}
.uml-wrapper {background: #68fce2;width: 100%;height: 100%;border-radius: 10px;border: 2px solid #838382;box-sizing: border-box;
}
.uml-head {text-align: center;line-height: 30px;font-size: 16px;font-weight: bold;
}
.uml-body {border-top: 1px solid #838382;border-bottom: 1px solid #838382;padding: 5px 10px;font-size: 12px;
}
.uml-footer {padding: 5px 10px;font-size: 14px;
}
</style>

效果如下：

---

样例代码： GITUHB