Drawing: Add support for clear

src/engine/controller.ml

@@ -33,6 +33,7 @@ let setup ?initial_step (window : Window.window) =
       | "h" -> Drawing.State.set_tool Highlighter
       | "x" -> Drawing.State.set_tool Pointer
       | "e" -> Drawing.State.set_tool Eraser
+      | "X" -> Drawing.clear ()
       | "l" ->
           let _ : unit Fut.t =
             Window.move_relative_pure

src/engine/drawing.ml

@@ -1,4 +1,9 @@
 let all_paths = Hashtbl.create 10
+
+let remove elem =
+  Hashtbl.remove all_paths elem;
+  Brr.El.remove elem
+
 let is_pressed = ( != ) 0
 
 type drawing_state =
@@ -50,6 +55,8 @@ module Button = struct
       | Large -> "large"
     in
     get (s w)
+
+  let clear () = get "clear"
 end
 
 module State : sig
@@ -186,9 +193,7 @@ let continue_shape ev =
       let current_point = coord_of_event ev in
       Hashtbl.iter
         (fun elem path ->
-          if intersect_poly path (current_point, last_point) then (
-            Hashtbl.remove all_paths elem;
-            Brr.El.remove elem))
+          if intersect_poly path (current_point, last_point) then remove elem)
         all_paths;
       current_drawing_state := Erasing current_point;
       ()
@@ -238,6 +243,8 @@ let connect svg =
   in
   ()
 
+let clear () = Hashtbl.iter (fun elem _ -> remove elem) all_paths
+
 let setup el =
   let content =
     {|	  <div class="slip-writing-toolbar">
@@ -300,7 +307,8 @@ let setup el =
     add_listener State.set_color Button.color Yellow;
     add_listener State.set_width Button.width Small;
     add_listener State.set_width Button.width Medium;
-    add_listener State.set_width Button.width Large
+    add_listener State.set_width Button.width Large;
+    add_listener clear Button.clear ()
   in
   let () =
     State.set_width Medium;

src/engine/drawing.mli

@@ -17,3 +17,4 @@ module State : sig
 end
 
 val setup : Brr.El.t -> unit
+val clear : unit -> unit

src/engine/slipshow.css

@@ -95,6 +95,7 @@ h1 {
   height: 32px;
   z-index: 10;
   border-radius: 0px 0px 16px 16px;
+  user-select: none;
 }
 
 .slip-writing-toolbar > * {
@@ -108,6 +109,7 @@ h1 {
   border: 1px solid black;
   border-radius: 30px;
   transition: border-radius 0.5s;
+  cursor: pointer;
 }
 .slip-writing-toolbar > .slip-toolbar-color > .slip-toolbar-red {
   background-color: red;