Buildings and levels for the floor map, and make every identifier searchable

frontend/src/components/LocationMapTooltip.vue

@@ -12,7 +12,15 @@
         @wheel.prevent="onWheel"
       >
         <div class="map-tooltip-content">
-          <div class="map-preview" ref="mapPreview">
+          <div v-if="levelUnknown" class="map-level-unknown">
+            <strong>Level unknown</strong>
+            <span>
+              This asset has a position ({{ props.left }}, {{ props.top }}) but no
+              level, so there is no drawing to show it on. Set its level on the
+              asset, or place it in the map editor.
+            </span>
+          </div>
+          <div v-else class="map-preview" ref="mapPreview">
             <div
               class="map-transform"
               :style="transformStyle"
@@ -43,7 +51,7 @@
 <script setup>
 import { ref, computed, nextTick, watch } from 'vue'
 import { currentTheme } from '../stores/theme'
-import { loadMapConfig, blueprintUrlFor, state as mapConfig } from '../composables/mapConfig'
+import { loadMapConfig, blueprintUrlFor, dimensionsFor, hasLevel, levelName, state as mapConfig } from '../composables/mapConfig'
 
 // Fetch this facility's blueprint + dimensions once; computeds below react
 // when it loads.
@@ -52,7 +60,11 @@ loadMapConfig()
 const props = defineProps({
   left: { type: Number, default: null },
   top: { type: Number, default: null },
-  machineName: { type: String, default: '' }
+  machineName: { type: String, default: '' },
+  // Which drawing left/top are pixels of (ADR-017). A position without one
+  // cannot be rendered: the same coordinates land somewhere different on every
+  // level, so this shows what is missing instead of guessing the default.
+  levelid: { type: Number, default: null },
 })
 
 const visible = ref(false)
@@ -67,18 +79,29 @@ const hasPosition = computed(() => {
   return props.left !== null && props.top !== null
 })
 
-const blueprintUrl = computed(() => {
-  // Reading currentTheme keeps this reactive to theme changes.
-  return blueprintUrlFor(currentTheme.value)
+// A position we cannot place: coordinates but no level, or a level this instance
+// does not know. Rendering the default blueprint here would look correct and be
+// wrong, so the tooltip says so instead.
+const levelUnknown = computed(() => {
+  return hasPosition.value && !hasLevel(props.levelid)
 })
 
-// Calculate marker position as percentage of the facility blueprint size
+const levelLabel = computed(() => levelName(props.levelid))
+
+const blueprintUrl = computed(() => {
+  // Reading currentTheme keeps this reactive to theme changes.
+  return blueprintUrlFor(currentTheme.value, props.levelid)
+})
+
+// Marker position as a percentage of THIS LEVEL's native size. Percentages of
+// the wrong level's dimensions is precisely how a marker ends up plausibly
+// placed and wrong.
 const markerX = computed(() => {
-  return (props.left / mapConfig.width) * 100
+  return (props.left / dimensionsFor(props.levelid).width) * 100
 })
 
 const markerY = computed(() => {
-  return (props.top / mapConfig.height) * 100
+  return (props.top / dimensionsFor(props.levelid).height) * 100
 })
 
 // Marker style with counter-scale to maintain constant size
@@ -197,6 +220,20 @@ watch(currentTheme, () => {
 .location-tooltip-wrapper:hover {
   color: var(--primary, #1976d2);
 }
+
+.map-level-unknown {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.75rem;
+  max-width: 18rem;
+  font-size: 0.8rem;
+  color: var(--text-light);
+}
+
+.map-level-unknown strong {
+  color: var(--warning);
+}
 </style>
 
 <style>