Dragging.js Error on Drop item into Diagram

Developers Modeler
#1

My Angular version is 9.1.7.
My bpmn-js version is 7.2.1

The error message in the console reads:

Dragging.js:34 Unable to preventDefault inside passive event listener invocation.

The warnings visible in the gif below may provide a hint as to the reason for the error:

zone.js:1823 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

https://www.chromestatus.com/feature/5745543795965952 says:

Passive event listeners

Expose “passive” boolean in the EventListenerOptions dictionary. Implement the behaviour with respect to dispatching passive EventListeners so that calling preventDefault inside executing the passive registered callback only generates a warning to the console. Can be used to dramatically improve scrolling performance.
…

In addition to the console error, the UI is also behaving in an unexpected way. 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.

Demo (you will have to click the image in order to be able to see the browser console):

capture
capture1808×890 837 KB

#2

Nice demo but without any code I won’t be able to help you. Can you explain what custom functionality you have built and how it’s interacting with bpmn-js?

#3

I have a codesample set up here: https://codesandbox.io/s/pensive-violet-ui2jg

If you drag and drop an item from the palette or from a custom draggable element, you will receive the warnings, but not the Draggable.js error. I believe the reason for the warnings and for the error is the same however.

I also have this app (slightly modified) deployed in a private github repo. I’ve sent you an invitation.

#4

The Create feature is supposed to be used to create elements through mouse interaction. create#start will only start the interaction, not create the element. Either call create#start on click/dragstart or use modeling#createShape instead.

#5

I used this method of creating an element from the codesample provided by Camunda here: https://codesandbox.io/s/adoring-ives-rdfsx?file=/src/index.js

Can you modify this sandbox to show me what the right way is to create the element?

I will try to update the example in github, to add Angular Material there, to make the example closer to my actual project.

#6

This is how you’d use create: https://codesandbox.io/s/create-example-nvk47?file=/src/index.js

The essential part is this:

document.querySelectorAll("#tasks [data-bpmn-definition]").forEach(el => {
  const definition = JSON.parse(el.dataset.bpmnDefinition);

  el.addEventListener("click", event => {
    const elementFactory = bpmnJS.get("elementFactory");

    const create = bpmnJS.get("create");

    const shape = elementFactory.createShape(definition);

    create.start(event, shape);
  });
});
#7

Thank you! Moving the calls to bpmnJS.get(“elementFactory”) and bpmnJS.get(“create”) from the onDrop handler of the receiving element (the diagram) to the onDragStart handler of the draggable element solved both the issue with the extra click needed, and the console error I was receiving from Dragging.js

I’m adding a codesandbox example of the simple non-angular implementation: https://codesandbox.io/s/youthful-grass-z2i9i