在vue3中浅尝antv X6 2.0 demo(三)

2023-11-02 05:30

本文主要是介绍在vue3中浅尝antv X6 2.0 demo(三),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

终于抽空把antv X6 2.0这个版本的demo抽出来了,原以为项目会一直使用vue3去做这个流程,结果最近项目经理说antv X6的菜单功能只有react才能用...然鹅...写到菜单模块的时候,发现都可以用的...

目前我项目里面react版本的多一些功能(如:新增节点时自动布局、右键菜单,如图)

这篇记一下这个小demo的一些功能和实现~~~

(附上demo仓库连接: https://github.com/Tipchak5/vue3_antv_X6_2.0.git)

  • 导入模版 (画布中的节点是点击插入模版直接形成的,且左侧目录树与模板的关系是相对应的,目录树的label我用的是节点id来显示的)

 代码实现:

1、先引入模版数据tsakMasterplate(后期应该是调后端接口选择模版导入)

2、直接调这个leadInMasterplate方法,导入模板前会先清空画布

const tsakMasterplate = ref(require('../../assets/masterplate.json')); // 引入模版数据/** 导入模版 */
const leadInMasterplate = async () => {// 清空所有单元格const cells = graph.getCells(); // 获取所有单元格graph.removeCells(cells); // 画布清空// 模版渲染await new Promise((resolve) => setTimeout(resolve, 100));graph.fromJSON(tsakMasterplate.value).centerContent(); // 引入模版数据 这里tsakMasterplate是我自己写的一个死数据// 对应的目录树treeInfo.value = [{label: 'node2',children: [{label: 'task2',children: [{label: 'task3',children: [],},{label: 'task5',children: [],},],},],},];
};

  • 导出json(其实导出json就相当于创建了一个模版,以json的格式将你要常用的节点模版传给后端,以便后期调用)

    代码实现:

// 导出json
function printNodeList() {console.log(graph.toJSON(), '导出数组');console.log(JSON.stringify(graph.toJSON({ diff: true })), 'JSON');graph.clearCells();
}

  • 新增节点

  • <el-button type="primary" :icon="Plus" :title="task" @mousedown="startDrag(task, $event)" >新增{{ task }}
    </el-button>const task = ref('任务');// 新增任务节点
    const startDrag = (type) => {const tree = startDragToGraph(graph, type); // graph就是初始化的画布 因为我是将startDragToGraph方法抽出来放在公共js中直接调用的 所以传了graph 如果你在当前页面就不需要传了id.value = tree.id;const label = { label: tree.id, children: [] };treeInfo.value[0].children.push(label); // 更新树目录
    };// 这里startDragToGraph方法如下
    let count = 0;
    const startDragToGraph = (graph, type) => {let node = null;node = graph.addNode({shape: 'custom-rect',attrs: {label: {text: type,// 自动换行textWrap: {width: '90%',height: '80%',ellipsis: true,breakWord: true,},},},x: -50,y: -50,id: `task${++count}`, // 设置节点id 方便后期根据id抓节点 进行一些操作});ElMessage.success(`添加任务节点${node.id}成功!`);return node;
    };

  •  节点连接时的一些操作

        1、首先,它节点中带有一个叫做port的连接桩(也就是节点边上的小圆点)

        2、什么时候显示port,并让节点之间相连接?案例告诉我们是鼠标移入节点时显示port,

                移出隐藏

 代码实现

// 连接桩
const ports = {groups: {top: {position: 'top',attrs: {circle: {r: 2,magnet: true,stroke: 'black',strokeWidth: 1,fill: '#fff',style: {visibility: 'hidden',},},},},right: {position: 'right',attrs: {circle: {r: 2,magnet: true,stroke: 'black',strokeWidth: 1,fill: '#fff',style: {visibility: 'hidden',},},},},bottom: {position: 'bottom',attrs: {circle: {r: 2,magnet: true,stroke: 'black',strokeWidth: 1,fill: '#fff',style: {visibility: 'hidden',},},},},left: {position: 'left',attrs: {circle: {r: 2,magnet: true,stroke: 'black',strokeWidth: 1,fill: '#fff',style: {visibility: 'hidden',},},},},},items: [{group: 'top',},{group: 'right',},{group: 'bottom',},{group: 'left',},],
};

port的显示与隐藏

	graph.on('node:mouseenter', () => {const container = document.getElementById('graph-container');const ports = container.querySelectorAll('.x6-port-body');showPorts(ports, true);});graph.on('node:mouseleave', () => {const container = document.getElementById('graph-container');const ports = container.querySelectorAll('.x6-port-body');showPorts(ports, false);}); // 以上代码需要放在onMounted周期中 或者画布初始化的方法中也可以// 函数showPorts我是单独抽成一个公共js的文件里面使用的 看个人实际情况function showPorts(ports, show) {for (let i = 0, len = ports.length; i < len; i = i + 1) {ports[i].style.visibility = show ? 'visible' : 'hidden';}}

3、连接成功后,根据连接的目标节点和源节点来判断 树目录 的数据结构要如何显示 (么错,递归要来了...)

拿到目标节点和源节点后,去 树目录 里面找这个两个id,有的话就让 树目录里面的目标节点 成为源节点子,然后你就可以拥有一个和节点相对应的目录树了

其中有一点很重要,当连接成功后,目录树里面 目标节点 会成为 源节点 的子后,要记得删除目录树原来的那个目标节点(顺便说一下: react里面的书组件是不支持整个目录树有相同的2个节点出现的,也就是一个子节点不能有两个源节点)

代码实现 

	// 节点连接成功时graph.on('edge:connected', ({ isNew, edge }) => {if (isNew) {const sourceId = edge.getSourceCell().id;const targetId = edge.getTargetCell().id;// findNodeById 是我写的一个公共方法 在树目录里找和节点相同的idconst sourceNode = findNodeById(treeInfo.value[0].children,sourceId); // 源节点idconst targetNode = findNodeById(treeInfo.value[0].children,targetId); // 目标节点idif (sourceNode && targetNode) {sourceNode.children.push(targetNode);// push之后删除原targetNodefor (let i = 0; i < treeInfo.value[0].children.length; i++) {const node = treeInfo.value[0].children[i];if (node.label === targetId) {treeInfo.value[0].children.splice(i, 1);}}}}});// 树形目录中添加节点
export const findNodeById = (nodes, id) => {for (let i = 0; i < nodes.length; i++) {const node = nodes[i];if (node.label === id) {return node;}if (node.children) {const result = findNodeById(node.children, id);if (result) {return result;}}}return null;
};

  • 删除功能

删除节点可以通过绑定键盘按钮操作,也可以使用官方的节点工具(想要实现下图的删除,可以参考官方文档,so easy)

我主要是通过键盘按钮('delete', 'backspace'都可以删除)来操作的,需要安装X6对应的插件@antv/x6-plugin-keyboard 来绑定删除事件,当然,树目录也要删除对应的节点数据(删除的时候,如果该节点有子节点会连带后续所有的子节点都删除

代码实现

/** 删除的一些操作 */graph.bindKey(['delete', 'backspace'], () => {const cells = graph.getSelectedCells();const cellsId = cells[0].id; // 获取删除节点的idif (cells.length) {const allChildrenNode = [];const nodes = cells.filter((cell) => cell.isNode());nodes.forEach((node) => {//  获取后继单元格const successors = graph.getSuccessors(node, { depth: 3 });allChildrenNode.push(...successors);console.log(successors, 'successors');});// 获取后继节点idlet keyArr = [];allChildrenNode.forEach((i) => {keyArr.push(i.id);});// 删除当前节点graph.removeCells(cells);removeNodes(keyArr);// 如果删除的节点和其他节点有共同子节点时 删除书目录中对应的数据let newArr = [...keyArr, cellsId]; // 要删除的节点id// 删除对应树目录数据deleteNodeById(treeInfo.value[0].children, newArr);console.log(newArr, 'newArr');}});// 删除后继节点
function removeNodes(keys) {if (keys && keys.length > 0) {keys.forEach((key) => {graph.removeNode(key, {deep: true,});});}
}// 树形目录中删除对应节点
export const deleteNodeById = (treeArr, keyArr) => {let deleted = false;for (let i = treeArr.length - 1; i >= 0; i--) {const node = treeArr[i];if (keyArr.includes(node.label)) {treeArr.splice(i, 1);deleted = true;} else if (node.children && node.children.length) {if (deleteNodeById(node.children, keyArr)) {deleted = true;if (node.children.length === 0) {node.children = [];}}}}return deleted;
};

以上差不多就是这个demo的所有功能了,还有文本编辑啥的,我还没测过,暂时就不管了,先这样吧~

期待与大家一起共同交流,共同进步,如果有地方写的烂,还望海涵,欢迎大佬指导,最近卡在react版的自定义工具注册上,react是真的不是很熟悉...头疼...

这篇关于在vue3中浅尝antv X6 2.0 demo(三)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/328435

相关文章

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求