Anyway to have a Scrollable Grid/Grid-in-canvas?

[iyobo]

trafficstars

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?

[iyobo]

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?

[renato-bohler]

Here's how I achieved this:

1. I created some CSS variables for the offset grid (to handle movement) and size (to handle zooming). Here's the source.

2. Then I added some styles to the body tag, based on these variables. Here's the source.

3. 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.

4. And here's the source for these grid realignment/adjustment functions I've mentioned above.

You can test it out on my app: https://renato-bohler.github.io/logossim/ :smile:

[devlpr]

Thanks for this @renato-bohler . I tried your project. Cool project, by the way. I will use what you posted. It would be really great for other users to have this as a feature in the library though. Personally, I think it's a pretty common use-case.