Obtain the coordinate (x,y) for endpoints of sequence flows

Developers
1

Hi,

Do you know how to obtain the coordinate (x,y) attributes of sequence flow endpoints? I need these coordinates to create an animation of tokens flowing through a task using SVG. The tokens will start from the incoming flow at the entry endpoint touching the task, across the task box along a straight line, then going out through the touching endpoint of the outgoing flow.

Appreciate any help.

Bruce

2

What did you try already?

3

I used getPointAtLength() with 0 and getTotalLength() on the corresponding path element of the sequence flow. This is at the SVG level and I’ve used these functions for Signavio Oryx, just migrated and see that they’re working fine on bpmn.io yesterday. I posted this question to know if bpmn.io provides any built-in and maybe more accurate calculation.

4

Please checkout our walkthrough, especially the internals section to learn about the data representation of elements. At the core every element can be addressed via the elementRegistry:

var sequenceFlow = elementRegistry.get('SomeFlow_ID');

var waypoints = sequenceFlow.waypoints; // [ { x: 20, y: 10 }, ... ]
1 Like