Create or Align Waypoints Automatically

Developers
1

Hi,

I have designed bpmn xml using jaxb. I have done almost except the waypoints. I have added waypoints but they are not aligned properly
image

If I drag any element, then its aligning properly

image

Is there anyway to create way to create waypoints, so that the diagram should show properly.

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
3

Thanks Man,

it worked like a charm.

1 Like
4

from where u imported getMid

5

You can import it from diagram-js:

import { getMid } from 'diagram-js/lib/layout/LayoutUtil.js';
1 Like