How to apply Layout to tasklist Demo

[wss29]

Hi,
You know workflow demo can auto layout Diagram menu

Now I use node-json-theia in glsp-examples\project-templates. because node-json-theia uses a domain model Task which is what I want. The problem is that I want to apply the auto layout to the tasklist diagram. But It is unuseful. It seems that workflow directly uses GModel, and tasklist use the domain model, I am not very familiar with the layout code. any experienced advice can save me a lot of time? thanks in advance.

[tortmayr]

Hi @wss29,
let me start with a little disclaimer before I try to answer your question. Auto layouting with the GLSP node server is in a sort of experimental state right now. The basic support is there but it's not really used in practice at the moment. Without proper use cases in the community it's hard to say whether there are any open bugs and also the documentation is not that great at the moment.
Nevertheless I'm happy to guide you if you want to experiment with auto layouting.

Basic flow:

• A LayoutOperation is sent to the server when you invoke the Layout command via menu entry or shortcut
• The default LayoutOperationHandler handles the operation and
  • First checks whether the server allows manual layouting by checking the layoutKind of the DiagramConfiguration
  • Checks if a LayoutEngine is bound and invokes it

In theory you can bind an implement and bind a LayoutEngine completely from scratch. However, autolayouting is a non trivial task
and implementing a custom engine might be a lot of effort.
Therefore we provide glue code that allows you to make use of the Eclipse Layout Kernel (ELK). ELK provides a collection of powerful algorithms and the necessary infrastructure for layouting diagrams. I recommend to have a look at their documentation before your dive further into this topic.

The @eclipse-glsp/layout-elk package provides the GLSPElkLayoutEngine and the configureElkLayoutModule utility function to create a DI module with the necessary configuration. I can be used to set the ELK layout algorithm and its configuration options that you want to use.

For instance in the Workflow example we configure an elk DI module for the Layered algorithm and then add it as additional module along the diagram module.

    const elkLayoutModule = configureELKLayoutModule({ algorithms: ['layered'], layoutConfigurator: WorkflowLayoutConfigurator });
    const serverModule = new WorkflowServerModule().configureDiagramModule(new WorkflowDiagramModule(), elkLayoutModule);

(The LayoutConfigurator can be used to customize the options of the algorithm)

Sourcemodel persistance

As you already noticed in this default implementation the layout changes are transient i.e. they are only stored in the graphical model but not synced back to the source model.

If you want to sync the layout changes back to you source model (task list in your example) you have to rebind the LayoutOperationHandler to a custom handler. After the layout engine has been invoked you have to iterate through the graphical elements and update the corresponding source model elements.