React-diagrams: Anyway to have a Scrollable Grid/Grid-in-canvas?

Created on 26 Apr 2020 · 2Comments · Source: projectstorm/react-diagrams

I can get a grid by wrapping a styled div around the canvas.
But is it possible to have a grid that moves as I scroll through the canvas?

Source

iyobo

Most helpful comment

Here's how I achieved this:

I created some CSS variables for the offset grid (to handle movement) and size (to handle zooming). Here's the source.
Then I added some styles to the body tag, based on these variables. Here's the source.
Whenever the diagram model is initialized, I set the grid size and call a function that realigns the grid. I also add listeners to offsetUpdated and zoomUpdated events, which calls some grid adjusting functions. Here's the source.
And here's the source for these grid realignment/adjustment functions I've mentioned above.

renato-bohler on 26 Apr 2020

👍8

In any of the demos, The background grid is static as you drag-scroll around the canvas.

This is expected because the canvas itself isn't exactly rendering a grid.
What would be a good way to render a grid from within the canvas?

iyobo on 26 Apr 2020

Here's how I achieved this:

I created some CSS variables for the offset grid (to handle movement) and size (to handle zooming). Here's the source.
Then I added some styles to the body tag, based on these variables. Here's the source.
Whenever the diagram model is initialized, I set the grid size and call a function that realigns the grid. I also add listeners to offsetUpdated and zoomUpdated events, which calls some grid adjusting functions. Here's the source.
And here's the source for these grid realignment/adjustment functions I've mentioned above.