[Bug]: drawGrid() generates invalid images

[alexandernst]

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:

Grabacion.de.pantalla.2023-04-15.a.las.19.55.55.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

[alexandernst]

Additional notes:

Note that I'm setting the grid size to 1.001 when on cell:pointerdown. This is as of your recommendation here: #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.

[kumilingus]

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().

[alexandernst]

Ahh, I see. I missed the M 0 0 0 while debugging. Nice job! :)