Rendering error with node groups #410

nikzanda · 2023-08-11T14:15:59Z

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

Go to the file service.ts
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

The text was updated successfully, but these errors were encountered:

xflow-bot · 2023-08-11T14:16:11Z

👋 @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 · 2023-08-24T12:24:06Z

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

xflow-bot · 2023-09-14T01:15:09Z

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 · 2023-09-14T14:44:06Z

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 · 2023-10-05T01:17:14Z

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 · 2023-12-17T01:27:25Z

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 · 2023-12-19T13:55:43Z

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的文档何时发布？

xflow-bot · 2024-12-19T01:02:30Z

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.

xflow-bot bot added the stale Issue that may be closed soon due to the original author not responding any more. label Sep 14, 2023

xflow-bot bot removed the stale Issue that may be closed soon due to the original author not responding any more. label Sep 15, 2023

xflow-bot bot added the stale Issue that may be closed soon due to the original author not responding any more. label Oct 5, 2023

NewByVector added the 1.x 1.x 版本缺陷，没有修复计划 label Nov 6, 2023

xflow-bot bot closed this as completed Dec 17, 2023

xflow-bot bot locked as resolved and limited conversation to collaborators Dec 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rendering error with node groups #410

Rendering error with node groups #410

nikzanda commented Aug 11, 2023 •

edited

Loading

xflow-bot bot commented Aug 11, 2023

filippofoladore commented Aug 24, 2023

xflow-bot bot commented Sep 14, 2023

nikzanda commented Sep 14, 2023

xflow-bot bot commented Oct 5, 2023

xflow-bot bot commented Dec 17, 2023

nikzanda commented Dec 19, 2023

xflow-bot bot commented Dec 19, 2024

Rendering error with node groups #410

Rendering error with node groups #410

Comments

nikzanda commented Aug 11, 2023 • edited Loading

Describe the bug

Your Example Website or App

Steps to Reproduce the Bug or Issue

Expected behavior

Screenshots or Videos

Platform

Additional context

xflow-bot bot commented Aug 11, 2023

filippofoladore commented Aug 24, 2023

xflow-bot bot commented Sep 14, 2023

nikzanda commented Sep 14, 2023

xflow-bot bot commented Oct 5, 2023

xflow-bot bot commented Dec 17, 2023

nikzanda commented Dec 19, 2023

xflow-bot bot commented Dec 19, 2024

nikzanda commented Aug 11, 2023 •

edited

Loading