Create or Align Waypoints Automatically

Developers
2

That is a sad-looking diagram. We’re happy to fix it using the awesome powers of bpmn-js:

const elementRegistry = bpmnJS.get("elementRegistry"),
      modeling = bpmnJS.get("modeling");

const connections = elementRegistry.filter((element) => element.waypoints);

connections.forEach((connection) => {
  modeling.updateWaypoints(connection, [
    getMid(connection.source),
    getMid(connection.target)
  ]);

  modeling.layoutConnection(connection, {
    connectionStart: getMid(connection.source),
    connectionEnd: getMid(connection.target)
  });
});

CodeSandbox: https://codesandbox.io/s/fix-connection-layout-example-jz7xq?file=/src/index.js:572-1057

Turns something like this

image

into this

image

2 Likes