Filter the Components

[kyal2000]

Is there a way to Filter the Components? I dont want every registered Component also shown in the dock.

[MattNot]

Sorry, how have you done it?

[kyal2000]

Hi, I've created a custom plugin based on the dock-plugin You need to adapt the index.ts by adding additional params:

1. You need to pass the name of the dock as param to avoid registering two plugins with the same "ID"
2. A param to filter the components: I simply used a string array and filter by the name of the component in the on('componentregister')

So I can add 3 dock plugins, with different components:

        this.state.editor.use(DockPlugin, {
            itemClass: "consumer-dock-item",
            container: document.querySelector('.consumer-dock') as HTMLElement,
            plugins: [ReactRenderPlugin],
            shownComponents: this.props.consumerElements,
            dockName: 'consumer-dock'
        });
        this.state.editor.use(DockPlugin, {
            itemClass: "producer-dock-item",
            container: document.querySelector('.producer-dock') as HTMLElement,
            plugins: [ReactRenderPlugin],
            shownComponents: this.props.producerElements,
            dockName: 'producer-dock'
        });
        this.state.editor.use(DockPlugin, {
            itemClass: "connector-dock-item",
            container: document.querySelector('.connector-dock') as HTMLElement,
            plugins: [ReactRenderPlugin],
            shownComponents: connector,
            dockName: 'connector-dock'
        });

As I needed more adaption I also edited the DropStrategy by calling an endpoint of the backend on drop to enrich the node data right at the start

[Ni55aN]

btw, Dock plugin in the v2 supports dynamic adding/removing: https://retejs.org/docs/guides/dock-menu#remove-nodes

[MattNot]

Thank you @kyal2000 ! Also ty to @Ni55aN, we have already the project started and its too late to change version but maybe in the future we will do a refactor