当前位置: 首页 > news >正文

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

相关文章:

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

事件 Event 当我们使用鼠标或其他方式与画布交互时&#xff0c;会触发对应的事件。通过监听这些事件&#xff0c;可以获取其在触发时所产生的数据&#xff0c;根据这些数据来实现需要的功能。详细可监听事件见事件API。 监听事件 lf实例上提供on方法支持监听事件。 lf.on(&…...

Nginx缓存之代理缓存配置

Nginx 的缓存功能是集成在代理模块中的&#xff0c;当启用缓存功能时&#xff0c;Nginx 将请求返回的响应数据持久化在服务器磁盘中&#xff0c;响应数据缓存的相关元数据、有效期及缓存内容等信息将被存储在定义的共享内存中。当收到客户端请求时&#xff0c;Nginx 会在共享内…...

【Android】使用SeekBar控制数据的滚动

项目需求 有一个文本数据比较长&#xff0c;需要在文本右侧加一个SeekBar&#xff0c;然后根据SeekBar的上下滚动来控制文本的滚动。 项目实现 我们使用TextView来显示文本&#xff0c;但是文本比较长的话&#xff0c;需要在TextView外面套一个ScrollView&#xff0c;但是我…...

新能源汽车的能源动脉:中国星坤汽车电缆在新能源汽车电气化中的应用!

随着新能源汽车行业的蓬勃发展&#xff0c;汽车电缆组件作为汽车电气系统的核心组成部分&#xff0c;其重要性日益凸显。中国星坤汽车电缆组件以其卓越的性能和创新技术&#xff0c;为汽车的电能传输、信号传递和控制提供了坚实的保障。本文将深入解析星坤汽车电缆组件的特性、…...

AVL许可证查询系统

在数字化时代&#xff0c;软件已经成为企业运营的核心组成部分。然而&#xff0c;随着软件应用的不断增加&#xff0c;许可证管理也变得越来越复杂。AVL许可证查询系统作为企业软件资产管理的重要工具&#xff0c;能够帮助企业实现对软件许可证的全面掌控。本文将深入探讨AVL许…...

四个步骤,帮你成为价值导向型项目经理

在企业数字化转型的浪潮下&#xff0c;项目管理的方向逐渐从任务导向转变为以价值交付为导向。在快速变化的市场环境中&#xff0c;仅仅关注项目任务的完成已不足以确保项目的成功&#xff0c;需要更加注重项目的最终成果和价值&#xff0c;确保项目能够为组织带来实际的价值和…...

Python3 使用 clickhouse-connect 操作 clickhouse

版本&#xff1a; Python 3.7 x86 clickhouse 24.6.1.3573 clickhouse-connect 0.6.22 代码一&#xff1a; # pip install clickhouse-connectimport clickhouse_connect# 准备参数 host "192.168.1.112" port 8123 username "default" passw…...

Python脚手架系列-DrissionPage

记录DrissionPage模块使用中的一些常常复用的代码,持续更新… 接管谷歌浏览器 from DrissionPage import ChromiumPage, ChromiumOptionsco ChromiumOptions().set_local_port(4249) driver ChromiumPage(addr_or_optsco)创建driver&#xff0c;如果浏览器已开启优先接管&am…...

Java中如何调用mysql中函数

在Java中调用MySQL中的函数&#xff08;无论是存储函数还是自定义函数&#xff09;&#xff0c;通常是通过JDBC&#xff08;Java Database Connectivity&#xff09;来完成的。以下是一个简单的步骤说明和示例代码&#xff0c;展示如何在Java中调用MySQL中的函数。 步骤 添加…...

Huggingface-cli 登录最新版(2024)

安装Huggingface-cli pip install -U "huggingface_hub[cli]"设置好git的邮箱和用户名和huggingface的github账号一致 git config --global user.mail xxx git config --global user.name xxx登录 复制token&#xff0c;划红线的地方&#xff0c;在命令行中点击右…...

Java学习 - Docker管理和容器命令 实例

