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

相关文章

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

使用DeepSeek搭建个人知识库(在笔记本电脑上)

《使用DeepSeek搭建个人知识库(在笔记本电脑上)》本文介绍了如何在笔记本电脑上使用DeepSeek和开源工具搭建个人知识库,通过安装DeepSeek和RAGFlow,并使用CherryStudi... 目录部署环境软件清单安装DeepSeek安装Cherry Studio安装RAGFlow设置知识库总

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

Maven pom.xml文件中build,plugin标签的使用小结

《Mavenpom.xml文件中build,plugin标签的使用小结》本文主要介绍了Mavenpom.xml文件中build,plugin标签的使用小结,文中通过示例代码介绍的非常详细,对大家的学... 目录<build> 标签Plugins插件<build> 标签<build> 标签是 pom.XML

JAVA虚拟机中 -D, -X, -XX ,-server参数使用

《JAVA虚拟机中-D,-X,-XX,-server参数使用》本文主要介绍了JAVA虚拟机中-D,-X,-XX,-server参数使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录一、-D参数二、-X参数三、-XX参数总结:在Java开发过程中,对Java虚拟机(JVM)的启动参数进

Java中使用注解校验手机号格式的详细指南

《Java中使用注解校验手机号格式的详细指南》在现代的Web应用开发中,数据校验是一个非常重要的环节,本文将详细介绍如何在Java中使用注解对手机号格式进行校验,感兴趣的小伙伴可以了解下... 目录1. 引言2. 数据校验的重要性3. Java中的数据校验框架4. 使用注解校验手机号格式4.1 @NotBl

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.