map: ring markers by surface so a theme rings every marker alike

Keying the ring off the fill singled out the light colors: on the map the
orange network-device marker took a black ring while its neighbours kept white
ones, and the legend dot for the same type wore a surface-colored border, so
the key did not match the markers.

Ring by the SURFACE instead - dark on the white blueprint, light on the dark
one - which is uniform within a theme and still works for every fill, since a
fill that resembles the ring is by definition far from the background. Legend
swatches take the same ring, the theme watcher redraws the markers (their ring
now depends on it), and the PDF uses the light-surface ring throughout because
it prints on white.

frontend/src/components/ShopFloorMap.vue

@@ -38,7 +38,7 @@
           :key="t.machinetypeid"
           class="legend-item"
         >
-          <span class="legend-dot" :style="{ background: getTypeColor(t.machinetype) }"></span>
+          <span class="legend-dot" :style="legendDotStyle(getTypeColor(t.machinetype))"></span>
           {{ t.machinetype }}
         </span>
       </div>
@@ -53,7 +53,7 @@
           :key="subtypeId"
           class="legend-item"
         >
-          <span class="legend-dot" :style="{ background: color }"></span>
+          <span class="legend-dot" :style="legendDotStyle(color)"></span>
           {{ subtypeNames[subtypeId] || `Type ${subtypeId}` }}
         </span>
       </template>
@@ -64,7 +64,7 @@
           :key="assetType"
           class="legend-item"
         >
-          <span class="legend-dot" :style="{ background: color }"></span>
+          <span class="legend-dot" :style="legendDotStyle(color)"></span>
           {{ assetTypeLabels[assetType] || assetType }}
         </span>
       </template>
@@ -240,6 +240,13 @@ const visibleAssetTypes = computed(() => {
   return result
 })
 
+// Legend swatches wear the same ring as the markers they stand for, so the key
+// reads as a key. Without this the dot took a surface-colored border and a light
+// color looked ringed in white next to its black-ringed marker.
+function legendDotStyle(color) {
+  return { background: color, borderColor: markerRingColor(props.theme) }
+}
+
 // Get visible subtypes when a type is selected
 const visibleSubtypes = computed(() => {
   if (!props.selectedAssetType) return {}
@@ -477,9 +484,9 @@ function renderMarkers() {
     const marker = L.circleMarker([leafletY, leafletX], {
       radius: 6,
       fillColor: color,
-      // Ring picked from the fill, not fixed white - a white ring on a light
-      // marker vanished against the light (white) blueprint.
-      color: markerRingColor(color),
+      // 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,
       fillOpacity: 1,
       renderer: canvasRenderer
@@ -630,6 +637,8 @@ watch(() => props.machines, (newVal, oldVal) => {
 watch(() => props.theme, (newTheme) => {
   if (imageOverlay && map) {
     imageOverlay.setUrl(blueprintUrlFor(newTheme))
+    // Marker rings are keyed on the surface, so they have to be redrawn too.
+    renderMarkers()
   }
 })