fix(joint-core, joint-react): override gridPatterns via getGridPatterns() instead of mutating static property

packages/joint-core/src/dia/GridLayerView.mjs

@@ -20,12 +20,12 @@ export const GridLayerView = LayerView.extend({
 
     init() {
         LayerView.prototype.init.apply(this, arguments);
-        this.paper = this.options.paper;
         this._gridCache = null;
         this._gridSettings = [];
     },
 
     afterPaperReferenceSet(paper) {
+        this.patterns = paper.constructor.gridPatterns;
         this.listenTo(paper, 'transform resize', this.updateGrid);
     },
 
@@ -150,7 +150,7 @@ export const GridLayerView = LayerView.extend({
 
     _resolveDrawGridOption(opt) {
 
-        const namespace = this.options.patterns;
+        const namespace = this.patterns;
         if (isString(opt) && Array.isArray(namespace[opt])) {
             return namespace[opt].map(function(item) {
                 return assign({}, item);

packages/joint-core/src/dia/Paper.mjs

@@ -300,20 +300,6 @@ const backgroundPatterns = {
     }
 };
 
-const implicitLayers = [{
-    id: paperLayers.GRID,
-    type: 'GridLayerView',
-    patterns: gridPatterns
-}, {
-    id: paperLayers.BACK,
-}, {
-    id: paperLayers.LABELS,
-}, {
-    id: paperLayers.FRONT
-}, {
-    id: paperLayers.TOOLS
-}];
-
 const CELL_VIEW_PLACEHOLDER_MARKER = Symbol('joint.cellViewPlaceholderMarker');
 
 export const Paper = View.extend({
@@ -627,7 +613,18 @@ export const Paper = View.extend({
     FLAG_INIT: 1<<28,
 
     // Layers that are always present on the paper (e.g. grid, back, front, tools)
-    implicitLayers,
+    implicitLayers: [{
+        id: paperLayers.GRID,
+        type: 'GridLayerView'
+    }, {
+        id: paperLayers.BACK,
+    }, {
+        id: paperLayers.LABELS,
+    }, {
+        id: paperLayers.FRONT
+    }, {
+        id: paperLayers.TOOLS
+    }],
 
     // Reference layer for inserting new graph layers.
     graphLayerRefId: paperLayers.LABELS,

packages/joint-react/src/presets/paper.ts

@@ -1,4 +1,4 @@
-import { dia } from '@joint/core';
+import { dia, util } from '@joint/core';
 import { measureNode } from './measure-node';
 import { linkRoutingStraight } from './link-routing';
 import { LinkView } from './link-view';
@@ -39,18 +39,6 @@ function getPointerId(event: dia.Event): number | null {
   return typeof fromOriginal === 'number' ? fromOriginal : null;
 }
 
-// Inject CSS custom property into all built-in grid pattern colors
-// so they respond to --jj-paper-grid-color.
-// @ts-expect-error Accessing protected member to set default grid pattern colors
-// eslint-disable-next-line unicorn/no-array-for-each
-Object.values(dia.Paper.gridPatterns).forEach((pattern) => {
-  const patterns = Array.isArray(pattern) ? pattern : [pattern];
-  for (const subPattern of patterns) {
-    if (!subPattern.color) continue;
-    subPattern.color = 'var(--jj-paper-grid-color)';
-  }
-});
-
 const DEFAULT_CLICK_THRESHOLD = 5;
 const DEFAULT_GRID_SIZE = 10;
 const DEFAULT_SNAP_RADIUS = 15;
@@ -113,6 +101,18 @@ const linkView = (
   return NSViewCtor ?? LinkView;
 };
 
+function getGridPatterns(): Record<string, dia.Paper.PatternOptions[]> {
+  // @ts-expect-error Accessing protected member to set default grid pattern colors
+  const patterns = util.cloneDeep(dia.Paper.gridPatterns as Record<string, dia.Paper.PatternOptions[]>);
+  for (const pattern of Object.values(patterns)) {
+    for (const subPattern of pattern) {
+      if (!subPattern.color) continue;
+      subPattern.color = 'var(--jj-paper-grid-color)';
+    }
+  }
+  return patterns;
+}
+
 export const Paper = dia.Paper.extend({
   className: 'jj-paper joint-paper',
   classNamePrefix: '',
@@ -210,4 +210,6 @@ export const Paper = dia.Paper.extend({
     measureNode,
     linkView,
   },
+}, {
+  gridPatterns: getGridPatterns(),
 }) as typeof dia.Paper;