From 9033094473dc780d42720f2d149c21a66fb49512 Mon Sep 17 00:00:00 2001
From: Philipp Fromme <philippfromme@outlook.com>
Date: Fri, 29 Sep 2017 11:08:20 +0200
Subject: [PATCH] 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           |  8 ++++++--
 package.json                       |  1 +
 test/TestHelper.js                 |  1 +
 test/spec/draw/BpmnRendererSpec.js | 23 +++++++++++++++++++++++
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js
index 4fe324da..728d766d 100644
--- a/lib/draw/BpmnRenderer.js
+++ b/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');
diff --git a/package.json b/package.json
index f40a63ec..61819790 100644
--- a/package.json
+++ b/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",
diff --git a/test/TestHelper.js b/test/TestHelper.js
index 15482c06..77e04aca 100644
--- a/test/TestHelper.js
+++ b/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'));
diff --git a/test/spec/draw/BpmnRendererSpec.js b/test/spec/draw/BpmnRendererSpec.js
index ebad0a4b..71fe5410 100644
--- a/test/spec/draw/BpmnRendererSpec.js
+++ b/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();