fix: sheet gets stuck in pan mode

quadratic-client/src/app/atoms/gridPanModeAtom.ts

@@ -0,0 +1,41 @@
+import { atom, selector } from 'recoil';
+
+export enum PanMode {
+  Disabled = 'DISABLED',
+  Enabled = 'ENABLED',
+  Dragging = 'DRAGGING',
+}
+export interface GridPanMode {
+  panMode: PanMode;
+  mouseIsDown: boolean;
+  spaceIsDown: boolean;
+}
+
+export const defaultGridPanMode: GridPanMode = {
+  panMode: PanMode.Disabled,
+  mouseIsDown: false,
+  spaceIsDown: false,
+};
+
+export const gridPanModeAtom = atom<GridPanMode>({
+  key: 'gridPanMode',
+  default: defaultGridPanMode,
+  effects: [
+    ({ setSelf, onSet }) => {
+      onSet((newVal) => {
+        if (newVal.spaceIsDown && newVal.mouseIsDown) {
+          setSelf({ ...newVal, panMode: PanMode.Dragging });
+        } else if (newVal.spaceIsDown) {
+          setSelf({ ...newVal, panMode: PanMode.Enabled });
+        } else if (newVal.panMode !== PanMode.Dragging || !newVal.mouseIsDown) {
+          setSelf({ ...newVal, panMode: PanMode.Disabled });
+        }
+      });
+    },
+  ],
+});
+
+export const gridPanMode = selector<PanMode>({
+  key: 'gridPanModeSelector',
+  get: ({ get }) => get(gridPanModeAtom).panMode,
+});

quadratic-client/src/app/atoms/gridSettingsAtom.ts

@@ -5,15 +5,15 @@ import { AtomEffect, DefaultValue, atom, selector } from 'recoil';
 
 const SETTINGS_KEY = 'viewSettings';
 
-export type GridSettings = {
+export interface GridSettings {
   showGridAxes: boolean;
   showHeadings: boolean;
   showGridLines: boolean;
   showCellTypeOutlines: boolean;
   showA1Notation: boolean;
   showCodePeek: boolean;
   presentationMode: boolean;
-};
+}
 
 export const defaultGridSettings: GridSettings = {
   showGridAxes: true,

quadratic-client/src/app/events/events.ts

@@ -1,6 +1,5 @@
 import { ErrorValidation } from '@/app/gridGL/cells/CellsSheet';
 import { EditingCell } from '@/app/gridGL/HTMLGrid/hoverCell/HoverCell';
-import { PanMode } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { SheetPosTS } from '@/app/gridGL/types/size';
 import {
   JsBordersSheet,
@@ -38,7 +37,6 @@ interface EventTypes {
   hoverTooltip: (rect?: Rectangle, text?: string, subtext?: string) => void;
 
   zoom: (scale: number) => void;
-  panMode: (pan: PanMode) => void;
 
   undoRedo: (undo: boolean, redo: boolean) => void;
 

quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts

@@ -145,6 +145,11 @@ class InlineEditorKeyboard {
       }
     }
 
+    // Space key
+    else if (matchShortcut(Action.GridPanMode, e)) {
+      e.stopPropagation();
+    }
+
     // Enter key
     else if (matchShortcut(Action.SaveInlineEditor, e)) {
       e.stopPropagation();

quadratic-client/src/app/gridGL/PixiAppEffects.tsx

@@ -1,5 +1,6 @@
 import { codeEditorAtom, codeEditorShowCodeEditorAtom } from '@/app/atoms/codeEditorAtom';
 import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
+import { gridPanModeAtom } from '@/app/atoms/gridPanModeAtom';
 import { gridSettingsAtom, presentationModeAtom, showHeadingsAtom } from '@/app/atoms/gridSettingsAtom';
 import { inlineEditorAtom } from '@/app/atoms/inlineEditorAtom';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
@@ -52,5 +53,27 @@ export const PixiAppEffects = () => {
     pixiAppSettings.updateGridSettings(gridSettings, setGridSettings);
   }, [gridSettings, setGridSettings]);
 
+  const [gridPanMode, setGridPanMode] = useRecoilState(gridPanModeAtom);
+  useEffect(() => {
+    pixiAppSettings.updateGridPanMode(gridPanMode, setGridPanMode);
+  }, [gridPanMode, setGridPanMode]);
+
+  useEffect(() => {
+    const handleMouseUp = () => {
+      setGridPanMode((prev) => ({ ...prev, mouseIsDown: false }));
+    };
+
+    const disablePanMode = () => {
+      setGridPanMode((prev) => ({ ...prev, mouseIsDown: false, spaceIsDown: false }));
+    };
+
+    window.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener('blur', disablePanMode);
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp);
+      window.removeEventListener('blur', disablePanMode);
+    };
+  }, [setGridPanMode]);
+
   return null;
 };

