使用ggeditor编辑后的思维导图怎么保存数据?

Question

最近在使用antd pro开发的时候想要实现一个思维导图的功能(可编辑)

所以我使用了antd pro自带的脑图编辑器

我想在下面放一个按钮,点击按钮保存编辑好的数据,可是在api中没有找到实现的方法,现在看api看的脑袋发蒙,希望大神们能指点一二,给个解决方案或者简单的建议,谢谢

Answer 1

目前我用了两种方式保存数据，第一种是实时保存数据
使用onAfterExecuteCommand方法监听事件，这里可以监听到新增删除等事件，每操作一次保存数据，如果一直操作，会一直发送请求。

<Mind data={mindData}
             className={styles.mind}
             firstSubShape="custom-node"
             secondSubShape="custom-node"
             onNodeClick={e => {
               this.getPid(e)
             }}
             onAfterChange={e => {
               this.excuteAction(e)
             }}
           />

excuteAction = e => {
   if (e.action === 'add') {
      this.add(e.model.label)
   }
   if (e.action === 'update') {
      this.update(e.originModel.key, e.updateModel.label)
   }
   if (e.action === 'remove') {
      this.delete(e.item.model.key)
   }
 }

第二种是非实时保存，通过一个保存按钮来控制保存。点击保存时，通过this.state.data设置为Mind中的data，获取保存数据，然后比较上一次的历史数据进行保存。如果采用非关系型数据库保存的各个节点，这里通过比较数据找出CRUD的数据还是有一点麻烦。
------ 分割线

如果使用经过 withPropsAPI 包装的组件将会自带 propsAPI 属性。需要注意的是被装饰的组件也必须是在GGEditor的子组件（不能用在GGEditor上）。

后面我使用的另一种方法

<GGEditor className={styles.editor} ref={this.mindRef}>

后面可以得到graph,从而达到rootsData。

    const { editor } = this.mindRef.current;
    const currentPage = editor.getCurrentPage();
    const graph = currentPage.getGraph();
    const rootsData = graph.save().roots[0];

https://www.yuque.com/antv/g6... 这个是阿里G6的文档。

Answer 2

import { Command, Toolbar, withPropsAPI } from 'gg-editor';

const { propsAPI } = this.props;
const data = propsAPI.save();

Answer 3

我用了 withPropsAPI 但是报了'withPropsAPI' is not exported from 'gg-editor'.你们用的gg-editor是什么版本的？我是withPropsAPI中嵌套了GGEditor子组件