auto-sync: 2026-05-06 09:40:01
This commit is contained in:
54
tasks/enduro-trails/prototype/static/app.js
vendored
54
tasks/enduro-trails/prototype/static/app.js
vendored
@@ -1622,22 +1622,21 @@ let rulerMarkers = [];
|
||||
let rulerTotal = 0;
|
||||
|
||||
function toggleRuler() {
|
||||
rulerMode = !rulerMode;
|
||||
const btn = document.getElementById('tb-ruler');
|
||||
if (rulerMode) {
|
||||
if (!rulerMode && rulerPoints.length === 0) {
|
||||
// Enter ruler mode fresh
|
||||
deactivateAllModes();
|
||||
rulerMode = true;
|
||||
btn.classList.add('active');
|
||||
window._map.getCanvas().style.cursor = 'crosshair';
|
||||
clearRuler();
|
||||
document.getElementById('ruler-info').classList.add('visible');
|
||||
// Fix 4: Show toast hint on activation
|
||||
// Fix 4: do NOT show panel yet — show only after first point
|
||||
showRulerToast();
|
||||
} else if (rulerMode) {
|
||||
// Bug 1: toolbar button = "Завершить" (exit mode, keep points)
|
||||
exitRulerMode();
|
||||
} else {
|
||||
btn.classList.remove('active');
|
||||
window._map.getCanvas().style.cursor = '';
|
||||
clearRuler();
|
||||
document.getElementById('ruler-info').classList.remove('visible');
|
||||
// rulerMode=false but points exist — just show the panel
|
||||
document.getElementById('ruler-info').classList.add('visible');
|
||||
}
|
||||
updateMapModeClass();
|
||||
}
|
||||
@@ -1756,26 +1755,30 @@ function addRulerPoint(lngLat) {
|
||||
rulerTotal += segDist;
|
||||
}
|
||||
|
||||
// Hide toast on first tap
|
||||
// Bug 3: hide toast on ANY tap, not just the first
|
||||
const toast = document.getElementById('ruler-toast');
|
||||
if (toast) toast.classList.remove('visible');
|
||||
|
||||
// Bug 4: show ruler-info panel after first point is added
|
||||
if (idx === 0) {
|
||||
const toast = document.getElementById('ruler-toast');
|
||||
if (toast) toast.classList.remove('visible');
|
||||
document.getElementById('ruler-info').classList.add('visible');
|
||||
}
|
||||
|
||||
// Wrapper element for dot + label row
|
||||
// Bug 6: wrapper is flex-column; label is absolute below dot so anchor:'center' hits the dot
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.style.cssText = 'position:relative;display:flex;flex-direction:column;align-items:center;';
|
||||
|
||||
// Dot - Fix 5: first point green
|
||||
// Dot - first point green
|
||||
const dot = document.createElement('div');
|
||||
dot.className = 'ruler-dot';
|
||||
const dotColor = idx === 0 ? '#2EA043' : '#0088ff';
|
||||
dot.style.cssText = `width:10px;height:10px;background:${dotColor};border:2px solid #fff;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.3);display:block;flex-shrink:0;`;
|
||||
|
||||
// Label row: [distance text][× button] in one line
|
||||
// Label row: [distance text][× button] — absolutely positioned below dot
|
||||
const label = document.createElement('div');
|
||||
label.className = 'ruler-label';
|
||||
label.style.cssText = 'margin-top:3px;display:flex;align-items:center;gap:4px;background:rgba(20,20,20,0.75);color:#fff;font-size:10px;padding:2px 6px;border-radius:3px;white-space:nowrap;';
|
||||
label.style.cssText = 'position:absolute;top:100%;margin-top:3px;display:flex;align-items:center;gap:4px;background:rgba(20,20,20,0.75);color:#fff;font-size:10px;padding:2px 6px;border-radius:3px;white-space:nowrap;';
|
||||
|
||||
const labelText = document.createElement('span');
|
||||
if (idx === 0) {
|
||||
@@ -1786,11 +1789,12 @@ function addRulerPoint(lngLat) {
|
||||
: Math.round(segDist * 1000) + ' м';
|
||||
}
|
||||
|
||||
// Remove button × inline with label - Fix 1: bigger tap target
|
||||
const btn = document.createElement('span');
|
||||
// Bug 5: use button element for better tap target and semantics
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'ruler-remove-btn';
|
||||
btn.textContent = '×';
|
||||
btn.style.cssText = 'cursor:pointer;font-size:16px;line-height:1;opacity:0.85;padding:4px 8px;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center;margin:-2px -6px -2px 0;';
|
||||
btn.style.cssText = 'background:none;border:none;cursor:pointer;font-size:16px;line-height:1;opacity:0.85;padding:4px 8px;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center;margin:-2px -6px -2px 0;color:#fff;';
|
||||
btn.onclick = (e) => { e.stopPropagation(); removeRulerPoint(idx); };
|
||||
|
||||
label.appendChild(labelText);
|
||||
@@ -1799,7 +1803,19 @@ function addRulerPoint(lngLat) {
|
||||
wrapper.appendChild(dot);
|
||||
wrapper.appendChild(label);
|
||||
|
||||
const dotMarker = new maplibregl.Marker({ element: wrapper, anchor: 'top' })
|
||||
// Bug 2: tap on marker wrapper resumes ruler mode
|
||||
wrapper.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
if (!rulerMode && rulerPoints.length > 0) {
|
||||
rulerMode = true;
|
||||
document.getElementById('tb-ruler').classList.add('active');
|
||||
window._map.getCanvas().style.cursor = 'crosshair';
|
||||
updateMapModeClass();
|
||||
}
|
||||
document.getElementById('ruler-info').classList.add('visible');
|
||||
});
|
||||
|
||||
const dotMarker = new maplibregl.Marker({ element: wrapper, anchor: 'center' })
|
||||
.setLngLat([lngLat.lng, lngLat.lat])
|
||||
.addTo(map);
|
||||
rulerMarkers.push(dotMarker);
|
||||
|
||||
Reference in New Issue
Block a user