Snap the arrow to the edge of node elements

Developers Modeler
1

Hi,
I uploaded an existing bpmn file to the bpmn.io modeler. The arrows are shown behind the task node.

Screenshot-2018-3-5 opta ai

After moving the task node, the arrows snap to the edge of the task node like below.

Screenshot-2018-3-5-newopta ai

I hope someone can provide me some guidelines on how to make change to automatically snap the arrow to the edge of node elements.

2

HI @lhwong,

Could you reformulate your question? It’s not very clear what you want to achieve. Maybe sharing the file would help more illustrate your issue.

3

Hi,

  1. Open the attached bpmn file at https://demo.bpmn.io/
    get-started.bpmn (10.0 KB)

You can see that the arrows point to the center of the task node and are behind of the of node element.

  1. Drag the task node and release it. You can see the arrows snap to the edge of the node.

I am wondering if I can programmatically trigger certain action/event so that all of the arrows automatically snap to the edge upon the modeler shows the diagram

Regards,
Nick Wong

4

Hi @lhwong,

It’s possible possible to do so upon importing the diagram.

To illustrate how to achieve it, let’s take the following example:

Upon importing diagram, you can simply adjust the connections waypoints and fire the event ‘elements.changed’:

        bpmnModeler.importXML(bpmnXML, function(err) {
          ...
          var eventBus = bpmnModeler.get('eventBus');
          var connectionDocking = bpmnModeler.get('connectionDocking'); 
          
          var elementRegistry = bpmnModeler.get('elementRegistry');
          var connections = elementRegistry.filter(function(e) {
              return e.waypoints;
          });
          connections.forEach(function(connection) {
            connection.waypoints = connectionDocking.getCroppedWaypoints(connection);
          });

          eventBus.fire('elements.changed', { elements: connections });  
.         ...

         })
5

Hi @siffogh,

Cool. It works. Thank you very much.

Regards,
Nick Wong

6

is there any way to format the layout, like all the elements will be positioned at certain distance, arrows starting/edining posting on element will be border of the element, ?

7

Please do not necrobump old topics. Instead link to this thread from new topic.