LogicFlow 简介

1. 使用 getData 方法

LogicFlow 提供了 getData 方法，用于获取当前画布上的节点和边的数据。

const lf = new LogicFlow({ // 配置项 });
 // 获取数据
const data = lf.getData();
console.log(data);

getData 返回的数据结构通常包含 nodes 和 edges 两个数组，分别表示节点和边的信息。

2. 监听数据变化

如果你需要在数据变化时自动获取数据，可以监听 history:change 事件。

lf.on('history:change', () => { const data = lf.getData(); console.log(data); });

3. 导出数据

LogicFlow 还支持将数据导出为 JSON 格式，便于保存或传输。

const jsonData = lf.getGraphData(); console.log(jsonData);

4. 自定义数据格式

如果你需要自定义数据格式，可以在 getData 的基础上进行处理。

const rawData = lf.getData();
const customData = {
    nodes: rawData.nodes.map(node => ({
         id: node.id, type: node.type, x: node.x, y: node.y, properties: node.properties
     })),

    edges: rawData.edges.map(edge => ({
        id: edge.id, sourceNodeId: edge.sourceNodeId, targetNodeId:         edge.targetNodeId, properties: edge.properties

    })) };
 console.log(customData);

5. 保存和加载数据

你可以将获取的数据保存到本地或服务器，并在需要时加载。

// 保存数据
const data = lf.getData();
localStorage.setItem('lf-data', JSON.stringify(data));
 // 加载数据
 const savedData = JSON.parse(localStorage.getItem('lf-data')); lf.render(savedData);