如何在 reactJS 中使用 JSPlumb 将所有节点和连接器（边）获取为 JSON

Question

所以我正在使用 jsplumb 和 reactjs，一切正常，但我有一个按钮，当它单击时它将 jsplumb 数据存储到数据库，我无法从表面或工具包实例中找到任何方法，除了自动保存，有什么方法可以让我的当前 jsplumb 数据为 json ?

const loadData = async () => {
  const urlDetail =
     baseUrl + '/DecisionFlow/generateObjectCheckerApproval/' + id
  const data: any = await handleGet(urlDetail)
  const { edges, nodes } = data.flows

  toolkit.load({
     type: 'json',
     data: { edges, nodes: classifyChart(nodes) },
  })
}

useEffect(() => {
  pathEditor.current = ConnectorEditors.newInstance(
     surfaceComponent.current.surface
  )

  if (surfaceComponent.current) {
     sidebarItems.forEach((sb: any, i: any) => {
        const container = document.querySelector(
           `#${joinStrAsId(['sidebarJSPlumb', sb.component])}`
        )!

        const p = createRoot(container)

        p.render(
           <Provider store={store}>
              <DragDropNodeSource
                 surface={surfaceComponent.current.surface}
                 title={sb.component}
                 container={container}
                 items={sb.detail}
              />
           </Provider>
        )
     })
  }

  loadData()
}, [])

return (
  <>
     <div style={{ display: 'none' }} ref={saveRef}></div>
     <div id="mantap" className={style.container}>
        <button onClick={handleClick}>save as json</button>
        {toolkit && (
           <JsPlumbToolkitSurfaceComponent
              renderParams={jsPlumbrenderParams(toolkit, pathEditor)}
              toolkit={toolkit}
              ref={surfaceComponent}
              view={jsPlumbView(toolkit, pathEditor)}
           />
        )}
     </div>
  </>
)

这是我的jsplumb的结果样本

这个 json 正是我所期待的