mirror of
https://github.com/zvx-echo6/navi.git
synced 2026-05-20 14:44:51 +02:00
Revert "feat(themes): add theme-aware boundary highlight config"
This reverts commit fef10664c8.
This commit is contained in:
parent
fef10664c8
commit
40855e1261
4 changed files with 1431 additions and 1485 deletions
|
|
@ -1247,10 +1247,10 @@ function removeBlmTrails(map) {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/** Add boundary polygon layers using theme-aware highlight config */
|
/** Add boundary polygon layers with computed accent color (MapLibre rejects CSS vars in paint) */
|
||||||
const BOUNDARY_FILL_LAYER = 'boundary-fill-layer'
|
const BOUNDARY_FILL_LAYER = 'boundary-fill-layer'
|
||||||
|
|
||||||
function addBoundaryLayer(map, themeId) {
|
function addBoundaryLayer(map) {
|
||||||
if (!map || map.getLayer(BOUNDARY_LAYER)) return
|
if (!map || map.getLayer(BOUNDARY_LAYER)) return
|
||||||
if (!map.getSource(BOUNDARY_SOURCE)) {
|
if (!map.getSource(BOUNDARY_SOURCE)) {
|
||||||
map.addSource(BOUNDARY_SOURCE, {
|
map.addSource(BOUNDARY_SOURCE, {
|
||||||
|
|
@ -1258,14 +1258,7 @@ function addBoundaryLayer(map, themeId) {
|
||||||
data: { type: "FeatureCollection", features: [] },
|
data: { type: "FeatureCollection", features: [] },
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// Get highlight config from theme overlay
|
const accentColor = getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#7a9a6b"
|
||||||
const highlight = getOverlayConfig(themeId, "highlight") || {}
|
|
||||||
const lineColor = highlight.lineColor || "#7a9a6b"
|
|
||||||
const lineWidth = highlight.lineWidth || 2
|
|
||||||
const lineDash = highlight.lineDash || [4, 4]
|
|
||||||
const lineOpacity = highlight.lineOpacity || 0.8
|
|
||||||
const fillColor = highlight.fillColor || lineColor
|
|
||||||
const fillOpacity = highlight.fillOpacity || 0.08
|
|
||||||
|
|
||||||
// Find first symbol layer to insert boundary layers below labels
|
// Find first symbol layer to insert boundary layers below labels
|
||||||
const layers = map.getStyle().layers
|
const layers = map.getStyle().layers
|
||||||
|
|
@ -1283,8 +1276,8 @@ function addBoundaryLayer(map, themeId) {
|
||||||
type: "fill",
|
type: "fill",
|
||||||
source: BOUNDARY_SOURCE,
|
source: BOUNDARY_SOURCE,
|
||||||
paint: {
|
paint: {
|
||||||
"fill-color": fillColor,
|
"fill-color": accentColor,
|
||||||
"fill-opacity": fillOpacity,
|
"fill-opacity": 0.05,
|
||||||
},
|
},
|
||||||
}, firstSymbolId)
|
}, firstSymbolId)
|
||||||
|
|
||||||
|
|
@ -1294,10 +1287,10 @@ function addBoundaryLayer(map, themeId) {
|
||||||
type: "line",
|
type: "line",
|
||||||
source: BOUNDARY_SOURCE,
|
source: BOUNDARY_SOURCE,
|
||||||
paint: {
|
paint: {
|
||||||
"line-color": lineColor,
|
"line-color": accentColor,
|
||||||
"line-width": lineWidth,
|
"line-width": 2,
|
||||||
"line-opacity": lineOpacity,
|
"line-opacity": 0.7,
|
||||||
"line-dasharray": lineDash,
|
"line-dasharray": [3, 2],
|
||||||
},
|
},
|
||||||
}, firstSymbolId)
|
}, firstSymbolId)
|
||||||
}
|
}
|
||||||
|
|
@ -1505,14 +1498,7 @@ const MapView = forwardRef(function MapView(_, ref) {
|
||||||
type: "geojson",
|
type: "geojson",
|
||||||
data: { type: "FeatureCollection", features: [] },
|
data: { type: "FeatureCollection", features: [] },
|
||||||
})
|
})
|
||||||
// Get highlight config from theme overlay
|
const accentColor = getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#7a9a6b"
|
||||||
const highlight = getOverlayConfig(themeId, "highlight") || {}
|
|
||||||
const lineColor = highlight.lineColor || "#7a9a6b"
|
|
||||||
const lineWidth = highlight.lineWidth || 2
|
|
||||||
const lineDash = highlight.lineDash || [4, 4]
|
|
||||||
const lineOpacity = highlight.lineOpacity || 0.8
|
|
||||||
const fillColor = highlight.fillColor || lineColor
|
|
||||||
const fillOpacity = highlight.fillOpacity || 0.08
|
|
||||||
map.addLayer({
|
map.addLayer({
|
||||||
id: MEASURE_LINE_LAYER,
|
id: MEASURE_LINE_LAYER,
|
||||||
type: "line",
|
type: "line",
|
||||||
|
|
@ -2138,7 +2124,7 @@ const MapView = forwardRef(function MapView(_, ref) {
|
||||||
|
|
||||||
// Boundary polygon layer for selected places
|
// Boundary polygon layer for selected places
|
||||||
if (!map.getLayer(BOUNDARY_LAYER)) {
|
if (!map.getLayer(BOUNDARY_LAYER)) {
|
||||||
addBoundaryLayer(map, currentThemeRef.current)
|
addBoundaryLayer(map)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Apply improved base label styling for readability
|
// Apply improved base label styling for readability
|
||||||
|
|
@ -2347,7 +2333,7 @@ const MapView = forwardRef(function MapView(_, ref) {
|
||||||
|
|
||||||
// Boundary polygon layer
|
// Boundary polygon layer
|
||||||
if (!map.getLayer(BOUNDARY_LAYER)) {
|
if (!map.getLayer(BOUNDARY_LAYER)) {
|
||||||
addBoundaryLayer(map, currentThemeRef.current)
|
addBoundaryLayer(map)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Apply improved base label styling for readability
|
// Apply improved base label styling for readability
|
||||||
|
|
|
||||||
|
|
@ -351,16 +351,6 @@ const cleanOverlay = {
|
||||||
labelFont: ['Noto Sans Regular'],
|
labelFont: ['Noto Sans Regular'],
|
||||||
hitWidth: 14,
|
hitWidth: 14,
|
||||||
},
|
},
|
||||||
|
|
||||||
// ── Highlight (boundary/selection) ────────────────────────────────────────
|
|
||||||
highlight: {
|
|
||||||
lineColor: "#1a73e8", // Google blue for selection
|
|
||||||
lineWidth: 2,
|
|
||||||
lineDash: [4, 4],
|
|
||||||
lineOpacity: 0.7,
|
|
||||||
fillColor: "#1a73e8",
|
|
||||||
fillOpacity: 0.06,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -368,16 +368,6 @@ const cyberpunkOverlay = {
|
||||||
// Hit layer
|
// Hit layer
|
||||||
hitWidth: 14,
|
hitWidth: 14,
|
||||||
},
|
},
|
||||||
|
|
||||||
// ── Highlight (boundary/selection) ────────────────────────────────────────
|
|
||||||
highlight: {
|
|
||||||
lineColor: "#00f0ff", // Electric cyan for selection
|
|
||||||
lineWidth: 2,
|
|
||||||
lineDash: [4, 4],
|
|
||||||
lineOpacity: 0.9,
|
|
||||||
fillColor: "#00f0ff",
|
|
||||||
fillOpacity: 0.1,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -288,16 +288,6 @@ const darkOverlay = {
|
||||||
// Hit layer
|
// Hit layer
|
||||||
hitWidth: 14,
|
hitWidth: 14,
|
||||||
},
|
},
|
||||||
|
|
||||||
// ── Highlight (boundary/selection) ────────────────────────────────────────
|
|
||||||
highlight: {
|
|
||||||
lineColor: "#7a9a6b", // Muted olive-green for dark backgrounds
|
|
||||||
lineWidth: 2,
|
|
||||||
lineDash: [4, 4],
|
|
||||||
lineOpacity: 0.8,
|
|
||||||
fillColor: "#7a9a6b",
|
|
||||||
fillOpacity: 0.08,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -460,16 +450,6 @@ const lightOverlay = {
|
||||||
// Hit layer
|
// Hit layer
|
||||||
hitWidth: 14,
|
hitWidth: 14,
|
||||||
},
|
},
|
||||||
|
|
||||||
// ── Highlight (boundary/selection) ────────────────────────────────────────
|
|
||||||
highlight: {
|
|
||||||
lineColor: "#4a7040", // Forest green for light backgrounds
|
|
||||||
lineWidth: 2,
|
|
||||||
lineDash: [4, 4],
|
|
||||||
lineOpacity: 0.7,
|
|
||||||
fillColor: "#4a7040",
|
|
||||||
fillOpacity: 0.06,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ═══════════════════════════════════════════════════════════════════════════
|
// ═══════════════════════════════════════════════════════════════════════════
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue