Getting a handle on JS click handling

svg app svg app svg app

It took some doing, but I finally debugged my various JS mouse event listeners such that both fixed and dynamically-created lines can be created in my app’s SVG workspace and saved to (or deleted) from its browser SQL database.

I am sure there is a more elegant way of doing this, but what I did now works correctly and is quite fast.

Right now, I only have screen -> db working.

I have to get that to be bidirectional — i.e., allow the end user to edit a db row and have that edit appear dynamically on screen in the SVG workspace.

That should be pretty interesting to code.*

I am learning a lot on my own, but am looking forward to this book arriving in the mail.  I also need to up my SVG game and study this document in depth.

SVG book

Meanwhile, thanks to the Chrome debugger, which I now know in depth and can use like a pro, I can really peer into the internals of various objects and events to make my code handle events with extreme precision.

After I release XVG beta in early January, I am going to refactor XVG and create some sort of canonical mouse click event handler that is more easily extensible and testable.

Not to make a terrible pun, but I can see things getting “out of hand” with these various event handlers — once I start to have a lot more mouse driven functionality implemented.

The book should be a big help in that regard.

* Actually the delete took only a few minutes to write, due to my code being highly structured. I mostly reused routines and patches of code I’d already written. So now the end user can delete an SVG element from the db, and it automatically gets deleted for the SVG workspace — following a check that is made to ensure that the element exists there. Mods on row cells will be a little more complicated, but not that difficult.