The Point of It All

svg
My current interface for XVG (which is what I am calling this editor/code generator)

During the past week, I worked on fixing my intense displeasure with how the UI was turning out.

In the end, the solution was to turn to CSS grids, which fixed ALL the problems that were distracting me from focusing on the JS code that is at the heart of what this SPA  does.

I’ll be putting it up on github and netlify, once I have more functionality implemented.

The problem I had to deal with last week was how to allow a pattern designer to create lines between the “Marker” vertices simply by clicking on them.  Marker vertices are the (blue) points along the circumfernce of the circle that can automatically generated after an end user decises how many equal sections the circle should be divided into,  either by specifying the number of lines or the origin angle desired.

Once I figured how to do all that, I needed to find a way to be able to determine the location in SVG units of a mouse click that was not on some pre-prescribed point along a circle.  In other words, how does one translate X / Y screen/browser mouse coordinates to  SVG ones that are consistent across Chrome, FF and Edge?

Here is my solution, which fixes a problem I found with the example code I found on the issue via Google.

 

What this does is give me a means to allow a user to click anywhere in the yellow space, and return an SVG coordinate pair that I can process in some useful way.

Back in a bit, after trying out some new things.