bpmn-js 11.1.0 → 11.2.0

package/dist/bpmn-viewer.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-viewer v11.1.0
+ * bpmn-js - bpmn-viewer v11.2.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2022-12-12
+ * Date: 2023-02-03
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1336,34 +1336,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;
   }
@@ -1533,14 +1627,17 @@
    * @return {Array<?>}
    */
 
-  var nativeToString = Object.prototype.toString;
-  var nativeHasOwnProperty = Object.prototype.hasOwnProperty;
+  const nativeToString = Object.prototype.toString;
+  const nativeHasOwnProperty = Object.prototype.hasOwnProperty;
+
   function isUndefined$1(obj) {
     return obj === undefined;
   }
+
   function isArray$1(obj) {
     return nativeToString.call(obj) === '[object Array]';
   }
+
   /**
    * Return true, if target owns a property with the given key.
    *
@@ -1549,10 +1646,11 @@
    *
    * @return {Boolean}
    */
-
   function has(target, key) {
     return nativeHasOwnProperty.call(target, key);
   }
+
+
   /**
    * Iterate over collection; returning something
    * (non-undefined) will stop iteration.
@@ -1562,19 +1660,22 @@
    *
    * @return {Object} return result that stopped the iteration
    */
-
   function forEach(collection, iterator) {
-    var val, result;
+
+    let val,
+        result;
 
     if (isUndefined$1(collection)) {
       return;
     }
 
-    var convertKey = isArray$1(collection) ? toNum : identity;
+    const convertKey = isArray$1(collection) ? toNum : identity;
+
+    for (let key in collection) {
 
-    for (var key in collection) {
       if (has(collection, key)) {
         val = collection[key];
+
         result = iterator(val, convertKey(key));
 
         if (result === false) {
@@ -1584,6 +1685,7 @@
     }
   }
 
+
   function identity(arg) {
     return arg;
   }
@@ -2291,33 +2393,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,
@@ -2327,6 +2429,8 @@
         orient: 'auto'
       });
 
+      append(marker, element);
+
       var defs = query('defs', canvas._svg);
 
       if (!defs) {
@@ -2359,105 +2463,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
         });
@@ -2473,11 +2588,7 @@
 
       offset = offset || 0;
 
-      attrs = computeStyle(attrs, {
-        stroke: black,
-        strokeWidth: 2,
-        fill: 'white'
-      });
+      attrs = shapeStyle(attrs);
 
       if (attrs.fill === 'none') {
         delete attrs.fillOpacity;
@@ -2486,13 +2597,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);
 
@@ -2508,22 +2618,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);
 
@@ -2535,53 +2640,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);
 
@@ -2682,7 +2800,7 @@
       return renderLabel(parentGfx, semantic.name, {
         box: element,
         align: align,
-        padding: 5,
+        padding: 7,
         style: {
           fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
         }
@@ -2728,16 +2846,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) {
 
@@ -2758,7 +2866,6 @@
         if (!semantic.isInterrupting) {
           attrs = {
             strokeDasharray: '6',
-            strokeLinecap: 'round',
             fill: getFillColor(element, defaultFillColor),
             stroke: getStrokeColor(element, defaultStrokeColor)
           };
@@ -2813,7 +2920,6 @@
 
         drawPath(parentGfx, pathData, {
           strokeWidth: 2,
-          strokeLinecap: 'square',
           stroke: getStrokeColor(element, defaultStrokeColor)
         });
 
@@ -2835,7 +2941,6 @@
 
           drawPath(parentGfx, linePathData, {
             strokeWidth: 1,
-            strokeLinecap: 'square',
             transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
             stroke: getStrokeColor(element, defaultStrokeColor)
           });
@@ -3043,14 +3148,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)
         });
@@ -3303,10 +3408,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);
 
@@ -3314,7 +3420,8 @@
 
         if (isEventSubProcess(element)) {
           attr$1(rect, {
-            strokeDasharray: '1,2'
+            strokeDasharray: '0, 5.5',
+            strokeWidth: 2.5
           });
         }
 
@@ -3332,13 +3439,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;
       },
@@ -3349,10 +3457,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);
@@ -3364,13 +3475,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',
@@ -3389,11 +3501,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);
 
@@ -3512,13 +3626,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') {
@@ -3534,16 +3646,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)
@@ -3557,27 +3667,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);
 
@@ -3611,12 +3714,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') {
@@ -3627,7 +3729,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),
@@ -3653,19 +3755,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);
@@ -3788,25 +3884,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);
 
@@ -3817,27 +3914,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,
@@ -3858,7 +3950,7 @@
         renderLabel(parentGfx, text, {
           box: element,
           align: 'left-top',
-          padding: 5,
+          padding: 7,
           style: {
             fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
           }
@@ -3976,10 +4068,9 @@
         });
 
         drawMarker('loop', parentGfx, markerPath, {
-          strokeWidth: 1,
+          strokeWidth: 1.5,
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeLinecap: 'round',
           strokeMiterlimit: 0.5
         });
       },
@@ -6386,7 +6477,7 @@
       attr$1(outline, assign$1({
         x: 10,
         y: 10,
-        rx: 3,
+        rx: 4,
         width: 100,
         height: 100
       }, OUTLINE_STYLE));