Add items dynamically in tool palette from UI

[mshahzadiftikhar]

General idea is to make source model of editor user driven. Instead of creating components from a hardcoded list in the tool palette, user can create their own components and use in the editor.

I have overriden ToolPaletteItemProvider on my end:

@injectable()
export class CustomToolPaletteProvider extends DefaultToolPaletteItemProvider {
    override getItems(_args?: Args): PaletteItem[] {
        const handlers = this.operationHandlerRegistry.getAll().filter(CreateOperationHandler.is) as CreateOperationHandler[];
        this.counter = 0;
        const nodes = super.createPaletteItem(handlers, CreateNodeOperation.KIND);
        const edges = super.createPaletteItem(handlers, CreateEdgeOperation.KIND);

        // Add a button to the nodes group
        const addButton = this.createAddButton();

        return [
            {
                id: 'node-group',
                label: 'Components',
                actions: [],
                children: [...nodes, addButton],
                icon: 'symbol-property',
                sortString: 'A'
            },
            { id: 'edge-group', label: 'Edges', actions: [], children: edges, icon: 'symbol-property', sortString: 'B' }
        ];
    }

    // Create a button for adding a new node
    createAddButton(): PaletteItem {
        return {
            id: 'add-button',
            label: 'Add Node',
            actions: [],
            icon: 'add',
            sortString: 'Z'
        };
    }
}

and It looks something like this:

I want to add a new item in palette when Add Node is clicked. Any pointers to this would be helpful. Add Node will open some kind of UI where user can add name of the new node and its properties.

My current configurations:

• Client: VS Code​
• Server: Node​
• Model Source: JSON

[tortmayr]

Hi @mshahzadiftikhar,

this is a very interesting use case.
Clicking an item in the toolpalette dispatches the actions of the associated palette item.
In the default use case this typically dispatches a TriggerNodeCreationAction/TriggerEdgeCreationAction which then activates the corresponding tool.

For your usecase this would be a bit different. Instead of directly dispatching a trigger action you would need to dispatch an action to show you custom UI. Once the user has added the desired properties and is ready to create the node a TriggerNodeCreationAction can be dispatched. This action has an args property that allows you to pass additional arguments to the resulting CreateNodeOperationAction which will be sent to the server. So you can add the user-defined properties here.

So a high-level roadmap could look like this

1. Implement you custom UI for specifying the properties. Typically this is done with a custom UIExtension.
2. Adapt your ToolPaletteItemProvider and add an action for showing the UI to the add button.
3. In your custom UI make sure to dispatch a TriggerNodeCreationAction once the user is done with specifying the properties.
   Add your custom properties to the args property of the action.
4. Implement a handler for the corresponding CreateNodeOperation on the server side