I can snap existing elements on sequence flows

Users
1

Please, is it possible to disable snapping elements on sequence flows? We have big diagrams with lots of connected tasks near each other and the custommer is very confused when dropping a task over a flow and suddenly this flow connects it. I would like to behave it like that:

Thank in advance!

2

The question for me is: Why don’t you want this behavior when dropping an element on a sequence flow? Do you want to have the connection rendered right through the element without a logical connection?

If you really want to remove the behavior, simply disable the DropOnFlowBehavior.

Please refer to this answer on how to disable a feature. Hint: The behavior itself is indicated as dropOnFlowBehavior module.

3

Thank you for your response, however when I tried

additionalModules: [
 {
    dropOnFlowBehavior: [ 'value', null ]
  }
]

then I got this error:
image

4

Do you have any other custom modules included?

5

Even if I have only dropOnFlowBehavior disabled, the error still occurs when moving a task over flow…

new BpmnModeler({
    container: canvas,
    additionalModules: [
        {
            dropOnFlowBehavior: [ 'value', null ]
        }
    ],
});
6

That’s probably because you’re trying to drop the task on top of the sequence flow, considering that as its new parent. That won’t work though, so seems like you will have to update the drop on flow behavior to have it as you wish. Disabling alone won’t work.

7

have you found any viable solution to this?

8

I want to implement the same feature but can’t find a way to fix the getOrdering error, but I did a workaround:

eventBus.on(“drag.end”, HIGH_PRIORITY, event => {
if (is(event.hover, “bpmn:SequenceFlow”)) {
event.stopPropagation();
event.preventDefault();
}
});

Did anyone managed to provide null dropOnFlowBehavior and fix the error ?

9

Solution with eventBus.on(“drag.end”… wasn’t complete for me, since i still could drop elements on flow and it would interact with process element so i simply copied DropOnFlowBehavior and removed ‘insertShape’ blocks.

dropOnFlowBehavior: ['type', CustomDropOnFlowBehavior],

import {EventBus} from "bpmn-js/lib/features/modeling/Modeling";
import CommandInterceptor from "diagram-js/lib/command/CommandInterceptor";
import {getMid} from 'diagram-js/lib/layout/LayoutUtil';
import {find} from 'min-dash';
import {getApproxIntersection} from 'diagram-js/lib/util/LineIntersection';

export class CustomDropOnFlowBehavior extends CommandInterceptor {
  static override $inject = ['eventBus', 'bpmnRules'];

  constructor(eventBus: EventBus, bpmnRules: any) {
    super(eventBus);

    this.preExecute('elements.move', (context: any) => {
      let newParent = context.newParent;
      const shapes = context.shapes;
      const delta = context.delta;
      const shape = shapes[0];

      if (!shape || !newParent) {
        return;
      }

      // if the new parent is a connection,
      // change it to the new parent's parent
      if (newParent && newParent.waypoints) {
        context.newParent = newParent = newParent.parent;
      }

      const shapeMid = getMid(shape);
      const newShapeMid = {
        x: shapeMid.x + delta.x,
        y: shapeMid.y + delta.y
      };

      // find a connection which intersects with the
      // element's mid point
      const connection = find(newParent.children, (element: any) => {
        const canInsert = bpmnRules.canInsert(shapes, element);

        return canInsert && getApproxIntersection(element.waypoints, newShapeMid);
      });

      if (connection) {
        context.targetFlow = connection;
        context.position = newShapeMid;
      }

    }, true);

    this.preExecute('shape.create', (context: any) => {
      const parent = context.parent;
      const shape = context.shape;

      if (bpmnRules.canInsert(shape, parent)) {
        context.targetFlow = parent;
        context.parent = parent.parent;
      }
    }, true);
  }

}