quadratic-client/src/app/gridGL/QuadraticGrid.tsx

@@ -1,17 +1,11 @@
-import { Action } from '@/app/actions/actions';
-import { events } from '@/app/events/events';
+import { gridPanModeAtom } from '@/app/atoms/gridPanModeAtom';
 import { HTMLGridContainer } from '@/app/gridGL/HTMLGrid/HTMLGridContainer';
 import { useKeyboard } from '@/app/gridGL/interaction/keyboard/useKeyboard';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
-import { PanMode, pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
-import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 import { ImportProgress } from '@/app/ui/components/ImportProgress';
 import { Search } from '@/app/ui/components/Search';
-import { MouseEvent, useCallback, useEffect, useState } from 'react';
-
-// Keep track of state of mouse/space for panning mode
-let mouseIsDown = false;
-let spaceIsDown = false;
+import { MouseEvent, useCallback, useState } from 'react';
+import { useRecoilCallback } from 'recoil';
 
 export default function QuadraticGrid() {
   const [container, setContainer] = useState<HTMLDivElement>();
@@ -22,58 +16,22 @@ export default function QuadraticGrid() {
     }
   }, []);
 
-  const [panMode, setPanMode] = useState<PanMode>(PanMode.Disabled);
-  useEffect(() => {
-    const updatePanMode = (panMode: PanMode) => {
-      setPanMode(panMode);
-    };
-    events.on('panMode', updatePanMode);
-    return () => {
-      events.off('panMode', updatePanMode);
-    };
-  }, []);
-
-  // Pan mode
-  const onMouseUp = () => {
-    mouseIsDown = false;
-    if (panMode !== PanMode.Disabled) {
-      pixiAppSettings.changePanMode(spaceIsDown ? PanMode.Enabled : PanMode.Disabled);
-    } else {
-      pixiAppSettings.changePanMode(PanMode.Disabled);
-    }
-    window.removeEventListener('mouseup', onMouseUp);
-  };
-  const onMouseDown = (e: MouseEvent<HTMLDivElement>) => {
-    mouseIsDown = true;
-    if (panMode === PanMode.Enabled) {
-      pixiAppSettings.changePanMode(PanMode.Dragging);
-    } else if (e.button === 1) {
-      pixiAppSettings.changePanMode(PanMode.Dragging);
-    }
-    window.addEventListener('mouseup', onMouseUp);
-  };
-  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
-    if (matchShortcut(Action.GridPanMode, e)) {
-      spaceIsDown = true;
-      if (panMode === PanMode.Disabled) {
-        pixiAppSettings.changePanMode(PanMode.Enabled);
-      }
-      return true;
-    }
-    return false;
-  };
-  const onKeyUp = (e: React.KeyboardEvent<HTMLElement>) => {
-    if (matchShortcut(Action.GridPanMode, e)) {
-      spaceIsDown = false;
-      if (panMode !== PanMode.Disabled && !mouseIsDown) {
-        pixiAppSettings.changePanMode(PanMode.Disabled);
-      }
-      return true;
-    }
-    return false;
-  };
+  const handleMouseChange = useRecoilCallback(
+    ({ set }) =>
+      (e: MouseEvent) => {
+        set(gridPanModeAtom, (prev) => ({ ...prev, mouseIsDown: e.buttons === 1 && e.button === 0 }));
+      },
+    []
+  );
+  const disablePanMode = useRecoilCallback(
+    ({ set }) =>
+      () => {
+        set(gridPanModeAtom, (prev) => ({ ...prev, mouseIsDown: false, spaceIsDown: false }));
+      },
+    []
+  );
 
