From d5b9d8e97df4c84b8b836296de306853a8b269b7 Mon Sep 17 00:00:00 2001 From: Dennis Orlando Date: Sat, 2 Aug 2025 08:33:14 +0200 Subject: [PATCH] add snap-to-original control, fix styling --- .../editor/static/editor/css/editor.scss | 26 +++------------- src/c3nav/editor/static/editor/js/editor.js | 31 +++++++++++++++++++ 2 files changed, 35 insertions(+), 22 deletions(-) diff --git a/src/c3nav/editor/static/editor/css/editor.scss b/src/c3nav/editor/static/editor/css/editor.scss index c622a7fd..37354b36 100644 --- a/src/c3nav/editor/static/editor/css/editor.scss +++ b/src/c3nav/editor/static/editor/css/editor.scss @@ -569,19 +569,15 @@ label.theme-color-label { border-radius: 4px; 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; + 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 { diff --git a/src/c3nav/editor/static/editor/js/editor.js b/src/c3nav/editor/static/editor/js/editor.js index 31b8f921..32a4e7f4 100644 --- a/src/c3nav/editor/static/editor/js/editor.js +++ b/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 = 'S'; + + 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;