Proof of concept to add a visual coordinates grid

[didoo]

This is (super-raw) proof of concept that I have prepared, to add a grid of coordinates below the SVG "elements", to help visualize (and understand) the relation between the numbers in the path and the coordinates system of the SVG, and discuss if proceed from here.

This is what it looks like (again, a general idea):

I have opened this PR to see if makes sense also for you, and in that case discuss what is the best way to implement it in the rendered SVG. eg. the axis should cover also the negative coordinates? should we add a coordinate indicator on hover? other things that can help visualize the relation between M 140,20 and the fact that this refers to the coordinates (x=140,y=20)? should I introduce an helper to calculate a "scale-factor" that automatically adjusts the entire grid, based on the min/max X/Y values?

(of course, in that case, I'll write proper code, and use the style() function to style the lines) don't worry. this was a quick hack done before dinner)

[mathieudutour]

That's amazing 👏

the axis should cover also the negative coordinates?

Depending on path, it could be negative yes

should we add a coordinate indicator on hover?

When you hover on a coordinate on the explanation, it shows an indicator already. Are you thinking of thinking else?

should I introduce an helper to calculate a "scale-factor" that automatically adjusts the entire grid, based on the min/max X/Y values?

That should already be done if you use the bounds?

I'm wondering if showing this grid could be a setting: a 🛠️ in the bottom right corner which would show a set of checkboxes to control what we show. I can think of a couple of ones:

• showing this grid
• showing the control points
• a scale factor perhaps? (eg. use the same scale as the path or scale as much as we can)

[darkworks]

why its not merged yet ?