From 2528b7e556a3ba6a70a92959feb72385eadff78c Mon Sep 17 00:00:00 2001 From: cproudlock Date: Fri, 31 Jul 2026 10:12:30 -0400 Subject: [PATCH] map: thin the marker and legend rings The ring only has to separate the mark from the surface; at 2px it read as part of the mark. Markers go to 1.25, legend dots to 1.5px (they are larger, so the same visual weight needs slightly more), and the PDF marker and swatch strokes drop to match. --- frontend/src/components/ShopFloorMap.vue | 5 +++-- frontend/src/utils/mapPdf.js | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/ShopFloorMap.vue b/frontend/src/components/ShopFloorMap.vue index 635e3cc..eb41d7d 100644 --- a/frontend/src/components/ShopFloorMap.vue +++ b/frontend/src/components/ShopFloorMap.vue @@ -487,7 +487,7 @@ function renderMarkers() { // Ring keyed on the theme's surface: dark on the white blueprint, light on // the dark one. A fixed white ring vanished against the light blueprint. color: markerRingColor(props.theme), - weight: 2, + weight: 1.25, fillOpacity: 1, renderer: canvasRenderer }) @@ -748,7 +748,8 @@ onUnmounted(() => { width: 18px; height: 18px; border-radius: 50%; - border: 2px solid var(--bg-card); + /* Ring color is bound inline (legendDotStyle) to match the markers. */ + border: 1.5px solid var(--bg-card); box-shadow: 0 1px 4px rgba(0,0,0,0.4); } diff --git a/frontend/src/utils/mapPdf.js b/frontend/src/utils/mapPdf.js index eeb6641..b35c310 100644 --- a/frontend/src/utils/mapPdf.js +++ b/frontend/src/utils/mapPdf.js @@ -98,7 +98,7 @@ export async function exportMapPdf(opts) { const [r, g, b] = hexToRgb(entry.color) doc.setFillColor(r, g, b) // The page is always white, so the ring is the light-surface one throughout. - doc.setDrawColor(markerRingColor('light')); doc.setLineWidth(0.4) + doc.setDrawColor(markerRingColor('light')); doc.setLineWidth(0.3) doc.rect(lx, ly - swatch + 1, swatch, swatch, 'FD') doc.setTextColor('#333333') doc.text(label, lx + swatch + 4, ly) @@ -132,7 +132,7 @@ export async function exportMapPdf(opts) { const [r, g, b] = hexToRgb(fill) doc.setFillColor(r, g, b) // Prints on white, where a white ring is invisible - use the dark ring. - doc.setDrawColor(markerRingColor('light')); doc.setLineWidth(0.6) + doc.setDrawColor(markerRingColor('light')); doc.setLineWidth(0.4) doc.circle(x, y, radius, 'FD') }