Full Screen mode (#1212)

.gitignore

@@ -1,7 +1,10 @@
-.DS_Store
-.vscode
 *.log
+.DS_Store
+.envrc
+.now
+.vscode
 build
+firebase/
 logs
 node_modules
 npm-debug.log*
@@ -9,5 +12,3 @@ static
 yarn-debug.log*
 yarn-error.log*
 yarn.lock
-.envrc
-firebase/

src/actions/actionMenu.tsx

@@ -4,6 +4,8 @@ import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { showSelectedShapeActions } from "../element";
 import { register } from "./register";
+import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
+import { KEYS } from "../keys";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -45,3 +47,19 @@ export const actionToggleEditMenu = register({
     />
   ),
 });
+
+export const actionFullScreen = register({
+  name: "toggleFullScreen",
+  perform: () => {
+    if (!isFullScreen()) {
+      allowFullScreen();
+    }
+    if (isFullScreen()) {
+      exitFullScreen();
+    }
+    return {
+      commitToHistory: false,
+    };
+  },
+  keyTest: (event) => event.keyCode === KEYS.F_KEY_CODE,
+});

src/actions/index.ts

@@ -36,4 +36,8 @@ export {
 } from "./actionExport";
 
 export { actionCopyStyles, actionPasteStyles } from "./actionStyles";
-export { actionToggleCanvasMenu, actionToggleEditMenu } from "./actionMenu";
+export {
+  actionToggleCanvasMenu,
+  actionToggleEditMenu,
+  actionFullScreen,
+} from "./actionMenu";

src/actions/types.ts

@@ -48,7 +48,8 @@ export type ActionName =
   | "zoomIn"
   | "zoomOut"
   | "resetZoom"
-  | "changeFontFamily";
+  | "changeFontFamily"
+  | "toggleFullScreen";
 
 export interface Action {
   name: ActionName;

src/components/ShortcutsDialog.tsx

@@ -219,6 +219,7 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
               title={t("buttons.resetZoom")}
               shortcuts={[getShortcutKey("CtrlOrCmd+0", "")]}
             />
+            <Shortcut title={t("buttons.toggleFullScreen")} shortcuts={["F"]} />
           </ShortcutIsland>
         </div>
         <Footer />

src/keys.ts

@@ -13,6 +13,7 @@ export const KEYS = {
   TAB: "Tab",
   SPACE: " ",
   QUESTION_MARK: "?",
+  F_KEY_CODE: 70,
 } as const;
 
 export type Key = keyof typeof KEYS;

src/locales/en.json

@@ -69,7 +69,8 @@
     "undo": "Undo",
     "redo": "Redo",
     "roomDialog": "Start live collaboration",
-    "createNewRoom": "Create new room"
+    "createNewRoom": "Create new room",
+    "toggleFullScreen": "Toggle full screen"
   },
   "alerts": {
     "clearReset": "This will clear the whole canvas. Are you sure?",

src/utils.ts

@@ -144,6 +144,14 @@ export function resetCursor() {
   document.documentElement.style.cursor = "";
 }
 
+export const isFullScreen = () =>
+  document.fullscreenElement?.nodeName === "HTML";
+
+export const allowFullScreen = () =>
+  document.documentElement.requestFullscreen();
+
+export const exitFullScreen = () => document.exitFullscreen();
+
 export const getShortcutKey = (shortcut: string, prefix = " — "): string => {
   const isMac = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
   if (isMac) {