注意：写文章的时候，我用的xflow版本是1.x的

1.思路

回显很简单，和第一次渲染是一样的，也是传递数据。不过回显群组是个问题，XFlow不会自动回显群组，需要自己实现。

我的思路是：

后端增加一个字段存储节点信息json，比如nodeConfig: "{\"x\":-290,\"y\":-160,\"width\":180,\"height\":40, "group": {xxxxxx}}"
回显的时候，取出这些配置，然后依次调用ADD_GROUP命令生成群组

2.实现

  useEffect(() => {
    if (graphData) {
      graphApp.current?.commandService.executeCommandPipeline([
        // 设置渲染
        {
          commandId: XFlowGraphCommands.GRAPH_RENDER.id,
          async getCommandOption(ctx) {
            return {
              commandId: XFlowGraphCommands.GRAPH_RENDER.id,
              args: {
                graphData,
                // 节点渲染完成后渲染群组
                afterRender(graphData, graphMeta) {
                  const { nodes, edges } = graphData;

                  // 收集群组
                  const groupMap: Record<string, { children: string[]; name: string }> = {};
                  nodes.forEach((node) => {
                    let nodeConfig: NodeConfig = {};
                    try {
                      nodeConfig = JSON.parse(node.extra.nodeConfig ?? '');
                    } catch (err) {}
                    // 如果有group属性，说明在群组
                    if (nodeConfig.group?.id) {
                      const groupId = nodeConfig.group.id;
                      // groupMap中取出所属群组
                      let group = groupMap[groupId];
                      if (group) {
                      // 把当前节点加入这个群组
                        group.children.push(node.extra.id);
                        group.name = nodeConfig.group.name;
                      } else {
                      // map中没有这个群组记录就新增
                        groupMap[groupId] = {
                          children: [],
                          name: '',
                        };
                        groupMap[groupId].children = [node.extra.id];
                        groupMap[groupId].name = nodeConfig.group.name;
                      }
                    }
                  });

                  // 创建命令列表
                  const groupCmdList: IGraphPipelineCommand[] = [];
                  // 根据群组map，创建一系列命令，新建群组
                  Object.entries(groupMap).forEach(([groupId, group]) => {
                    groupCmdList.push({
                      commandId: XFlowGroupCommands.ADD_GROUP.id,
                      async getCommandOption(ctx) {
                        return {
                          commandId: XFlowGroupCommands.ADD_GROUP.id,
                          args: {
                            nodeConfig: {
                              id: groupId,
                              renderKey: 'GROUPNODE',
                              groupChildren: group.children,
                              // groupCollapsedSize: { width: 200, height: 40 },
                              label: group.name,
                            },
                          } as NsGroupCmd.AddGroup.IArgs,
                        };
                      },
                    });
                  });

                  // 所有渲染完成后保存初始数据
                  groupCmdList.push({
                    commandId: LoopCmd.command.id,
                    async getCommandOption(ctx) {
                      return {
                        commandId: LoopCmd.command.id,
                        args: {
                          async loop(ctx) {
                            const graphData = await graphApp.current?.getGraphData();
                            // 保存初始数据
                            const defaultGraphDataModel =
                              await graphApp.current?.modelService.awaitModel(
                                DefaultGraphDataModel.id,
                              );
                            if (defaultGraphDataModel) {
                              defaultGraphDataModel.setValue(graphData);
                            }
                          },
                        } as LoopCommandArgs,
                      };
                    },
                  });

                  // 渲染群组
                  graphApp.current?.commandService.executeCommandPipeline(groupCmdList);
                },
              } as NsGraphCmd.GraphRender.IArgs,
            };
          },
        },
        // 设置布局
        {
          commandId: XFlowGraphCommands.GRAPH_LAYOUT.id,
          async getCommandOption(ctx) {
            return {
              commandId: XFlowGraphCommands.GRAPH_LAYOUT.id,
              args: {
                graphData,
                ...graphLayout,
              },
            };
          },
        },
        // 设置缩放
        {
          commandId: XFlowGraphCommands.GRAPH_ZOOM.id,
          async getCommandOption(ctx) {
            return {
              commandId: XFlowGraphCommands.GRAPH_ZOOM.id,
              args: {
                factor: 'fit',
                zoomOptions: CANVAS_SCALE_TOOLBAR_CONFIG.zoomOptions,
              } as NsGraphCmd.GraphZoom.IArgs,
            };
          },
        },
      ]);
    }
  }, [graphData]);

「AntV」3. xflow回显数据

1.思路

2.实现