antv/x6_2.0学习使用（六、事件系统）

一、视图交互事件

通过鼠标、键盘或者各种可交互的组件与应用产生交互时触发的事件，如单击节点 ‘node:click’ 等。

1、鼠标事件
事件cell 节点/边node 节点edge 边blank 画布空白区域
单击cell:clicknode:clickedge:clickblank:click
双击cell:dblclicknode:dblclickedge:dblclickblank:dblclick
右键cell:contextmenunode:contextmenuedge:contextmenublank:contextmenu
鼠标按下cell:mousedownnode:mousedownedge:mousedownblank:mousedown
移动鼠标cell:mousemovenode:mousemoveedge:mousemoveblank:mousemove
鼠标抬起cell:mouseupnode:mouseupedge:mouseupblank:mouseup
鼠标滚轮cell:mousewheelnode:mousewheeledge:mousewheelblank:mousewheel
鼠标进入cell:mouseenternode:mouseenteredge:mouseenterblank:mouseenter
鼠标离开cell:mouseleavenode:mouseleaveedge:mouseleaveblank:mouseleave

需要注意的是，这里的 mousemove 事件和通常的鼠标移动事件有所区别，它需要在鼠标按下后移动鼠标才能触发。

除了 mouseenter 和 mouseleave 外，事件回调函数的参数都包含鼠标相对于画布的位置 x、y 和鼠标事件对象 e 等参数。

graph.on("cell:click", ({ e, x, y, cell, view }) => {});
graph.on("node:click", ({ e, x, y, node, view }) => {});
graph.on("edge:click", ({ e, x, y, edge, view }) => {});
graph.on("blank:click", ({ e, x, y }) => {});graph.on("cell:mouseenter", ({ e, cell, view }) => {});
graph.on("node:mouseenter", ({ e, node, view }) => {});
graph.on("edge:mouseenter", ({ e, edge, view }) => {});
graph.on("graph:mouseenter", ({ e }) => {});
2. 自定义点击事件

可以在节点/边的 DOM 元素上添加自定义属性 event 或 data-event 来监听该元素的点击事件，例如：

node.attr({// 表示一个删除按钮，点击时删除该节点image: {event: "node:delete",xlinkHref: "trash.png",width: 20,height: 20,},
});

可以通过绑定的事件名 node:delete 或通用的 cell:customevent、node:customevent、edge:customevent 事件名来监听。

graph.on("node:delete", ({ view, e }) => {e.stopPropagation();view.cell.remove();
});graph.on("node:customevent", ({ name, view, e }) => {if (name === "node:delete") {e.stopPropagation();view.cell.remove();}
});

功能演示

3. 画布缩放/平移
事件名回调参数说明
scale{ sx: number; sy: number; ox: number; oy: number }缩放画布时触发，sx 和 sy 是缩放比例，ox 和 oy 是缩放中心。
resize{ width: number; height: number }改变画布大小时触发，width 和 height 是画布大小。
translate{ tx: number; ty: number }平移画布时触发，tx 和 ty 分别是 X 和 Y 轴的偏移量。
graph.on("scale", ({ sx, sy, ox, oy }) => {});
graph.on("resize", ({ width, height }) => {});
graph.on("translate", ({ tx, ty }) => {});
4. 节点或边缩放/平移/旋转
事件名回调参数说明
node:move{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }开始移动节点时触发。
node:moving{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }移动节点时触发。
node:moved{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }移动节点后触发。
edge:move{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }开始移动边时触发。
edge:moving{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }移动边时触发。
edge:moved{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }移动边后触发。
node:resize{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }开始调整节点大小时触发。
node:resizing{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }调整节点大小时触发。
node:resized{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }调整节点大小后触发。
node:rotate{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }开始旋转节点时触发。
node:rotating{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }旋转节点时触发。
node:rotated{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }旋转节点后触发。

参数中的 x 和 y 是鼠标相对于画布的坐标。

graph.on("node:moved", ({ e, x, y, node, view }) => {});
graph.on("node:resized", ({ e, x, y, node, view }) => {});
graph.on("node:rotated", ({ e, x, y, node, view }) => {});
5. 节点嵌入
事件名回调参数说明
node:embed{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView, currentParent: Node }开启嵌入，在开始拖动节点时触发。
node:embedding{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView, currentParent: Node, candidateParent: Node }寻找目标节点过程中触发。
node:embedded{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView, previousParent: Node, currentParent: Node }完成节点嵌入后触发。
6. 边连接/取消连接

