自己的域名可以转给做网站的账号吗,口碑好的做网站公司,46设计网站官网,做一个网站得多少钱事件 Event
当我们使用鼠标或其他方式与画布交互时#xff0c;会触发对应的事件。通过监听这些事件#xff0c;可以获取其在触发时所产生的数据#xff0c;根据这些数据来实现需要的功能。详细可监听事件见事件API。
监听事件
lf实例上提供on方法支持监听事件。
lf.on(会触发对应的事件。通过监听这些事件可以获取其在触发时所产生的数据根据这些数据来实现需要的功能。详细可监听事件见事件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 divdiv classuml-headHead/divdiv classuml-bodydivbutton οnclicksetData()/button ${properties.name}/divdiv${properties.body}/div/divdiv classuml-footerdivsetHead(Head $head)/divdivsetBody(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-wrapperconst html: string divdiv classuml-headHead/divdiv classuml-bodydivbutton οnclicksetDatas() οnmοusedοwnstopPropagation(event)/button ${properties.name}/divdiv${properties.body}/div/divdiv classuml-footerdivsetHead(Head $head)/divdivsetBody(Body $body)/div/div/divel.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 langts
import LogicFlow from logicflow/core
import logicflow/core/dist/style/index.css
import { CustomNode } from ./component/CustomNode
import { onMounted } from vueconst 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})}})
})
/scripttemplateh3Example13/h3div idcontainer/div!-- 用于显示 LogicFlow 图表的容器 --
/templatestyle
#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
