Fix the levels viewer: markers were drawn on whichever plan was showing

frontend/src/views/settings/FloorMapSettings.vue

@@ -62,18 +62,36 @@
               />
             </td>
             <td>
-              <span class="mono">{{ level.mapwidth }} x {{ level.mapheight }}</span>
+              <div class="size-fields">
+                <input
+                  v-model.number="level.mapwidth"
+                  type="number"
+                  min="1"
+                  class="form-control size-input"
+                  aria-label="Blueprint width in pixels"
+                  @blur="saveSize(level)"
+                  :disabled="saving"
+                />
+                <span class="size-x">x</span>
+                <input
+                  v-model.number="level.mapheight"
+                  type="number"
+                  min="1"
+                  class="form-control size-input"
+                  aria-label="Blueprint height in pixels"
+                  @blur="saveSize(level)"
+                  :disabled="saving"
+                />
+              </div>
               <small v-if="level.assetcount" class="input-hint">
-                fixed while {{ level.assetcount }} marker(s) are placed
+                Taken from the image while a level is empty. Changing it now
+                re-scales where all {{ level.assetcount }} marker(s) sit relative
+                to the drawing - set the new size, then Recalibrate from
+                landmarks in the map editor.
+              </small>
+              <small v-else class="input-hint">
+                Set from the blueprint you upload.
               </small>
-              <input
-                v-else
-                v-model.number="level.mapwidth"
-                type="number"
-                class="form-control size-input"
-                @blur="saveLevel(level, { mapwidth: level.mapwidth, mapheight: level.mapheight })"
-                :disabled="saving"
-              />
             </td>
             <td>
               <span :class="{ 'muted': !level.assetcount }">{{ level.assetcount }}</span>
@@ -311,6 +329,29 @@ async function saveLevel(level, payload) {
   }
 }
 
+async function saveSize(level) {
+  if (!(level.mapwidth > 0) || !(level.mapheight > 0)) {
+    error.value = 'Width and height must both be positive.'
+    await load()
+    return
+  }
+  // A level with markers keeps its coordinates when the size changes, so every
+  // marker moves relative to the drawing. That is sometimes exactly right (a
+  // re-export of the same plan at a new resolution) and sometimes the start of
+  // a recalibration, but it is never something to do by accident.
+  if (level.assetcount) {
+    const ok = window.confirm(
+      `${level.levelname} has ${level.assetcount} marker(s) placed against ` +
+      `${level.mapwidth} x ${level.mapheight}. Changing the size moves all of ` +
+      `them relative to the drawing. Recalibrate from landmarks afterwards. Continue?`)
+    if (!ok) {
+      await load()
+      return
+    }
+  }
+  await saveLevel(level, { mapwidth: level.mapwidth, mapheight: level.mapheight })
+}
+
 async function upload(level, theme, event) {
   const file = event.target.files?.[0]
   if (!file) return
@@ -398,6 +439,8 @@ async function remove(level) {
 .mono { font-family: monospace; }
 .order-input { width: 4.5rem; }
 .size-input { width: 6rem; }
+.size-fields { display: flex; align-items: center; gap: 0.35rem; }
+.size-x { color: var(--text-light); }
 .file-input { display: block; margin-top: 0.25rem; font-size: 0.75rem; }
 
 .map-thumb {