当拖动边的起始/终止箭头将边连接到节点/边或者将边从节点/边上分离后触发 edge:connected，回调函数的参数如下。

interface Args {e: JQuery.MouseUpEvent  // 鼠标事件对象edge: Edge              // 边view: EdgeView          // 边的视图isNew: boolean          // 是否是新创建的边type: Edge.TerminalType // 操作的是起始箭头还是终止箭头（'source' | 'target'）previousCell?: Cell | null             // 交互前连接到的节点/边previousView?: CellView | null         // 交互前连接到的节点/边的视图previousPort?: string | null           // 交互前连接到的链接桩 IDpreviousPoint?: Point.PointLike | null // 交互前连接到的点（将边的终端从空白处拖动到节点/边上时记录起始终端的位置）previousMagnet?: Element | null        // 交互前连接到的元素currentCell?: Cell | null             // 交互后连接到的节点/边currentView?: CellView | null         // 交互后连接到的节点/边的视图currentPort?: string | null           // 交互后连接到的链接桩 IDcurrentPoint?: Point.PointLike | null // 交互后连接到的点（将边的终端从节点/边上拖动到空白处时记录拖动后终端的位置）currentMagnet?: Element | null        // 交互后连接到的元素
}

一、节点/边

1. 添加/删除/修改

  • 当节点/边被添加到画布时，触发以下事件：

    • added
    • cell:added
    • node:added（仅当 cell 是节点时才触发）
    • edge:added（仅当 cell 是边时才触发）

  • 当节点/边被移除时，触发以下事件：

    • removed
    • cell:removed
    • node:removed（仅当 cell 是节点时才触发）
    • edge:removed（仅当 cell 是边时才触发）

  • 当节点/边发生任何改变时，触发以下事件：

    • changed
    • cell:changed
    • node:changed（仅当 cell 是节点时才触发）
    • edge:changed（仅当 cell 是边时才触发）

可以在节点/边上监听：

cell.on("added", ({ cell, index, options }) => {});
cell.on("removed", ({ cell, index, options }) => {});
cell.on("changed", ({ cell, options }) => {});

或者在 Graph 上监听：

graph.on("cell:added", ({ cell, index, options }) => {});
graph.on("cell:removed", ({ cell, index, options }) => {});
graph.on("cell:changed", ({ cell, options }) => {});graph.on("node:added", ({ node, index, options }) => {});
graph.on("node:removed", ({ node, index, options }) => {});
graph.on("node:changed", ({ node, options }) => {});graph.on("edge:added", ({ edge, index, options }) => {});
graph.on("edge:removed", ({ edge, index, options }) => {});
graph.on("edge:changed", ({ edge, options }) => {});
2. change:xxx

当调用 setXxx(val, options) 和 removeXxx(options) 方法去改变节点/边的数据时，并且 options.silent 不为 true 时，都将触发对应的 chang 事件，并触发节点/边重绘。例如：

cell.setZIndex(2);
cell.setZIndex(2, { silent: false });
cell.setZIndex(2, { anyKey: "anyValue" });

将触发 Cell 上的以下事件：

  • change:*
  • change:zIndex

和 Graph 上的以下事件：

  • cell:change:*
  • node:change:*（仅当 cell 是节点时才触发）
  • edge:change:*（仅当 cell 是边时才触发）
  • cell:change:zIndex
  • node:change:zIndex（仅当 cell 是节点时才触发）
  • edge:change:zIndex（仅当 cell 是边时才触发）

可以在节点/边上监听：

