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

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定