【vue2+antvx6】节点大小不一致,点击按钮流程图自动布局

需求:

1、点击优化布局的按钮,自动布局(从左到右),按钮变成撤销布局按钮

2、点击撤销布局的按钮,返回之前的布局

3、在点击优化布局的按钮后,如果移动了节点,则自动将撤销布局的按钮变成优化布局的按钮

第一步:安装插件

npm i @antv/layout

第二步:写方法

 // 优化布局(自动布局)layout() {this.isRevoke = true;const gridLayout = new DagreLayout({type: "dagre",rankdir: "LR",// align: "UL",ranksep: 30,nodesep: 15,controlPoints: true,});//布局所需的格式const originData = {nodes: [],edges: [],};//获取所有节点const nodes = graph.getNodes();//获取当前数据const jso = (document.querySelector("#container").value = JSON.stringify(graph.toJSON({ diff: true })));//保存原先布局localStorage.setItem("layoutAntv", jso);//原先布局中的数据放置到所需格式中JSON.parse(jso).cells.forEach((i) => {if (i.shape === "edge") {originData.edges.push(i);} else {originData.nodes.push(i);}});//我设置的vue自定义节点,所以节点在添加的时候,会根据实际盒子的大小进行设置(利用node.resize()进行改变)//所以我的节点大小是不一致的,需要替换一下改变后的节点大小nodes.forEach((node) => {const size = node.size();originData.nodes.forEach((j) => {if (node.id === j.id) {j.size.width = size.width;j.size.height = size.height;}});});const newModel = gridLayout.layout(originData);// 以中心线对齐newModel.nodes.forEach((node) => {node.x -= node.size.width / 2;node.y -= node.size.height / 2;});graph.fromJSON(newModel);this.resetFn();},
// 撤销布局layoutFn() {this.isRevoke = false;graph.fromJSON(JSON.parse(localStorage.getItem("layoutAntv")));this.resetFn();},

 全部代码