// 当 cell 发生任何改变时都将被触发，可以通过 key 来确定改变项
cell.on('change:*', (args: {cell: Cellkey: string   // 通过 key 来确定改变项current: any  // 当前值previous: any // 改变之前的值options: any  // 透传的 options
}) => {if (key === 'zIndex') {//}
})cell.on('change:zIndex', (args: {cell: Cellcurrent?: number  // 当前值previous?: number // 改变之前的值options: any      // 透传的 options
}) => { })

或者在 Graph 上监听：

graph.on('cell:change:*', (args: {cell: Cellkey: string   // 通过 key 来确定改变项current: any  // 当前值，类型根据 key 指代的类型确定previous: any // 改变之前的值，类型根据 key 指代的类型确定options: any  // 透传的 options
}) => { })// 当 cell 为节点时触发
graph.on('node:change:*', (args: {cell: Cellnode: Nodekey: string   // 通过 key 来确定改变项current: any  // 当前值，类型根据 key 指代的类型确定previous: any // 改变之前的值，类型根据 key 指代的类型确定options: any  // 透传的 options
}) => { })// 当 cell 为边时触发
graph.on('edge:change:*', (args: {cell: Celledge: Edgekey: string   // 通过 key 来确定改变项current: any  // 当前值，类型根据 key 指代的类型确定previous: any // 改变之前的值，类型根据 key 指代的类型确定options: any  // 透传的 options
}) => { })graph.on('cell:change:zIndex', (args: {cell: Cellcurrent?: number  // 当前值previous?: number // 改变之前的值options: any      // 透传的 options
}) => { })// 当 cell 为节点时触发
graph.on('node:change:zIndex', (args: {cell: Cellnode: Nodecurrent?: number  // 当前值previous?: number // 改变之前的值options: any      // 透传的 options
}) => { })// 当 cell 为边时触发
graph.on('edge:change:zIndex', (args: {cell: Celledge: Edgecurrent?: number  // 当前值previous?: number // 改变之前的值options: any      // 透传的 options
}) => { })

其他 change 事件如下列表，回调函数的参数与上面提到的 change:zIndex 的参数结构一致。

  • Cell

    • change:*
    • change:attrs
    • change:zIndex
    • change:markup
    • change:visible
    • change:parent
    • change:children
    • change:view
    • change:data

  • Node

    • change:size
    • change:angle
    • change:position
    • change:ports
    • change:portMarkup
    • change:portLabelMarkup
    • change:portContainerMarkup
    • ports:added
    • ports:removed

  • Edge

    • change:source
    • change:target
    • change:terminal
    • change:router
    • change:connector
    • change:vertices
    • change:labels
    • change:defaultLabel
    • change:toolMarkup
    • change:doubleToolMarkup
    • change:vertexMarkup
    • change:arrowheadMarkup
    • vertexs:added
    • vertexs:removed
    • labels:added
    • labels:removed

除了上述这些内置的 Key，我们也支持监听自定义的 Key，例如

cell.on("change:custom", ({ cell, current, previous, options }) => {console.log(current);
});

当通过 cell.prop(‘custom’, ‘any data’) 方法修改 custom 属性的值时将触发 change:custom 事件。

3. 动画
  • ‘transition:start’ 动画开始时触发
  • ‘transition:progress’ 动画过程中触发
  • ‘transition:complete’ 动画完成时触发
  • ‘transition:stop’ 动画被停止时触发
  • ‘transition:finish’ 动画完成或被停止时触发
cell.on('transition:start', (args: Animation.CallbackArgs) => {})
cell.on('transition:progress', (args: Animation.ProgressArgs) => {})
cell.on('transition:complete', (args: Animation.CallbackArgs) => {})
cell.on('transition:stop', (args: Animation.StopArgs) => {})
cell.on('transition:finish', (args: Animation.CallbackArgs) => {})graph.on('cell:transition:start', (args: Animation.CallbackArgs) => {})
graph.on('cell:transition:progress', (args: Animation.ProgressArgs) => {})
graph.on('cell:transition:complete', (args: Animation.CallbackArgs) => {})
graph.on('cell:transition:stop', (args: Animation.StopArgs) => {})
graph.on('cell:transition:finish', (args: Animation.CallbackArgs) => {})graph.on('node:transition:start', (args: Animation.CallbackArgs) => {})
graph.on('node:transition:progress', (args: Animation.ProgressArgs) => {})
graph.on('node:transition:complete', (args: Animation.CallbackArgs) => {})
graph.on('node:transition:stop', (args: Animation.StopArgs) => {})
graph.on('node:transition:finish', (args: Animation.CallbackArgs) => {})graph.on('edge:transition:start', (args: Animation.CallbackArgs) => {})
graph.on('edge:transition:progress', (args: Animation.ProgressArgs) => {})
graph.on('edge:transition:complete', (args: Animation.CallbackArgs) => {})
graph.on('edge:transition:stop', (args: Animation.StopArgs) => {})
graph.on('edge:transition:finish', (args: Animation.CallbackArgs) => {})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/605828.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

量子计算：未来科技的革新引擎与广泛应用前景

量子计算：未来科技的革新引擎与广泛应用前景

在当今科技领域，量子计算机作为颠覆性的技术力量正在崭露头角。它超越了传统二进制逻辑门的经典计算框架，利用量子比特（qubits）及其叠加态和纠缠现象实现前所未有的信息处理能力。随着全球科研团队对量子计算领域的持续深耕&#…
阅读更多...
【镜像压缩】linux 上 SD/TF 卡镜像文件压缩到实际大小的简单方法（树莓派、nvidia jetson）

【镜像压缩】linux 上 SD/TF 卡镜像文件压缩到实际大小的简单方法（树莓派、nvidia jetson）

文章目录 1. 备份 SD/TF 卡为镜像文件2. 压缩镜像文件2.1. 多分区镜像文件的压缩（树莓派、普通 linux 系统等）2.2. 单分区镜像文件的压缩（Nvidia Jetson Nano 等） 3. 还原镜像文件到 SD/TF 卡参考链接 1. 备份 SD/TF 卡为镜像文件…
阅读更多...
运用Jmeter进行登录测试

运用Jmeter进行登录测试

开始了解Jmeter，写篇关于Jmeter的博客做备忘，这里以苏宁易购网站的登录请求为例实战来说明测试计划元件，创建一个 Web 测试计划。 今天简单介绍Jemeter的入门，Jmeter 的安装这边就跳过，直接讲述如何使用JMETER，如何运用Jmeter进行测试。 ａ．下载jmeter软件 ｂ．安装…
阅读更多...
【RabbitMQ】2 RabbitMQ介绍与架构

【RabbitMQ】2 RabbitMQ介绍与架构

目录 简介架构Connection 和Channel关系工作流程生产者发送消息的流程消费者接收消息的过程 RabbitMQ数据存储存储机制 安装和配置RabbitMQRabbitMQ常用操作命令 简介 RabbitMQ，俗称“兔子MQ”（可见其轻巧，敏捷），是目…
阅读更多...
2024年1月7日学习总结

2024年1月7日学习总结

目录 今日计划学习内容今日学习内容1、argparse——命令行选项、参数、子命令解释器2、Python中的元组（1）访问元组（2）修改元组（3）删除元组（4）元组的运算（5）元…
阅读更多...
excel 按照姓名日期年份分组求和

excel 按照姓名日期年份分组求和

excel 需要按照 姓名 日期中年份分组求和，目前想到 sumifs函数，大概需求如下： 表格数据大概如下 ABC姓名日期金额a2022/2/1542a2023/4/5154b2023/3/5100 统计结果如下： ABC1姓名2022年2023年2a5421543b100 对应公式 如下 --算…
阅读更多...
【linux学习】linux概述

【linux学习】linux概述

1. linux概述 操作系统主要的功能有两个部分，一是更有效率的控制计算机硬件资源（主要通过核心来控制），二是为程序设计师提供更容易开发软件的环境（系统呼叫提供软件开发环境）。linux就是一套操作系统&…
阅读更多...
「许战海战略文库」从日本消费趋势看中国食品的第二招牌

「许战海战略文库」从日本消费趋势看中国食品的第二招牌

在日本消费趋势的映射下，中国的食品行业面临着独特的转型机遇。品类品牌时代的终结及其在美元霸权经济下的起落，以及中国企业如何在改革开放四十年市场红利结束后继续成长，面对内卷式竞争，中国食品企业如何寻找新的增长路径&#…
阅读更多...
【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！

【JaveWeb教程】（1）Web前端基础：HTML+CSS入门不再难：一篇文章教你轻松搞定HTML与CSS！

目录 1. 前端开发介绍2. HTML & CSS2.1 HTML快速入门2.1.1 操作2.1.2 总结 2.2 开发工具2.3 基础标签 & 样式2.3.1 新浪新闻-标题实现2.3.1.1 标题排版2.3.1.1.1 分析2.3.1.1.2 标签2.3.1.1.2 实现 2.3.1.2 标题样式2.3.1.2.1 CSS引入方式2.3.1.2.2 颜色表示2.3.1.2.3 …
阅读更多...
【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax概述

【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax概述

【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax概述 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax快速入门 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax类图 【大数据进阶第三阶段之Datax学习笔记】使用…
阅读更多...
python数据可视化之地图绘制案例分析

python数据可视化之地图绘制案例分析

在数据可视化领域，地理信息的展示有着无可替代的价值。本篇笔记将通过Python的pyecharts库实现一个中国直辖市GDP数据的地图分布可视化示例，帮助读者了解如何利用该工具进行地图数据渲染。 1. 导入所需模块 首先，我们需要导入pyecharts库中…
阅读更多...
Sage运行pwntools库脚本异常解决：OSError: Int or String expected

Sage运行pwntools库脚本异常解决：OSError: Int or String expected

需要和Oracle交互的密码学脚本一般都需要借助pwn库的帮助，今天切换了python版本后，出现了一个异常（OSError: Int or String expected，详细异常见文章），查阅一下源码后简单的解决了这个问题，在此…
阅读更多...
OpenAI 也在 996？一位离职员工自白：代码贡献第四，经常工作 6 天丨 RTE 开发者日报 Vol.121

OpenAI 也在 996？一位离职员工自白：代码贡献第四，经常工作 6 天丨 RTE 开发者日报 Vol.121

开发者朋友们大家好： 这里是 「RTE 开发者日报」 ，每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE （Real Time Engagement） 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…
阅读更多...
在python中_signal= pyqtSignal(object) 怎么c++中 像这样统一传递 object

在python中_signal= pyqtSignal(object) 怎么c++中 像这样统一传递 object

在python中_signal pyqtSignal(object) 怎么c中 像这样统一传递 object? 在C的Qt中，信号的参数类型需要明确指定，因为C是静态类型语言。如果你想要传递一个通用的对象，你可以使用QVariant，它是Qt的一个通用容器类，能够…
阅读更多...
SpringClould微服务+分布式事务笔记

SpringClould微服务+分布式事务笔记

SpringClould微服务 拆分项目步骤&#xff1a; 创建模块 导入依赖 复制启动类 复制配置文件 application.yaml 复制有关此模块的代码&#xff08;domain、controller、service、mapper&#xff09; 新建数据库 配置启动项服务注册&#xff1a; <!--nacos 服务注册发现--&…
阅读更多...
Prometheus Blackbox_exporter笔记

Prometheus Blackbox_exporter笔记

一、安装Promtheus 在 Prometheus 官网 Download | Prometheus 获取适用于 Linux 的 Prometheus 安 装包&#xff0c;这里我选择最新的 2.46.0 版本&#xff0c;我是 Linux 系统&#xff0c;选择下载 prometheus-2.46.0.linux-amd64.tar.gz 下载安装包&#xff1a; wget htt…
阅读更多...
Gateway相关问题及答案（2024）

Gateway相关问题及答案（2024）

1、什么是API Gateway&#xff1f;它在微服务架构中有什么作用&#xff1f; API Gateway是一个服务器&#xff0c;通常是一个可以管理和处理所有进出应用程序的请求的反向代理。在微服务架构中&#xff0c;它作为单一的入口点&#xff0c;统一接收来自客户端的调用请求&#x…
阅读更多...
多国管理中心多语言区块链源码一元夺宝程序仿趣步奕跑/原生计步器/原生人脸识别

多国管理中心多语言区块链源码一元夺宝程序仿趣步奕跑/原生计步器/原生人脸识别

前后台分开的&#xff0c;后台是TP3.2的框架了&#xff0c;应该是比较老的程序了。 目前把整体UI 改版黄色系风格&#xff0c;集成了一元夺宝程序&#xff0c;用户数据同步趣步&#xff0c;效果看起来很棒&#xff0c;另外加入股票走势图&#xff08;K线图&#xff09;&#xf…
阅读更多...
世微AP5126宽电压12-80V 1.5A平均电流型LED降压恒流驱动内置IC

世微AP5126宽电压12-80V 1.5A平均电流型LED降压恒流驱动内置IC

产品描述 AP5126 是一款 PWM 工作模式,高效率、外 围简单、内置功率管&#xff0c;适用于 12-80V 输入的高 精度降压 LED 恒流驱动芯片。输出功率可达 15W&#xff0c;电流 1.2A。 AP5126 可实现全亮/半亮功能切换&#xff0c;通过 MODE 切换&#xff1a;全亮/半亮/循环模式…
阅读更多...
创建数据库用户

创建数据库用户

要在MySQL数据库中创建用户&#xff0c;您可以使用以下命令&#xff1a; CREATE USER usernamelocalhost IDENTIFIED BY password;其中&#xff0c;username是您要创建的用户名&#xff0c;localhost表示用户只能从本地连接到数据库&#xff0c;password是用户的密码。 如果要…
阅读更多...
最新文章

Copyright @ 2022~2023