diff --git a/src/gridGL/interaction/keyboard/keyboardViewport.ts b/src/gridGL/interaction/keyboard/keyboardViewport.ts index cbf151e992..53404f751c 100644 --- a/src/gridGL/interaction/keyboard/keyboardViewport.ts +++ b/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; diff --git a/src/gridGL/interaction/keyboard/useKeyboard.ts b/src/gridGL/interaction/keyboard/useKeyboard.ts index ef6acda2bb..ba47dd714e 100644 --- a/src/gridGL/interaction/keyboard/useKeyboard.ts +++ b/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, ] ); diff --git a/src/gridGL/pixiApp/PixiApp.ts b/src/gridGL/pixiApp/PixiApp.ts index 3461e98e60..6822124c76 100644 --- a/src/gridGL/pixiApp/PixiApp.ts +++ b/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); diff --git a/src/gridGL/pixiApp/PixiAppSettings.ts b/src/gridGL/pixiApp/PixiAppSettings.ts index bef91e0587..5e775fcbfd 100644 --- a/src/gridGL/pixiApp/PixiAppSettings.ts +++ b/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 { diff --git a/src/ui/QuadraticUI.tsx b/src/ui/QuadraticUI.tsx index 88af6ba733..58a0912434 100644 --- a/src/ui/QuadraticUI.tsx +++ b/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 (
{editorInteractionState.showCellTypeMenu && } {showDebugMenu && } - + {!presentationMode && } {editorInteractionState.showCommandPalette && } {editorInteractionState.showGoToMenu && } @@ -57,7 +65,8 @@ export default function QuadraticUI(props: Props) {
- + {!presentationMode && } + {presentationMode && } ); } diff --git a/src/ui/components/PresentationModeHint.tsx b/src/ui/components/PresentationModeHint.tsx new file mode 100644 index 0000000000..5807bcbf99 --- /dev/null +++ b/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(false); + + useEffect(() => { + if (presentationMode) { + setOpen(true); + } + }, [presentationMode]); + + return ( + { + setOpen(false); + }} + autoHideDuration={5000} + message={`Press “${KeyboardSymbols.Command}.” to exit presentation mode.`} + /> + ); +} diff --git a/src/ui/menus/CommandPalette/ListItems/View.tsx b/src/ui/menus/CommandPalette/ListItems/View.tsx index 555a6614d6..f9f9fba00d 100644 --- a/src/ui/menus/CommandPalette/ListItems/View.tsx +++ b/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 ( + // } + // action={() => { + // setShowDebugMenu(!showDebugMenu); + // }} + // /> + // ); + // }, + // }, + { + label: 'View: Presentation mode', + Component: (props: any) => { + const { presentationMode, setPresentationMode } = useGridSettings(); + return ( + } + action={() => { + setPresentationMode(!presentationMode); + }} + shortcut="." + shortcutModifiers={[KeyboardSymbols.Command]} + /> + ); + }, + }, { label: 'View: Zoom in', Component: (props: CommandPaletteListItemSharedProps) => ( diff --git a/src/ui/menus/TopBar/SubMenus/QuadraticMenu.tsx b/src/ui/menus/TopBar/SubMenus/QuadraticMenu.tsx index 897f4d5af2..623ac559a5 100644 --- a/src/ui/menus/TopBar/SubMenus/QuadraticMenu.tsx +++ b/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 { > Show cell type outlines + + settings.setPresentationMode(!settings.presentationMode)} + > + Presentation mode + {/* Commented out because the editor switches this state automatically when the user is editing a formula. diff --git a/src/ui/menus/TopBar/SubMenus/useGridSettings.ts b/src/ui/menus/TopBar/SubMenus/useGridSettings.ts index 2a6d5794ab..39968e8510 100644 --- a/src/ui/menus/TopBar/SubMenus/useGridSettings.ts +++ b/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,6 +103,18 @@ export const useGridSettings = (): GridSettingsReturn => { [settings, setSettings] ); + const setPresentationMode = useCallback( + (value: boolean) => { + if (value !== settings.presentationMode) { + setSettings({ + ...settings, + presentationMode: value, + }); + } + }, + [settings, setSettings] + ); + return { ...settings, setShowGridAxes, @@ -106,5 +122,6 @@ export const useGridSettings = (): GridSettingsReturn => { setShowGridLines, setShowCellTypeOutlines, setShowA1Notation, + setPresentationMode, }; };