fix(renderer): prevent duplicate marker IDs

* when having more than one instance of bpmn-js on a page marker IDs got duplicated

lib/draw/BpmnRenderer.js

@@ -7,6 +7,8 @@ var inherits = require('inherits'),
     every = require('lodash/collection/every'),
     some = require('lodash/collection/some');
 
+var Ids = require('ids');
+
 var BaseRenderer = require('diagram-js/lib/draw/BaseRenderer'),
     TextUtil = require('diagram-js/lib/util/Text'),
     DiUtil = require('../util/DiUtil');
@@ -43,6 +45,8 @@ function BpmnRenderer(eventBus, styles, pathMap, canvas, priority) {
 
   BaseRenderer.call(this, eventBus, priority);
 
+  var randomId = new Ids().next();
+
   var textUtil = new TextUtil({
     style: LABEL_STYLE,
     size: { width: 100 }
@@ -100,7 +104,7 @@ function BpmnRenderer(eventBus, styles, pathMap, canvas, priority) {
   }
 
   function marker(type, fill, stroke) {
-    var id = type + '-' + fill + '-' + stroke;
+    var id = type + '-' + fill + '-' + stroke + '-' + randomId;
 
     if (!markers[id]) {
       createMarker(type, fill, stroke);
@@ -110,7 +114,7 @@ function BpmnRenderer(eventBus, styles, pathMap, canvas, priority) {
   }
 
   function createMarker(type, fill, stroke) {
-    var id = type + '-' + fill + '-' + stroke;
+    var id = type + '-' + fill + '-' + stroke + '-' + randomId;
 
     if (type === 'sequenceflow-end') {
       var sequenceflowEnd = svgCreate('path');

package.json

@@ -38,6 +38,7 @@
     "browserify-derequire": "^0.9.1",
     "bundle-collapser": "^1.1.1",
     "chai": "^3.5.0",
+    "chai-match": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-mocha": "^4.9.0",
     "grunt": "^0.4.4",

test/TestHelper.js

@@ -12,6 +12,7 @@ TestHelper.insertCSS('diagram-js-testing.css',
 
 
 // add suite specific matchers
+global.chai.use(require('chai-match'));
 global.chai.use(require('diagram-js/test/matchers/BoundsMatchers'));
 global.chai.use(require('diagram-js/test/matchers/ConnectionMatchers'));
 global.chai.use(require('./matchers/JSONMatcher'));

test/spec/draw/BpmnRendererSpec.js

@@ -221,6 +221,27 @@ describe('draw - bpmn renderer', function() {
   });
 
 
+  it('should add random ID suffix to marker ID', function(done) {
+    
+    var xml = require('../../fixtures/bpmn/simple.bpmn');
+    bootstrapViewer(xml)(function(err) {
+
+      if (err) {
+        return done(err);
+      }
+
+      inject(function(canvas) {
+        var svg = canvas._svg;
+        var markers = svg.querySelectorAll('marker');
+
+        expect(markers[0].id).to.match(/^sequenceflow-end-white-black-[A-Za-z0-9]+$/);
+      })();
+
+      done();
+    });
+  });
+
+
   it('should properly render colored markers', function(done) {
 
     var xml = require('../../fixtures/bpmn/draw/colors.bpmn');
@@ -235,6 +256,8 @@ describe('draw - bpmn renderer', function() {
         var markers = svg.querySelectorAll('marker');
 
         expect(markers).to.have.length(5);
+        expect(markers[0].id).to.match(/^sequenceflow-end-white-black-[A-Za-z0-9]{25}$/);
+        expect(markers[4].id).to.match(/^messageflow-start-white-fuchsia-[A-Za-z0-9]{25}$/);
       })();
 
       done();