Connector lines overlapping in the flow

Developers
1

Is there a way to remove overlapping of flow connector lines as I have shown in the attached screenshot. It creates lot of confusion whether which line is connected to which element and originates from which element.

image

2

Hi @shaansrivastava,

you can use the blue hooks and drag the sequence flows a bit to the side:

grafik

Hope this helps, Ingo

1 Like
3

@shaansrivastava Does @Ingo_Richtsmeier’s suggestion solve your issue? What alternatives do you have in mind?

4

I have created a map with the elements as key and target element connections for the element.
Eg: targetElConnections: map with elements and corresponding incoming connection lines, similarly sourceElConnections: map with elements and corresponding outgoing connection lines.

And the I am adding extra space to the lines by traversing the map two times for source and target connections.

    const spacing = 15;
    elConnections.forEach((connections) => {
      // Elements with more than one connection causes overlapping, so check for such connections
      if (connections.length > 1) {
        // Update the waypoints for overlapping connections
        connections.forEach((connection, index) => {
          // Calculate the horizontal and vertical offset for each connection for positioning them relative to center
          // Dividing the length of connections array by half to get the center position
          const horizontalOffset = (index-(connections.length-1)/2) * spacing;
          const verticalOffset = (index-(connections.length-1)/2) * spacing;
    
          // Update the waypoints with the horizontal and vertical offsets
          const waypoints = connection.waypoints.map((waypoint) => ({
            x: waypoint.x + horizontalOffset,
            y: waypoint.y + verticalOffset
          }));
    
          // Update the connection with the new waypoints
          const modeling = ModelerService.getModeler().get('modeling');
          modeling.updateWaypoints(connection, waypoints);
          modeling.layoutConnection(connection, {
            connectionStart: waypoints[0], 
            connectionEnd: waypoints[waypoints.length - 1]
          });
        });        
      }
    });

But when I am expanding a subprocess, and again collapsing it, this process is run again, which takes too much time. Can it be more optimized?