add snap-to-original control, fix styling
This commit is contained in:
parent
1aa724e7fc
commit
d5b9d8e97d
2 changed files with 35 additions and 22 deletions
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue