Rendering error with node groups

[nikzanda]

Describe the bug

When rendering a flowchart with groups, the first render has the nodes outside the group. When moving around the nodes, they render correctly inside the group.

I tried with the same code of your example: https://xflow.antv.vision/~demos/dag-basic https://xflow.antv.vision/docs/tutorial/solutions/dag#dag-%E5%9B%BE%E7%BC%96%E8%BE%91%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88

Here you can see my repository: https://github.com/nikzanda/xflow-sandbox

I wrote this code in file service.ts at the line 22.

export const loadGraphData = async (meta: NsGraph.IGraphMeta) => {
    return {
      nodes: [
        {
          id: '2fd8bb17-b3b9-4753-870b-0764892cc027',
          renderKey: 'GROUP_NODE_RENDER_ID',
          width: 204,
          height: 100,
          groupChildren: ['node1'],
          groupCollapsedSize: {
            width: 200,
            height: 40,
          },
          label: '新建群组',
          ports: [],
          groupChildrenSize: {
            width: 204,
            height: 100,
          },
          x: 288,
          y: -2,
          isGroup: true,
        },
        {
          id: 'node1',
          renderKey: 'DND_NDOE',
          width: 180,
          height: 36,
          label: '算法节点-1',
          ports: [
            {
              id: 'node1-input-1',
              type: 'input',
              group: 'top',
              tooltip: '输入桩',
            },
            {
              id: 'node1-output-1',
              type: 'output',
              group: 'bottom',
              tooltip: '输出桩',
            },
          ],
          x: 300,
          y: 50,
          _order: 0,
          group: '2fd8bb17-b3b9-4753-870b-0764892cc027',
          isCollapsed: false,
        },
        {
          id: 'node2',
          renderKey: 'DND_NDOE',
          width: 180,
          height: 36,
          label: '算法节点-2',
          ports: [
            {
              id: 'node2-input-1',
              type: 'input',
              group: 'top',
              tooltip: '输入桩',
              connected: true,
            },
            {
              id: 'node2-output-1',
              type: 'output',
              group: 'bottom',
              tooltip: '输出桩',
            },
          ],
          x: 80,
          y: 180,
          _order: 0,
        },
        {
          id: 'node3',
          renderKey: 'DND_NDOE',
          width: 180,
          height: 36,
          label: '算法节点-3',
          ports: [
            {
              id: 'node3-input-1',
              type: 'input',
              group: 'top',
              tooltip: '输入桩',
              connected: true,
            },
            {
              id: 'node3-output-1',
              type: 'output',
              group: 'bottom',
              tooltip: '输出桩',
            },
          ],
          x: 300,
          y: 180,
          _order: 1,
        },
        {
          id: 'node4',
          renderKey: 'DND_NDOE',
          width: 180,
          height: 36,
          label: '算法节点-4',
          ports: [
            {
              id: 'node4-input-1',
              type: 'input',
              group: 'top',
              tooltip: '输入桩',
              connected: true,
            },
            {
              id: 'node4-output-1',
              type: 'output',
              group: 'bottom',
              tooltip: '输出桩',
            },
          ],
          x: 520,
          y: 180,
          _order: 2,
        },
      ],
      edges: [
        {
          id: '4520d302-5b36-4f55-abdd-390947def70f',
          source: 'node1',
          target: 'node2',
          sourcePortId: 'node1-output-1',
          targetPortId: 'node2-input-1',
          connector: {
            name: 'rounded',
          },
          router: {
            name: 'manhattan',
          },
          sourcePort: 'node1-output-1',
          targetPort: 'node2-input-1',
        },
        {
          id: 'f44dc92b-0e32-4a20-8b89-bec49836bcfa',
          source: 'node1',
          target: 'node3',
          sourcePortId: 'node1-output-1',
          targetPortId: 'node3-input-1',
          connector: {
            name: 'rounded',
          },
          router: {
            name: 'manhattan',
          },
          sourcePort: 'node1-output-1',
          targetPort: 'node3-input-1',
        },
        {
          id: 'de1caa6c-b739-4392-bf77-806515a5a49f',
          source: 'node1',
          target: 'node4',
          sourcePortId: 'node1-output-1',
          targetPortId: 'node4-input-1',
          connector: {
            name: 'rounded',
          },
          router: {
            name: 'manhattan',
          },
          sourcePort: 'node1-output-1',
          targetPort: 'node4-input-1',
        },
      ],
    };
  };

Your Example Website or App

https://stackblitz-starters-u9dmay.stackblitz.io

Steps to Reproduce the Bug or Issue

1. Go to the file service.ts
2. Write the following code at line 22:

