feat(ui): render the Display panel's Draw controls from the store

src/ui/displayPanel.test.mjs

@@ -343,3 +343,30 @@ test('the 3D aircraft group renders what AircraftDisplay shows', async (t) => {
   assert.equal(row.classList.contains('visible'), true);
   assert.equal(all.getAttribute('aria-checked'), 'false');
 });
+
+test('the Draw controls render what the draw tool publishes', async (t) => {
+  const { store, $ } = fixture(t);
+  const toggle = $('draw-toggle');
+  const segment = (shape) =>
+    document.querySelector(`#draw-mode-row [data-shape="${shape}"]`);
+  assert.equal(toggle.getAttribute('aria-pressed'), 'false');
+  assert.equal(segment('area').getAttribute('aria-checked'), 'true');
+  assert.equal($('draw-hint').textContent, '');
+
+  store.publishDraw({ active: true, shape: 'line', hint: 'Click to add points.' });
+  await nextTick();
+  assert.equal(toggle.className, 'pp-toggle-btn active');
+  assert.equal(toggle.getAttribute('aria-pressed'), 'true');
+  assert.equal($('draw-mode-row').classList.contains('visible'), true);
+  assert.equal($('draw-label-row').classList.contains('visible'), true);
+  assert.equal(segment('line').getAttribute('aria-checked'), 'true');
+  assert.equal(segment('line').classList.contains('active'), true);
+  assert.equal(segment('area').classList.contains('active'), false);
+  assert.equal($('draw-hint').textContent, 'Click to add points.');
+
+  store.publishDraw({ active: false, shape: 'line', hint: '' });
+  await nextTick();
+  assert.equal(toggle.className, 'pp-toggle-btn');
+  assert.equal($('draw-mode-row').classList.contains('visible'), false);
+  assert.equal($('draw-label-row').classList.contains('visible'), false);
+});

src/ui/geoFileImport.test.mjs

@@ -427,9 +427,7 @@ test('the application composition wires the import and owns its teardown', () =>
     new URL('../app/tools.js', import.meta.url),
     'utf8',
   );
-  const drawAt = tools.indexOf(
-    'const drawTool = initDrawTool({ viewer, annotations });',
-  );
+  const drawAt = tools.indexOf('const drawTool = initDrawTool({');
   const importAt = tools.indexOf('const geoFileImport = initGeoFileImport({');
   assert.ok(importAt > drawAt && drawAt >= 0);
   // Fly-to goes through the application shell's navigation policy.

src/ui/stores/display.js

