feat(draw): answer the Draw controls through the display store

The draw tool no longer looks up or listens on its controls. It connects
toggleDraw, setDrawShape, setDrawColor, setDrawLabel and clearDraw to the
display store, which now holds several owners and lets the newest owner
of an action answer it, and it publishes the colour and label beside the
shape, state and hint. The Draw panel renders the shape choice with
UiSegmented and binds the label and colour to what the tool publishes.

The label field's own Enter listener goes: the session's capture-phase
key handler already finishes the shape from that field.

src/annotations/drawToolBehaviour.test.mjs

@@ -47,7 +47,6 @@ class FakeElement {
     this.attributes = new Map();
     this.textContent = '';
     this.value = '';
-    this.children = [];
     this.listeners = [];
   }
   setAttribute(name, value) {
@@ -65,16 +64,6 @@ class FakeElement {
     );
     if (at >= 0) this.listeners.splice(at, 1);
   }
-  querySelectorAll(selector) {
-    if (selector === '.pp-mode-btn[data-shape]')
-      return this.children.filter((child) => child.dataset.shape);
-    const shape = /\.pp-mode-btn\[data-shape="([a-z]+)"\]/.exec(selector)?.[1];
-    if (shape) return this.children.filter((child) => child.dataset.shape === shape);
-    return [];
-  }
-  querySelector(selector) {
-    return this.querySelectorAll(selector)[0] ?? null;
-  }
   click() {
     return this.emit('click');
   }
@@ -108,18 +97,11 @@ function fakeDom() {
     byId.set(id, element);
     return element;
   };
+  // The control whose presence means the page has Draw, a focused button
+  // whose Enter is its own, and the tool's label field.
   make('draw-toggle', 'BUTTON');
-  const modeRow = make('draw-mode-row');
-  for (const shape of ['area', 'line', 'pin']) {
-    const button = new FakeElement('BUTTON');
-    button.dataset.shape = shape;
-    modeRow.children.push(button);
-  }
-  make('draw-label-row');
-  make('draw-label-input', 'INPUT');
-  make('draw-color-select', 'SELECT');
   make('draw-clear', 'BUTTON');
