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 (