Proof of concept to add a visual coordinates grid #1
Conversation
|
That's amazing 👏
Depending on path, it could be negative yes
When you hover on a coordinate on the explanation, it shows an indicator already. Are you thinking of thinking else?
That should already be done if you use the 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:
|
| const gridElements = { | ||
| lines: [], | ||
| labels: [], | ||
| } as any; // TODO TS to fix |
There was a problem hiding this comment.
| const gridElements = { | |
| lines: [], | |
| labels: [], | |
| } as any; // TODO TS to fix | |
| const gridElements = { | |
| lines: [] as React.ReactNode[], | |
| labels: [] as React.ReactNode[], | |
| }; |
| ['x', 'y'].forEach((axis) => { | ||
| // not very elegant, but it works | ||
| // TODO alternative, use some "magic" code that uses "object.keys(gridProps) and works out the "other" key ? | ||
| const otherAxis = axis === 'x' ? 'y' : 'x'; |
There was a problem hiding this comment.
I'm fine with this, clear code beats magic code, especially when there are only 2 cases haha
| ); | ||
|
|
||
| if (isMultipleOfPow10Scale) { | ||
| const labelCoordinates = {} as any; // TODO TS to fix |
There was a problem hiding this comment.
I think you can have
const labelCoordinates = {x: 0, y: 0}so that TS doesn't complain.
Or NaN if you want to show that it's not ready yet
|
why its not merged yet ? |
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,20and 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)