How can we inject 'lassoTool' or any diagram-js classes (like in custom palette provider using $inject) in a .ts file?

BPMN & Modeling Discussion & Questions
1

We have a requirement to provide the Tools separately in another panel. I was hoping to create another panel if I could inject the lassoTool, spaceTool etc in a .ts file just like we could do in a custom palette provider js file.

I am new to UI world. Any help would be appreciated.

2

Hi :wave:

So do you already have your plugin written in Javascript and it’s working? Can you maybe share it? It should be possible to translate this into a .ts sibling.

3

I have a CustomPaletteProvider.js like below where I can inject anything from diagram-js. I just need to add it in constructor and use it in $inject block.

import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
export default function CustomPaletteProvider(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate, bpmnFactoryObj) {
  var customPaletteProvider = new PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate);
}

CustomPaletteProvider.$inject = [
  'palette',
  'create',
  'elementFactory',
  'spaceTool',
  'lassoTool',
  'handTool',
  'globalConnect',
  'translate',
  'bpmnFactory'
];
PaletteProvider.prototype.getPaletteEntries = function (element) {
...
}

Now I have a .ts file like below where I would like to inject the lassoTool. How can i do it?

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'bpmn-customize';
  modeler;
  constructor() {
     ...
  }

If there is any reference on the upgrade/downgrade components, please let me know. I can try it out. I think I must be missing some key concepts here.

I see ‘didi’ framework is used for DI in diagram-js. How do I make use of these modules injected in a .ts file?

4

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.

2 Likes