@@ -3,8 +3,9 @@ import { markRaw, shallowRef } from 'vue';
 
 /**
  * The Display panel as its view renders it. VisualSettings presents its
- * groups (`_presentDisplay()`) and AircraftDisplay the 3D aircraft group,
- * and each publishes here; both keep their listeners on the controls.
+ * groups (`_presentDisplay()`), AircraftDisplay the 3D aircraft group and
+ * the draw tool its controls, and each publishes here; each keeps its
+ * listeners on the controls.
  */
 export const useDisplayStore = defineStore('gev-display', () => {
   /** The presented panel; null until VisualSettings first renders. */
@@ -23,5 +24,13 @@ export const useDisplayStore = defineStore('gev-display', () => {
     models3d.value = markRaw(next);
   }
 
-  return { view, publish, models3d, publishModels3d };
+  /** The Draw controls; null until the draw tool first renders. */
+  const draw = shallowRef(null);
+
+  /** @param {object} next A fresh presentation of the Draw controls. */
+  function publishDraw(next) {
+    draw.value = markRaw(next);
+  }
+
+  return { view, publish, models3d, publishModels3d, draw, publishDraw };
 });

src/ui/views/panels/DisplayPanel.vue

@@ -6,10 +6,11 @@ import { vRangeValue } from '../../rail/rangeValue.js';
 import { useDisplayStore } from '../../stores/display.js';
 
 // The Display panel. VisualSettings presents the HUD, Sonar, Scope,
-// Celestial, detection, bloom and sharpen and AircraftDisplay the 3D group,
-// and each publishes them; until they do, the panel shows its initial
-// markup. The other groups keep their owners' element bindings.
-const { view, models3d } = storeToRefs(useDisplayStore());
+// Celestial, detection, bloom and sharpen, AircraftDisplay the 3D group and
+// the draw tool its controls, and each publishes them; until they do, the
+// panel shows its initial markup. The other groups keep their owners'
+// element bindings.
+const { view, models3d, draw } = storeToRefs(useDisplayStore());
 const pct = (value) => `${value}%`;
 const hud = computed(() => view.value?.hud ?? null);
 const sonar = computed(() => view.value?.sonar ?? null);
@@ -33,6 +34,8 @@ const segment = (current) => (value) => ({
   'aria-checked': String(current.value === value),
 });
 const modelsSegment = segment(modelsMode);
+const drawShape = computed(() => draw.value?.shape ?? 'area');
+const drawSegment = segment(drawShape);
 const allocationSegment = segment(allocation);
 </script>
 
@@ -156,19 +159,19 @@ const allocationSegment = segment(allocation);
     </div>
   </div>
   <div class="pp-toggle-group">
-    <button class="pp-toggle-btn" id="draw-toggle" title="Draw on the world — click vertices, double-click or Enter to finish, Esc to cancel" aria-pressed="false" data-i18n-title>
+    <button class="pp-toggle-btn" :class="{ active: draw?.active }" id="draw-toggle" title="Draw on the world — click vertices, double-click or Enter to finish, Esc to cancel" :aria-pressed="String(draw?.active ?? false)" data-i18n-title>
       <span class="pp-icon material-symbols-outlined" aria-hidden="true">draw</span>
       <span class="pp-label" data-i18n>Draw</span>
     </button>
-    <div class="pp-slider-row" id="draw-mode-row">
+    <div class="pp-slider-row" :class="{ visible: draw?.active }" id="draw-mode-row">
       <span class="pp-slider-mini-label" data-i18n>Shape</span>
       <div class="gev-segmented pp-mode-seg" role="radiogroup" aria-label="Shape to draw" data-i18n-aria-label>
-        <button class="gev-segment pp-mode-btn active" data-shape="area" role="radio" aria-checked="true" data-i18n>Area</button>
-        <button class="gev-segment pp-mode-btn" data-shape="line" role="radio" aria-checked="false" data-i18n>Line</button>
-        <button class="gev-segment pp-mode-btn" data-shape="pin" role="radio" aria-checked="false" data-i18n>Pin</button>
+        <button class="gev-segment pp-mode-btn" data-shape="area" role="radio" v-bind="drawSegment('area')" data-i18n>Area</button>
+        <button class="gev-segment pp-mode-btn" data-shape="line" role="radio" v-bind="drawSegment('line')" data-i18n>Line</button>
+        <button class="gev-segment pp-mode-btn" data-shape="pin" role="radio" v-bind="drawSegment('pin')" data-i18n>Pin</button>
       </div>
     </div>
-    <div class="pp-slider-row" id="draw-label-row">
+    <div class="pp-slider-row" :class="{ visible: draw?.active }" id="draw-label-row">
       <input type="text" class="pp-text-input" id="draw-label-input" maxlength="120" placeholder="Label (optional)" aria-label="Label for the drawn shape" data-i18n-placeholder data-i18n-aria-label autocomplete="off" spellcheck="false">
       <select class="pp-select draw-color-select gev-field gev-field--compact" id="draw-color-select" aria-label="Colour of the drawn shape" data-i18n-aria-label>
         <option value="primary" data-i18n>Primary</option>
@@ -178,7 +181,7 @@ const allocationSegment = segment(allocation);
         <option value="red" data-i18n>Red</option>
       </select>
       <button class="pp-mode-btn draw-clear-btn" id="draw-clear" type="button" title="Remove every mark from the board" data-i18n-title data-i18n>Clear</button>
-      <span class="draw-hint" id="draw-hint" aria-live="polite"></span>
+      <span class="draw-hint" id="draw-hint" aria-live="polite">{{ draw?.hint ?? '' }}</span>
     </div>
   </div>
   <div class="pp-toggle-group" id="geo-import-group">