camunda-bpmn-js 1.2.0 → 1.3.0

package/dist/base-viewer.development.js

@@ -1324,34 +1324,128 @@
     return transformList.consolidate();
   }
 
+  /**
+   * @param { [ string, ...any[] ][] } elements
+   *
+   * @return { string }
+   */
   function componentsToPath(elements) {
-    return elements.join(',').replace(/,?([A-z]),?/g, '$1');
+    return elements.flat().join(',').replace(/,?([A-z]),?/g, '$1');
+  }
+
+  function move(point) {
+    return [ 'M', point.x, point.y ];
+  }
+
+  function lineTo(point) {
+    return [ 'L', point.x, point.y ];
   }
 
-  function toSVGPoints(points) {
-    var result = '';
+  function curveTo(p1, p2, p3) {
+    return [ 'C', p1.x, p1.y, p2.x, p2.y, p3.x, p3.y ];
+  }
+
+  function drawPath(waypoints, cornerRadius) {
+    const pointCount = waypoints.length;
+
+    const path = [ move(waypoints[0]) ];
+
+    for (let i = 1; i < pointCount; i++) {
 
-    for (var i = 0, p; (p = points[i]); i++) {
-      result += p.x + ',' + p.y + ' ';
+      const pointBefore = waypoints[i - 1];
+      const point = waypoints[i];
+      const pointAfter = waypoints[i + 1];
+
+      if (!pointAfter || !cornerRadius) {
+        path.push(lineTo(point));
+
+        continue;
+      }
+
+      const effectiveRadius = Math.min(
+        cornerRadius,
+        vectorLength(point.x - pointBefore.x, point.y - pointBefore.y),
+        vectorLength(pointAfter.x - point.x, pointAfter.y - point.y)
+      );
+
+      if (!effectiveRadius) {
+        path.push(lineTo(point));
+
+        continue;
+      }
+
+      const beforePoint = getPointAtLength(point, pointBefore, effectiveRadius);
+      const beforePoint2 = getPointAtLength(point, pointBefore, effectiveRadius * .5);
+
+      const afterPoint = getPointAtLength(point, pointAfter, effectiveRadius);
+      const afterPoint2 = getPointAtLength(point, pointAfter, effectiveRadius * .5);
+
+      path.push(lineTo(beforePoint));
+      path.push(curveTo(beforePoint2, afterPoint2, afterPoint));
     }
 
-    return result;
+    return path;
   }
 
-  function createLine(points, attrs) {
+  function getPointAtLength(start, end, length) {
 
-    var line = create$1('polyline');
-    attr$1(line, { points: toSVGPoints(points) });
+    const deltaX = end.x - start.x;
+    const deltaY = end.y - start.y;
 
-    if (attrs) {
-      attr$1(line, attrs);
+    const totalLength = vectorLength(deltaX, deltaY);
+
+    const percent = length / totalLength;
+
+    return {
+      x: start.x + deltaX * percent,
+      y: start.y + deltaY * percent
+    };
+  }
+
+  function vectorLength(x, y) {
+    return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+  }
+
+  /**
+   * @param { { x: number, y: number }[] } points
+   * @param { any } [attrs]
+   * @param { number } [radius]
+   *
+   * @return {SVGElement}
+   */
+  function createLine(points, attrs, radius) {
+
+    if (isNumber(attrs)) {
+      radius = attrs;
+      attrs = null;
     }
 
-    return line;
+    if (!attrs) {
+      attrs = {};
+    }
+
+    const line = create$1('path', attrs);
+
+    if (isNumber(radius)) {
+      line.dataset.cornerRadius = String(radius);
+    }
+
+    return updateLine(line, points);
   }
 
+  /**
+   * @param { SVGElement } gfx
+   * @param { { x: number, y: number }[]} points
+   *
+   * @return {SVGElement}
+   */
   function updateLine(gfx, points) {
-    attr$1(gfx, { points: toSVGPoints(points) });
+
+    const cornerRadius = parseInt(gfx.dataset.cornerRadius, 10) || 0;
+
+    attr$1(gfx, {
+      d: componentsToPath(drawPath(points, cornerRadius))
+    });
 
     return gfx;
   }
@@ -1824,9 +1918,13 @@
 
   var componentEvent = {};
 
-  var bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
-      unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
-      prefix$6 = bind$1 !== 'addEventListener' ? 'on' : '';
+  var bind$1, unbind$1, prefix$6;
+
+  function detect () {
+    bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent';
+    unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent';
+    prefix$6 = bind$1 !== 'addEventListener' ? 'on' : '';
+  }
 
   /**
    * Bind `el` event `type` to `fn`.
@@ -1840,6 +1938,7 @@
    */
 
   var bind_1 = componentEvent.bind = function(el, type, fn, capture){
+    if (!bind$1) detect();
     el[bind$1](prefix$6 + type, fn, capture || false);
     return fn;
   };
@@ -1856,6 +1955,7 @@
    */
 
   var unbind_1 = componentEvent.unbind = function(el, type, fn, capture){
+    if (!unbind$1) detect();
     el[unbind$1](prefix$6 + type, fn, capture || false);
     return fn;
   };
@@ -2287,33 +2387,33 @@
 
     var markers = {};
 
-    var computeStyle = styles.computeStyle;
-
-    function addMarker(id, options) {
-      var attrs = assign$1({
-        fill: black,
-        strokeWidth: 1,
+    function shapeStyle(attrs) {
+      return styles.computeStyle(attrs, {
         strokeLinecap: 'round',
-        strokeDasharray: 'none'
-      }, options.attrs);
-
-      var ref = options.ref || { x: 0, y: 0 };
-
-      var scale = options.scale || 1;
-
-      // fix for safari / chrome / firefox bug not correctly
-      // resetting stroke dash array
-      if (attrs.strokeDasharray === 'none') {
-        attrs.strokeDasharray = [ 10000, 1 ];
-      }
-
-      var marker = create$1('marker');
+        strokeLinejoin: 'round',
+        stroke: black,
+        strokeWidth: 2,
+        fill: 'white'
+      });
+    }
 
-      attr$1(options.element, attrs);
+    function lineStyle(attrs) {
+      return styles.computeStyle(attrs, [ 'no-fill' ], {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: black,
+        strokeWidth: 2
+      });
+    }
 
-      append(marker, options.element);
+    function addMarker(id, options) {
+      var {
+        ref = { x: 0, y: 0 },
+        scale = 1,
+        element
+      } = options;
 
-      attr$1(marker, {
+      var marker = create$1('marker', {
         id: id,
         viewBox: '0 0 20 20',
         refX: ref.x,
@@ -2323,6 +2423,8 @@
         orient: 'auto'
       });
 
+      append(marker, element);
+
       var defs = query('defs', canvas._svg);
 
       if (!defs) {
@@ -2355,105 +2457,116 @@
     function createMarker(id, type, fill, stroke) {
 
       if (type === 'sequenceflow-end') {
-        var sequenceflowEnd = create$1('path');
-        attr$1(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
+        var sequenceflowEnd = create$1('path', {
+          d: 'M 1 5 L 11 10 L 1 15 Z',
+          ...shapeStyle({
+            fill: stroke,
+            stroke: stroke,
+            strokeWidth: 1
+          })
+        });
 
         addMarker(id, {
           element: sequenceflowEnd,
           ref: { x: 11, y: 10 },
-          scale: 0.5,
-          attrs: {
-            fill: stroke,
-            stroke: stroke
-          }
+          scale: 0.5
         });
       }
 
       if (type === 'messageflow-start') {
-        var messageflowStart = create$1('circle');
-        attr$1(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
+        var messageflowStart = create$1('circle', {
+          cx: 6,
+          cy: 6,
+          r: 3.5,
+          ...shapeStyle({
+            fill: fill,
+            stroke: stroke,
+            strokeWidth: 1
+          })
+        });
 
         addMarker(id, {
           element: messageflowStart,
-          attrs: {
-            fill: fill,
-            stroke: stroke
-          },
           ref: { x: 6, y: 6 }
         });
       }
 
       if (type === 'messageflow-end') {
-        var messageflowEnd = create$1('path');
-        attr$1(messageflowEnd, { d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z' });
+        var messageflowEnd = create$1('path', {
+          d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z',
+          ...shapeStyle({
+            fill: fill,
+            stroke: stroke,
+            strokeWidth: 1
+          })
+        });
 
         addMarker(id, {
           element: messageflowEnd,
-          attrs: {
-            fill: fill,
-            stroke: stroke,
-            strokeLinecap: 'butt'
-          },
           ref: { x: 8.5, y: 5 }
         });
       }
 
       if (type === 'association-start') {
-        var associationStart = create$1('path');
-        attr$1(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });
-
-        addMarker(id, {
-          element: associationStart,
-          attrs: {
+        var associationStart = create$1('path', {
+          d: 'M 11 5 L 1 10 L 11 15',
+          ...lineStyle({
             fill: 'none',
             stroke: stroke,
             strokeWidth: 1.5
-          },
+          })
+        });
+
+        addMarker(id, {
+          element: associationStart,
           ref: { x: 1, y: 10 },
           scale: 0.5
         });
       }
 
       if (type === 'association-end') {
-        var associationEnd = create$1('path');
-        attr$1(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });
-
-        addMarker(id, {
-          element: associationEnd,
-          attrs: {
+        var associationEnd = create$1('path', {
+          d: 'M 1 5 L 11 10 L 1 15',
+          ...lineStyle({
             fill: 'none',
             stroke: stroke,
             strokeWidth: 1.5
-          },
-          ref: { x: 12, y: 10 },
+          })
+        });
+
+        addMarker(id, {
+          element: associationEnd,
+          ref: { x: 11, y: 10 },
           scale: 0.5
         });
       }
 
       if (type === 'conditional-flow-marker') {
-        var conditionalflowMarker = create$1('path');
-        attr$1(conditionalflowMarker, { d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z' });
-
-        addMarker(id, {
-          element: conditionalflowMarker,
-          attrs: {
+        var conditionalFlowMarker = create$1('path', {
+          d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z',
+          ...shapeStyle({
             fill: fill,
             stroke: stroke
-          },
+          })
+        });
+
+        addMarker(id, {
+          element: conditionalFlowMarker,
           ref: { x: -1, y: 10 },
           scale: 0.5
         });
       }
 
       if (type === 'conditional-default-flow-marker') {
-        var conditionaldefaultflowMarker = create$1('path');
-        attr$1(conditionaldefaultflowMarker, { d: 'M 6 4 L 10 16' });
+        var defaultFlowMarker = create$1('path', {
+          d: 'M 6 4 L 10 16',
+          ...shapeStyle({
+            stroke: stroke
+          })
+        });
 
         addMarker(id, {
-          element: conditionaldefaultflowMarker,
-          attrs: {
-            stroke: stroke
-          },
+          element: defaultFlowMarker,
           ref: { x: 0, y: 10 },
           scale: 0.5
         });
@@ -2469,11 +2582,7 @@
 
       offset = offset || 0;
 
-      attrs = computeStyle(attrs, {
-        stroke: black,
-        strokeWidth: 2,
-        fill: 'white'
-      });
+      attrs = shapeStyle(attrs);
 
       if (attrs.fill === 'none') {
         delete attrs.fillOpacity;
@@ -2482,13 +2591,12 @@
       var cx = width / 2,
           cy = height / 2;
 
-      var circle = create$1('circle');
-      attr$1(circle, {
+      var circle = create$1('circle', {
         cx: cx,
         cy: cy,
-        r: Math.round((width + height) / 4 - offset)
+        r: Math.round((width + height) / 4 - offset),
+        ...attrs
       });
-      attr$1(circle, attrs);
 
       append(parentGfx, circle);
 
@@ -2504,22 +2612,17 @@
 
       offset = offset || 0;
 
-      attrs = computeStyle(attrs, {
-        stroke: black,
-        strokeWidth: 2,
-        fill: 'white'
-      });
+      attrs = shapeStyle(attrs);
 
-      var rect = create$1('rect');
-      attr$1(rect, {
+      var rect = create$1('rect', {
         x: offset,
         y: offset,
         width: width - offset * 2,
         height: height - offset * 2,
         rx: r,
-        ry: r
+        ry: r,
+        ...attrs
       });
-      attr$1(rect, attrs);
 
       append(parentGfx, rect);
 
@@ -2531,53 +2634,66 @@
       var x_2 = width / 2;
       var y_2 = height / 2;
 
-      var points = [ { x: x_2, y: 0 }, { x: width, y: y_2 }, { x: x_2, y: height }, { x: 0, y: y_2 } ];
+      var points = [
+        { x: x_2, y: 0 },
+        { x: width, y: y_2 },
+        { x: x_2, y: height },
+        { x: 0, y: y_2 }
+      ];
 
       var pointsString = points.map(function(point) {
         return point.x + ',' + point.y;
       }).join(' ');
 
-      attrs = computeStyle(attrs, {
-        stroke: black,
-        strokeWidth: 2,
-        fill: 'white'
-      });
+      attrs = shapeStyle(attrs);
 
-      var polygon = create$1('polygon');
-      attr$1(polygon, {
+      var polygon = create$1('polygon', {
+        ...attrs,
         points: pointsString
       });
-      attr$1(polygon, attrs);
 
       append(parentGfx, polygon);
 
       return polygon;
     }
 
-    function drawLine(parentGfx, waypoints, attrs) {
-      attrs = computeStyle(attrs, [ 'no-fill' ], {
-        stroke: black,
-        strokeWidth: 2,
-        fill: 'none'
-      });
+    /**
+     * @param {SVGElement} parentGfx
+     * @param {Point[]} waypoints
+     * @param {any} attrs
+     * @param {number} [radius]
+     *
+     * @return {SVGElement}
+     */
+    function drawLine(parentGfx, waypoints, attrs, radius) {
+      attrs = lineStyle(attrs);
 
-      var line = createLine(waypoints, attrs);
+      var line = createLine(waypoints, attrs, radius);
 
       append(parentGfx, line);
 
       return line;
     }
 
+    /**
+     * @param {SVGElement} parentGfx
+     * @param {Point[]} waypoints
+     * @param {any} attrs
+     *
+     * @return {SVGElement}
+     */
+    function drawConnectionSegments(parentGfx, waypoints, attrs) {
+      return drawLine(parentGfx, waypoints, attrs, 5);
+    }
+
     function drawPath(parentGfx, d, attrs) {
 
-      attrs = computeStyle(attrs, [ 'no-fill' ], {
-        strokeWidth: 2,
-        stroke: black
-      });
+      attrs = lineStyle(attrs);
 
-      var path = create$1('path');
-      attr$1(path, { d: d });
-      attr$1(path, attrs);
+      var path = create$1('path', {
+        ...attrs,
+        d
+      });
 
       append(parentGfx, path);
 
@@ -2678,7 +2794,7 @@
       return renderLabel(parentGfx, semantic.name, {
         box: element,
         align: align,
-        padding: 5,
+        padding: 7,
         style: {
           fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
         }
@@ -2724,16 +2840,6 @@
       transform(textBox, 0, -top, 270);
     }
 
-    function createPathFromConnection(connection) {
-      var waypoints = connection.waypoints;
-
-      var pathData = 'm  ' + waypoints[0].x + ',' + waypoints[0].y;
-      for (var i = 1; i < waypoints.length; i++) {
-        pathData += 'L' + waypoints[i].x + ',' + waypoints[i].y + ' ';
-      }
-      return pathData;
-    }
-
     var handlers = this.handlers = {
       'bpmn:Event': function(parentGfx, element, attrs) {
 
@@ -2754,7 +2860,6 @@
         if (!semantic.isInterrupting) {
           attrs = {
             strokeDasharray: '6',
-            strokeLinecap: 'round',
             fill: getFillColor(element, defaultFillColor),
             stroke: getStrokeColor(element, defaultStrokeColor)
           };
@@ -2809,7 +2914,6 @@
 
         drawPath(parentGfx, pathData, {
           strokeWidth: 2,
-          strokeLinecap: 'square',
           stroke: getStrokeColor(element, defaultStrokeColor)
         });
 
@@ -2831,7 +2935,6 @@
 
           drawPath(parentGfx, linePathData, {
             strokeWidth: 1,
-            strokeLinecap: 'square',
             transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
             stroke: getStrokeColor(element, defaultStrokeColor)
           });
@@ -3039,14 +3142,14 @@
       },
       'bpmn:IntermediateEvent': function(parentGfx, element) {
         var outer = renderer('bpmn:Event')(parentGfx, element, {
-          strokeWidth: 1,
+          strokeWidth: 1.5,
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor(element, defaultStrokeColor)
         });
 
         /* inner */
         drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
-          strokeWidth: 1,
+          strokeWidth: 1.5,
           fill: getFillColor(element, 'none'),
           stroke: getStrokeColor(element, defaultStrokeColor)
         });
@@ -3299,10 +3402,11 @@
         return task;
       },
       'bpmn:SubProcess': function(parentGfx, element, attrs) {
-        attrs = assign$1({
+        attrs = {
           fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        }, attrs);
+          stroke: getStrokeColor(element, defaultStrokeColor),
+          ...attrs
+        };
 
         var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
 
@@ -3310,7 +3414,8 @@
 
         if (isEventSubProcess(element)) {
           attr$1(rect, {
-            strokeDasharray: '1,2'
+            strokeDasharray: '0, 5.5',
+            strokeWidth: 2.5
           });
         }
 
@@ -3328,13 +3433,14 @@
         return renderer('bpmn:SubProcess')(parentGfx, element);
       },
       'bpmn:Transaction': function(parentGfx, element) {
-        var outer = renderer('bpmn:SubProcess')(parentGfx, element);
+        var outer = renderer('bpmn:SubProcess')(parentGfx, element, { strokeWidth: 1.5 });
 
         var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          stroke: getStrokeColor(element, defaultStrokeColor),
+          strokeWidth: 1.5
         });
 
-        /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST, innerAttrs);
+        /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 3, INNER_OUTER_DIST, innerAttrs);
 
         return outer;
       },
@@ -3345,10 +3451,13 @@
       },
       'bpmn:Participant': function(parentGfx, element) {
 
+        var strokeWidth = 1.5;
+
         var attrs = {
           fillOpacity: DEFAULT_FILL_OPACITY,
           fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          stroke: getStrokeColor(element, defaultStrokeColor),
+          strokeWidth
         };
 
         var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);
@@ -3360,13 +3469,14 @@
             { x: 30, y: 0 },
             { x: 30, y: element.height }
           ], {
-            stroke: getStrokeColor(element, defaultStrokeColor)
+            stroke: getStrokeColor(element, defaultStrokeColor),
+            strokeWidth
           });
           var text = getSemantic(element).name;
           renderLaneLabel(parentGfx, text, element);
         } else {
 
-          // Collapsed pool draw text inline
+          // collapsed pool draw text inline
           var text2 = getSemantic(element).name;
           renderLabel(parentGfx, text2, {
             box: element, align: 'center-middle',
@@ -3385,11 +3495,13 @@
         return lane;
       },
       'bpmn:Lane': function(parentGfx, element, attrs) {
-        var rect = drawRect(parentGfx, element.width, element.height, 0, assign$1({
+        var rect = drawRect(parentGfx, element.width, element.height, 0, {
           fill: getFillColor(element, defaultFillColor),
           fillOpacity: HIGH_FILL_OPACITY,
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        }, attrs));
+          stroke: getStrokeColor(element, defaultStrokeColor),
+          strokeWidth: 1.5,
+          ...attrs
+        });
 
         var semantic = getSemantic(element);
 
@@ -3508,13 +3620,11 @@
             }
           });
 
-          var attrs = {
+          /* event path */ drawPath(parentGfx, pathData, {
             strokeWidth: 2,
             fill: getFillColor(element, 'none'),
             stroke: getStrokeColor(element, defaultStrokeColor)
-          };
-
-          /* event path */ drawPath(parentGfx, pathData, attrs);
+          });
         }
 
         if (type === 'Parallel') {
@@ -3530,16 +3640,14 @@
             }
           });
 
-          var parallelPath = drawPath(parentGfx, pathData);
-          attr$1(parallelPath, {
+          drawPath(parentGfx, pathData, {
             strokeWidth: 1,
             fill: 'none'
           });
         } else if (type === 'Exclusive') {
 
           if (!instantiate) {
-            var innerCircle = drawCircle(parentGfx, element.width, element.height, element.height * 0.26);
-            attr$1(innerCircle, {
+            drawCircle(parentGfx, element.width, element.height, element.height * 0.26, {
               strokeWidth: 1,
               fill: 'none',
               stroke: getStrokeColor(element, defaultStrokeColor)
@@ -3553,27 +3661,20 @@
         return diamond;
       },
       'bpmn:Gateway': function(parentGfx, element) {
-        var attrs = {
+        return drawDiamond(parentGfx, element.width, element.height, {
           fill: getFillColor(element, defaultFillColor),
           fillOpacity: DEFAULT_FILL_OPACITY,
           stroke: getStrokeColor(element, defaultStrokeColor)
-        };
-
-        return drawDiamond(parentGfx, element.width, element.height, attrs);
+        });
       },
       'bpmn:SequenceFlow': function(parentGfx, element) {
-        var pathData = createPathFromConnection(element);
-
         var fill = getFillColor(element, defaultFillColor),
             stroke = getStrokeColor(element, defaultStrokeColor);
 
-        var attrs = {
-          strokeLinejoin: 'round',
+        var path = drawConnectionSegments(parentGfx, element.waypoints, {
           markerEnd: marker('sequenceflow-end', fill, stroke),
           stroke: getStrokeColor(element, defaultStrokeColor)
-        };
-
-        var path = drawPath(parentGfx, pathData, attrs);
+        });
 
         var sequenceFlow = getSemantic(element);
 
@@ -3607,12 +3708,11 @@
         var fill = getFillColor(element, defaultFillColor),
             stroke = getStrokeColor(element, defaultStrokeColor);
 
-        attrs = assign$1({
-          strokeDasharray: '0.5, 5',
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        }, attrs || {});
+        attrs = {
+          strokeDasharray: '0, 5',
+          stroke: getStrokeColor(element, defaultStrokeColor),
+          ...attrs
+        };
 
         if (semantic.associationDirection === 'One' ||
             semantic.associationDirection === 'Both') {
@@ -3623,7 +3723,7 @@
           attrs.markerStart = marker('association-start', fill, stroke);
         }
 
-        return drawLine(parentGfx, element.waypoints, attrs);
+        return drawConnectionSegments(parentGfx, element.waypoints, attrs);
       },
       'bpmn:DataInputAssociation': function(parentGfx, element) {
         var fill = getFillColor(element, defaultFillColor),
@@ -3649,19 +3749,13 @@
         var fill = getFillColor(element, defaultFillColor),
             stroke = getStrokeColor(element, defaultStrokeColor);
 
-        var pathData = createPathFromConnection(element);
-
-        var attrs = {
+        var path = drawConnectionSegments(parentGfx, element.waypoints, {
           markerEnd: marker('messageflow-end', fill, stroke),
           markerStart: marker('messageflow-start', fill, stroke),
-          strokeDasharray: '10, 12',
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-          strokeWidth: '1.5px',
+          strokeDasharray: '10, 11',
+          strokeWidth: 1.5,
           stroke: getStrokeColor(element, defaultStrokeColor)
-        };
-
-        var path = drawPath(parentGfx, pathData, attrs);
+        });
 
         if (semantic.messageRef) {
           var midPoint = path.getPointAtLength(path.getTotalLength() / 2);
@@ -3784,25 +3878,26 @@
             cancel = semantic.cancelActivity;
 
         var attrs = {
-          strokeWidth: 1,
+          strokeWidth: 1.5,
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor(element, defaultStrokeColor)
         };
 
         if (!cancel) {
           attrs.strokeDasharray = '6';
-          attrs.strokeLinecap = 'round';
         }
 
         // apply fillOpacity
-        var outerAttrs = assign$1({}, attrs, {
+        var outerAttrs = {
+          ...attrs,
           fillOpacity: 1
-        });
+        };
 
         // apply no-fill
-        var innerAttrs = assign$1({}, attrs, {
+        var innerAttrs = {
+          ...attrs,
           fill: 'none'
-        });
+        };
 
         var outer = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
 
@@ -3813,27 +3908,22 @@
         return outer;
       },
       'bpmn:Group': function(parentGfx, element) {
-
-        var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
+        return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
           stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeWidth: 1,
-          strokeDasharray: '8,3,1,3',
+          strokeWidth: 1.5,
+          strokeDasharray: '10,6,0,6',
           fill: 'none',
           pointerEvents: 'none'
         });
-
-        return group;
       },
       'label': function(parentGfx, element) {
         return renderExternalLabel(parentGfx, element);
       },
       'bpmn:TextAnnotation': function(parentGfx, element) {
-        var style = {
+        var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, {
           'fill': 'none',
           'stroke': 'none'
-        };
-
-        var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, style);
+        });
 
         var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
           xScaleFactor: 1,
@@ -3854,7 +3944,7 @@
         renderLabel(parentGfx, text, {
           box: element,
           align: 'left-top',
-          padding: 5,
+          padding: 7,
           style: {
             fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
           }
@@ -3972,10 +4062,9 @@
         });
 
         drawMarker('loop', parentGfx, markerPath, {
-          strokeWidth: 1,
+          strokeWidth: 1.5,
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeLinecap: 'round',
           strokeMiterlimit: 0.5
         });
       },
@@ -6382,7 +6471,7 @@
       attr$1(outline, assign$1({
         x: 10,
         y: 10,
-        rx: 3,
+        rx: 4,
         width: 100,
         height: 100
       }, OUTLINE_STYLE));
@@ -20769,6 +20858,11 @@
    * @see http://bpmn.io/license for more information.
    */
 
+
+  /**
+   * @typedef { import('didi').ModuleDeclaration } Module
+   */
+
   /**
    * A base viewer for BPMN 2.0 diagrams.
    *
@@ -20780,8 +20874,8 @@
    * @param {string|number} [options.width] the width of the viewer
    * @param {string|number} [options.height] the height of the viewer
    * @param {Object} [options.moddleExtensions] extension packages to provide
-   * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
-   * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+   * @param {Module[]} [options.modules] a list of modules to override the default modules
+   * @param {Module[]} [options.additionalModules] a list of modules to use with the default modules
    */
   function BaseViewer(options) {
 
@@ -21210,7 +21304,14 @@
     this._definitions = definitions;
   };
 
-  BaseViewer.prototype.getModules = function() {
+  /**
+   * Return modules to instantiate with.
+   *
+   * @param {any} options the instance got created with
+   *
+   * @return {Module[]}
+   */
+  BaseViewer.prototype.getModules = function(options) {
     return this._modules;
   };
 
@@ -21316,7 +21417,7 @@
 
   BaseViewer.prototype._init = function(container, moddle, options) {
 
-    const baseModules = options.modules || this.getModules(),
+    const baseModules = options.modules || this.getModules(options),
           additionalModules = options.additionalModules || [],
           staticModules = [
             {
@@ -21471,6 +21572,10 @@
 
   /* </project-logo> */
 
+  /**
+   * @typedef { import('didi').ModuleDeclaration } Module
+   */
+
   /**
    * A viewer for BPMN 2.0 diagrams.
    *
@@ -21515,8 +21620,8 @@
    * @param {string|number} [options.width] the width of the viewer
    * @param {string|number} [options.height] the height of the viewer
    * @param {Object} [options.moddleExtensions] extension packages to provide
-   * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
-   * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+   * @param {Module[]} [options.modules] a list of modules to override the default modules
+   * @param {Module[]} [options.additionalModules] a list of modules to use with the default modules
    */
   function Viewer(options) {
     BaseViewer.call(this, options);