Make some alternate ways to toggle snapping mode

acteng · Feb 19, 2024 · fbf3e78 · fbf3e78
1 parent fb935b7
commit fbf3e78
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/lib/draw/route/RouteControls.svelte b/src/lib/draw/route/RouteControls.svelte
@@ -18,6 +18,10 @@
   function undo() {
     $routeTool!.undo();
   }
+
+  function toggleSnap() {
+    $routeTool!.toggleSnapMode();
+  }
 </script>
 
 <SecondaryButton disabled={$undoLength == 0} on:click={undo}>
@@ -31,13 +35,15 @@
 {#if $snapMode}
   <p style="background: red; color: white; padding: 8px;">
     Snapping to existing roads. Press <b>s</b>
-    to draw anywhere
+     or click below to draw anywhere
   </p>
+  <SecondaryButton on:click={toggleSnap}>Draw anywhere</SecondaryButton>
 {:else}
   <p style="background: blue; color: white; padding: 8px;">
     Drawing points anywhere. Press <b>s</b>
-    to snap to roads
+     or click below to snap to roads
   </p>
+  <SecondaryButton on:click={toggleSnap}>Snap to roads</SecondaryButton>
 {/if}
 
 <ul>

diff --git a/src/lib/draw/route/route_tool.ts b/src/lib/draw/route/route_tool.ts
@@ -129,7 +129,7 @@ export class RouteTool {
     if (e.key == "Enter") {
       e.stopPropagation();
       this.finish();
-    } else if (e.key == "s") {
+    } else if (e.key == "s" || e.key == "S") {
       e.stopPropagation();
       this.inner.toggleSnapMode();
       this.redraw();
@@ -292,6 +292,11 @@ export class RouteTool {
     this.redraw();
   }
 
+  toggleSnapMode() {
+    this.inner.toggleSnapMode();
+    this.redraw();
+  }
+
   private redraw() {
     let gj = JSON.parse(this.inner.renderGeojson());
     routeToolGj.set(gj);