From bd70eced41254a3fb265063bec18b6eed34c6ebe Mon Sep 17 00:00:00 2001
From: Nico Rehwaldt <nico.rehwaldt@camunda.com>
Date: Mon, 2 Jun 2014 15:37:14 +0200
Subject: [PATCH] fix(BpmnRenderer): fix cross browser/svg viewer marker

This hacks around marker behaviors in Safari+PhantomJS. By setting the
stroke dash array to bigger than the path length, the line is drawn
solid.

Related to #68
---
 lib/draw/BpmnRenderer.js | 165 ++++++++++++++++++---------------------
 1 file changed, 77 insertions(+), 88 deletions(-)

diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js
index 6f3f12c3..fc50de5e 100644
--- a/lib/draw/BpmnRenderer.js
+++ b/lib/draw/BpmnRenderer.js
@@ -46,99 +46,88 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
 
   function initMarkers(paper) {
 
-    addMarker('sequenceflow-end',
-      paper
-        .path('M 1 5 L 11 10 L 1 15 Z')
-          .attr({
-            fill: 'black',
-            strokeWidth: 1,
-            strokeLinecap: 'round',
-            strokeDasharray: 0
-          })
-          .marker(0, 0, 20, 20, 11, 10)
-            .attr({
-              markerWidth: 10,
-              markerHeight: 10
-            }));
+    function createMarker(id, options) {
+      var attrs = _.extend({
+        fill: 'black',
+        strokeWidth: 1,
+        strokeLinecap: 'round',
+        strokeDasharray: 'none'
+      }, options.attrs);
 
-    addMarker('messageflow-start',
-      paper
-        .circle(6, 6, 5)
-          .attr({
-            fill: 'white',
-            stroke: 'black',
-            strokeWidth: 1,
-            strokeDasharray: 0
-          })
-          .marker(0, 0, 20, 20, 6, 6)
-            .attr({
-              markerWidth: 20,
-              markerHeight: 20
-            }));
+      var ref = options.ref || { x: 0, y: 0 };
 
-    addMarker('messageflow-end',
-      paper
-        .path('M 1 5 L 11 10 L 1 15 Z')
-          .attr({
-            stroke: 'black',
-            fill: 'white',
-            strokeWidth: 1,
-            strokeLinecap: 'round',
-            strokeDasharray: 0
-          })
-          .marker(0, 0, 20, 20, 11, 10)
-            .attr({
-              markerWidth: 20,
-              markerHeight: 20
-            }));
+      var scale = options.scale || 1;
 
-    addMarker('data-association-end',
-      paper
-        .path('M 1 5 L 11 10 L 1 15')
-        .attr({
-          fill: 'white',
-          stroke: 'black',
-          strokeWidth: 1,
-          strokeLinecap: 'round',
-          strokeDasharray: 0
-        })
-        .marker(0, 0, 20, 20, 11, 10)
-        .attr({
-          markerWidth: 10,
-          markerHeight: 10
-        }));
+      // fix for safari / chrome / firefox bug not correctly
+      // resetting stroke dash array
+      if (attrs.strokeDasharray === 'none') {
+        attrs.strokeDasharray = [10000, 1];
+      }
 
-    addMarker('conditional-flow-marker',
-      paper
-        .path('M 0 10 L 8 6 L 16 10 L 8 14 Z')
-        .attr({
-          fill: 'white',
-          stroke: 'black',
-          strokeWidth: 1,
-          strokeLinecap: 'round',
-          strokeDasharray: 0
-        })
-        .marker(0, 0, 20, 20, -1, 10)
-        .attr({
-          markerWidth: 10,
-          markerHeight: 10
-        }));
+      var marker = options.element
+                     .attr(attrs)
+                     .marker(0, 0, 20, 20, ref.x, ref.y)
+                     .attr({
+                       markerWidth: 20 * scale,
+                       markerHeight: 20 * scale
+                     });
 
-    addMarker('conditional-default-flow-marker',
-      paper
-        .path('M 1 4 L 5 16')
-        .attr({
-          fill: 'black',
-          stroke: 'black',
-          strokeWidth: 1,
-          strokeLinecap: 'round',
-          strokeDasharray: 0
-        })
-        .marker(0, 0, 20, 20, -5, 10)
-        .attr({
-          markerWidth: 10,
-          markerHeight: 10
-        }));
+      return addMarker(id, marker);
+    }
+
+
+    createMarker('sequenceflow-end', {
+      element: paper.path('M 1 5 L 11 10 L 1 15 Z'),
+      ref: { x: 11, y: 10 },
+      scale: 0.5
+    });
+
+    createMarker('messageflow-start', {
+      element: paper.circle(6, 6, 5),
+      attrs: {
+        fill: 'white',
+        stroke: 'black'
+      },
+      ref: { x: 6, y: 6 }
+    });
+
+    createMarker('messageflow-end', {
+      element: paper.path('M 1 5 L 11 10 L 1 15 Z'),
+      attrs: {
+        fill: 'white',
+        stroke: 'black'
+      },
+      ref: { x: 11, y: 10 }
+    });
+
+    createMarker('data-association-end', {
+      element: paper.path('M 1 5 L 11 10 L 1 15'),
+      attrs: {
+        fill: 'white',
+        stroke: 'black'
+      },
+      ref: { x: 11, y: 10 },
+      scale: 0.5
+    });
+
+    createMarker('conditional-flow-marker', {
+      element: paper.path('M 0 10 L 8 6 L 16 10 L 8 14 Z'),
+      attrs: {
+        fill: 'white',
+        stroke: 'black'
+      },
+      ref: { x: -1, y: 10 },
+      scale: 0.5
+    });
+
+    createMarker('conditional-default-flow-marker', {
+      element: paper.path('M 1 4 L 5 16'),
+      attrs: {
+        stroke: 'black'
+      },
+      ref: { x: -5, y: 10 },
+      scale: 0.5
+    });
   }
 
   function computeStyle(custom, traits, defaultStyles) {