react使用gg-editor编写拓扑编辑器

2024-01-10 23:40

本文主要是介绍react使用gg-editor编写拓扑编辑器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

标题需求开发过程中使用文档地址

  • Ant Design Pro -demo地址
  • 语雀Graph文档
  • ant pro 使用指南

准备工作

  • 运行ant pro查看代码

地址引导
因为需要查看完整功能,因此选择完整版代码
在这里插入图片描述

  • 查看代码:核心实现是gg-editor,版本号是2.0.2
    在这里插入图片描述
    在这里插入图片描述
  • 准备数据结构
    捕获数据结构在这里插入图片描述
    回显数据结构:
    在这里插入图片描述

项目中加载跟ant pro同版本的项目,因此代码可以参考ant pro

在开发过程中需额外增加的功能

  • 保存图谱
  • 下载图谱缩略图,png jpg 透明以及白底
  • 鼠标移入时,显示对应节点详情
  • 显示列表图谱小图翻阅,具体效果如下
    在这里插入图片描述
    具体功能实现:
    1.保存图谱+redux
import React from 'react';
import { withPropsAPI } from 'gg-editor';
import { Button } from 'antd';
import { connect } from 'react-redux'; 
import { RootState } from '../../../redux/rootReducer'; 
import { asyncActionsCreator } from '../../../pages/relationship_graph/action';export interface EditorCommand {relationResourceDatas: any;relataBtn: any;addGraphData: any;editGraphData: any;[key: string]: any;editorTag: any;
}
class Save extends React.Component<EditorCommand> {constructor(EditorCommand) {super(EditorCommand);}handleClick = () => {const { propsAPI } = this.props as any;const { relationResourceDatas, editGraphData, inputval, editorTag, isFisrt } = this.props;propsAPI.save();const graphData = JSON.parse(JSON.stringify(propsAPI.save())); //保存下来的数据};render() {return (<Button onClick={this.handleClick} type="primary">保存</Button>);}
}const mapStateToProps = (state: RootState) => {const {redux方法 } = state.ReliationShipGraph;return {redux方法 };
};const mapDispatchToProps = (dispatch: any) => {return {redux值: (val) => dispatch(asyncActionsCreator.addGraphRelation(val)),};
};export default connect(mapStateToProps, mapDispatchToProps)(withPropsAPI(Save as any)); 

方法来源:
在这里插入图片描述在这里插入图片描述

2.下载图谱缩略图,png jpg 透明以及白底

function downloadImg(type: string, state?: boolean) {//绘制画布const divCanvas: Element | any = document.getElementsByClassName('graph-container')[0];//缩略画布const minicanvas = divCanvas.getElementsByTagName('canvas')[0];if (minicanvas) {let src = '';const ctx = minicanvas.getContext('2d');const imgW = minicanvas.width;const imgH = minicanvas.height;const imageData = ctx.getImageData(0, 0, imgW, imgH);//jpg白色透明背景  png白色if (type == 'jpg') {for (let i = 0; i < imageData.data.length; i += 4) {if (imageData.data[i + 3] < 128) {imageData.data[i] = 255;imageData.data[i + 1] = 255;imageData.data[i + 2] = 255;imageData.data[i + 3] = 255;}}ctx.putImageData(imageData, 0, 0);src = minicanvas.toDataURL('image/jpeg');const file = dataURLtoBlob(src, '关系图谱图片', type);if (!state) {return file;} else {downloadCanvasIamge(src, '关系图谱', type);}} else {for (let i = 0; i < imageData.data.length; i += 4) {// 当该像素是透明的,则设置成白色//改变rgbif (imageData.data[i + 3] < 128) {imageData.data[i] = 255;imageData.data[i + 1] = 255;imageData.data[i + 2] = 255;imageData.data[i + 3] = 0;}}ctx.putImageData(imageData, 0, 0);src = minicanvas.toDataURL('image/png');}if (!state) {downloadCanvasIamge(src, '关系图谱', type);}}}function downloadCanvasIamge(src, name, type) {// 通过选择器获取canvas元素// 使用toDataURL方法将图像转换被base64编码的URL字符串// let url = canvas.toDataURL('image/png');// const url = canvas.toDataURL('image/png');// 生成一个a元素const a = document.createElement('a');// 创建一个单击事件const event = new MouseEvent('click');// 将a的download属性设置为我们想要下载的图片名称,若name不存在则使用‘下载图片名称’作为默认名称a.download = name || '下载图片名称';// 将生成的URL设置为a.href属性a.href = src;// 触发a的单击事件a.dispatchEvent(event);}
  • 鼠标移入移出问题
function onMouseEnter(params: any) {if (params._type === 'mouseenter' &&// params._isItemChange &&params.shape?.eventPreFix == 'node') {//移入}}
  • 图谱列表,采用组件react-slick
import React, { useState, useEffect, useMemo, FC } from 'react';
import Slider from 'react-slick';
// import './styles.css';
import CanEditInput from '../../../components/canEditInput';
import styles from './index.module.scss';
import { Image, Tag, Row, Col, Empty } from 'antd';
import tagColors from '../../../style/tag-colors';
import SeeTuoPuEditoer from '../../../components/relationship_graph/seeGraph/index';
import { useDispatch } from 'react-redux';
import { actionType } from '../../../pages/relationship_graph/action';type IProps = {datas: any; // 图谱数据+ img轮播图数据 + 其他数据
};const GraphImgLIst: FC<IProps> = (props: IProps) => {const dispatch = useDispatch();const { datas } = props;const [itemData, setitemData] = useState<any>({}); //slider settingsconst settings = {dots: false,infinite: false,speed: 500,slidesToShow: 5,slidesToScroll: 2,initialSlide: 0,className: 'centerBox',};useEffect(() => {if (datas && datas.length) {setitemData(datas[0]);dispatch({ type: actionType.GET_GRAPH_EDITDATA, payload: datas[0] });}}, [datas]);const imgListDom = useMemo(() => {return datas?.map((item) => {return (<div key={item.id}><ImageclassName={itemData?.id === item.id ? styles.img : undefined}width="100%"key={item.id}src={`/index/RelationGraph/getImage?image_path=` + item.icon}preview={false}onClick={() => imgClick(item)}></Image><div style={{ paddingLeft: 8, fontWeight: 500 }}>{item.name}</div></div>);});}, [datas, itemData]);function imgClick(data: any): void {setitemData(data);dispatch({ type: actionType.GET_GRAPH_EDITDATA, payload: data });}return (<div className={styles.normal}>{datas && datas.length ? (<Slider {...settings}>{imgListDom}</Slider>) : (<Empty style={{ margin: '20px 0px' }} />)}</div>);
};
export default GraphImgLIst;

这篇关于react使用gg-editor编写拓扑编辑器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

C#中Guid类使用小结

《C#中Guid类使用小结》本文主要介绍了C#中Guid类用于生成和操作128位的唯一标识符,用于数据库主键及分布式系统,支持通过NewGuid、Parse等方法生成,感兴趣的可以了解一下... 目录前言一、什么是 Guid二、生成 Guid1. 使用 Guid.NewGuid() 方法2. 从字符串创建

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客