Allow groups to be handled as special nodes to simplify schema

[namdh03]

Description

To group multiple nodes together, Foblex Flow provides the concept of fGroup. However, in my current data structure, I have:

{
  "nodes": [],
  "groups": [],
  "connections": []
}

The problem is that both nodes and groups store data, making group functionally similar to node. This creates difficulties when storing and querying data from my database, causing backend complexity.

Is there a way to structure the data like this:

{
  "nodes": [],
  "connections": []
}

so that I can achieve grouping functionality without needing a separate groups array?

Additionally, an HTML element cannot have both fNode and fGroup at the same time, correct?

Would love to hear your thoughts on this! 🚀

Additional Context

My folder structure front end:

Example request data for back end:

{
    "nodes": [
        {
            "id": "75c61185-a466-4635-b41c-77bddb8a309c",
            "type": "START",
            "position": {
                "x": 76,
                "y": 209
            },
            "size": {
                "width": 32.6875,
                "height": 44
            },
            "parentId": null,
            "data": {
                "type": "START",
                "title": "Start Event"
            }
        },
        {
            "id": "ec651661-b7d5-4c5e-ae38-0e2343451543",
            "type": "TASK",
            "position": {
                "x": 446,
                "y": 195.00001525878906
            },
            "size": {
                "width": 29.700000762939453,
                "height": 44
            },
            "parentId": "8be71f15-9154-4b07-8f50-081cd54b6366",
            "data": {
                "type": "TASK",
                "title": "Task Node",
                "assignee": null,
                "dueIn": null
            },
            "form": {
                "key": null,
                "summary": "Task Node",
                "assignee": null
            }
        },
        {
            "id": "4c0023ed-a772-40d4-90b0-e61b31926f3b",
            "type": "END",
            "position": {
                "x": 1026,
                "y": 184
            },
            "size": {
                "width": 25.80000114440918,
                "height": 44
            },
            "parentId": null,
            "data": {
                "type": "END",
                "title": "End Event",
                "endType": "COMPLETE"
            }
        }
    ],
    "groups": [
        {
            "id": "8be71f15-9154-4b07-8f50-081cd54b6366",
            "type": "STORY",
            "position": {
                "x": 248,
                "y": 113.99998474121094
            },
            "size": {
                "width": 683,
                "height": 220
            },
            "parentId": null,
            "data": {
                "type": "STORY",
                "title": "Story Group",
                "assignee": null,
                "dueIn": null
            },
            "form": {
                "key": null,
                "summary": "Story Group",
                "assignee": null
            }
        }
    ],
    "connections": [
        {
            "id": "508cf6b4-acb5-4168-9f4c-94acbcc04ba4",
            "from": "75c61185-a466-4635-b41c-77bddb8a309c",
            "to": "ec651661-b7d5-4c5e-ae38-0e2343451543",
            "type": "NORMAL"
        },
        {
            "id": "136e6295-a37e-439e-b377-b2fc4a4e6d29",
            "from": "ec651661-b7d5-4c5e-ae38-0e2343451543",
            "to": "4c0023ed-a772-40d4-90b0-e61b31926f3b",
            "type": "NORMAL"
        }
    ]
}

export enum NodeType {
  START = 'START',
  END = 'END',
  INPUT = 'INPUT',
  APPROVAL = 'APPROVAL',
  TASK = 'TASK',
  NOTIFICATION = 'NOTIFICATION',
  CONDITION = 'CONDITION',
  SECTION = 'SECTION',
}

export enum GroupType {
  STORY = 'STORY',
  SUB_WORKFLOW = 'SUB_WORKFLOW',
}

[namdh03]

I also tried placing fNode and fGroup inside a switch case or if-else condition, but in that case, neither nodes nor groups appear on the UI.

[AlehSouza]

@namdh03 how you calculate the area of group? i need to put some nodes in a group, but i can use the "graph.node" to calculate like i use in a node

[siarheihuzarevich]

@for (item of nodes; track item.id) {
  <div *ngIf="item.type === 'GROUP'" fGroup [fId]="item.id" ...></div>
  <div *ngIf="item.type !== 'GROUP'" fNode [fId]="item.id" ...></div>
}