diff --git a/.gitignore b/.gitignore
index 8a775d78..bf453146 100644
--- a/.gitignore
+++ b/.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/
diff --git a/src/actions/actionMenu.tsx b/src/actions/actionMenu.tsx
index 3db133e6..844e951f 100644
--- a/src/actions/actionMenu.tsx
+++ b/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,
+});
diff --git a/src/actions/index.ts b/src/actions/index.ts
index e9dcf88f..7680cbdf 100644
--- a/src/actions/index.ts
+++ b/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";
diff --git a/src/actions/types.ts b/src/actions/types.ts
index d95c0c94..786477bd 100644
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -48,7 +48,8 @@ export type ActionName =
| "zoomIn"
| "zoomOut"
| "resetZoom"
- | "changeFontFamily";
+ | "changeFontFamily"
+ | "toggleFullScreen";
export interface Action {
name: ActionName;
diff --git a/src/components/ShortcutsDialog.tsx b/src/components/ShortcutsDialog.tsx
index 7854625c..fa1727f1 100644
--- a/src/components/ShortcutsDialog.tsx
+++ b/src/components/ShortcutsDialog.tsx
@@ -219,6 +219,7 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
title={t("buttons.resetZoom")}
shortcuts={[getShortcutKey("CtrlOrCmd+0", "")]}
/>
+
diff --git a/src/keys.ts b/src/keys.ts
index e91aba12..dd2c6bed 100644
--- a/src/keys.ts
+++ b/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;
diff --git a/src/locales/en.json b/src/locales/en.json
index 4214b521..1731c86c 100644
--- a/src/locales/en.json
+++ b/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?",
diff --git a/src/utils.ts b/src/utils.ts
index 2c05a8b2..965e30ec 100644
--- a/src/utils.ts
+++ b/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) {