-  make('draw-hint', 'SPAN');
+  make('draw-label-input', 'INPUT');
 
   const body = new FakeElement('BODY');
   const documentDouble = {
@@ -219,10 +201,16 @@ function harness() {
   globalThis.document = documentDouble;
   globalThis.window = globalThis.window || {};
   const shown = { view: null };
+  // The controls' actions, as the display store holds them.
+  const controls = { actions: null };
   const tool = initDrawTool({
     viewer,
     annotations,
     publish: (view) => (shown.view = view),
+    connect: (actions) => {
+      controls.actions = actions;
+      return () => (controls.actions = null);
+    },
   });
   return {
     tool,
@@ -232,6 +220,9 @@ function harness() {
     byId,
     documentDouble,
     element: (id) => byId.get(id),
+    controls,
+    /** A control's change, as the view sends it. */
+    act: (name, ...args) => controls.actions?.[name]?.(...args),
     restore() {
       resetPointerOwnership();
       if (previousDocument === undefined) delete globalThis.document;
@@ -259,7 +250,7 @@ test('a lasting mark or a half-drawn shape makes the language switch ask first',
     marks = [{ id: 'b', ttlMs: null, expiring: false }];
     assert.deepEqual(describeUnsavedWork(), ['drawings on the map']);
     marks = [];
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     h.tool.addVertex(-97.75, 30.26);
     assert.deepEqual(describeUnsavedWork(), ['drawings on the map'], 'a shape in progress');
     marks = [{ id: 'c', ttlMs: null, expiring: false }];
@@ -274,11 +265,11 @@ test('turning Draw on takes a lease and turning it off gives it back', async ()
   const h = harness();
   try {
     assert.equal(isPointerFree(), true);
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(pointerOwner(), 'draw', 'the session owns the pointer');
     assert.equal(h.tool.active, true);
 
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(isPointerFree(), true, 'leaving draw mode frees the pointer');
     assert.equal(h.tool.active, false);
   } finally {
@@ -290,7 +281,7 @@ test('Draw refuses to start when something else holds the pointer', async () =>
   const h = harness();
   try {
     const other = claimPointer('directions');
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(h.tool.active, false, 'it must not half-start');
     assert.equal(pointerOwner(), 'directions', 'and must not steal the claim');
     // Named by its tool, not by the internal owner id.
@@ -301,7 +292,7 @@ test('Draw refuses to start when something else holds the pointer', async () =>
     assert.equal(h.tool.diagnostics().sceneHandler, false, 'no handler was bound');
 
     releasePointer(other);
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(h.tool.active, true, 'and it starts once the pointer is free');
   } finally {
     h.restore();
@@ -311,13 +302,13 @@ test('Draw refuses to start when something else holds the pointer', async () =>
 test('a destroyed instance cannot free the pointer its replacement holds', async () => {
   const first = harness();
   try {
-    first.element('draw-toggle').emit('click');
+    first.act('toggleDraw');
     assert.equal(pointerOwner(), 'draw');
     // The replacement takes over before the old one finishes tearing down.
     first.tool.setActive(false);
     const second = harness();
     try {
-      second.element('draw-toggle').emit('click');
+      second.act('toggleDraw');
       assert.equal(pointerOwner(), 'draw');
       await first.tool.destroy();
       assert.equal(
@@ -342,7 +333,7 @@ test('both stock viewer click actions are borrowed for the session and given bac
     h.viewer.screenSpaceEventHandler.setInputAction(stockClick, LEFT_CLICK);
     h.viewer.screenSpaceEventHandler.setInputAction(stockDouble, LEFT_DOUBLE_CLICK);
 
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(
       h.viewer.screenSpaceEventHandler.getInputAction(LEFT_CLICK),
       undefined,
@@ -353,7 +344,7 @@ test('both stock viewer click actions are borrowed for the session and given bac
       undefined,
     );
 
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     assert.equal(
       h.viewer.screenSpaceEventHandler.getInputAction(LEFT_CLICK),
       stockClick,
@@ -371,7 +362,7 @@ test('both stock viewer click actions are borrowed for the session and given bac
 test('Enter finishes from the canvas and the label field, never from a focused button', async () => {
   const h = harness();
   try {
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     h.tool.setShape('area');
     h.tool.addVertex(-97.75, 30.26);
     h.tool.addVertex(-97.74, 30.26);
@@ -401,7 +392,7 @@ test('Enter finishes from the canvas and the label field, never from a focused b
 test('the live preview hangs at the height the click landed on', async () => {
   const h = harness();
   try {
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     h.tool.setShape('line');
     h.tool.addVertex(-97.75, 30.26, 187.5);
     h.tool.addVertex(-97.74, 30.26, 212.25);
@@ -455,7 +446,7 @@ test('destroy releases the pointer, the handler, the listeners and the stock act
   try {
     const stockClick = () => 'viewer picks and selects';
     h.viewer.screenSpaceEventHandler.setInputAction(stockClick, LEFT_CLICK);
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     h.tool.addVertex(-97.75, 30.26);
     assert.equal(pointerOwner(), 'draw');
     assert.ok(h.tool.diagnostics().domListeners > 0);
@@ -469,7 +460,7 @@ test('destroy releases the pointer, the handler, the listeners and the stock act
     assert.equal(after.sceneHandler, false, 'the Cesium handler is gone');
     assert.equal(after.domListeners, 0, 'every DOM listener came off');
     assert.equal(h.documentDouble.listeners.length, 0, 'including the keydown');
-    assert.equal(h.element('draw-toggle').listeners.length, 0);
+    assert.equal(h.controls.actions, null, 'and the controls are disconnected');
     assert.equal(
       h.viewer.screenSpaceEventHandler.getInputAction(LEFT_CLICK),
       stockClick,
@@ -487,15 +478,99 @@ test('destroy releases the pointer, the handler, the listeners and the stock act
 test('Clear wipes the board and the shape in progress', async () => {
   const h = harness();
   try {
-    h.element('draw-toggle').emit('click');
+    h.act('toggleDraw');
     h.tool.addVertex(-97.75, 30.26);
     h.tool.addVertex(-97.74, 30.26);
     assert.equal(h.tool.session.vertices.length, 2);
 
-    h.element('draw-clear').emit('click');
+    h.act('clearDraw');
     assert.equal(h.annotations.calls.clear, 1, 'placed marks are removed');
     assert.equal(h.tool.session.vertices.length, 0, 'and so is the shape in progress');
   } finally {
     h.restore();
   }
 });
+
+test('the controls choose the shape, colour and label the next shape is drawn with', async () => {
+  const h = harness();
+  try {
+    h.act('toggleDraw');
+    h.act('setDrawShape', 'line');
+    h.act('setDrawColor', 'amber');
+    h.act('setDrawLabel', 'Route A');
+    assert.deepEqual(
+      { ...h.shown.view, hint: undefined },
+      { active: true, shape: 'line', color: 'amber', label: 'Route A', hint: undefined },
+      'the view shows what the controls chose',
+    );
+    h.act('setDrawColor', 'purple');
+    assert.equal(h.shown.view.color, 'primary', 'an unknown colour falls back');
+    h.act('setDrawColor', 'cyan');
+    h.tool.addVertex(-97.75, 30.26);
+    // Choosing a shape again starts the open one over.
+    h.act('setDrawShape', 'line');
+    assert.equal(h.tool.session.vertices.length, 0);
+    h.tool.addVertex(-97.75, 30.26);
+    h.tool.addVertex(-97.74, 30.26);
+    h.documentDouble.emit('keydown', { key: 'Enter', target: h.documentDouble.body });
+    await Promise.resolve();
+    await Promise.resolve();
+    const spec = h.annotations.calls.annotate[0].specs[0];
+    assert.equal(spec.type, 'route', 'a drawn line is a manual route');
+    assert.equal(spec.color, 'cyan');
+    assert.equal(spec.label, 'Route A');
+    assert.equal(h.shown.view.label, '', 'a finished shape empties the label');
+  } finally {
+    h.restore();
+  }
+});
+
+test('keys typed in the label field: Enter finishes, Backspace edits, Escape cancels', async () => {
+  const h = harness();
+  try {
+    const label = h.element('draw-label-input');
+    const elsewhere = new FakeElement('INPUT', 'location-search');
+    h.act('toggleDraw');
+    h.tool.addVertex(-97.75, 30.26);
+    h.tool.addVertex(-97.74, 30.26);
+    h.documentDouble.emit('keydown', { key: 'Backspace', target: label });
+    assert.equal(h.tool.session.vertices.length, 2, 'Backspace edits the label');
+    h.documentDouble.emit('keydown', { key: 'Enter', target: elsewhere });
+    await Promise.resolve();
+    assert.equal(h.annotations.calls.annotate.length, 0, 'another field keeps its Enter');
+    h.documentDouble.emit('keydown', { key: 'Escape', target: label });
+    assert.equal(h.tool.session.vertices.length, 0, 'Escape drops the open shape');
+    assert.equal(h.tool.active, true, 'and leaves Draw on');
+    h.act('setDrawShape', 'line');
+    h.tool.addVertex(-97.75, 30.26);
+    h.tool.addVertex(-97.74, 30.26);
+    h.documentDouble.emit('keydown', { key: 'Enter', target: label });
+    await Promise.resolve();
+    await Promise.resolve();
+    assert.equal(h.annotations.calls.annotate.length, 1, 'Enter in the label finishes');
+  } finally {
+    h.restore();
+  }
+});
+
+test('a page without the Draw controls gets no draw tool', () => {
+  resetPointerOwnership();
+  const previousDocument = globalThis.document;
+  globalThis.document = { getElementById: () => null };
+  try {
+    let connected = false;
+    const tool = initDrawTool({
+      viewer: fakeViewer(),
+      annotations: fakeAnnotations(),
+      connect: () => {
+        connected = true;
+        return () => {};
+      },
+    });
+    assert.equal(tool, null);
+    assert.equal(connected, false);
+  } finally {
+    if (previousDocument === undefined) delete globalThis.document;
+    else globalThis.document = previousDocument;
+  }
+});