move focusOnPath to ItemStore

quantified-uncertainty · Jan 25, 2024 · da41d3e · da41d3e
1 parent a425662
commit da41d3e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 19 deletions.
diff --git a/packages/components/src/components/SquiggleViewer/ViewerProvider.tsx b/packages/components/src/components/SquiggleViewer/ViewerProvider.tsx
@@ -166,6 +166,10 @@ export class ItemStore {
   scrollViewerToPath(path: SqValuePath) {
     this.handles[path.uid()]?.scrollIntoView();
   }
+
+  focusOnPath(path: SqValuePath) {
+    this.handles[path.uid()]?.focusOnHeader();
+  }
 }
 
 type ViewerContextShape = {

diff --git a/packages/components/src/components/SquiggleViewer/keyboardNav/utils.ts b/packages/components/src/components/SquiggleViewer/keyboardNav/utils.ts
@@ -1,11 +1,3 @@
-import { SqValuePath } from "@quri/squiggle-lang";
-
-import { ItemStore } from "../ViewerProvider.js";
-
-export const focusSqValueHeader = (path: SqValuePath, itemStore: ItemStore) => {
-  itemStore.handles[path.uid()]?.focusOnHeader();
-};
-
 // Returns boolean to indicate if the key was handled. The caller might want to do something else if it wasn't.
 export function keyboardEventHandler(
   handlers: Partial<Record<string, () => void>>

diff --git a/packages/components/src/components/SquiggleViewer/keyboardNav/zoomedInSqValue.ts b/packages/components/src/components/SquiggleViewer/keyboardNav/zoomedInSqValue.ts
@@ -1,7 +1,7 @@
 import { SqValuePath } from "@quri/squiggle-lang";
 
 import { useViewerContext } from "../ViewerProvider.js";
-import { focusSqValueHeader, keyboardEventHandler } from "./utils.js";
+import { keyboardEventHandler } from "./utils.js";
 
 export function useZoomedInSqValueKeyEvent(selected: SqValuePath) {
   const {
@@ -15,7 +15,7 @@ export function useZoomedInSqValueKeyEvent(selected: SqValuePath) {
 
     // This timeout is a hack to make sure the header is zoomedIn after the reset
     setTimeout(() => {
-      focusSqValueHeader(selected, itemStore);
+      itemStore.focusOnPath(selected);
     }, 1);
   }
 
@@ -45,7 +45,7 @@ export function useZoomedInSqValueKeyEvent(selected: SqValuePath) {
     ArrowRight: () => {
       const newItem = findNode(selected)?.children()[0];
       if (newItem) {
-        focusSqValueHeader(newItem.node.path, itemStore);
+        itemStore.focusOnPath(newItem.node.path);
       }
     },
     Enter: resetToRoot,

diff --git a/packages/components/src/components/SquiggleViewer/keyboardNav/zoomedOutSqValue.ts b/packages/components/src/components/SquiggleViewer/keyboardNav/zoomedOutSqValue.ts
@@ -1,7 +1,7 @@
 import { SqValuePath } from "@quri/squiggle-lang";
 
 import { toggleCollapsed, useViewerContext } from "../ViewerProvider.js";
-import { focusSqValueHeader, keyboardEventHandler } from "./utils.js";
+import { keyboardEventHandler } from "./utils.js";
 
 export function useZoomedOutSqValueKeyEvent(selected: SqValuePath) {
   const {
@@ -14,17 +14,15 @@ export function useZoomedOutSqValueKeyEvent(selected: SqValuePath) {
   return keyboardEventHandler({
     ArrowDown: () => {
       const newPath = findNode(selected)?.next()?.node.path;
-      newPath && focusSqValueHeader(newPath, itemStore);
+      newPath && itemStore.focusOnPath(newPath);
     },
     ArrowUp: () => {
       const newPath = findNode(selected)?.prev()?.node.path;
-      newPath && focusSqValueHeader(newPath, itemStore);
+      newPath && itemStore.focusOnPath(newPath);
     },
     ArrowLeft: () => {
       const newItem = findNode(selected)?.parent();
-      newItem &&
-        !newItem.isRoot() &&
-        focusSqValueHeader(newItem.node.path, itemStore);
+      newItem && !newItem.isRoot() && itemStore.focusOnPath(newItem.node.path);
     },
     ArrowRight: () => {
       const newItem = findNode(selected)?.children().at(0);
@@ -34,10 +32,10 @@ export function useZoomedOutSqValueKeyEvent(selected: SqValuePath) {
         if (isCollapsed) {
           toggleCollapsed(itemStore, selected);
           setTimeout(() => {
-            focusSqValueHeader(newItem.node.path, itemStore);
+            itemStore.focusOnPath(newItem.node.path);
           }, 1);
         } else {
-          focusSqValueHeader(newItem.node.path, itemStore);
+          itemStore.focusOnPath(newItem.node.path);
         }
       }
     },