Drag and Drop from React component

Developers Modeler
1

Hi, I writing an application where one of the requirements is to implement drag and drop of a custom node from one of our custom components onto the bpmn canvas. We have strict design requirements and therefore are not using the provided palette. I have it working when the canvas is not zoomed, but when the canvas is zoomed in or out the item appears on the canvas in an unexpected location. Below is the code I’m using to transform my addConfig.location to canvas coordinates, but as I said, it is not working properly when the canvas is zoomed. This is inside a React application and I’m using the react-dnd as the library for dragging and dropping to give you some background. Any help would be appreciated.

// set default position if not drag and drop
let nodeX = 500;
let nodeY = 80;
if (addConfig.location) {
  const svg = this.modeler.get('canvas')._svg;
  if (svg) {
    const pt: SVGPoint = svg.createSVGPoint();
    pt.x = addConfig.location.x;
    pt.y = addConfig.location.y;
    const svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
    nodeX = svgP.x;
    nodeY = svgP.y;
  }
}

Thanks,
Paul

2

This is how you convert a global point to a local point:

function toLocalPoint(globalPosition) {

  var viewbox = canvas.viewbox();

  var clientRect = canvas._container.getBoundingClientRect();

  return {
    x: viewbox.x + (globalPosition.x - clientRect.left) / viewbox.scale,
    y: viewbox.y + (globalPosition.y - clientRect.top) / viewbox.scale
  };
}

This function is used in Dragging which is used by Create which creates elements.

Are you not using the Create feature?

3

I wasn’t using create as I wasn’t sure how to use it when dragging out of a React component using the react-dnd library. Do you have any tips on how to use create in that instance. Can I somehow use create when I get the drop event?

Thanks again,
Paul

4

I’m not sure whether using a drag and drop library makes sense. I wouldn’t use one. Instead, you can call create.start on click or drag start just like it works in the palette.

5

Thanks for your answer. I’ve removed the drag and drop library and am now using create.start as you suggested. All is working great, however I don’t want the label to be edited as soon as the item is dropped. Is there a way to get the label editing to not happen on drop?

Thanks for your patience,
Paul

6

Well, one dirty way would be to cancel the label editing after it got active.

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

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

eventBus.on("create.end", 499, function (event) {
   if (directEditing.isActive()) {
     directEditing.cancel();
   }
});

Cf. Sandbox.

A cleaner way that would need more work is to create a custom LabelEditingProvider to handle your use case.