link extension for diagram.js

[arjangeertsema]

Create a bpmn extension to add custom links to diagrams:

1. Extend namespace so that one ore more link elements can be added to every bpmn element (task, event, participant)
2. extend https://github.com/bpmn-io/diagram-js/blob/develop/lib/util/Text.js so that every element with one or more links can be clicked and activates onElementClick event handler.
3. create webcomponent onElementClick event listener, add link array to the event arguments.

XML

<bpmn:userTask id="Activity_0l4u8qq" name="Test">
    <bpmn:extensionElements>
        <bizdevops:links>
            <bizdevops:link name="Test" value="www.test. com" />
            <bizdevops:link value="www.test2.com" />
        </bizdevops:links>
    </bpmn:extensionElements>
</bpmn:userTask>

HTML

<bpm-viewer onelementclick="alert(`Element with ${event.detail.links.length} links.`)" />
<dmn-viewer onelementclick="alert(`Element with ${event.detail.links.length} links.`)" />

See for more info: https://bpmn.io/toolkit/bpmn-js/walkthrough

Definition of done

• [ ] onElementClick property is implemented
• [ ] elements with one or more are clickable
• [ ] clickable elements execute the onElementClick event listener
• [ ] clickable elements have hand cursor
• [ ] clickable elements text are underlined
• [ ] the clicked bpmn element is added to the event payload
• [ ] the clicked links are added to the event payload
• [ ] test scenario which checks if element click triggers enElementClick passes
• [ ] test scenario which checks if the element has a hand cursor passes
• [ ] test scenario which checks if the containing text element are underlined passes
• [ ] test scenario which checks if event object contains the clicked bpmn element passes
• [ ] test scenario which checks if event object contains links array passes