feat: Presentation Mode

src/gridGL/interaction/keyboard/keyboardViewport.ts

@@ -16,6 +16,8 @@ export function keyboardViewport(options: {
   changeItalic: Function;
   format: MultipleFormat;
   pointer: Pointer;
+  presentationMode: boolean;
+  setPresentationMode: Function;
 }): boolean {
   const {
     changeBold,
@@ -27,12 +29,13 @@ export function keyboardViewport(options: {
     viewport,
     editorInteractionState,
     setEditorInteractionState,
-    // pointer,
+    presentationMode,
+    setPresentationMode,
   } = options;
 
   if (!viewport || event.altKey) return false;
 
-  if ((event.metaKey || event.ctrlKey) && event.code === 'KeyP') {
+  if ((event.metaKey || event.ctrlKey) && (event.code === 'KeyP' || event.code === 'KeyK' || event.code === 'Slash')) {
     setEditorInteractionState({
       ...editorInteractionState,
       showCellTypeMenu: false,
@@ -41,11 +44,17 @@ export function keyboardViewport(options: {
     });
     return true;
   }
+
   if ((event.metaKey || event.ctrlKey) && event.code === 'Backslash') {
     clearAllFormatting();
     return true;
   }
 
+  if ((event.metaKey || event.ctrlKey) && event.code === 'Period') {
+    setPresentationMode(!presentationMode);
+    return true;
+  }
+
   if ((event.metaKey || event.ctrlKey) && event.code === 'KeyB') {
     changeBold(!(format.bold === true));
     return true;

src/gridGL/interaction/keyboard/useKeyboard.ts

@@ -13,6 +13,7 @@ import { keyboardUndoRedo } from './keyboardUndoRedo';
 import { useFormatCells } from '../../../ui/menus/TopBar/SubMenus/useFormatCells';
 import { useGetSelection } from '../../../ui/menus/TopBar/SubMenus/useGetSelection';
 import { useClearAllFormatting } from '../../../ui/menus/TopBar/SubMenus/useClearAllFormatting';
+import { useGridSettings } from '../../../ui/menus/TopBar/SubMenus/useGridSettings';
 
 interface IProps {
   interactionState: GridInteractionState;
@@ -37,6 +38,7 @@ export const useKeyboard = (props: IProps): { onKeyDown: (event: React.KeyboardE
   const { format } = useGetSelection(sheetController.sheet);
   const { changeBold, changeItalic } = useFormatCells(sheetController, app);
   const { clearAllFormatting } = useClearAllFormatting(sheetController, app);
+  const { presentationMode, setPresentationMode } = useGridSettings();
 
   const keyDownWindow = useCallback(
     (event: KeyboardEvent): void => {
@@ -54,6 +56,8 @@ export const useKeyboard = (props: IProps): { onKeyDown: (event: React.KeyboardE
           changeItalic,
           format,
           pointer: app.input,
+          presentationMode,
+          setPresentationMode,
         })
       ) {
         event.stopPropagation();
@@ -71,6 +75,8 @@ export const useKeyboard = (props: IProps): { onKeyDown: (event: React.KeyboardE
       changeBold,
       changeItalic,
       format,
+      presentationMode,
+      setPresentationMode,
     ]
   );
 

src/gridGL/pixiApp/PixiApp.ts

@@ -169,7 +169,7 @@ export class PixiApp {
     this.destroyed = true;
   }
 
-  private resize = (): void => {
+  resize(): void {
     if (!this.parent || this.destroyed) return;
     const width = this.parent.offsetWidth;
     const height = this.parent.offsetHeight;
@@ -182,7 +182,7 @@ export class PixiApp {
     this.headings.dirty = true;
     this.cursor.dirty = true;
     this.cells.dirty = true;
-  };
+  }
 
   setZoomState(value: number): void {
     zoomInOut(this.viewport, value);

src/gridGL/pixiApp/PixiAppSettings.ts

@@ -35,7 +35,10 @@ export class PixiAppSettings {
     this.app.cells.dirty = true;
 
     // only rebuild quadrants if showCellTypeOutlines change
-    if (this.lastSettings && this.lastSettings.showCellTypeOutlines !== this.settings.showCellTypeOutlines) {
+    if (
+      (this.lastSettings && this.lastSettings.showCellTypeOutlines !== this.settings.showCellTypeOutlines) ||
+      (this.lastSettings && this.lastSettings.presentationMode !== this.settings.presentationMode)
+    ) {
       this.app.quadrants.build();
     }
     this.lastSettings = this.settings;
@@ -63,16 +66,16 @@ export class PixiAppSettings {
   }
 
   get showGridLines(): boolean {
-    return this.settings.showGridLines;
+    return !this.settings.presentationMode && this.settings.showGridLines;
   }
   get showGridAxes(): boolean {
-    return this.settings.showGridAxes;
+    return !this.settings.presentationMode && this.settings.showGridAxes;
   }
   get showHeadings(): boolean {
-    return this.settings.showHeadings;
+    return !this.settings.presentationMode && this.settings.showHeadings;
   }
   get showCellTypeOutlines(): boolean {
-    return this.settings.showCellTypeOutlines;
+    return !this.settings.presentationMode && this.settings.showCellTypeOutlines;
   }
 
   get showA1Notation(): boolean {

src/ui/QuadraticUI.tsx

@@ -12,6 +12,8 @@ import { useEffect, useState } from 'react';
 import { PixiApp } from '../gridGL/pixiApp/PixiApp';
 import { SheetController } from '../grid/controller/sheetController';
 import CellTypeMenu from './menus/CellTypeMenu';
+import { useGridSettings } from './menus/TopBar/SubMenus/useGridSettings';
+import PresentationModeHint from './components/PresentationModeHint';
 
 interface Props {
   sheetController: SheetController;
@@ -20,6 +22,7 @@ interface Props {
 export default function QuadraticUI(props: Props) {
   const [showDebugMenu] = useLocalStorage('showDebugMenu', false);
   const editorInteractionState = useRecoilValue(editorInteractionStateAtom);
+  const { presentationMode } = useGridSettings();
 
   const [app] = useState(() => new PixiApp(props.sheetController));
 
@@ -29,6 +32,11 @@ export default function QuadraticUI(props: Props) {
     sheetController.setApp(app);
   }, [sheetController, app]);
 
+  // Resize the canvas when user goes in/out of presentation mode
+  useEffect(() => {
+    app.resize();
+  }, [presentationMode, app]);
+
   return (
     <div
       style={{
@@ -40,7 +48,7 @@ export default function QuadraticUI(props: Props) {
     >
       {editorInteractionState.showCellTypeMenu && <CellTypeMenu></CellTypeMenu>}
       {showDebugMenu && <DebugMenu sheet={sheetController.sheet} />}
-      <TopBar app={app} sheetController={sheetController} />
+      {!presentationMode && <TopBar app={app} sheetController={sheetController} />}
       {editorInteractionState.showCommandPalette && <CommandPalette app={app} sheetController={sheetController} />}
       {editorInteractionState.showGoToMenu && <GoTo app={app} sheetController={sheetController} />}
 
@@ -57,7 +65,8 @@ export default function QuadraticUI(props: Props) {
         <CodeEditor editorInteractionState={editorInteractionState} sheet_controller={sheetController} />
       </div>
 
-      <BottomBar sheet={sheetController.sheet} />
+      {!presentationMode && <BottomBar sheet={sheetController.sheet} />}
+      {presentationMode && <PresentationModeHint />}
     </div>
   );
 }

src/ui/components/PresentationModeHint.tsx

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { Snackbar } from '@mui/material';
+import { useGridSettings } from '../menus/TopBar/SubMenus/useGridSettings';
+import { KeyboardSymbols } from '../../helpers/keyboardSymbols';
+
+export default function PresentationModeHint() {
+  const { presentationMode } = useGridSettings();
+  const [open, setOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (presentationMode) {
+      setOpen(true);
+    }
+  }, [presentationMode]);
+
+  return (
+    <Snackbar
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      open={open}
+      onClose={() => {
+        setOpen(false);
+      }}
+      autoHideDuration={5000}
+      message={`Press “${KeyboardSymbols.Command}.” to exit presentation mode.`}
+    />
+  );
+}

src/ui/menus/CommandPalette/ListItems/View.tsx

@@ -83,6 +83,38 @@ const ListItems = [
   //     );
   //   },
   // },
+  // {
+  //   label: 'View: Show debug menu',
+  //   Component: (props: CommandPaletteListItemSharedProps) => {
+  //     const [showDebugMenu, setShowDebugMenu] = useLocalStorage('showDebugMenu', false);
+  //     return (
+  //       <CommandPaletteListItem
+  //         {...props}
+  //         icon={<CommandPaletteListItemCheckbox checked={showDebugMenu} />}
+  //         action={() => {
+  //           setShowDebugMenu(!showDebugMenu);
+  //         }}
+  //       />
+  //     );
+  //   },
+  // },
+  {
+    label: 'View: Presentation mode',
+    Component: (props: any) => {
+      const { presentationMode, setPresentationMode } = useGridSettings();
+      return (
+        <CommandPaletteListItem
+          {...props}
+          icon={<CommandPaletteListItemCheckbox checked={presentationMode} />}
+          action={() => {
+            setPresentationMode(!presentationMode);
+          }}
+          shortcut="."
+          shortcutModifiers={[KeyboardSymbols.Command]}
+        />
+      );
+    },
+  },
   {
     label: 'View: Zoom in',
     Component: (props: CommandPaletteListItemSharedProps) => (

src/ui/menus/TopBar/SubMenus/QuadraticMenu.tsx

@@ -127,7 +127,7 @@ export const QuadraticMenu = (props: Props) => {
             checked={settings.showGridAxes}
             onClick={() => settings.setShowGridAxes(!settings.showGridAxes)}
           >
-            Show axis
+            Show grid axis
           </MenuItem>
           <MenuItem
             type="checkbox"
@@ -143,6 +143,14 @@ export const QuadraticMenu = (props: Props) => {
           >
             Show cell type outlines
           </MenuItem>
+          <MenuDivider />
+          <MenuItem
+            type="checkbox"
+            checked={settings.presentationMode}
+            onClick={() => settings.setPresentationMode(!settings.presentationMode)}
+          >
+            Presentation mode
+          </MenuItem>
           {/* 
           Commented out because the editor switches this state automatically when the user
           is editing a formula.

src/ui/menus/TopBar/SubMenus/useGridSettings.ts

@@ -7,6 +7,7 @@ export interface GridSettings {
   showGridLines: boolean;
   showCellTypeOutlines: boolean;
   showA1Notation: boolean;
+  presentationMode: boolean;
 }
 
 export const defaultGridSettings: GridSettings = {
@@ -15,6 +16,7 @@ export const defaultGridSettings: GridSettings = {
   showGridLines: true,
   showCellTypeOutlines: true,
   showA1Notation: false,
+  presentationMode: false,
 };
 
 interface GridSettingsReturn {
@@ -23,11 +25,13 @@ interface GridSettingsReturn {
   showGridLines: boolean;
   showCellTypeOutlines: boolean;
   showA1Notation: boolean;
+  presentationMode: boolean;
   setShowGridAxes: (value: boolean) => void;
   setShowHeadings: (value: boolean) => void;
   setShowGridLines: (value: boolean) => void;
   setShowCellTypeOutlines: (value: boolean) => void;
   setShowA1Notation: (value: boolean) => void;
+  setPresentationMode: (value: boolean) => void;
 }
 
 export const useGridSettings = (): GridSettingsReturn => {
@@ -99,12 +103,25 @@ export const useGridSettings = (): GridSettingsReturn => {
     [settings, setSettings]
   );
 
+  const setPresentationMode = useCallback(
+    (value: boolean) => {
+      if (value !== settings.presentationMode) {
+        setSettings({
+          ...settings,
+          presentationMode: value,
+        });
+      }
+    },
+    [settings, setSettings]
+  );
+
   return {
     ...settings,
     setShowGridAxes,
     setShowHeadings,
     setShowGridLines,
     setShowCellTypeOutlines,
     setShowA1Notation,
+    setPresentationMode,
   };
 };