From 68c5be48c39e795b1c857c21bf7d699971f9eb90 Mon Sep 17 00:00:00 2001
From: Roman Bruckner <roman@jointjs.com>
Date: Thu, 9 May 2024 19:59:04 +0800
Subject: [PATCH] fix(dia.Paper): ensure grid pattern ids are unique (#2654)

---
 .../joint-core/src/dia/layers/GridLayer.mjs   |  8 ++++--
 packages/joint-core/test/jointjs/paper.js     | 26 +++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/joint-core/src/dia/layers/GridLayer.mjs b/packages/joint-core/src/dia/layers/GridLayer.mjs
index 37b549f10..27fc6146a 100644
--- a/packages/joint-core/src/dia/layers/GridLayer.mjs
+++ b/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;
diff --git a/packages/joint-core/test/jointjs/paper.js b/packages/joint-core/test/jointjs/paper.js
index bd65f1271..f3ac0eed3 100644
--- a/packages/joint-core/test/jointjs/paper.js
+++ b/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) {