Full Screen mode (#1212)

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;