Can we have multiple palette providers?

Developers General
1

Hi,

I am looking for a way to separate the tools from the palette. I wrote a custom palette provider and could handle what is to be shown in the palette - like removing the hand tool, lasso tool etc. But now I need to add these tools as a separate section in the canvas.

image

Thanks in advance.
Deepika

2

You will have to create your own component as an extension to work with diagram-js or bpmn-js. The Palette itself can be a good example on how to do it. Which actions are used, if you need them for your component, can be found inside the PaletteProvider

3

Similar problem solved using same approach - How can we inject 'lassoTool' or any diagram-js classes (like in custom palette provider using $inject) in a .ts file? - Modeler - Camunda Platform Forum

Finally I could separate the Tools from the palette and re-use the diagram-js modules’ lassoTool, spaceTool etc. This is NOT really a separate palette provider, but solves my problem.

I have found a solution that works for me.

Here are my Angular component and html files.
app.component.ts
app.component.html

app.component.ts
I have the modeler object created in the ngOnInit() function.

ngOnInit(): void {
    var container = $('#js-drop-zone');
    const $modelerContainer = $('#js-canvas');
    this.modeler = new Modeler({
      container: $modelerContainer,
      additionalModules: [
        customControlsModule
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    });
}

I also have a click event function for lassoTool. Here I get the ‘lassoTool’ module from the modeler created in the ngOnInit() function.

  lassoToolActivate(event){
    var tool = this.modeler.get('lassoTool');
    tool.activateSelection(event);
  }

app.component.html
I have a button outside of the div#js-drop-zone for lassoTool.

  <button class="entry bpmn-icon-lasso-tool" (click)="lassoToolActivate($event)">LassoTool</button>

Now the click on the lassoTool button activates the lassoTool on the canvas.

1 Like
4

Hello deepika,
Can i get your contact, i would like to ask you about a similar project of yours
Thanks