Need one extra click to drop object to diagram

Developers
1

Hi
I am trying to drag a object from one component and drop that object to BPMN editor. While doing that I need to click one additional time in order to drop the object after having dragged it over the diagram and released the mouse button.
And also after dropping that I want to update property panel programmatically. How to achieve this. Please guide

Code inside draggable component -
dragStartHandler(dragEvent: DragEvent,botName) {
dragEvent.dataTransfer.setData(“activity”, activity-${Date.now()});
const definition1 = {“type”: “bpmn:ServiceTask”, “name”: “some name”};
const definition = JSON.stringify(definition1);
const preview = document.createElement(“div”);
dragEvent.dataTransfer.setData(“activityDefinition”, definition);
preview.innerText = JSON.parse(definition).name;
preview.setAttribute(
“style”,
position: absolute; height: auto; word-wrap: break-word; top: -500px; background- color: #EEE; border: 1px solid #111; border-radius: 8px; padding: 4px;
);
document.body.appendChild(preview);
dragEvent.dataTransfer.setDragImage(preview, 0, 0);
}

Code inside receiving element i.e. diagram -
public onDrop($event) {
const json = $event.dataTransfer.getData(“activityDefinition”);
if (!json) return false;
const bpmnDefinition = JSON.parse(json);
const elementFactory = this.modeler.get(“elementFactory”);
const shape = elementFactory.createShape(bpmnDefinition);
const create = this.modeler.get(“create”);
create.start($event, shape);
}

2

The code snippet you posted is not formatted correctly. To share code examples that illustrate your problem, please adhere to the following rules:

  • Do not post screenshots of your code
  • Focus your snippets on the few lines that matter for the topic at hand
  • Format your code

Please update your post according to these rules. We may not be able to help you otherwise. In extreme cases we may also close your topic if we regard it as spam.

Hint: To share complete setups, create and link a CodeSandbox. This way, we can inspect the problem at hand in action and, thus, can help you in a timely and more effective manner.

Thanks :heart: