bpmn-js 11.1.0 → 11.2.0

package/lib/draw/BpmnRenderer.js

@@ -83,33 +83,33 @@ export default function BpmnRenderer(
 
   var markers = {};
 
-  var computeStyle = styles.computeStyle;
-
-  function addMarker(id, options) {
-    var attrs = assign({
-      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 = svgCreate('marker');
+      strokeLinejoin: 'round',
+      stroke: black,
+      strokeWidth: 2,
+      fill: 'white'
+    });
+  }
 
-    svgAttr(options.element, attrs);
+  function lineStyle(attrs) {
+    return styles.computeStyle(attrs, [ 'no-fill' ], {
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      stroke: black,
+      strokeWidth: 2
+    });
+  }
 
-    svgAppend(marker, options.element);
+  function addMarker(id, options) {
+    var {
+      ref = { x: 0, y: 0 },
+      scale = 1,
+      element
+    } = options;
 
-    svgAttr(marker, {
+    var marker = svgCreate('marker', {
       id: id,
       viewBox: '0 0 20 20',
       refX: ref.x,
@@ -119,6 +119,8 @@ export default function BpmnRenderer(
       orient: 'auto'
     });
 
+    svgAppend(marker, element);
+
     var defs = domQuery('defs', canvas._svg);
 
     if (!defs) {
@@ -151,105 +153,116 @@ export default function BpmnRenderer(
   function createMarker(id, type, fill, stroke) {
 
     if (type === 'sequenceflow-end') {
-      var sequenceflowEnd = svgCreate('path');
-      svgAttr(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
+      var sequenceflowEnd = svgCreate('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 = svgCreate('circle');
-      svgAttr(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
+      var messageflowStart = svgCreate('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 = svgCreate('path');
-      svgAttr(messageflowEnd, { d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z' });
+      var messageflowEnd = svgCreate('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 = svgCreate('path');
-      svgAttr(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });
-
-      addMarker(id, {
-        element: associationStart,
-        attrs: {
+      var associationStart = svgCreate('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 = svgCreate('path');
-      svgAttr(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });
-
-      addMarker(id, {
-        element: associationEnd,
-        attrs: {
+      var associationEnd = svgCreate('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 = svgCreate('path');
-      svgAttr(conditionalflowMarker, { d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z' });
-
-      addMarker(id, {
-        element: conditionalflowMarker,
-        attrs: {
+      var conditionalFlowMarker = svgCreate('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 = svgCreate('path');
-      svgAttr(conditionaldefaultflowMarker, { d: 'M 6 4 L 10 16' });
+      var defaultFlowMarker = svgCreate('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
       });
@@ -265,11 +278,7 @@ export default function BpmnRenderer(
 
     offset = offset || 0;
 
-    attrs = computeStyle(attrs, {
-      stroke: black,
-      strokeWidth: 2,
-      fill: 'white'
-    });
+    attrs = shapeStyle(attrs);
 
     if (attrs.fill === 'none') {
       delete attrs.fillOpacity;
@@ -278,13 +287,12 @@ export default function BpmnRenderer(
     var cx = width / 2,
         cy = height / 2;
 
-    var circle = svgCreate('circle');
-    svgAttr(circle, {
+    var circle = svgCreate('circle', {
       cx: cx,
       cy: cy,
-      r: Math.round((width + height) / 4 - offset)
+      r: Math.round((width + height) / 4 - offset),
+      ...attrs
     });
-    svgAttr(circle, attrs);
 
     svgAppend(parentGfx, circle);
 
@@ -300,22 +308,17 @@ export default function BpmnRenderer(
 
     offset = offset || 0;
 
-    attrs = computeStyle(attrs, {
-      stroke: black,
-      strokeWidth: 2,
-      fill: 'white'
-    });
+    attrs = shapeStyle(attrs);
 
-    var rect = svgCreate('rect');
-    svgAttr(rect, {
+    var rect = svgCreate('rect', {
       x: offset,
       y: offset,
       width: width - offset * 2,
       height: height - offset * 2,
       rx: r,
-      ry: r
+      ry: r,
+      ...attrs
     });
-    svgAttr(rect, attrs);
 
     svgAppend(parentGfx, rect);
 
@@ -327,53 +330,66 @@ export default function BpmnRenderer(
     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 = svgCreate('polygon');
-    svgAttr(polygon, {
+    var polygon = svgCreate('polygon', {
+      ...attrs,
       points: pointsString
     });
-    svgAttr(polygon, attrs);
 
     svgAppend(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);
 
     svgAppend(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 = svgCreate('path');
-    svgAttr(path, { d: d });
-    svgAttr(path, attrs);
+    var path = svgCreate('path', {
+      ...attrs,
+      d
+    });
 
     svgAppend(parentGfx, path);
 
@@ -474,7 +490,7 @@ export default function BpmnRenderer(
     return renderLabel(parentGfx, semantic.name, {
       box: element,
       align: align,
-      padding: 5,
+      padding: 7,
       style: {
         fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
       }
@@ -520,16 +536,6 @@ export default function BpmnRenderer(
     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) {
 
@@ -550,7 +556,6 @@ export default function BpmnRenderer(
       if (!semantic.isInterrupting) {
         attrs = {
           strokeDasharray: '6',
-          strokeLinecap: 'round',
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor(element, defaultStrokeColor)
         };
@@ -605,7 +610,6 @@ export default function BpmnRenderer(
 
       drawPath(parentGfx, pathData, {
         strokeWidth: 2,
-        strokeLinecap: 'square',
         stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
@@ -627,7 +631,6 @@ export default function BpmnRenderer(
 
         drawPath(parentGfx, linePathData, {
           strokeWidth: 1,
-          strokeLinecap: 'square',
           transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
           stroke: getStrokeColor(element, defaultStrokeColor)
         });
@@ -835,14 +838,14 @@ export default function BpmnRenderer(
     },
     '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)
       });
@@ -1095,10 +1098,11 @@ export default function BpmnRenderer(
       return task;
     },
     'bpmn:SubProcess': function(parentGfx, element, attrs) {
-      attrs = assign({
+      attrs = {
         fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      }, attrs);
+        stroke: getStrokeColor(element, defaultStrokeColor),
+        ...attrs
+      };
 
       var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
 
@@ -1106,7 +1110,8 @@ export default function BpmnRenderer(
 
       if (isEventSubProcess(element)) {
         svgAttr(rect, {
-          strokeDasharray: '1,2'
+          strokeDasharray: '0, 5.5',
+          strokeWidth: 2.5
         });
       }
 
@@ -1124,13 +1129,14 @@ export default function BpmnRenderer(
       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;
     },
@@ -1141,10 +1147,13 @@ export default function BpmnRenderer(
     },
     '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);
@@ -1156,13 +1165,14 @@ export default function BpmnRenderer(
           { 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',
@@ -1181,11 +1191,13 @@ export default function BpmnRenderer(
       return lane;
     },
     'bpmn:Lane': function(parentGfx, element, attrs) {
-      var rect = drawRect(parentGfx, element.width, element.height, 0, assign({
+      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);
 
@@ -1304,13 +1316,11 @@ export default function BpmnRenderer(
           }
         });
 
-        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') {
@@ -1326,16 +1336,14 @@ export default function BpmnRenderer(
           }
         });
 
-        var parallelPath = drawPath(parentGfx, pathData);
-        svgAttr(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);
-          svgAttr(innerCircle, {
+          drawCircle(parentGfx, element.width, element.height, element.height * 0.26, {
             strokeWidth: 1,
             fill: 'none',
             stroke: getStrokeColor(element, defaultStrokeColor)
@@ -1349,27 +1357,20 @@ export default function BpmnRenderer(
       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);
 
@@ -1403,12 +1404,11 @@ export default function BpmnRenderer(
       var fill = getFillColor(element, defaultFillColor),
           stroke = getStrokeColor(element, defaultStrokeColor);
 
-      attrs = assign({
-        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') {
@@ -1419,7 +1419,7 @@ export default function BpmnRenderer(
         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),
@@ -1445,19 +1445,13 @@ export default function BpmnRenderer(
       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);
@@ -1580,25 +1574,26 @@ export default function BpmnRenderer(
           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({}, attrs, {
+      var outerAttrs = {
+        ...attrs,
         fillOpacity: 1
-      });
+      };
 
       // apply no-fill
-      var innerAttrs = assign({}, attrs, {
+      var innerAttrs = {
+        ...attrs,
         fill: 'none'
-      });
+      };
 
       var outer = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
 
@@ -1609,27 +1604,22 @@ export default function BpmnRenderer(
       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,
@@ -1650,7 +1640,7 @@ export default function BpmnRenderer(
       renderLabel(parentGfx, text, {
         box: element,
         align: 'left-top',
-        padding: 5,
+        padding: 7,
         style: {
           fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
         }
@@ -1768,10 +1758,9 @@ export default function BpmnRenderer(
       });
 
       drawMarker('loop', parentGfx, markerPath, {
-        strokeWidth: 1,
+        strokeWidth: 1.5,
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor),
-        strokeLinecap: 'round',
         strokeMiterlimit: 0.5
       });
     },