-  const { onKeyDown: onKeyDownFromUseKeyboard, onKeyUp: onKeyUpFromUseKeyboard } = useKeyboard();
+  const { onKeyDown, onKeyUp } = useKeyboard();
 
   return (
     <div
@@ -85,16 +43,14 @@ export default function QuadraticGrid() {
         outline: 'none',
         overflow: 'hidden',
         WebkitTapHighlightColor: 'transparent',
-        cursor: panMode === PanMode.Enabled ? 'grab' : panMode === PanMode.Dragging ? 'grabbing' : 'unset',
-      }}
-      onContextMenu={(event) => event.preventDefault()}
-      onMouseDown={onMouseDown}
-      onKeyDown={(e) => {
-        onKeyDown(e) || onKeyDownFromUseKeyboard(e);
-      }}
-      onKeyUp={(e) => {
-        onKeyUp(e) || onKeyUpFromUseKeyboard(e);
       }}
+      onContextMenu={(e) => e.preventDefault()}
+      onMouseDown={handleMouseChange}
+      onMouseUp={handleMouseChange}
+      onMouseMove={handleMouseChange}
+      onBlur={disablePanMode}
+      onKeyDown={onKeyDown}
+      onKeyUp={onKeyUp}
     >
       <HTMLGridContainer parent={container} />
       <ImportProgress />

quadratic-client/src/app/gridGL/interaction/keyboard/keyboardPanMode.ts

@@ -0,0 +1,18 @@
+import { Action } from '@/app/actions/actions';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
+import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
+
+export function keyboardPanMode(event: React.KeyboardEvent<HTMLElement>): boolean {
+  const setGridPanMode = pixiAppSettings.setGridPanMode;
+  if (!setGridPanMode) {
+    throw new Error('Expected setGridPanMode to be defined in keyboardPanMode');
+  }
+
+  if (event.type === 'keydown' && matchShortcut(Action.GridPanMode, event)) {
+    setGridPanMode((prev) => ({ ...prev, spaceIsDown: true }));
+  } else {
+    setGridPanMode((prev) => ({ ...prev, spaceIsDown: false }));
+  }
+
+  return false;
+}

quadratic-client/src/app/gridGL/interaction/keyboard/useKeyboard.ts

@@ -7,6 +7,7 @@ import { keyboardClipboard } from '@/app/gridGL/interaction/keyboard/keyboardCli
 import { keyboardCode } from '@/app/gridGL/interaction/keyboard/keyboardCode';
 import { keyboardDropdown } from '@/app/gridGL/interaction/keyboard/keyboardDropdown';
 import { keyboardLink } from '@/app/gridGL/interaction/keyboard/keyboardLink';
+import { keyboardPanMode } from '@/app/gridGL/interaction/keyboard/keyboardPanMode';
 import { keyboardPosition } from '@/app/gridGL/interaction/keyboard/keyboardPosition';
 import { keyboardSearch } from '@/app/gridGL/interaction/keyboard/keyboardSearch';
 import { keyboardSelect } from '@/app/gridGL/interaction/keyboard/keyboardSelect';
