SVG Context Menu


Improvements in functionality continue with my XVG project.

I refactored the two-array scheme I was using to keep track of line and marker SVG coordinates, and rewrote some of the JS code to conform more elegant ES6+ syntax.

I’m now working on adding a Context Menu for the temp “blue lines” that a user can draw when creating a design.

By left clicking on a blue line, three new buttons appear on the nav bar.  Clicking on Lock allows the user to “protect” a blue line (which turns black), making it a permanent part of the design (unless later deleted).

Thus the end user will able to clear the blue lines off the SVG canvas, as he or she plays with creating a design, while having the ability to affect the behavior of the Clear button that appear in the left console. The user will also be able to save such shapes to the built-in browser persistence engine.

For this to be implemented properly and efficiently, I am going to create a sophisticated JS “Shape” object which with is able to dynamically save ANY SVG shape the user may wish to create.

Moreover, all shapes will have their own Context Menus appear automatically on the nav bar, when they are left-clicked.

Progress is slower than I would like, because I have IRL responsibilites that chew up a lot of time.

But progress is in fact being made, albeit not as fast as I would prefer.


Note:  though I got the Context Menu to work in a crude way, I can now see that there is a need to create a generalized method for handling click events.  Because I am new to this, I initially used onclick() after all the buttons, just to get things going, as I learnt JS;  this is of course horrible technique.  So now I have to understand much more deeply how event handlers / listeners work, especially on SVG elements, such that I dont end up some kind of slow, unmaintanable nightmare script full of hundreds of one-off event listeners.  This is going to take a lot of thought and experimentation in the days and weeks ahead.  All part of the learning process, including mastering how to make proper use of Persistent Lexical Scope Reference Data to (1)  eliminate almost all globals in my script, and (2) reduce the amount of func calls by accessing data  resident in-memory that, without closures, would be popped off the stack and have to be recreated over and over. This kind of reminds me of Borland’s old TSR technique.