react hocks ggeditor 脑图开发（双向细目表），实用技巧

lxw_powerfulCat

已于 2023-03-29 17:30:43 修改

阅读量740

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

于 2023-03-29 15:00:35 首次发布

本文链接：https://blog.youkuaiyun.com/lxw_hk2_zy/article/details/129835359

本文介绍了在AntDesignPro基础上使用GGEditor2.0.2开发脑图的过程，包括配置说明、API介绍和功能实现。重点讨论了选择节点、获取DOM及API的使用，如节点居中显示和禁止特定节点修改。虽然GGEditor的API文档不完善，但通过参考G6官网和语雀文档可以辅助开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ggeditor脑图开发

配置说明
api介绍
①，引入插件
②，获取api （withPropsAPI）
③，获取node api
④，常用api汇总
⑤，绑定事件
功能实现，api使用
①，查找节点，并居中显示 (setSelect 不居中)
②，切换数据之后居中显示
③，禁止指定node被修改

1，配置说明

ggeidtor 版本： 2.0.2
其他版本：很高（node，react，umi,  Ant Design）
说明：
	用的 Ant Design Pro 为底子开发的项目，他给的ggeditor版本较低，但样式不错，且工具模块好用，所以不做升级

参考网址
g6官网： https://g6.antv.antgroup.com/api/graph           (某些api能用)
语雀文档： https://www.yuque.com/blueju/gg-editor

因项目实际需求，本文侧重点：1，选择node，2，获取点dom以及canvas内部点，3，一部分api介绍

2， api介绍

①，引入插件

// 引入
// cnpm install --save gg-editor
// yarn add --save gg-editor
import GGEditor, {
   
    Mind, withPropsAPI } from 'gg-editor';

// 初始化
const mindContent = useRef();
<GGEditor ref={
   
   mindContent} className={
   
   styles.editor}>
<Mind 
	onNodeClick={
   
   (obj: any) => {
   
   bindCruxGroupHandler(obj)}} 
	onMouseDown={
   
   (obj: any) => {
   
   mindShouldUpdate(obj)}} 
	data={
   
   data} 
	className={
   
   styles.mind} 
/>
</GGEditor>

// data
//   1， 引入 json
import drawDataGroup from './drawDataGroup.json';
//   2， 数据格式 （根据ggeidtor版本不同，数据格式也不同）
const [data, setData] = useState({
   
   
    roots:[
      {
   
   
        id: '0',
        key: '0',
        label: '知识点',
        children: []
      }
    ]
});
const [data, setData] = useState([
      {
   
   
        id: '0',
        key: '0',
        label: '知识点',
        children: []
      }
]);

样式调整

// 新版本中， 如果遇到样式问题（典型问题：node之间间距太大，留白太多）等问题，可参考以下配置
/**
 * 注意， 以下配置仅做参考，并未投入测试以及使用，只作参考， 只作参考， 只作参考， 只作参考
*/
<Mind 
data={
   
   data} 
graphConfig={
   
   {
   
   
          defaultNode: {
   
   // 节点配置
            // style: {
   
   {fill: '#333'}}
            size: [100, 30],
            // top: -15,