Inserting gateway fails with Cannot read properties of undefined (reading 'segmentIndex')

[nikku]

Describe the Bug

When dropping a gateway onto a flow the editor may blow up with the following error:

TypeError: Cannot read properties of undefined (reading 'segmentIndex')
    at LabelLayoutUtil.js:116
    at LabelBehavior.js:205
    at LabelBehavior.js:232
    at EventBus.js:519
    at Bn._invokeListener (EventBus.js:371)
    at Bn._invokeListeners (EventBus.js:352)
    at Bn.fire (EventBus.js:313)
    at Kd._fire (CommandStack.js:356)
    at Kd._internalExecute (CommandStack.js:425)
    at Kd.execute (CommandStack.js:153)
    at Uf.Cf.layoutConnection (Modeling.js:206)
    at sf.postExecute (ReconnectConnectionHandler.js:76)
    at Kd._internalExecute (CommandStack.js:428)
    at Kd.execute (CommandStack.js:153)
    at Uf.Cf.reconnect (Modeling.js:479)
    at Uf.Cf.reconnectEnd (Modeling.js:497)
    at i (DropOnFlowBehavior.js:78)
    at DropOnFlowBehavior.js:182
    at CommandInterceptor.js:43
    at EventBus.js:519
    at Bn._invokeListener (EventBus.js:371)
    at Bn._invokeListeners (EventBus.js:352)
    at Bn.fire (EventBus.js:313)
    at Kd._fire (CommandStack.js:356)
    at Kd._internalExecute (CommandStack.js:431)
    at Kd.execute (CommandStack.js:153)
    at Uf.Cf.createShape (Modeling.js:291)
    at zh.preExecute (AppendShapeHandler.js:44)
    at Kd._internalExecute (CommandStack.js:401)
    at Kd.execute (CommandStack.js:153)
    at Uf.Cf.appendShape (Modeling.js:371)
    at Create.js:208
    at EventBus.js:519
    at Bn._invokeListener (EventBus.js:371)
    at Bn._invokeListeners (EventBus.js:352)
    at Bn.fire (EventBus.js:313)
    at s (Dragging.js:169)
    at l (Dragging.js:265)
    at HTMLDocument.u (Dragging.js:314)
    at HTMLDocument.i (helpers.ts:87)
(anonymous) @ instrument.ts:129
Bn._invokeListener @ EventBus.js:385
Bn._invokeListeners @ EventBus.js:352
Bn.fire @ EventBus.js:313
s @ Dragging.js:169
l @ Dragging.js:265
u @ Dragging.js:314
i @ helpers.ts:87

Attached a screen capture of the interaction:

Steps to Reproduce

1. Open test diagram
2. Insert Gateway on green flow, before NO label
3. See editor blowing up with error message
4. Editor state is now broken (cannot be interacted with anymore)

Expected Behavior

• Operation can be carried out safely

Environment

• Browser: Chrome 95
• OS: any
• Library version: v8.8.0 (reproducible on demo.bpmn.io, too)

---

Reported via forum.

Tracked via crash reporting, too.

[marstamm]

I was able to root-cause this issue. The Conditions for this to happen are:

• Drop element on a flow so it reconnects
• The Flow has a label
• The drop position is such that the shape outline is before the connection start
  

We effectively don't have an intersection with the connection, because all points of the connection are inside the shape bounding box. This is missed in our error protection:

bpmn-js/lib/features/modeling/behavior/DropOnFlowBehavior.js

Lines 54 to 69 in 82a250b

	// due to inaccuracy intersection might have been found
	if (!waypointsBefore.length || !waypointsAfter.length) {
	return;
	}
	dockingPoint = intersection.bendpoint ? waypoints[intersection.index] : mid;
	// if last waypointBefore is inside shape's bounds, ignore docking point
	if (!isPointInsideBBox(shape, waypointsBefore[waypointsBefore.length-1])) {
	waypointsBefore.push(copy(dockingPoint));
	}
	// if first waypointAfter is inside shape's bounds, ignore docking point
	if (!isPointInsideBBox(shape, waypointsAfter[0])) {
	waypointsAfter.unshift(copy(dockingPoint));
	}

We then have a connection with only 1 Waypoint that breaks later when we try to calculate intersections on the line, which fails.

The behavior seems broken even when no label is present:

I see 2 options to solve this issue:

1️⃣ Don't handle this edge case as an "drop on flow" and don't connect it to the flow.

2️⃣ Always add a second waypoint to the new connection, e.g. the nearest shape border.

I gravitate strongly to 1️⃣. This would change the requirement for "drop on flow" to "the complete shape is on the flow". Currently only the mid-point is considered, which I don't find intuitive.

[nikku]

Is 1️⃣ hard to accomplish? I'd love to see it in action to get a feeling for it.

[marstamm]

Should be easy enough, I'll create a branch tomorrow

[nikku]

After giving it another thought, I'd go with option 2️⃣. #1542 outlines the rationale.

[marstamm]

I tried it out and agree. 2️⃣ feels "right"