improve(bpmnrenderer): align timer event rendering with BPMN spec

close #77

lib/draw/BpmnRenderer.js

@@ -379,9 +379,33 @@ function BpmnRenderer(events, styles, pathMap) {
       });
 
       var path = drawPath(p, pathData, {
-        strokeWidth: 2
+        strokeWidth: 2,
+        strokeLinecap: 'square'
       });
 
+      for(var i = 0;i < 12;i++) {
+
+        var linePathData = pathMap.getScaledPath('EVENT_TIMER_LINE', {
+          xScaleFactor: 0.75,
+          yScaleFactor: 0.75,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: 0.5,
+            my: 0.5
+          }
+        });
+
+        var width = element.width / 2;
+        var height = element.height / 2;
+
+        var linePath = drawPath(p, linePathData, {
+          strokeWidth: 1,
+          strokeLinecap: 'square',
+          transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')'
+        });
+      }
+
       return circle;
     },
     'bpmn:EscalationEventDefinition': function(p, event, isThrowing) {

lib/draw/PathMap.js

@@ -103,11 +103,19 @@ function PathMap(Snap) {
       widthElements: [10]
     },
     'EVENT_TIMER_WH': {
-      d: 'M {mx},{my} m -{e.x1},-{e.y1} l {e.x1},{e.y1} l {e.x0},-{e.y0}',
+      d: 'M {mx},{my} l {e.x0},-{e.y0} m -{e.x0},{e.y0} l {e.x1},{e.y1} ',
       height: 36,
       width:  36,
-      heightElements: [3.5,4],
-      widthElements: [8.75,10.5]
+      heightElements: [10, 2],
+      widthElements: [3, 7]
+    },
+    'EVENT_TIMER_LINE': {
+      d:  'M {mx},{my} ' +
+          'm {e.x0},{e.y0} l -{e.x1},{e.y1} ',
+      height: 36,
+      width:  36,
+      heightElements: [10, 3],
+      widthElements: [0, 0]
     },
     'EVENT_MULTIPLE': {
       d:'m {mx},{my} {e.x1},-{e.y0} {e.x1},{e.y0} -{e.x0},{e.y1} -{e.x2},0 z',