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.
Hi
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.
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?
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