使用Antv X6在react中实现流程图后续

继上篇：react使用AntvX6实现流程图-CSDN博客文章浏览阅读145次。如何使用AntV X6在react中插入流程图功能？https://blog.csdn.net/weixin_48133091/article/details/141189733?spm=1001.2014.3001.5501的一些实现细节及问题的解决和优化：

实现流程图的保存

1、点击保存按钮，实现流程图的保存

保存功能的实现基于浏览器的localStorage，将流程图转化为可存储的结构，以下为点击保存按钮后的操作

//1.获取画布上所有节点和边的信息
 const nodes = graph.getNodes().map((node) => {
    return node.toJSON()
  })
 const edges = graph.getEdges().map((edge) => {
    return edge.toJSON()
  })
//2.创建一个数据对象来存储节点和边的信息
 const flowchartData = {
    nodes:nodes,
    edges:edges
 }
//3.序列化数据并将数据存储到本地存储中
 const serializedData = JSON.stringify(flowchartData)
 localStorage.setItem('flowchartData',serializedData)
 console.log('flowchartData',serializedData)//打印数据

2、在图的初始化的时候读取localStorage的数据，从内存中拿到保存的数据展示为流程图呈现在画布上，以下写在图的初始化部分，在图进行初始化的时候会从localStorage中拿到上次绘制的流程图：

    //从localStorage中读取数据
    const data = localStorage.getItem('flowchartData')
    if(data){
      //解析JSON数据
      const parsedData = JSON.parse(data)
      //重新添加节点
      parsedData.nodes.forEach((nodeData:any)=>{
        //添加节点
        this.graph.addNode(nodeData)
      })
      //重新添加边
      parsedData.edges.forEach((edgeData:any)=>{
        //添加边
        this.graph.addEdge(edgeData)
      })
    }

放大和缩小的实现

在useEffect函数中增加

    // zoom
    setZoom(graph.zoom())
    graph.on('scale', () => {
      setZoom(graph.zoom())
    })

在按钮中，

      case 'zoomIn':
        graph.zoom(0.1)
        break
      case 'zoomOut':
        graph.zoom(-0.1)
        break

撤销和重做

在useEffect中：

    // history
    const { history } = graph
    setCanUndo(history.canUndo())
    setCanRedo(history.canRedo())
    history.on('change', () => {
      setCanUndo(history.canUndo())
      setCanRedo(history.canRedo())
    })

在按钮中：

case 'undo':
     graph.history.undo()
     break
case 'redo':
    graph.history.redo()
    break