Pick built-in test cases

dabreegster · Jun 11, 2024 · ee59caa · ee59caa
1 parent d5a8912
commit ee59caa
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 41 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -32,6 +32,7 @@
     "@turf/bbox": "^7.0.0",
     "maplibre-draw-polygon": "github:dabreegster/maplibre-draw-polygon",
     "svelte-maplibre": "^0.9.7",
-    "svelte-utils": "github:a-b-street/svelte-utils"
+    "svelte-utils": "github:a-b-street/svelte-utils",
+    "wkt": "^0.1.1"
   }
 }
diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -19,6 +19,8 @@
     PolygonToolLayer,
   } from "maplibre-draw-polygon";
   import Settings from "./Settings.svelte";
+  import { testCases } from "./test_cases";
+  import { parse as parseWkt } from "wkt";
 
   let maptilerApiKey = "MZEJTanw3WpxRvt7qDfo";
 
@@ -37,6 +39,7 @@
   let map: Map;
   let fileInput: HTMLInputElement;
   let polygonTool: PolygonTool | null = null;
+  let currentTestCase = "";
 
   let inputString = "";
   let cfg = {
@@ -77,6 +80,7 @@
 
   async function loadFile(e: Event) {
     shouldZoom = true;
+    currentTestCase = "";
     inputString = await fileInput.files![0].text();
   }
 
@@ -93,66 +97,93 @@
     polygonTool.addEventListenerSuccess(async (f) => {
       polygonTool = null;
       shouldZoom = true;
+      currentTestCase = "";
       inputString = JSON.stringify(f);
     });
     polygonTool.addEventListenerFailure(() => {
       polygonTool = null;
     });
   }
+
+  $: if (currentTestCase != "") {
+    // @ts-expect-error
+    let test = testCases[currentTestCase];
+    shouldZoom = true;
+    inputString = JSON.stringify(parseWkt(test));
+  }
 </script>
 
 <Layout>
   <div slot="left">
     <h1>Polygon width</h1>
 
-    {#if polygonTool}
-      <PolygonControls {polygonTool} />
-    {:else}
-      <label>
-        Load a .geojson file with polygons
-        <input bind:this={fileInput} on:change={loadFile} type="file" />
-      </label>
+    <details open>
+      <summary>Input</summary>
 
-      <div>
-        <button type="button" on:click={() => startPolygonTool(false)}>
-          Draw your own polygon
-        </button>
-      </div>
+      {#if polygonTool}
+        <PolygonControls {polygonTool} />
+      {:else}
+        <label>
+          Load a .geojson file with polygons
+          <input bind:this={fileInput} on:change={loadFile} type="file" />
+        </label>
 
-      {#if wkt_input}
         <div>
-          <button class="secondary" on:click={() => (showWkt = true)}>
-            Copy polygon as WKT
-          </button>
-          <button
-            class="secondary"
-            on:click={() => startPolygonTool(true)}
-            disabled={polygonTool != null}
-          >
-            Edit polygon
+          <button type="button" on:click={() => startPolygonTool(false)}>
+            Draw your own polygon
           </button>
         </div>
+
+        {#if wkt_input}
+          <div>
+            <button class="secondary" on:click={() => (showWkt = true)}>
+              Copy polygon as WKT
+            </button>
+            <button
+              class="secondary"
+              on:click={() => startPolygonTool(true)}
+              disabled={polygonTool != null}
+            >
+              Edit polygon
+            </button>
+          </div>
+        {/if}
+
+        <label>
+          Choose a test case:
+
+          <select bind:value={currentTestCase}>
+            <option value="">None</option>
+            {#each Object.keys(testCases) as key}
+              <option value={key}>{key}</option>
+            {/each}
+          </select>
+        </label>
       {/if}
-    {/if}
+    </details>
 
     <hr />
 
-    <label>
-      <input type="checkbox" bind:checked={showInput} />
-      Show input polygons
-    </label>
-    <label>
-      <input type="checkbox" bind:checked={showSkeletons} />
-      Show center line
-    </label>
-    <label>
-      <input type="checkbox" bind:checked={showPerps} />
-      Show perpendicular lines
-    </label>
-    <label>
-      <input type="checkbox" bind:checked={showThickened} />
-      Show thickened polygons
-    </label>
+    <details open>
+      <summary>Layers</summary>
+
+      <label>
+        <input type="checkbox" bind:checked={showInput} />
+        Show input polygons
+      </label>
+      <label>
+        <input type="checkbox" bind:checked={showSkeletons} />
+        Show center line
+      </label>
+      <label>
+        <input type="checkbox" bind:checked={showPerps} />
+        Show perpendicular lines
+      </label>
+      <label>
+        <input type="checkbox" bind:checked={showThickened} />
+        Show thickened polygons
+      </label>
+    </details>
 
     <hr />
 
@@ -212,3 +243,10 @@
     <textarea rows="10">{wkt_input}</textarea>
   </Modal>
 {/if}
+
+<style>
+  details {
+    border: 1px solid white;
+    padding: 4px;
+  }
+</style>