Repository: clientIO/joint (JavaScript)

Issue:
[Bug]: drawGrid() generates invalid images
### What happened?

I found out that the `drawBackgroundImage()` method will, sometimes, generate invalid images.

I prepared a simple demo: https://codesandbox.io/s/rappid-background-bug-kin1pg?file=/src/index.js

Steps to repro:

1. Wait for the demo to load and the paperscroller to get centered
2. Without zooming in, click on the port of the node and drag to the left
3. The `scrollWhileDragging` feature will kick in and the background will turn on to white.

Further inspecting the DOM element `.joint-paper-grid` will show that actually there is still a base64 encoded image, but the image is invalid (tested with https://base64.guru/converter/decode/image/svg )

Visual demo: 

https://user-images.githubusercontent.com/89727/232245571-0c47d15a-d137-447a-bcc3-e5b9fa3270a2.mov



### Version

3.6.5

### What browsers are you seeing the problem on?

Chrome, Safari

### What operating system are you seeing the problem on?

Mac


Discussion: Additional notes:

Note that I'm setting the grid size to `1.001` when on `cell:pointerdown`. This is as of your recommendation here: https://github.com/clientIO/joint/issues/1425

Note that I'm using `1.001` instead of `1` because while reading the Paper.mjs's code I found out that a grid size of `1` will cause `drawGrid()` to call `clearGird()`, which will remove the background image.
This problem illustrates the need to allow the `drawGrid` function to be independent of the current paper `gridSize`.

Fixed by #2139.

A few notes:
- There is nothing wrong with the SVG grid from a validity perspective. It only draws invisible paths (`M 0 0 0`).
- It has nothing to do with `drawBackgroundImage()`. It is related to `drawGrid()`.
Ahh, I see. I missed the `M 0 0 0` while debugging. Nice job! :)



Fix (patch):
diff --git a/docs/src/joint/api/dia/Paper/prototype/options/drawGridSize.html b/docs/src/joint/api/dia/Paper/prototype/options/drawGridSize.html
new file mode 100644
index 000000000..aa5e3ed79
--- /dev/null
+++ b/docs/src/joint/api/dia/Paper/prototype/options/drawGridSize.html
@@ -0,0 +1,4 @@
+<code>drawGridSize</code> - the size of the visual grid drawn using the <a href="#dia.Paper.prototype.options.drawGrid">drawGrid</a> option.
+If this option is set to <code>null</code> <i>(default)</i>, the <a href="#dia.Paper.prototype.options.gridSize">gridSize</a> option is used instead.
+
+If the option is changed after the paper has been initialized, call <a href="#dia.Paper.prototype.drawGrid">drawGrid</a> to update the grid.
diff --git a/src/dia/Paper.mjs b/src/dia/Paper.mjs
index e579583ac..83728a11c 100644
--- a/src/dia/Paper.mjs
+++ b/src/dia/Paper.mjs
@@ -105,10 +105,11 @@ export const Paper = View.extend({
         height: 600,
         origin: { x: 0, y: 0 }, // x,y coordinates in top-left corner
         gridSize: 1,
-
         // Whether or not to draw the grid lines on the paper's DOM element.
         // e.g drawGrid: true, drawGrid: { color: 'red', thickness: 2 }
         drawGrid: false,
+        // If not set, the size of the visual grid is the same as the `gridSize`.
+        drawGridSize: null,
 
         // Whether or not to draw the background on the paper's DOM element.
         // e.g. background: { color: 'lightblue', image: '/paper-background.png', repeat: 'flip-xy' }
@@ -2558,9 +2559,11 @@ export const Paper = View.extend({
 
     setGridSize: function(gridSize) {
 
-        this.options.gridSize = gridSize;
+        const { options } = this;
+        options.gridSize = gridSize;
 
-        if (this.options.drawGrid) {
+        if (options.drawGrid && !options.drawGridSize) {
+            // Do not redraw the grid if the `drawGridSize` is set.
             this.drawGrid();
         }
 
@@ -2651,7 +2654,7 @@ export const Paper = View.extend({
 
     drawGrid: function(opt) {
 
-        var gridSize = this.options.gridSize;
+        const gridSize = this.options.drawGridSize || this.options.gridSize;
         if (gridSize <= 1) {
             return this.clearGrid();
         }
diff --git a/types/joint.d.ts b/types/joint.d.ts
index b6b9165cc..1a5824b8a 100644
--- a/types/joint.d.ts
+++ b/types/joint.d.ts
@@ -1247,6 +1247,7 @@ export namespace dia {
             perpendicularLinks?: boolean;
             linkConnectionPoint?: LinkView.GetConnectionPoint;
             drawGrid?: boolean | GridOptions | GridOptions[];
+            drawGridSize?: number | null;
             background?: BackgroundOptions;
             labelsLayer?: boolean | Paper.Layers | string;
             // interactions