fix(dia.Paper): ensure grid pattern ids are unique (#2654)

Author: kumilingus

packages/joint-core/src/dia/layers/GridLayer.mjs

@@ -67,7 +67,7 @@ export const GridLayer = PaperLayer.extend({
 
         gridSettings.forEach((gridLayerSetting, index) => {
 
-            const id = 'pattern_' + index;
+            const id = this._getPatternId(index);
             const options = merge({}, gridLayerSetting);
             const { scaleFactor = 1 } = options;
             options.width = gridSize * scaleFactor || 1;
@@ -107,12 +107,16 @@ export const GridLayer = PaperLayer.extend({
         }
         gridSettings.forEach((options, index) => {
             if (isFunction(options.update)) {
-                const vPattern = patterns['pattern_' + index];
+                const vPattern = patterns[this._getPatternId(index)];
                 options.update(vPattern.node.firstChild, options, paper);
             }
         });
     },
 
+    _getPatternId(index) {
+        return `pattern_${this.options.paper.cid}_${index}`;
+    },
+
     _getGridRefs() {
         let { _gridCache: grid } = this;
         if (grid) return grid;

packages/joint-core/test/jointjs/paper.js

@@ -1365,6 +1365,32 @@ QUnit.module('paper', function(hooks) {
             return paper;
         };
 
+        QUnit.test('Unique pattern id', function(assert) {
+
+            const paper1 = new joint.dia.Paper({
+                drawGrid: true,
+                gridSize: 10
+            });
+
+            const paper2 = new joint.dia.Paper({
+                drawGrid: true,
+                gridSize: 10
+            });
+
+            const svg1 = getGridVel(paper1);
+            const pattern1 = svg1.findOne('pattern');
+            assert.ok(pattern1.id);
+
+            const svg2 = getGridVel(paper2);
+            const pattern2 = svg2.findOne('pattern');
+            assert.ok(pattern2.id);
+
+            assert.notEqual(pattern1.id, pattern2.id);
+
+            paper1.remove();
+            paper2.remove();
+        });
+
         QUnit.module('drawGridSize option', function(hooks) {
 
             QUnit.test('is used to draw grid', function(assert) {