Unwanted connections created when moving element

Developers
1

Hello, everybody. I found a very strange behaviour while creating a bpmn model.

I’ll give you some repro-steps:

  • I create a new bpmn diagram
  • From the start event, I create a new task
  • Starting from the task, I create a end event
  • I try to drag the task and drop a bit to the left (closer to the start event) or a bit to the right (closer to the end event)

Result

  • Everthing gets updated, but the diagram create a new connection from the task to the task itself.

I thought it was because I was using the 2.5.2 version of bpmn.js, so I decided to move to 3.0.4 (which I saw in changelog.md that uses diagram.js 3.0.4). But it doesn’t change:

Here, I uploaded a small video out of it: https://giant.gfycat.com/InsignificantMeaslyGlobefish.webm

Here’s an image of what the result is:
bpmn_bug_connection

With that arrow behind the group that I can’t move away, no matter what. And my XML becomes like this:

<bpmn2:process id="Process_1" isExecutable="false">
    <bpmn2:startEvent id="Start">
      <bpmn2:outgoing>start-task</bpmn2:outgoing>
    </bpmn2:startEvent>
    <bpmn2:task id="Task">
      <bpmn2:incoming>start-task</bpmn2:incoming>
      <bpmn2:incoming>SequenceFlow_08vn6wv</bpmn2:incoming>
      <bpmn2:outgoing>SequenceFlow_08vn6wv</bpmn2:outgoing>
      <bpmn2:outgoing>task-end</bpmn2:outgoing>
    </bpmn2:task>
    <bpmn2:sequenceFlow id="start-task" sourceRef="Start" targetRef="Task" />
    <bpmn2:endEvent id="End">
      <bpmn2:incoming>task-end</bpmn2:incoming>
    </bpmn2:endEvent>
    <bpmn2:sequenceFlow id="SequenceFlow_08vn6wv" sourceRef="Task" targetRef="Task" />
    <bpmn2:sequenceFlow id="task-end" sourceRef="Task" targetRef="End" />
  </bpmn2:process>

The SequenceFlow_08vn6wv is the one automatically generated.

I’m using the modeler inside an Angular Module. Because of this, I’m not capable to replicate the code to any JSFiddle, nor StackBlitz (BpmnJs has no typings.d.ts file, therefore I can’t create an implicit connection between the app.component.ts and the node_modules folder containing the bpmn-js files. But I’ll try to create a GitHub repo later or in the next days.

Try to debug the code, I noticed something particular: looks like the drag’n’drop of the element trigger the event element.move. This one somehow calls the method insertShape giving instruction to create a new connection that happen to have the task as source and as target. This is something that I can’t catch adding a custom rule, since gets created programmatically.

I know this is complicated to understand. And because of this any kind of help is more than appreciated, the same for request of clarification. Meanwhile I hope that someone had cross path with a problem like this one, and can suggest me something (anything, please, anything).

Meanwhile, I wish you all happy Christmas and New Year’s Eve holidays.

2

It’s not actually that complicated to understand—you did a great job describing the problem.

This is a clear bug that needs to be fixed within bpmn-js (specifically in the DropOnFlowBehavior). We should prohibit creating self loops as you described.

Would you mind creating a bug report with the details you provided?

:evergreen_tree:

1 Like
3

Thanks Nikku. I just opened a bug. For you and any other interested, here’s the link: https://github.com/bpmn-io/bpmn-js/issues/927

1 Like
4

Hello everyone. I necropost this because I found a solution (thanks to @nikku’s response to my github issue).

I dug into it a little bit further and I finally find out that actually this was a problem of the Angular application I’m developing.

In few words, looks like the modeler I have created needed the BpmnRules reference among the AdditionalModules for the whole time.

Because of this I decided to modify my app.component.ts file to create the modeler with this code:

this._modeler = new BpmnJS({
	container: `#${CANVAS_ID}`,
	keyboard: {
		bindTo: document,
	},
	propertiesPanel: {
		parent: "#js-properties-panel",
	},
	additionalModules: [**BpmnRules**, propertiesPanelModule, customPropertiesProviderModule],
	moddleExtensions: {
		my: myCustomExtensions,
	},
});

I gave for granted that rules where automatically added to my modeler, but I was wrong. I add the BpmnRules up there, and everything became fine, like magic.

Like I did in the past, I do post the solution to my own problem because I hope it might help whoever can find in this same situation.

1 Like