Type 1 - Point-Locked Selection

• On mouse click, all objects under the cursor become eligible for selection, represented by a green border (the cursor point is "locked in").
• The top-most object will be "selected", represented by a blue border.
• Navigate between these objects with the mousewheel.
• Click again on the SVG to "unlock" and deselect all objects.

Key Implementation Details

1. We define selected and deselected classes with pointer-events:none set.
2. When an object is clicked, the selected class is added to that object.
3. We also bind events on all the objects that will add the deselected class on mouseover.
4. Adding the selected class to the clicked object triggers a mouseout event and exposes the object beneath (if any), triggering a mouseover event on this new object. Though the mouseout event fires it is not utilised in this implementation.
5. The mouseover leads to the deselected class being added to the new object, which in turn causes a mouseout on the new object, once again exposing the object beneath (if any).
6. This chain reaction of selecting the objects below the cursor continues until the background object is hit, at which point the mouseover events are unbound, stopping the chain reaction.
7. For navigation between these objects later with the mousewheel, we also assign a sdepthN class (e.g. sdepth1, sdepth2, ...) during the chain reaction.

As the chain reaction only stops once a background object (any object with class background) is hit, and the SVG itself cannot respond to mouse events, this method requires the existence of a background object beneath all the other objects (most easily done with a rect encompassing the entire SVG). This may make its use with external SVGs a little cumbersome.

The entire chain reaction should resolve immediately on click, but depending on the browser (and even on the same browser for different sessions), the reaction may stop partway. Under most circumstances this should cause no problems, and once the user begins navigation with the mousewheel or moves their mouse a little, the reaction will complete. The rare case where this is known to cause problems is if the click occured just outside the boundary of another object, and upon click, the user moves their mouse onto this object. This will lead to the relative depths of the selected objects being incorrect for navigation.

If the depth of the overlapping objects is large, resolving the entire chain reaction (especially if all done immediately on click) can be computationally demanding.

All mousewheel events occuring when the mouse is inside the SVG are captured and default action (i.e. scrolling) is prevented. This is by intent, but the code can be adjusted so that scrolling is not prevented under some conditions, should that be desired.