@@ -31,6 +32,7 @@ export const useKeyboard = (): {
   const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
     if (pixiAppSettings.input.show && inlineEditorHandler.isOpen()) return;
     if (
+      keyboardPanMode(event) ||
       keyboardLink(event) ||
       keyboardViewport(event) ||
       keyboardSearch(event) ||
@@ -75,7 +77,7 @@ export const useKeyboard = (): {
   };
 
   const onKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
-    if (keyboardLink(event)) {
+    if (keyboardPanMode(event) || keyboardLink(event)) {
       event.preventDefault();
       event.stopPropagation();
       return;

quadratic-client/src/app/gridGL/interaction/pointer/Pointer.ts

@@ -106,9 +106,9 @@ export class Pointer {
   };
 
   private pointerMove = (e: InteractionEvent): void => {
-    // ignore pointerMove if the target is a child of an element with class pointer-move-stop-propagation
-    const target = e.data.originalEvent.target as HTMLElement | null;
-    const isWithinPointerMoveIgnore = !!target?.closest('.pointer-move-ignore');
+    // ignore pointerMove if the target is a child of an element with class pointer-move-ignore
+    const target = e.data.originalEvent.target;
+    const isWithinPointerMoveIgnore = target instanceof HTMLElement && !!target.closest('.pointer-move-ignore');
     if (isWithinPointerMoveIgnore) return;
 
     if (this.isMoreThanOneTouch(e) || this.isOverCodeEditor(e)) return;

quadratic-client/src/app/gridGL/interaction/pointer/PointerAutoComplete.ts

@@ -1,3 +1,4 @@
+import { PanMode } from '@/app/atoms/gridPanModeAtom';
 import { events } from '@/app/events/events';
 import { multiplayer } from '@/app/web-workers/multiplayerWebWorker/multiplayer';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
@@ -6,7 +7,7 @@ import { isMobile } from 'react-device-detect';
 import { sheets } from '../../../grid/controller/Sheets';
 import { intersects } from '../../helpers/intersects';
 import { pixiApp } from '../../pixiApp/PixiApp';
-import { PanMode, pixiAppSettings } from '../../pixiApp/PixiAppSettings';
+import { pixiAppSettings } from '../../pixiApp/PixiAppSettings';
 import { Coordinate } from '../../types/size';
 
 export type StateVertical = 'expandDown' | 'expandUp' | 'shrink' | undefined;

quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts

@@ -1,8 +1,9 @@
+import { PanMode } from '@/app/atoms/gridPanModeAtom';
 import { events } from '@/app/events/events';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { intersects } from '@/app/gridGL/helpers/intersects';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
-import { PanMode, pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { rectToSheetRect } from '@/app/web-workers/quadraticCore/worker/rustConversions';
 import { Point, Rectangle } from 'pixi.js';

quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts

@@ -1,3 +1,4 @@
+import { PanMode } from '@/app/atoms/gridPanModeAtom';
 import { events } from '@/app/events/events';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
@@ -7,7 +8,7 @@ import { isMobile } from 'react-device-detect';
 import { sheets } from '../../../grid/controller/Sheets';
 import { inlineEditorMonaco } from '../../HTMLGrid/inlineEditor/inlineEditorMonaco';
 import { pixiApp } from '../../pixiApp/PixiApp';
-import { PanMode, pixiAppSettings } from '../../pixiApp/PixiAppSettings';
+import { pixiAppSettings } from '../../pixiApp/PixiAppSettings';
 import { doubleClickCell } from './doubleClickCell';
 import { DOUBLE_CLICK_TIME } from './pointerUtils';
 

quadratic-client/src/app/gridGL/interaction/pointer/PointerHeading.ts

@@ -1,3 +1,4 @@
+import { PanMode } from '@/app/atoms/gridPanModeAtom';
 import { events } from '@/app/events/events';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
 import { TransientResize } from '@/app/quadratic-core-types/index.js';
@@ -11,7 +12,7 @@ import { sheets } from '../../../grid/controller/Sheets';
 import { selectAllCells, selectColumns, selectRows } from '../../helpers/selectCells';
 import { zoomToFit } from '../../helpers/zoom';
 import { pixiApp } from '../../pixiApp/PixiApp';
-import { PanMode, pixiAppSettings } from '../../pixiApp/PixiAppSettings';
+import { pixiAppSettings } from '../../pixiApp/PixiAppSettings';
 import { DOUBLE_CLICK_TIME } from './pointerUtils';
 
 const MINIMUM_COLUMN_SIZE = 20;