<template><div class="antv-wrapper"><div style="display: flex; height: calc(100% - 80px)"><div style="width: calc(100% - 330px); height: 100%; position: relative"><divref="container"id="container"class="wrapper-canvas"@drop="drop($event)"@dragover.prevent></div><div class="icon_oper"><el-tooltipclass="item"effect="dark"content="优化布局"placement="bottom"v-if="!isRevoke"><imgsrc="@/assets/buju.png"style="width: 20px; height: 20px; margin: 0px 5px 0 10px"@click="layout()"/></el-tooltip><el-tooltipclass="item"effect="dark"content="撤销布局"placement="bottom"v-if="isRevoke"><imgsrc="@/assets/chexiao.png"style="width: 20px; height: 20px; margin: 0px 5px 0 10px"@click="layoutFn()"/></el-tooltip> </div></div></div></div>
</template><script>
import { Graph, Shape } from "@antv/x6";
import { DagreLayout } from "@antv/layout";// 布局方向
const dir = "LR"; // LR RL TB BT
let graph = null;export default {data() {return {isRevoke: false, //是否显示撤销布局按钮};},mounted() {this.initGraph();},beforeDestroy() {graph.dispose();},methods: {// 初始化画布initGraph(options) {// 渲染画布graph = new Graph({container: document.getElementById("container"),width: container.offsetWidth, // 画布宽height: container.offsetHeight, // 画布高...});// 监听节点拖动事件graph.on("node:moved", ({ node }) => {// 恢复优化布局的按钮this.isRevoke = false;});graph.centerContent();// // 返现方法// if (resData.length) {//   const jsonTemp = resData.map((item) => {//     item.ports = configNodePorts();//     return item;//   });//   graph.fromJSON(jsonTemp);// }},// 自适应视图resetFn() {const nodes = graph.getNodes();if (nodes.length > 2) {graph.zoomToFit({padding: 60,allowMoving: true, // 允许移动节点以保证完全可见allowResizing: true, // 允许调整大小以保证完全可见duration: 500, // 动画持续时间(毫秒)});}graph.centerContent();},// 优化布局(自动布局)layout() {this.isRevoke = true;const gridLayout = new DagreLayout({type: "dagre",rankdir: "LR",// align: "UL",ranksep: 30,nodesep: 15,controlPoints: true,});const originData = {nodes: [],edges: [],};const nodes = graph.getNodes();const edges = graph.getEdges();const jso = (document.querySelector("#container").value = JSON.stringify(graph.toJSON({ diff: true })));localStorage.setItem("layoutAntv", jso);JSON.parse(jso).cells.forEach((i) => {if (i.shape === "edge") {originData.edges.push(i);} else {originData.nodes.push(i);}});nodes.forEach((node) => {const size = node.size();originData.nodes.forEach((j) => {if (node.id === j.id) {j.size.width = size.width;j.size.height = size.height;}});});const newModel = gridLayout.layout(originData);// 以中心线对齐newModel.nodes.forEach((node) => {node.x -= node.size.width / 2;node.y -= node.size.height / 2;});graph.fromJSON(newModel);this.resetFn();},// 撤销布局layoutFn() {this.isRevoke = false;graph.fromJSON(JSON.parse(localStorage.getItem("layoutAntv")));this.resetFn();},},
};
</script><style lang="scss" scoped="scoped">
.icon_oper {font-size: 18px;cursor: pointer;margin: 0 5px;background-color: #fff;border-radius: 10px;z-index: 999;width: 150px;display: flex;align-items: center;box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3), 0 4px 14px 0 rgba(0, 0, 0, 0.1);position: absolute;top: 10px;i {margin: 10px;}
}
</style>

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

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

相关文章

嵌入式Linux—Framebuffer应用编程

Framebuffer 应用编程 Frame的意思是帧&#xff0c;buffer的意思是缓冲区。Framebuffer就是一块内存(硬件设备)&#xff0c;里面保存着一帧图像。 ioctl()函数解析 ioctl()函数非常强大。不同的驱动程序内部会实现不同的 ioctl() &#xff0c;可以使用各种 ioctl() 跟驱动程序…

世媒讯提供海内外媒体宣发服务,引领企业新媒体发展之路

在这个信息化的时代&#xff0c;软文发稿已经成为企业发展不可或缺的重要工具。随着社会的快速发展&#xff0c;消费者需要更多定制化、个性化的信息。利用软性推广&#xff0c;凭借其细致入微的信息传递&#xff0c;可以迅速抓住消费者的注意力&#xff0c;从而进一步推动企业…

“五之链”第十六期沙龙活动在呆马科技成功举办

2024年4月19日&#xff0c;由临沂呆码区块链网络科技有限公司&#xff08;呆马科技&#xff09;承办的第十六期“五之链”物流主题沙龙活动成功举办。此次活动邀请了政府相关部门、知名科研院所、物流企业等20余家单位参与&#xff0c;共同探讨物流数据要素流通与智能应用的发展…

Redisson - 看门狗机制(Watch Dog)禁用方案

问题描述 Redis - Redisson tryLock 函数参数分析-CSDN博客 我们在这篇文章有提到过看门狗机制&#xff0c;其实有时候我们不想要看门狗机制的时候&#xff0c;如何禁用呢&#xff1f;&#xff01;因为有时候不想续期&#xff0c;需要实时性比较高的业务&#xff0c;但是看门…

使用prompt_toolkit构建交互式命令行工具

prompt_toolkit是一个python库&#xff0c;用于构建命令行工具和终端应用。其官网介绍如下&#xff0c; prompt_toolkit is a library for building powerful interactive command line and terminal applications in Python. 安装命令如下&#xff0c; pip install prompt_to…

STM32 DAP

STM32 DAP DAP&#xff08;Debug Access Port&#xff09;是一种调试访问端口&#xff0c;通常与调试接口一起使用&#xff0c;例如JTAG或SWD。DAP的作用是提供对目标设备内部的调试、测试和编程访问权限&#xff0c;允许开发人员通过调试工具与目标设备进行通信&#xff0c;并…

朴素贝叶斯算法分类

def loadDataSet():postingList[[my, dog, has, flea, problems, help, please], #切分的词条[maybe, not, take, him, to, dog, park, stupid],[my, dalmation, is, so, cute, I, love, him],[stop, posting, stupid, worthless, garbage],[mr, licks, ate, my, steak, …

HarmonyOS开发案例:【相机开发】

基本概念 相机是OpenHarmony多媒体进程提供的服务之一&#xff0c;提供了相机的录像、预览、拍照功能&#xff0c;支持多用户并发取流。 在进行应用的开发前&#xff0c;开发者应了解以下基本概念&#xff1a; 视频帧 视频流指的是将一系列图片数据按照固定时间间隔排列形成的…

2024新算法爱情进化算法(LEA)和经典灰狼优化器(GWO)进行无人机三维路径规划设计实验

简介&#xff1a; 2024新算法爱情进化算法&#xff08;LEA&#xff09;和经典灰狼优化器&#xff08;GWO&#xff09;进行无人机三维路径规划设计实验。 无人机三维路径规划的重要意义在于确保飞行安全、优化飞行路线以节省时间和能源消耗&#xff0c;并使无人机能够适应复杂环…

Leetcode 第 393 场周赛题解

Leetcode 第 393 场周赛题解 Leetcode 第 393 场周赛题解题目1&#xff1a;3114. 替换字符可以得到的最晚时间思路代码复杂度分析 题目2&#xff1a;3115. 质数的最大距离思路代码复杂度分析 题目3&#xff1a;3116. 单面值组合的第 K 小金额思路代码复杂度分析 题目4&#xff…

ubuntu 18.04系统的镜像源

1 国内可用的镜像源 Ubuntu官方下载地址阿里云开源镜像站清华大学开源镜像站中国科技大学开源镜像站华为云开源镜像站 2 ubuntu 18.04 镜像说明 Ubuntu 18.04 是一个广泛使用的Linux发行版&#xff0c;它有多个版本的镜像可供下载。 在物理机上安装的镜像 如带desktop字样的…

使用BibTeX导入参考文献到Overleaf项目(常用方法)

使用bib为overleaf导入参考文献的好处 整洁的管理&#xff1a; 使用 .bib 文件可以使你的参考文献管理更加整洁和有条理。你可以将所有的参考文献集中存储在一个文件中&#xff0c;而不是在文档中直接引用或复制粘贴。 易于维护和更新&#xff1a; 当你需要添加、删除或修改参考…

申请泛域名证书步骤

泛域名证书的广泛应用范围&#xff1a; 泛域名证书不同于普通的单域名数字证书和多域名数字证书&#xff0c;可以一次以一张证书对应无限多的域名&#xff0c;在功能性和方便性上远优于一般证书。 单域名证书顾名思义&#xff0c;一张证书只对应一个独立域名&#xff0c;多域…

迅睿CMS内容删除后ID重置与指定起始值操作指南

在使用迅睿CMS进行内容管理时&#xff0c;经常会涉及到内容的增删改查。本文将介绍如何在删除内容后重置ID值&#xff0c;或指定ID值从某一特定数开始自增&#xff0c;以便于更好的管理数据。 ID重置操作 共享模块ID重置 在执行删除操作时&#xff0c;若需要对共享模块的内容…

Unity类银河恶魔城学习记录13-4 p145 Save Skill Tree源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili GameData.cs using System.Collections; using System.Collections.Generic…

投票刷礼物链接怎么弄?最新投票活动创建系统源码 轻松创建活动

投票刷礼物链接怎么弄&#xff1f;投票活动创建系统的作用和功能多种多样&#xff0c;为用户提供一个便捷、高效且功能强大的平台&#xff0c;用于创建、管理和执行各种投票活动。分享一个最新投票活动创建系统源码&#xff0c;源码开源可二开&#xff0c;含完整代码包和详细搭…

【机器学习书籍推荐】机器学习算法原理与编程实践(附PDF)

哈喽啊大家&#xff0c;今天又来给大家推荐一本机器学习方面的书籍<机器学习算法原理与编程实践>。本书适用于中高水平的程序设计人员、大学理科生、以及对机器学习感兴趣的各类爱好者。 《机器学习算法原理与编程实践》围绕神经网络、智能推理、矩阵计算三大主线&#…

使用Java实现交税计算功能:原理与实战编码

一、引言 税收是国家财政收入的重要来源&#xff0c;也是实现社会公平和经济调节的重要手段。在日常生活和工作中&#xff0c;交税是每个公民和企业应尽的义务。为了方便计算和管理税收&#xff0c;我们可以使用编程语言来实现交税计算功能。本文将介绍使用Java语言实现交税计…

BM25检索算法 python

1.简介 BM25&#xff08;Best Matching 25&#xff09;是一种经典的信息检索算法&#xff0c;是基于 TF-IDF算法的改进版本&#xff0c;旨在解决、TF-IDF算法的一些不足之处。其被广泛应用于信息检索领域的排名函数&#xff0c;用于估计文档D与用户查询Q之间的相关性。它是一种…

【树莓派学习】开发环境配置

【树莓派学习】开发环境配置 ​ Raspberry Pi OS作为基于Linux的系统&#xff0c;其默认网络配置在国内的网络环境下容易出现访问慢甚至无法连接等问题&#xff0c;不便于我们的学习&#xff0c;同时&#xff0c;树莓派上C/C的使用需要单独安装WiringPi。本文主要介绍如何更改…