Streamline navigation with keyboard

Author: unageek

src/renderer/ColorButton.tsx

@@ -17,7 +17,7 @@ export const ColorButton = (props: ColorButtonProps): ReactNode => {
   return (
     <Popover positioning="below-start" trapFocus={true}>
       <PopoverTrigger>
-        <Button icon={<ColorWell color={props.color} />} title="Color"></Button>
+        <Button icon={<ColorWell color={props.color} />} title="Color" />
       </PopoverTrigger>
       <PopoverSurface>
         <ColorPicker

src/renderer/GraphBar.tsx

@@ -50,18 +50,18 @@ export const GraphBar = (props: GraphBarProps): ReactNode => {
   const dispatch = useDispatch();
   const graph = useSelector((s) => s.graphs.byId[props.graphId]);
   const relationInputActionsRef = useRef<RelationInputActions>(null);
-  const tabsterAttributes = useTabsterAttributes({
+  const dragHandleTabsterAttributes = useTabsterAttributes({
     focusable: {
       ignoreKeydown: {
-        ArrowDown: true,
-        ArrowLeft: true,
-        ArrowRight: true,
-        ArrowUp: true,
-        End: true,
-        Home: true,
-        PageDown: true,
-        PageUp: true,
-        Tab: true,
+        ArrowDown: draggingWithKeyboard,
+        ArrowLeft: draggingWithKeyboard,
+        ArrowRight: draggingWithKeyboard,
+        ArrowUp: draggingWithKeyboard,
+        End: draggingWithKeyboard,
+        Home: draggingWithKeyboard,
+        PageDown: draggingWithKeyboard,
+        PageUp: draggingWithKeyboard,
+        Tab: draggingWithKeyboard,
       },
     },
   });
@@ -84,7 +84,7 @@ export const GraphBar = (props: GraphBarProps): ReactNode => {
     <Toolbar style={{ background: tokens.colorNeutralBackground1 }}>
       <ToolbarButton
         {...dragHandleProps}
-        {...(draggingWithKeyboard ? tabsterAttributes : {})}
+        {...dragHandleTabsterAttributes}
         appearance="transparent"
         icon={<ReOrderDotsVerticalRegular />}
         style={{

src/renderer/GraphView.tsx

@@ -71,7 +71,10 @@ export const GraphView = (
   const store = useStore<AppState>();
   const secondMount = useRef(false);
   const styles = useStyles();
-  const arrowNavigationGroup = useArrowNavigationGroup({ axis: "vertical" });
+  const arrowNavigationGroup = useArrowNavigationGroup({
+    axis: "both",
+    circular: true,
+  });
   const [canZoomIn, setCanZoomIn] = useState(false);
   const [canZoomOut, setCanZoomOut] = useState(false);
 

src/renderer/PenButton.tsx

@@ -31,7 +31,10 @@ export const PenButton = (props: PenButtonProps): ReactNode => {
     props.thickness.toString(),
   );
   const [thicknessErrorMessage, setThicknessErrorMessage] = useState<string>();
-  const arrowNavigationGroup = useArrowNavigationGroup({ axis: "horizontal" });
+  const arrowNavigationGroup = useArrowNavigationGroup({
+    axis: "horizontal",
+    circular: true,
+  });
 
   const validateThickness = useMemo(
     () =>

src/renderer/RelationInput.tsx

@@ -1,4 +1,3 @@
-import { useTabsterAttributes } from "@fluentui/react-tabster";
 import { debounce } from "lodash";
 import {
   ReactNode,
@@ -332,21 +331,6 @@ export const RelationInput = (props: RelationInputProps): ReactNode => {
   const [validationError, setValidationError] = useState<RelationError>();
   const [showValidationError, setShowValidationError] = useState(false);
 
-  const tabsterAttributes = useTabsterAttributes({
-    focusable: {
-      ignoreKeydown: {
-        ArrowDown: true,
-        ArrowLeft: true,
-        ArrowRight: true,
-        ArrowUp: true,
-        End: true,
-        Home: true,
-        PageDown: true,
-        PageUp: true,
-      },
-    },
-  });
-
   const decorate = useCallback(
     (entry: S.NodeEntry): S.Range[] => {
       const [node, path] = entry;
@@ -514,7 +498,6 @@ export const RelationInput = (props: RelationInputProps): ReactNode => {
         initialValue={initialValue}
       >
         <Editable
-          {...tabsterAttributes}
           className="relation-input"
           decorate={decorate}
           onKeyDown={(e) => {
@@ -551,7 +534,6 @@ export const RelationInput = (props: RelationInputProps): ReactNode => {
     decorate,
     editor,
     initialValue,
-    tabsterAttributes,
     onEnterKeyPressed,
     updateRelationDebounced,
     updateTokens,

src/renderer/SymbolsButton.tsx

@@ -29,7 +29,10 @@ export const SymbolsButton = (props: SymbolsButtonProps): ReactNode => {
   const { onDismissed } = props;
   const [showCallout, setShowCallout] = useState(false);
   const styles = useStyles();
-  const arrowNavigationGroup = useArrowNavigationGroup({ axis: "grid-linear" });
+  const arrowNavigationGroup = useArrowNavigationGroup({
+    axis: "grid-linear",
+    circular: true,
+  });
 
   const setShowCalloutDebounced = useMemo(
     () =>