Hi,
I’m customising bpmn-js modeler to draw a (Task) rectangle when the user dragover and drops a custom module element in the canvas. Note that with module I don’t mean an ES module but simply a collection of operations to be performed on given input files.
In app.js, I’m customising the dragover and drop listeners
function handleDroppedModule(e) {
e.stopPropagation();
e.preventDefault();
$('#drop-it-here').remove();
// it loads a bpmn diagram with only a start event circle in it
createNewDiagram();
// the dropped module
var activeModule = JSON.parse(localStorage.getItem('moduleObj'));
var moduleName = activeModule.name;
// function that reads the module name and redirect the user to input and output file settings
gotoTaskSetup(moduleName);
// drawing the Task rectangle
var taskshape = elementFactory.createShape(assign({ type: 'bpmn: Task' }));
create.start(event, taskshape);
[...]
}
function handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
// TBD
}
// dragover and drop listeners
container.get(0).addEventListener('dragover', handleDragOver, false);
container.get(0).addEventListener('drop', handleDroppedModule, false);
}
I’ve analysed how the PaletteModule fires the dragstart and click events: lots of different files are involved in the workflow generated, both in the init phase and then in the drop handling. I’ve isolated the two lines of code which I believe I need to draw the Task rectangle.
var taskshape = elementFactory.createShape(assign({ type: 'bpmn: Task' }));
create.start(event, taskshape);
How can I use an ElementFactory instance and the create() method in my custom handlers?
Thank you for any help you can provide.