How to add a tool palette button to invoke an automatic layout

[gee4vee]

Are there any examples of how to do this? I would like to add a button to the palette that will trigger an automatic layout based on some ELK algorithm we define with configureELKLayoutModule. That way users can get an initial automatic layout and then manually adjust nodes as needed. Is this possible?

[tortmayr]

Hi @gee4vee,

yes this is possible. GLSP is DI-based so you can simply rebind the ToolPalette UIExtension to a custom implementation and add your button there.

Something like this should work:

@injectable()
export class MyToolPalette extends ToolPalette {
    protected override createHeaderTools(): HTMLElement {
        const headerTools = super.createHeaderTools();
        headerTools.appendChild(this.createLayoutButton());
        return headerTools;
    }

    protected createLayoutButton(): HTMLElement {
        const layoutButton = createIcon('editor-layout'); 
        layoutButton.title = 'Layout Diagram';
        layoutButton.onclick = () => {
            this.actionDispatcher.dispatch(LayoutOperation.create());
            layoutButton.focus();
        };
        layoutButton.ariaLabel = layoutButton.title;
        layoutButton.tabIndex = 1;
        return layoutButton;
    }
}

// And in your diagram module

rebind(ToolPalette).to(MyToolPalette).inSingletonScope();

Please note that almost all integration variants (Theia, Eclipse, VS Code ...) already provide ways to trigger a layout operation by default (keybindings, title menu and/or context menu entries ...)

[gee4vee]

@tortmayr thank you! Do I need to do anything in the server code to handle the layout operation?

[tortmayr]

If I recall correctly a LayoutEngine needs to be bound (which should already by the case if you are using configureELKLayoutModule) and the layoutKind of your DiagramConfiguration needs to be set MANUAL.