Prevent clicking on stepper steps placing the cursor in random places

hazelgrove · Dec 11, 2024 · 38974de · 38974de
1 parent 399a341
commit 38974de
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 17 deletions.
diff --git a/src/haz3lweb/app/editors/decoration/Deco.re b/src/haz3lweb/app/editors/decoration/Deco.re
@@ -501,16 +501,31 @@ module Deco =
             Some((l, r));
           };
         };
-        PieceDec.indicated(
-          ~base_clss="tile-next-step",
-          ~attr=[Virtual_dom.Vdom.Attr.on_mousedown(_ => {inject(i)})],
-          ~line_clss=["next-step-line"],
-          ~font_metrics,
-          ~caret=(Id.invalid, 0),
-          ~rows=measured.rows,
-          ~tiles=[(id, mold, shards)],
-        )
-        |> Option.map(_, range);
+        Option.map(
+          x => {
+            PieceDec.indicated(
+              ~base_clss="tile-next-step",
+              ~attr=[Virtual_dom.Vdom.Attr.on_mousedown(_ => {inject(i)})],
+              ~line_clss=["next-step-line"],
+              ~font_metrics,
+              ~caret=(Id.invalid, 0),
+              ~rows=measured.rows,
+              ~tiles=[(id, mold, shards)],
+              x,
+            )
+            @ PieceDec.indicated(
+                ~base_clss="tile-next-step-top",
+                ~attr=[Virtual_dom.Vdom.Attr.on_mousedown(_ => {inject(i)})],
+                ~line_clss=["next-step-line"],
+                ~font_metrics,
+                ~caret=(Id.invalid, 0),
+                ~rows=measured.rows,
+                ~tiles=[(id, mold, shards)],
+                x,
+              )
+          },
+          range,
+        );
       },
       tiles,
     )

diff --git a/src/haz3lweb/view/StepperView.re b/src/haz3lweb/view/StepperView.re
@@ -93,6 +93,7 @@ module Update = {
   [@deriving (show({with_path: false}), sexp, yojson)]
   type t =
     // int here should include hidden steps
+    // Note this int is backwards compared to the selection (0 is the most recent step)
     | StepperEditor(int, StepperEditor.Update.t)
     | StepForward(int)
     | StepBackward;
@@ -356,14 +357,17 @@ module Selection = {
   [@deriving (show({with_path: false}), sexp, yojson)]
   type t =
     // int here should include hidden steps
+    // Note this int is backwards compared to the editors (so that 0 is the oldest step, and selections are preserved)
     | A(int, StepperEditor.Selection.t);
 
   let get_cursor_info = (~selection: t, mr: Model.t): Cursor.cursor(Update.t) => {
     Cursor.(
       switch (selection) {
       | A(n, editor_selection) =>
         let a: option(Model.a) =
-          mr.history |> Aba.get_as |> List.nth_opt(_, n);
+          mr.history
+          |> Aba.get_as
+          |> List.nth_opt(_, List.length(mr.history |> Aba.get_as) - n - 1);
         switch (a) {
         | Some(Calculated(a)) =>
           let+ x =
@@ -382,7 +386,10 @@ module Selection = {
   let handle_key_event =
       (~selection: t, ~event, mr: Model.t): option(Update.t) => {
     let A(i, s) = selection;
-    let a: option(Model.a) = mr.history |> Aba.get_as |> List.nth_opt(_, i);
+    let a: option(Model.a) =
+      mr.history
+      |> Aba.get_as
+      |> List.nth_opt(_, List.length(mr.history |> Aba.get_as) - i - 1);
     switch (a) {
     | Some(Calculated(a)) =>
       let+ x =
@@ -464,14 +471,33 @@ module View = {
                    StepperEditor.View.view(
                      ~globals,
                      ~overlays=[],
-                     ~selected=selection == Some(A(i + 1, ())),
+                     ~selected=
+                       selection
+                       == Some(
+                            A(
+                              List.length(stepper.history |> Aba.get_as)
+                              - (i + 1)
+                              - 1,
+                              (),
+                            ),
+                          ),
                      ~inject=
                        (x: StepperEditor.Update.t) =>
                          inject(StepperEditor(i + 1, x)),
                      ~signal=
                        fun
                        | TakeStep(_) => Ui_effect.Ignore
-                       | MakeActive => signal(MakeActive(A(i + 1, ()))),
+                       | MakeActive =>
+                         signal(
+                           MakeActive(
+                             A(
+                               List.length(stepper.history |> Aba.get_as)
+                               - (i + 1)
+                               - 1,
+                               (),
+                             ),
+                           ),
+                         ),
                      {
                        editor: a.editor |> Calc.get_value,
                        next_steps: [],
@@ -511,14 +537,37 @@ module View = {
               div(~attrs=[Attr.class_("equiv")], [Node.text("≡")]),
               StepperEditor.View.view(
                 ~globals,
-                ~selected=selection == Some(A(current_n, ())),
+                ~selected=
+                  selection
+                  == Some(
+                       A(
+                         List.length(stepper.history |> Aba.get_as)
+                         - current_n
+                         - 1,
+                         (),
+                       ),
+                     ),
                 ~inject=
                   (x: StepperEditor.Update.t) =>
                     inject(StepperEditor(current_n, x)),
                 ~signal=
                   fun
-                  | TakeStep(x) => inject(Update.StepForward(x))
-                  | MakeActive => signal(MakeActive(A(current_n, ()))),
+                  | TakeStep(x) =>
+                    Effect.Many([
+                      inject(Update.StepForward(x)),
+                      Effect.Stop_propagation,
+                    ])
+                  | MakeActive =>
+                    signal(
+                      MakeActive(
+                        A(
+                          List.length(stepper.history |> Aba.get_as)
+                          - current_n
+                          - 1,
+                          (),
+                        ),
+                      ),
+                    ),
                 ~overlays=[],
                 {
                   editor: model.editor |> Calc.get_value,

diff --git a/src/haz3lweb/www/style/dynamics.css b/src/haz3lweb/www/style/dynamics.css
@@ -323,6 +323,14 @@ svg.tile-next-step {
   filter: drop-shadow(1px 1px var(--G2));
 }
 
+svg.tile-next-step-top {
+  pointer-events: all;
+  cursor: pointer;
+  visibility: hidden;
+  z-index: var(--stepper-interactive-z);
+  filter: drop-shadow(1px 1px var(--G2));
+}
+
 svg.tile-taken-step {
   filter: drop-shadow(1px 1px var(--BR1));
 }

diff --git a/src/haz3lweb/www/style/variables.css b/src/haz3lweb/www/style/variables.css
@@ -209,6 +209,7 @@
 
   /* ABOVE CODE LEVEL */
   --backpack-targets-z: 11;
+  --stepper-interactive-z: 15;
   --caret-z: 20;
 
   /* TOP LEVEL UI */