FunctinDigith and focusTarget scrolling

src/ui/Scrowl.tsx

@@ -1,6 +1,6 @@
-import { For, Match, Switch } from "solid-js";
+import { createEffect, For, Match, onMount, Switch } from "solid-js";
 import { ExprREPL } from "./REPL";
-import { scrowl } from "./scrowlStore";
+import { clearFocus, DigithId, scrowl } from "./scrowlStore";
 import { NewFunctionDraftDigith } from "./Function/NewFunctionDraftDigith";
 import { FunctionDigith } from "./Function/FunctionDigith";
 import { Digith } from "./Digith";
@@ -13,11 +13,7 @@ import { Digith } from "./Digith";
 // - Thinking of a prosthesis that's an extension of your body doing your bidding without you knowing exactly how.
 // - digital
 
-type Props = {
-  // TODO
-}
-
-export function Scrowl(props: Props) {
+export function Scrowl() {
   return (
     <div
       id="scrowl"
@@ -29,22 +25,24 @@ export function Scrowl(props: Props) {
     >
       <For each={scrowl.digiths}>
         {(digith) => (
-          <Switch>
-            <Match when={digith.tag === 'repl'}>
-              <article class="digith">
-                 <header><strong>REPL</strong></header>
-                 <ExprREPL />
-              </article>
-            </Match>
-            
-            <Match when={digith.tag === 'new-fn-draft'}>
-              <NewFunctionDraftDigith draft={digith as Digith.NewFunctionDraft} />
-            </Match>
+          <DigithWrapper id={digith.id}>
+            <Switch>
+              <Match when={digith.tag === 'repl'}>
+                <article class="digith">
+                   <header><strong>REPL</strong></header>
+                   <ExprREPL />
+                </article>
+              </Match>
+              
+              <Match when={digith.tag === 'new-fn-draft'}>
+                <NewFunctionDraftDigith draft={digith as Digith.NewFunctionDraft} />
+              </Match>
 
-            <Match when={digith.tag === 'fn'}>
-              <FunctionDigith function={digith as Digith.Function} />
-            </Match>
-          </Switch>
+              <Match when={digith.tag === 'fn'}>
+                <FunctionDigith function={digith as Digith.Function} />
+              </Match>
+            </Switch>
+          </DigithWrapper>
         )}
       </For>
 
@@ -52,3 +50,31 @@ export function Scrowl(props: Props) {
   );
 }
 
+// For focusing on a Digith
+// This works basically in two ways:
+// - We have the list of digiths, and each time any of them is mounted, there's `attemptScroll` check done on all of them.
+// - Whenever `scrowl.focusTarget` changes, it reactively broadcasts the change to each of the digith,
+//   and each digith asks itself, "Am I focus-target?".
+function DigithWrapper(props: { id: DigithId, children: any }) {
+  let ref: HTMLDivElement | undefined;
+
+  // The Logic: Run this whenever 'scrowl.focusTarget' changes OR when this component mounts
+  const attemptScroll = () => {
+    if (scrowl.focusTarget === props.id && ref) {
+      ref.scrollIntoView({ behavior: "smooth", block: "start" });
+      setTimeout(clearFocus, 0); // This sets asynchronously the focus-target to null.
+    }
+  };
+
+  onMount(attemptScroll);
+  createEffect(attemptScroll);
+
+  return (
+    <div 
+      ref={ref} 
+      style={{ "scroll-margin-top": "2rem" }}
+    >
+      {props.children}
+    </div>
+  );
+}