Create multiple nodes when a node is created in GLSP editor

[mshahzadiftikhar]

I am looking to create multiple nodes or sort of sub nodes when a node is created in GLSP. Here's more detailted explanation:

• Currently, when we click on a node from the pallate, new node is created:
  
• I am looking to create something like this: When a node is created, multiple nodes are created:
  

To achieve above I have done following:

1. Create node with custom type, lets call it node:subnodes

protected createMultiTaskNode(task: Task): GNode {
        const builder = GNode.builder()
            .id(task.id)
            .addCssClass('tasklist-node')
            .add(GLabel.builder().text(task.name).id(`${task.id}_label`).build())
            .layout('hbox')
            .type('node:subnodes')
            .addLayoutOption('paddingLeft', 5)
            .position(task.position);

        if (task.size) {
            builder.addLayoutOptions({ prefWidth: task.size.width, prefHeight: task.size.height });
        }

        return builder.build();
    }

2. Configure the view on client side:
   configureModelElement(context, 'node:subnodes', SubNode, SubNodesView);

3. Provide implementation for the custom view:

import { GNode, IViewArgs, RectangularNode, RenderingContext, ShapeView, svg } from '@eclipse-glsp/client';
import { injectable } from 'inversify';
import { VNode } from 'snabbdom';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const JSX = { createElement: svg };

export class SubNode extends RectangularNode {
    static override readonly DEFAULT_FEATURES = [...GNode.DEFAULT_FEATURES];
}

@injectable()
export class SubNodesView extends ShapeView {
    render(node: Readonly<SubNode>, context: RenderingContext, args?: IViewArgs): VNode | undefined {
        if (!this.isVisible(node, context)) {
            return undefined;
        }

        return (
            <g>
                <svg width='300' height='300' xmlns='http://www.w3.org/2000/svg'>
                    <rect x='5' y='5' width='290' height='290' fill='none' stroke='var(--vscode-editor-foreground)' strokeWidth='2' />

                    <line x1='20' y1='40' x2='70' y2='40' stroke='var(--vscode-editor-foreground)' strokeWidth='2' />
                    <line x1='220' y1='40' x2='280' y2='40' stroke='var(--vscode-editor-foreground)' strokeWidth='2' />
                    <rect id='comp1' x='70' y='20' width='150' height='40' fill='#f1bd6c' stroke='var(--vscode-editor-foreground)' />
                    <text x='145' y='45' id='text1' textAnchor='middle' fill='var(--vscode-editor-foreground)' fontSize='14'>
                        Component A
                    </text>

                    <line x1='20' y1='100' x2='70' y2='100' stroke='var(--vscode-editor-foreground)' strokeWidth='2' />
                    <line x1='220' y1='100' x2='280' y2='100' stroke='var(--vscode-editor-foreground)' strokeWidth='2' />
                    <rect id='comp2' x='70' y='80' width='150' height='40' fill='#f1bd6c' stroke='var(--vscode-editor-foreground)' />
                    <text x='145' y='105' textAnchor='middle' fill='var(--vscode-editor-foreground)' fontSize='14'>
                        Component B
                    </text>

                    <line x1='20' y1='160' x2='70' y2='160' stroke='var(--vscode-editor-foreground)' strokeWidth='2' />
                    <line x1='220' y1='160' x2='280' y2='160' stroke='var(--vscode-editor-foreground)' strokeWidth='2' />
                    <rect id='comp3' x='70' y='140' width='150' height='40' fill='#f1bd6c' stroke='var(--vscode-editor-foreground)' />
                    <text x='145' y='165' textAnchor='middle' fill='var(--vscode-editor-foreground)' fontSize='14'>
                        Component C
                    </text>

                    <line x1='20' y1='220' x2='70' y2='220' stroke='var(--vscode-editor-foreground)' strokeWidth='2' />
                    <line x1='220' y1='220' x2='280' y2='220' stroke='var(--vscode-editor-foreground)' strokeWidth='2' />
                    <rect id='comp4' x='70' y='200' width='150' height='40' fill='#f1bd6c' stroke='var(--vscode-editor-foreground)' />
                    <text x='145' y='225' textAnchor='middle' fill='var(--vscode-editor-foreground)' fontSize='14'>
                        Component D
                    </text>
                </svg>
            </g>
        );
    }
}

Now, this view is acting as one single node, I want the nodes to act as seperate nodes, so that I can display properties of the each node and can make sure that edge can be created with individual nodes like other nodes in the editor.

Intended functionality is that create multiple nodes when single node is clicked, and then those multiple nodes should act as individual nodes in the editor.

Any pointers regarding this will be helpful, thankyou very much.

[mshahzadiftikhar]

@planger, @tortmayr can you please take a look at above question in your free time.
Thankyou very much.

[tortmayr]

@mshahzadiftikhar Thank you for your patience. I will try to further look into your question tomrrow.

[mshahzadiftikhar]

In the meanwhile, I have looked at GCompartment for grouping nodes. Here's how I have done it.

protected createTaskNode(task: Task): GNode {
        // create compartment with two child nodes
        const compartment = GCompartment.builder().id(`${task.id}_compartment`).addCssClass('tasklist-compartment').layout('vbox');
        const child_node1 = GNode.builder()
            .id(`${task.id}_child1_id`)
            .addCssClass('tasklist-node')
            .add(GLabel.builder().text('child1').id(`${task.id}_child1_label`).build())
            .layout('hbox')
            .addLayoutOption('paddingLeft', 15)
            .position(0, 30)
            .size(100, 25)
            .build();

        const child_node2 = GNode.builder()
            .id(`${task.id}_child2_id`)
            .addCssClass('tasklist-node')
            .add(GLabel.builder().text('child2').id(`${task.id}_child2_label`).build())
            .layout('hbox')
            .addLayoutOption('paddingLeft', 15)
            .position(0, 60)
            .size(100, 25)
            .build();

        compartment.addChildren([child_node1, child_node2]);

        const parent_node = GNode.builder()
            .id(task.id)
            .addCssClass('tasklist-node')
            .add(GLabel.builder().text(task.name).id(`${task.id}_label`).build())
            .layout('hbox')
            .addLayoutOption('paddingLeft', 5)
            .position(task.position)
            .add(compartment.build()); // Add the compartment to the node

        if (task.size) {
            parent_node.addLayoutOptions({ prefWidth: task.size.width, prefHeight: task.size.height });
        }

        return parent_node.build();
    }

Now, upon clicking task node from the pallate, you can create a group of nodes like this:

These nodes can be dragged along together and when you will delete the parent node, this group will get deleted.

Can we put a border or some fancy UI around this group? This is something I am still exploring.

[tortmayr]

Great that you found a solution!
At first glance the implementation looks good to me.
Of course you can customize the rendering/styling of this group/compartment (see also: https://eclipse.dev/glsp/documentation/rendering/)

In a nutshell you need to:

• Associate your compartment with a custom type (e.g "comp:subnodes"):

const compartment = GCompartment.builder().id(`${task.id}_compartment`).addCssClass('tasklist-compartment').layout('vbox').type("comp:subnodes");

• Implement a custom view e.g. SubnodeCompView and provide your customizations in the render() method.
  (This is plain svg. So e.g. to draw a border around your compartment you can create a here that matches the bounds of the underyling element)
• configure the model element/view in your main diagram module

configureModelElement(context, "comp:subnodes", GCommpartment, SubnodeCompView);