export const loadGraphData = async (meta: NsGraph.IGraphMeta) => {
    return {
      nodes: [
        {
          id: '2fd8bb17-b3b9-4753-870b-0764892cc027',
          renderKey: 'GROUP_NODE_RENDER_ID',
          width: 204,
          height: 100,
          groupChildren: ['node1'],
          groupCollapsedSize: {
            width: 200,
            height: 40,
          },
          label: '新建群组',
          ports: [],
          groupChildrenSize: {
            width: 204,
            height: 100,
          },
          x: 288,
          y: -2,
          isGroup: true,
        },
        {
          id: 'node1',
          renderKey: 'DND_NDOE',
          width: 180,
          height: 36,
          label: '算法节点-1',
          ports: [
            {
              id: 'node1-input-1',
              type: 'input',
              group: 'top',
              tooltip: '输入桩',
            },
            {
              id: 'node1-output-1',
              type: 'output',
              group: 'bottom',
              tooltip: '输出桩',
            },
          ],
          x: 300,
          y: 50,
          _order: 0,
          group: '2fd8bb17-b3b9-4753-870b-0764892cc027',
          isCollapsed: false,
        },
        {
          id: 'node2',
          renderKey: 'DND_NDOE',
          width: 180,
          height: 36,
          label: '算法节点-2',
          ports: [
            {
              id: 'node2-input-1',
              type: 'input',
              group: 'top',
              tooltip: '输入桩',
              connected: true,
            },
            {
              id: 'node2-output-1',
              type: 'output',
              group: 'bottom',
              tooltip: '输出桩',
            },
          ],
          x: 80,
          y: 180,
          _order: 0,
        },
        {
          id: 'node3',
          renderKey: 'DND_NDOE',
          width: 180,
          height: 36,
          label: '算法节点-3',
          ports: [
            {
              id: 'node3-input-1',
              type: 'input',
              group: 'top',
              tooltip: '输入桩',
              connected: true,
            },
            {
              id: 'node3-output-1',
              type: 'output',
              group: 'bottom',
              tooltip: '输出桩',
            },
          ],
          x: 300,
          y: 180,
          _order: 1,
        },
        {
          id: 'node4',
          renderKey: 'DND_NDOE',
          width: 180,
          height: 36,
          label: '算法节点-4',
          ports: [
            {
              id: 'node4-input-1',
              type: 'input',
              group: 'top',
              tooltip: '输入桩',
              connected: true,
            },
            {
              id: 'node4-output-1',
              type: 'output',
              group: 'bottom',
              tooltip: '输出桩',
            },
          ],
          x: 520,
          y: 180,
          _order: 2,
        },
      ],
      edges: [
        {
          id: '4520d302-5b36-4f55-abdd-390947def70f',
          source: 'node1',
          target: 'node2',
          sourcePortId: 'node1-output-1',
          targetPortId: 'node2-input-1',
          connector: {
            name: 'rounded',
          },
          router: {
            name: 'manhattan',
          },
          sourcePort: 'node1-output-1',
          targetPort: 'node2-input-1',
        },
        {
          id: 'f44dc92b-0e32-4a20-8b89-bec49836bcfa',
          source: 'node1',
          target: 'node3',
          sourcePortId: 'node1-output-1',
          targetPortId: 'node3-input-1',
          connector: {
            name: 'rounded',
          },
          router: {
            name: 'manhattan',
          },
          sourcePort: 'node1-output-1',
          targetPort: 'node3-input-1',
        },
        {
          id: 'de1caa6c-b739-4392-bf77-806515a5a49f',
          source: 'node1',
          target: 'node4',
          sourcePortId: 'node1-output-1',
          targetPortId: 'node4-input-1',
          connector: {
            name: 'rounded',
          },
          router: {
            name: 'manhattan',
          },
          sourcePort: 'node1-output-1',
          targetPort: 'node4-input-1',
        },
      ],
    };
  };

Expected behavior

Correctly render nodes and groups.

Screenshots or Videos

screen-recording-2023-08-11-at-155453_KYpe0GuM.mp4

Platform

• OS: macOS
• Browser: Chrome
• Version: 115

Additional context

No response

[xflow-bot]

👋 @nikzanda

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[filippofoladore]

当第一次渲染带有组的流程图时，节点会在组外渲染；然后，拖动属于组的任何方向的节点，渲染会修复并且拖动的节点将在组内正确显示。

[xflow-bot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the AntV community! 💪💯

[nikzanda]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the AntV community! 💪💯

Please, check this issue 🙏🏻

[xflow-bot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the AntV community! 💪💯

[xflow-bot]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot 🤖, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the AntV community! 💪💯

[nikzanda]

Hi @NewByVector, I saw that you added the 1.x label to my issue, has this problem been solved in version 2.0? When will the XFlow 2.0 documentation be released?
我看到你在我的问题上添加了1.x的标签，这个问题在2.0版本中解决了吗？XFlow 2.0的文档何时发布？