docker管理 查看docker版本&#xff0c;检测是否可用 sudo docker version查看docker 系统信息 sudo docker infodocker容器命令 容器状态 容器标识 容器长uuid容器短uuid容器名字 查看容器状态 sudo docker status [容器标识1] [容器标识2] [容器标识n]深入查看容器信息 su…...

下载工程resources目录下的模板excel文件

一、添加依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>5.1.0</version> </dependency> 二、编写接口 GetMapping("/downloadTemplate")public void downlo…...

音频基础知识和音频指标

音频基础知识 声音 声音&#xff08;sound)是由物体振动产生的声波。物体在一秒钟之内振动的次数叫做频率&#xff0c;单位是赫兹&#xff0c;字母Hz。人耳可以识别的声音频率在 20 Hz~20000 Hz之间&#xff1b; 声音三要素&#xff1a; 响度 响度&#xff0c;…...

使用Vue CLI在其他磁盘创建项目出现错误及解决

Vue CLI是Vue.js官方推出的脚手架工具&#xff0c;可以帮我们快速的创建Vue项目框架。 我们创建Vue项目时一般默认都是在C盘&#xff0c;但由于某些因素我们需要在其他磁盘上创建Vue项目。 通过“winr”打开终端时默认位置都是C盘&#xff0c;但是Vue CLI不接受绝对路径作为参…...

关于lamda表达式的使用

Lambda表达式是一种匿名函数&#xff0c;即没有函数名的函数&#xff0c;它可以以更简洁、更灵活的方式编写代码。以下是Lambda表达式的常用方式&#xff1a; 无参数&#xff0c;无返回值&#xff1a; 如果抽象方法不带参数且不返回值&#xff0c;可以使用空括号和主体编写Lam…...

Android替换默认的按键音

替换audio_assets.xml文件 此文件在AudioService.java被调用 <!--文件位置 /frameworks/base/core/res/res/xml/--> <audio_assets version"1.0"><group name"touch_sounds"><asset id"FX_KEY_CLICK" file"Effect…...

Windows 服务器Nginx 下载、部署、配置流程(图文教程)

不定期更新 目录 一、下载Nginx安装包 二、上传安装包 三、启动Nginx 四、Nginx常用命令 五、Nginx&#xff08;最小&#xff09;配置详解 六、Nginx&#xff08;基础&#xff09;配置详解 七、反向代理 八、负载均衡 九、动静分离 十、报错 一、下载Nginx安装包 四…...

基于Redis实现共享session登录

搭配食用&#xff1a;Redis&#xff08;基础篇&#xff09;-CSDN博客 项目实现前的 Mysql中的表&#xff1a; 表说明tb_user用户表tb_user_info用户详情表tb_shop商户信息表tb_shop_type商户类型表tb_blog用户日记表&#xff08;达人探店日记)tb_follow用户关注表tb_voucher优…...

shell函数的定义

shell函数的定义 ​ 定义:将命令序列按照格式写在一起.格式指的是函数的固定格式 ​ 作用:方便重复使用,还可以做成函数库,集中在一起,随时可以传参调用,大的工程分割成小的模块,提高代码的可读性. 函数的格式 vim hanshu1.shfunction shopping {命令序列}shopping () {命令…...

vue部署宝塔nginx配置(获取用户ip地址、反代理访问api接口、websocket转发)

以下配置为我自己的需求&#xff0c;因人而异&#xff0c;如果只是单纯的前端非交互页面&#xff0c;可以不用修改配置。 代码及注释&#xff0c;如下&#xff1a; #解决vue-router设置mode为history&#xff0c;去掉路由地址上的/#/后nginx显示404的问题location / {proxy_htt…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...

32位寻址与64位寻址

32位寻址与64位寻址 32位寻址是什么&#xff1f; 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元&#xff08;地址&#xff09;&#xff0c;其核心含义与能力如下&#xff1a; 1. 核心定义 地址位宽&#xff1a;CPU或内存控制器用32位…...

深入理解 React 样式方案

React 的样式方案较多,在应用开发初期,开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有: 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中,均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观,适合动态样式和…...