React-diagrams: Is there any task for implementing compound features?

[aleen42]

[aleen42]

I have created custom widgets myself for grouping nodes.

[aleen42]

However, there is still some tasks to handle when there are ports and links inside nodes within the group.

[DanielNetzer]

Hello @aleen42 can you please share how you managed to create the nested nodes?

[aleen42]

@DanielNetzer, you can check group and link components designed based on NodeModel in this project. And register them into the diagram instance like the folloowing snippet:

/** set up the diagram engines */
const engine = new DiagramEngine();
engine.installDefaultFactories();
/** register custom components factories */
engine.registerNodeFactory(new GroupFactory());
engine.registerLinkFactory(new LinkFactory());

The most important thing to combind nodes into groups is to implement two methods: getPorts() and setPosition(x, y), so that the GroupModel can control ports of all children nodes:

class GroupModel extends DefaultNodeModel {
    getPorts() {
        /** update ports data */
        this.ports = this.childNodes.reduce((ports, node) => Object.assign(ports, node.getPorts()), {});
        return this.ports;
    }

    setPosition(x, y) {
        /** update ports data */
        this.ports = this.childNodes.reduce((ports, node) => Object.assign(ports, node.getPorts()), {});
        super.setPosition(x, y);
    }
}

[harrytalbot]

@aleen42 did you have any luck implementing group nodes with Dagre distribution? Have been trying myself but the distribution doesn't seem to be able to handle the nested nodes.

[aleen42]

@harrytalbot Sorry, I have not solved the problem when dragging nested nodes, and any suggestions in your opinion?

[harrytalbot]

@aleen42 There are two ways to do this as i see it:

The first is to render the the child widgets as part of the group widget. The issue here is while the nodes are there visually, the links between them aren't, and as the the child nodes are already in the model they're actually drawn twice.

The second relates to the way the nodes are laid out - the implementation of Dagre in the project doesn't support nested nodes when distributing, and tries to keep all the nodes seperate. It can't comprehend the nodes can be inside eachother, so perhaps a new way of laying out the graph could solve this... I'm not even sure Dagre as a lib currently supports clustered graphs https://github.com/dagrejs/dagre/issues/13

@dylanvorster did you make any progress on group nodes? I saw that back in V3 there was some groundwork started