[Draft] gridOverlay cell with labels

[Avengium]

Description

This branch has the idea of putting text labels above gridOverlay cells to numerate the cells. This approach puts one text label above each "rect" cell on the grid. So in this preview version, the labels are only aligned with the square grid and similar grids.

What I wanted with this branch is to show this idea so we can talk about how we want to implement it, if we do.

• Is it a good idea to render all text labels at once? With scale 1, the browser has no problem. It creates around 1k-2k text labels. But with scale 0.1, it might crash because the cells are smaller and many more labels are created.
• Ideas to prevent the program from creating too many labels if the grid size is too small.
• 1. limit the number of labels that are created.
• 2. limit the region in which they are created. What do you think? Any ideas?
• About having a separate color picker for the text. If the color picker is on the #gridOverlay HTML element and not on the rectangle that displays the grid, the text is also tinted with that same color. How to fix this?
• I'm having trouble getting the text to be colored differently with a UI color selector. Would it be ok if we move the gridOverlay stroke parameter to the child rectangle, leave the gridOverlay with no stroke defined, and use another stroke attribute for the text color Or do you have a better idea? to have different colors?

Type of change

• [X] New feature
• [ ] Refactoring / style

Versioning

The version is not changed yet. We have to discuss how to do this idea first.

[netlify[bot]]

✅ Deploy Preview for afmg ready!

Name	Link
🔨 Latest commit	c22eafbe2f3003d7fc5dbfd0704ec1212b944108
🔍 Latest deploy log	https://app.netlify.com/sites/afmg/deploys/66e6c2734987440008e7cc27
😎 Deploy Preview	https://deploy-preview-1133--afmg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Avengium]

Using mask "clip water" and "clip land" only hides the text labels but these labels still exist. So the way the code is now, that doesn't reduce the number of labels there are. Any ideas on how to make this code better?