How to create digram elements that following a certain hierarchy?

[atejshee-tibco]

I want to create a project where the diagram elements follow a certain hierarchy, i.e. one element will be a child element of some other element.
In the Node-JSON-Theia example:

1. How can we define such hierarchy in the glsp-server component's model and model factory?
2. How can we define the glsp-client component, such that when user tries to add the diagram element on the canvas, then the corresponding children elements are also rendered inside the parent element?

[tortmayr]

Hi @atejshee-tibco,

the graphical model used in GLSP (GModel) is already a hierarchical model with a parent-child structure.
The GModel consists of a single root element (graph) with children (typically nodes or edges). These children in turn can also have children like labels, compartments, subnodes etc.

1.How can we define such hierarchy in the glsp-server component's model and model factory?

Typically you define the hierarchy by using GModelBuilders. Children can be added with the add or addChildren methods.
For example the task node used in the node-json-theia example has a label as child.
(https://github.com/eclipse-glsp/glsp-examples/blob/90df42f78fce1253e985253c5afc4f4fda19fc27/project-templates/node-json-theia/tasklist-glsp-server/src/model/tasklist-gmodel-factory.ts#L44)

How can we define the glsp-client component, such that when user tries to add the diagram element on the canvas, then the corresponding children elements are also rendered inside the parent element?

Please have a look at: https://eclipse.dev/glsp/documentation/rendering/#rendering
Model elements and their corresponding views are configured in your diagram module with the configureModelElement method.
If properly configured your parent and child elements, your child views should be rendered automatically inside of the parent view.
This is the case for all default views. If you are using a custom view, you have to care of child rendering yourself. Typically
this is done using {context.renderChildren(node)}.
(https://github.com/eclipse-glsp/glsp-client/blob/daca6812b3cac934626ea056b8f0ca17c2fb61f8/packages/client/src/views/rounded-corner-view.tsx#L40)

[atejshee-tibco]

Thank you @tortmayr, I could create the heirarchy of nodes and also render them on theia client.
However, I am running into a minor issue.

On the canvas, when the parent node is resized, then the resized shape is retained, however, when the child node is resized, then upon mouse button release, the child node size is reverted to its initial size. The resized node is not retained for the child node on the canvas.

Please find the model and gmodel-factory implementation ahead.

tasklist-model.ts

export interface ParentNode {
    id: string;
    name: string;
    childNodes: ChildNode[];
    position: { x: number; y: number };
    size?: { width: number; height: number };
}


export interface ChildNode {
    id: string;
    name: string;
    position: { x: number; y: number };
    size?: { width: number; height: number };
}

tasklist-gmodel-factory.ts

protected createParentNode(parentNode: ParentNode): GNode {
         const childNode = GNode.builder()
		.id(`${parentNode.id}_childNode_id`)
		.addCssClass('child-node')
		.add(GLabel.builder().text('childNode').id(`${parentNode.id}_childNode_label`).build())
		.layout('hbox')
		.addArgs(ArgsUtil.cornerRadius(5))
		.size(100, 25)
		.addLayoutOption('paddingLeft', 15);

	const compartment = GCompartment.builder()
		.id(`${parentNode.id}_compartment`)
		.addCssClass('child-compartment')
		.layout('freeform')
		.addLayoutOptions({ hAlign: 'left', hGrab: true, vGrab: true });

	compartment.add(ChildNode.build());

	const builder = GNode.builder()
		.id(parentNode.id)
		.addCssClass('parent-node')
		.add(GLabel.builder().text(parentNode.name).id(`${parentNode.id}_label`).build())
		.add(compartment.build())
		.layout('vbox')
		.addLayoutOption('paddingLeft', 5)
		.position(parentNode.position);

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

	return builder.build();
}