Display the image all the time

src/lib/draw/Toolbox.svelte

@@ -2,6 +2,7 @@
   import { SecondaryButton } from "lib/govuk";
   import { mode, pointTool, polygonTool, routeTool } from "stores";
   import type { Schema } from "types";
+  import imageIcon from "../../../assets/image.svg";
   import pointIcon from "../../../assets/point.svg";
   import polygonFreehandIcon from "../../../assets/polygon_freehand.svg";
   import polygonSnappedIcon from "../../../assets/polygon_snapped.svg";
@@ -52,8 +53,9 @@
       Split route
     </SecondaryButton>
   {/if}
-  <SecondaryButton on:click={() => mode.set({ mode: "new-image" })}>
-    New image
+  <SecondaryButton on:click={() => mode.set({ mode: "set-image" })}>
+    <img src={imageIcon} alt="Set image" />
+    Set image
   </SecondaryButton>
   <SecondaryButton on:click={() => mode.set({ mode: "streetview" })}>
     <img src={streetViewIcon} alt="StreetView" />

src/lib/draw/image/ImageLayer.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-  // TODO This should just be part of InterventionLayer? treat it like a
-  // feature? could even base64 encode the bytes to embed it, at risk of
-  // blowing up local storage?
   import { map } from "stores";
   import { Marker } from "svelte-maplibre";
   import { imgSrc, opacity, rotate, scale } from "./stores";
 
   let lngLat = $map.getCenter().toArray();
 
   $: style = `transform: rotate(${$rotate}deg); opacity: ${$opacity / 100.0}`;
+
+  // TODO draggable isn't reactive
 </script>
 
 {#if $imgSrc}

src/lib/draw/image/ImageMode.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { FormElement, SecondaryButton } from "lib/govuk";
+  import {
+    ButtonGroup,
+    FormElement,
+    SecondaryButton,
+    WarningButton,
+  } from "lib/govuk";
   import { mode } from "stores";
   import { imgSrc, opacity, rotate, scale } from "./stores";
 
@@ -8,14 +13,26 @@
   async function fileLoaded(e: Event) {
     let buffer = await fileInput.files![0].arrayBuffer();
     // TODO Detect image type
-    let blob = new Blob([new Uint8Array(buffer)], { type: "image/png" } );
+    let blob = new Blob([new Uint8Array(buffer)], { type: "image/png" });
     $imgSrc = URL.createObjectURL(blob);
   }
+
+  function deleteImage() {
+    $imgSrc = null;
+    $scale = 1.0;
+    $rotate = 0.0;
+    $opacity = 100;
+  }
 </script>
 
-<SecondaryButton on:click={() => mode.set({ mode: "list" })}>
-  Cancel
-</SecondaryButton>
+<ButtonGroup>
+  <SecondaryButton on:click={() => mode.set({ mode: "list" })}>
+    Back
+  </SecondaryButton>
+  <WarningButton on:click={deleteImage} disabled={!$imgSrc}>
+    Delete
+  </WarningButton>
+</ButtonGroup>
 
 <FormElement label="Load an image" id="load-image">
   <input
@@ -36,15 +53,20 @@
   </div>
   <div>
     <label>
-      Rotation (degrees)
-      <input type="number" bind:value={$rotate} />
+      <input type="range" min="0" max="360" bind:value={$rotate} />
+      Rotation: {$rotate} degrees
     </label>
   </div>
 
   <div>
     <label>
       <input type="range" min="0" max="100" bind:value={$opacity} />
-      Opacity
+      Opacity: {$opacity}%
     </label>
   </div>
 {/if}
+
+<p>
+  Note this image isn't saved as part of this scheme. When you close this page,
+  it'll be lost.
+</p>

src/lib/sidebar/LeftSidebar.svelte

@@ -79,8 +79,8 @@ toolbox, but that gets created and destroyed frequently. -->
       to cancel
     </li>
   </ul>
-{:else if $mode.mode == "new-image"}
-  <h2>New image</h2>
+{:else if $mode.mode == "set-image"}
+  <h2>Set image</h2>
   <ImageMode />
 {:else if $mode.mode == "streetview"}
   <h2>StreetView</h2>

src/pages/SketchSchemes.svelte

@@ -112,12 +112,11 @@
       <Geocoder position="bottom-left" />
       <BoundaryLayer {boundaryGeojson} />
       <InterventionLayer {schema} />
+      <ImageLayer />
       {#if $mode.mode == "list"}
         <Toolbox {schema} />
       {:else if $mode.mode == "split-route"}
         <SplitRouteMode />
-      {:else if $mode.mode == "new-image"}
-        <ImageLayer />
       {/if}
     </MapLibreMap>
   </div>

src/types.ts

@@ -146,5 +146,5 @@ export type Mode =
   | { mode: "new-snapped-polygon" }
   | { mode: "new-route" }
   | { mode: "split-route" }
-  | { mode: "new-image" }
+  | { mode: "set-image" }
   | { mode: "streetview" };