How do I add new custom elements (beyond tasks and nodes) in the GLSP VS Code example?

[pmachadoblatt]

Hi everyone! I’m quite new to GLSP and currently working with the VS Code example that only includes “task” and “node” elements. I’d like to expand it by adding additional custom elements, think "functions" and “subfunctions”, on a hierarchy, for instance, but I’m not sure where to start.

• Which files or classes do I need to modify on the server side (e.g., models, diagram configuration) and on the client side (e.g., diagram widget, types, etc.)?
• Is there a recommended workflow or set of steps for introducing new shapes and elements into a GLSP-based diagram?
• Any tips or examples you can share?

Thanks in advance for any help you can provide! I appreciate any pointers or code snippets that could guide me through the process.

[martin-fleck-at]

Hi @pmachadoblatt !

Welcome to the GLSP community! I'm happy to help you expand the example with custom elements. In general, you can find our documentation online, for especially the section about the Graphical Model is relevant: https://eclipse.dev/glsp/documentation/gmodel/. As for examples:

• Project Templates: The best starting point for your own diagram editor project. I guess you have seen that already since you are using the tasklist example.
• Workflow Example: A consistent example provided by all GLSP components. It implements a simple flow chart diagram editor with different types of nodes and edges. The Workflow Example is the main example used for development and integrates all GLSP features
• There are also some open source projects which are also using GLSP (such as CrossModel) but typically they are quite advanced so as a starting point the tasklist and workflow example should suffice.

To add new elements like "functions" and "subfunctions" you'll need to make changes to both the server (which will create those elements from a model source) and the client (that will render the elements). So you probably would do something like this:

1. You’ll need to update the model classes to define your new elements. This typically involves creating classes for "Function" and "Subfunction" that fit into your existing model structure. Similar to the tasklist model. You would get those elements from loading your source model (usually a file).
2. Transform your model classes into GModel elements using a factory. GLSP comes with a set of pre-defined GModel elements which may be enough as they can be combined to represent more complex structures but if you need a new element you can always extends the graphical model yourself. Please note that each GModel element has a unique type which is used for serialization/deserialization and rendering.
3. When the GModel is then sent from the server to the client, the client needs to render the elements properly. In your module (e.g., the tasklist diagram module) you can configure how an element of a certain type is represented on the client. If you use standard elements they already have a standard representation, e.g., nodes are represented as a rectangle. However, you can always adapt the representation, as you can also see in the workflow example. This should already be enough to render functions and subfunctions that are sent from the server to the client.
4. If you're adding actions or behaviors (like adding/removing functions), you’ll also need to implement appropriate command handlers for these elements on the server and ensure that you send those actions from the client to the server. See for example the task creation handler.

I hope that this will help you get started and feel free to share any specific issues or questions as you go.