如何在React中使用JSPlumb导出所有节点与连线为JSON

问题描述 #

在React项目中使用JSPlumb，功能运行正常，需要实现点击按钮将当前JSPlumb中的节点（nodes）和连线（edges）数据以JSON格式导出并存入数据库。目前仅找到autosave方法，未发现surface或toolkit实例的相关导出方法。

现有代码 #

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格式：
  

解决方案 #

JSPlumb Toolkit实例内置exportData方法，可直接导出当前图的节点和连线数据，无需依赖autosave。具体实现步骤如下：

1. 实现点击事件处理函数：在handleClick中调用toolkit的exportData方法获取数据，整理为期望格式后提交到数据库。
2. 数据格式适配：如果exportData返回结构与期望格式有差异，可对节点和连线数据做二次处理。

具体代码实现 #

// 定义按钮点击处理函数
const handleClick = async () => {
  // 调用toolkit导出数据，指定格式为JSON
  const exportedData = toolkit.exportData({ type: 'json' });

  // 整理为与导入时一致的结构（若exportData返回结构已符合需求可跳过）
  const savePayload = {
    flows: {
      nodes: exportedData.nodes,
      edges: exportedData.edges
    }
  };

  try {
    // 替换为你的数据库存储接口
    await handlePost('/DecisionFlow/save-flow-data', savePayload);
    alert('数据导出并保存成功');
  } catch (error) {
    console.error('数据保存失败:', error);
    alert('数据保存失败，请重试');
  }
};

关键说明 #

• exportData是JSPlumb Toolkit的核心导出API，默认导出当前图所有节点、连线及配置信息。
• 若需自定义导出内容（如过滤临时节点、添加额外字段），可传入配置参数：

  const exportedData = toolkit.exportData({
    type: 'json',
    filter: (obj) => {
      // 返回true保留当前对象，false则过滤
      return obj.data.status !== 'temp';
    }
  });
  

内容的提问来源于stack exchange，提问作者rionalab