add snap-to-original control, fix styling

src/c3nav/editor/static/editor/css/editor.scss

@@ -570,18 +570,14 @@ label.theme-color-label {
     border: 2px solid rgba(0,0,0,0.2);
     background-clip: padding-box;
    
-    .snap-toggle {
+    /* watchout for leaflet.css trying to override a:hover with a different height/width */
+    a.snap-toggle, a.snap-to-original-toggle {
         display: block;
         width: 30px;  
         height: 30px;
-        line-height: 26px;
-        text-align: center;
-        text-decoration: none;
-        font-size: 18px;
         background-color: white;
         color: #666;
         border-radius: 2px;
-        transition: all 0.2s ease;
         
         &:hover {
             background-color: #f4f4f4;
@@ -608,20 +604,6 @@ label.theme-color-label {
     pointer-events: none;
 }
 
-@keyframes snap-pulse {
-    0% {
-        opacity: 0.8;
-        transform: scale(1);
-    }
-    50% {
-        opacity: 1;
-        transform: scale(1.2);
-    }
-    100% {
-        opacity: 0.8;
-        transform: scale(1);
-    }
-}
 
 /* Edge highlight styles for snap-to-edges */
 .edge-highlight {

src/c3nav/editor/static/editor/js/editor.js

@@ -1665,6 +1665,7 @@ editor = {
 
     // Snap-to-edges functionality
     _snap_enabled: true,
+    _snap_to_original_enabled: true,
     _snap_distance: 30, // pixels
     _extension_area_multiplier: 4, // Extension area = snap_distance * this multiplier
     _snap_to_base_map: false,
@@ -1681,6 +1682,8 @@ editor = {
     },
 
     _add_snap_controls: function() {
+
+        // add snap to edge toggle
         var snapControl = L.control({position: 'topleft'});
         snapControl.onAdd = function() {
             var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-snap');
@@ -1696,8 +1699,28 @@ editor = {
             return container;
         };
         snapControl.addTo(editor.map);
+
+        // add snap to "original edited geometry" toggle
+        var snapToOriginalControl = L.control({position: 'topleft'});
+        snapToOriginalControl.onAdd = function() {
+            var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-snap');
+            container.innerHTML = '<a href="#" title="Toggle Snap to Edges" class="snap-to-original-toggle ' +
+                                (editor._snap_to_original_enabled ? 'active' : '') + '">S</a>';
+
+            L.DomEvent.on(container.querySelector('.snap-to-original-toggle'), 'click', function(e) {
+                e.preventDefault();
+                editor._toggle_snap_to_original();
+            });
+
+            L.DomEvent.disableClickPropagation(container);
+            return container;
+        };
+        snapToOriginalControl.addTo(editor.map);
+
+
     },
 
+
     _toggle_snap: function() {
         editor._snap_enabled = !editor._snap_enabled;
         var toggle = document.querySelector('.snap-toggle');
@@ -1708,6 +1731,14 @@ editor = {
         editor._clear_snap_indicators();
     },
 
+    _toggle_snap_to_original: function() {
+        editor._snap_to_original_enabled = !editor._snap_to_original_enabled;
+        var toggle = document.querySelector('.snap-to-original-toggle');
+        if (toggle) {
+            toggle.classList.toggle('active', editor._snap_to_original_enabled);
+        }
+    },
+
     _handle_snap_during_draw: function(e) {
         if (!editor._snap_enabled || !editor._creating) return;