Extra connection appears when dropping a node onto a bent sequence flow

[ChaominRuan]

Describe the Bug

20250604224838.mov

When dragging a new node onto a bent (non-straight) sequence flow between two nodes (e.g. A and B), an extra connection/edge appears on the new node after insertion. This seems to be a bug caused by incorrect intersection calculation when the flow has bendpoints.

Based on inspection, the issue may originate from the DropOnFlowBehavior.js file, particularly around this line:

var intersection = getApproxIntersection(waypoints, mid);

Steps to Reproduce

1. Create two nodes A and B connected by a bent (non-straight) sequence flow.

2. Drag a new task or element from the palette and drop it directly onto the bent part of the flow.

3. Observe that an unexpected additional connection appears on the inserted node.

Expected Behavior

1. The new node should be inserted cleanly into the flow with only two connections: one from A to the new node, and one from the new node to B.

2. No extra connection should appear.

Environment

• Browser: [e.g. IE 11, Chrome 69]
• OS: [e.g. Windows 7]
• Library version: latest

XML

<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_0vhf8up" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="18.6.1">
  <bpmn:process id="Process_0s2fzcz" isExecutable="false">
    <bpmn:startEvent id="StartEvent_1ko3yla">
      <bpmn:outgoing>Flow_1n6i6vl</bpmn:outgoing>
    </bpmn:startEvent>
    <bpmn:task id="Activity_11ikm0k" name="">
      <bpmn:incoming>Flow_1n6i6vl</bpmn:incoming>
      <bpmn:outgoing>Flow_0ktmewa</bpmn:outgoing>
    </bpmn:task>
    <bpmn:sequenceFlow id="Flow_1n6i6vl" sourceRef="StartEvent_1ko3yla" targetRef="Activity_11ikm0k" />
    <bpmn:endEvent id="Event_0085iwq">
      <bpmn:incoming>Flow_0ktmewa</bpmn:incoming>
    </bpmn:endEvent>
    <bpmn:sequenceFlow id="Flow_0ktmewa" sourceRef="Activity_11ikm0k" targetRef="Event_0085iwq" />
    <bpmn:startEvent id="Event_04i47md">
      <bpmn:outgoing>Flow_0og3n6c</bpmn:outgoing>
    </bpmn:startEvent>
    <bpmn:task id="Activity_18lcvp2">
      <bpmn:incoming>Flow_0og3n6c</bpmn:incoming>
    </bpmn:task>
    <bpmn:sequenceFlow id="Flow_0og3n6c" sourceRef="Event_04i47md" targetRef="Activity_18lcvp2" />
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0s2fzcz">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1ko3yla">
        <dc:Bounds x="156" y="82" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_0085iwq_di" bpmnElement="Event_0085iwq">
        <dc:Bounds x="692" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_11ikm0k_di" bpmnElement="Activity_11ikm0k">
        <dc:Bounds x="390" y="50" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_04i47md_di" bpmnElement="Event_04i47md">
        <dc:Bounds x="156" y="262" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_18lcvp2_di" bpmnElement="Activity_18lcvp2">
        <dc:Bounds x="420" y="240" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="Flow_1n6i6vl_di" bpmnElement="Flow_1n6i6vl">
        <di:waypoint x="192" y="100" />
        <di:waypoint x="296" y="100" />
        <di:waypoint x="296" y="90" />
        <di:waypoint x="390" y="90" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_0ktmewa_di" bpmnElement="Flow_0ktmewa">
        <di:waypoint x="490" y="90" />
        <di:waypoint x="591" y="90" />
        <di:waypoint x="591" y="120" />
        <di:waypoint x="692" y="120" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_0og3n6c_di" bpmnElement="Flow_0og3n6c">
        <di:waypoint x="192" y="280" />
        <di:waypoint x="370" y="280" />
        <di:waypoint x="380" y="260" />
        <di:waypoint x="380" y="280" />
        <di:waypoint x="390" y="260" />
        <di:waypoint x="390" y="280" />
        <di:waypoint x="400" y="260" />
        <di:waypoint x="400" y="280" />
        <di:waypoint x="420" y="280" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>

[barmac]

I can reproduce an incorrect layout of the connection. There's no extra connection though. The drop-on-flow behavior where the element is inserted between flow elements is a feature.

Screen.Recording.2025-06-05.at.13.25.47.mov

[barmac]

Since having bent sequence flows is not what we aim to foster among the users, it is not a critical issue. It works fine when element is dropped on an elbow-shaped flow.

Screen.Recording.2025-06-05.at.13.28.16.mov