Is GLSP the right choice for my project?

[rhumbertgz]

Hi,

Last week I started my journey with GLSP and asking some questions here. Although GLSP seems a good fit for my project, I have some doubts :(

What I want to achieve:

• A dynamic diagram like a classic UML or relational database where the user can add Concepts and specify relations between them. A concept resembles a Class, it has a name and a set of attributes.
• Inline editing of both names and attributes. From the demos I found how to enable the inline editing for labels 👌
• Custom inline editing component for the attribute types. I thinking some kind of html select where the user can pick one choice (e.g, string, boolean). Although the select will have some static options (e.g., string, boolean, ...) I want to add dynamically the concepts names available at that time in the diagram. Could be this possible?
• A custom palette. I found some discussion about it already, but I didn't success on my first attempt. For examples, where the categories names are defined? How to associate custom nodes to a particular category?

What are my current problems?

For the list of attributes, I'm using a GCompartment with an horizontal layout and three labels as children as you can see below:

protected buildAttr(attribute: Attribute, index: number): GCompartment {
        return GCompartment.builder()
            .layout('hbox')
            .addCssClass('concept-attr')
            .addChildren(GLabel.builder().type('attr:name').text(attribute.name).id(`${index}_${attribute.id}_attname`).build())
            .addChildren(GLabel.builder().text(' : ').id(`${attribute.name}_se`).build())
            .addChildren(GLabel.builder().type('attr:type').text(attribute.type).id(`${index}_${attribute.id}_atttype`).build())
            .build();
   }

I use that auxiliary method in my ModelFactory as follow

protected createConceptNode(concept: Concept): GNode {
       const builder = GNode.builder()
            .type(concept.root ? 'root:node' : 'concept:node')
            .id(concept.id)
            .addCssClass(concept.root ? 'root-concept-node' : 'concept-node')
            .layout('vbox')
            .addArgs(ArgsUtil.cornerRadius(5))
            .position(concept.position)
            .add(GLabel.builder().type('concept:name').text(concept.name).id(`${concept.id}_concept`).build());

        const attrs = concept.attributes.map((a, index) => this.buildAttr(a, index));
        builder.addChildren(attrs);
       return builder.build();
  }

On the client I did all the configuration for the custom types as follow:

   configureDefaultModelElements(context);
    configureModelElement(context, DefaultTypes.LABEL, SLabel, SLabelView);
    configureModelElement(context, DefaultTypes.COMPARTMENT, SCompartment, SCompartmentView);
    configureModelElement(context, 'concept:node', RectangularNode, RoundedCornerNodeView);
    configureModelElement(context, 'root:node', RectangularNode, RoundedCornerNodeView);
    configureModelElement(context, 'concept:icon', Icon, ConceptIconView);
    configureModelElement(context, 'root:icon', Icon, RootIconView);
    configureModelElement(context, 'concept:name', SLabel, SLabelView, { enable: [editLabelFeature] });
    configureModelElement(context, 'attr:name', SLabel, SLabelView, { enable: [editLabelFeature] });
    configureModelElement(context, 'attr:type', SLabel, SLabelView, { enable: [editLabelFeature] });

The problem is that whenever the diagram is rebuilt due to a move of another node or node itself the attributes flick. In the above demo you can see what I mean.

If don't use the GCompartment and use a simple label the problem is gone, but that doesn't fit with my idea of inline editing for the name and type of an attribute.

protected buildAttr(attribute: Attribute, index: number): GLabel {
        return GLabel.builder().type('attr:name')
            .text(`${attribute.name} : ${attribute.type}`)
            .id(`${index}_${attribute.id}_attname`)
            .build();
 }

Am I using the right approach? Is GLSP a good option for me?
Honestly I don't know, I want to integrate with VSCode and Theia, but when I look at the demos here and other online, I mostly find a node with a single label or with icon where the label is editable. I have seen screenshots of Sprotty diagrams with more complex diagram like goal, but I don't know if they are static or dynamic like the one I want to achieve.

Any feedback?

Thanks in advance

[planger]

Hi @rhumbertgz,

thank you for providing the details, this helps in understanding your goal!

In general, I would say that GLSP is a good fit for your project. We implemented already quite a number of very similar use cases successfully with GLSP and there are also several others in the open-source community who've used GLSP for implementing diagram editors that roughly match your requirements.

I'll try to answer your specific questions below.

Custom inline editing component for the attribute types. I thinking some kind of html select where the user can pick one choice (e.g, string, boolean). Although the select will have some static options (e.g., string, boolean, ...) I want to add dynamically the concepts names available at that time in the diagram. Could be this possible?

Yes, this is certainly possible. The default label editing feature only provides validation, but no auto-complete. However, GLSP provides an AutoCompleteWidget which you can use in your custom UIExtension. The workflow diagram also includes an example for that with the direct-task-editing module. This is activated via a context menu in the example, but you can also activate it on double-click or F2 on any element.

You can also have a look at the an open-source UML editor (which btw also implements a class diagram editor with GLSP) that provides such an auto-complete feature on label editing (see https://github.com/borkdominik/bigUML/tree/main/client/packages/uml-glsp/src/features/edit-label).

A custom palette. I found some discussion about it already, but I didn't success on my first attempt. For examples, where the categories names are defined? How to associate custom nodes to a particular category?

By default, the GLSP server module binds the DefaultToolPaletteItemProvider, which obtains the registered operation handlers and derives the items it shows from that. However, you can easily bind your custom ToolPaletteItemProvider by overwriting bindToolPaletteItemProvider() in your server module to specify items, categories, icons, etc. yourself any way you want.

Looking at the code in the DefaultToolPaletteItemProvider hopefully makes it clear how to construct your PaletteItem[] to be shown in the palette..

The problem is that whenever the diagram is rebuilt due to a move of another node or node itself the attributes flick.

The flickering you see is caused by unstable or missing GModelElement#ids between model updates. I see in your code that you don't assign an ID to the compartment. This is what causes the flickering, as the client thinks it is a new element and therefore applies an animation to make this element "appear". If you assign an ID to every element, the GLSP client can map every element from a previous version of your GModel to the next version after a model update and thus derive that it shouldn't apply any animation. Obviously this ID needs to be stable (ie the same) across model updates.

Am I using the right approach? Is GLSP a good option for me?

Yes, I'd say you are using the right approach with respect to the compartments.

As mentioned above, I'd say GLSP is certainly a good option for you and several similar diagram editors to what you want to achieve have been implemented successfully. Many of them are closed-source and are used in proprietary products. But some of them are also open source, so I encourage you to also look at those open-source implementations with GLSP that did something similar for more inspiration. There are a few more I guess, but the first ones that come to my mind are the following:

• BIG UML
• OpenBPMN
• Ecore GLSP (a bit outdated though)

[rhumbertgz]

Hi @planger thanks for your time and explanation! I will check the issue with the IDs and the examples. Thanks again and have a good weekend!