Full Screen mode (#1212)
This commit is contained in:
parent
81b38d8808
commit
2de4fe29ad
9
.gitignore
vendored
9
.gitignore
vendored
@ -1,7 +1,10 @@
|
|||||||
.DS_Store
|
|
||||||
.vscode
|
|
||||||
*.log
|
*.log
|
||||||
|
.DS_Store
|
||||||
|
.envrc
|
||||||
|
.now
|
||||||
|
.vscode
|
||||||
build
|
build
|
||||||
|
firebase/
|
||||||
logs
|
logs
|
||||||
node_modules
|
node_modules
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
@ -9,5 +12,3 @@ static
|
|||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
yarn.lock
|
yarn.lock
|
||||||
.envrc
|
|
||||||
firebase/
|
|
||||||
|
@ -4,6 +4,8 @@ import { ToolButton } from "../components/ToolButton";
|
|||||||
import { t } from "../i18n";
|
import { t } from "../i18n";
|
||||||
import { showSelectedShapeActions } from "../element";
|
import { showSelectedShapeActions } from "../element";
|
||||||
import { register } from "./register";
|
import { register } from "./register";
|
||||||
|
import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
|
||||||
|
import { KEYS } from "../keys";
|
||||||
|
|
||||||
export const actionToggleCanvasMenu = register({
|
export const actionToggleCanvasMenu = register({
|
||||||
name: "toggleCanvasMenu",
|
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,
|
||||||
|
});
|
||||||
|
@ -36,4 +36,8 @@ export {
|
|||||||
} from "./actionExport";
|
} from "./actionExport";
|
||||||
|
|
||||||
export { actionCopyStyles, actionPasteStyles } from "./actionStyles";
|
export { actionCopyStyles, actionPasteStyles } from "./actionStyles";
|
||||||
export { actionToggleCanvasMenu, actionToggleEditMenu } from "./actionMenu";
|
export {
|
||||||
|
actionToggleCanvasMenu,
|
||||||
|
actionToggleEditMenu,
|
||||||
|
actionFullScreen,
|
||||||
|
} from "./actionMenu";
|
||||||
|
@ -48,7 +48,8 @@ export type ActionName =
|
|||||||
| "zoomIn"
|
| "zoomIn"
|
||||||
| "zoomOut"
|
| "zoomOut"
|
||||||
| "resetZoom"
|
| "resetZoom"
|
||||||
| "changeFontFamily";
|
| "changeFontFamily"
|
||||||
|
| "toggleFullScreen";
|
||||||
|
|
||||||
export interface Action {
|
export interface Action {
|
||||||
name: ActionName;
|
name: ActionName;
|
||||||
|
@ -219,6 +219,7 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
|
|||||||
title={t("buttons.resetZoom")}
|
title={t("buttons.resetZoom")}
|
||||||
shortcuts={[getShortcutKey("CtrlOrCmd+0", "")]}
|
shortcuts={[getShortcutKey("CtrlOrCmd+0", "")]}
|
||||||
/>
|
/>
|
||||||
|
<Shortcut title={t("buttons.toggleFullScreen")} shortcuts={["F"]} />
|
||||||
</ShortcutIsland>
|
</ShortcutIsland>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
@ -13,6 +13,7 @@ export const KEYS = {
|
|||||||
TAB: "Tab",
|
TAB: "Tab",
|
||||||
SPACE: " ",
|
SPACE: " ",
|
||||||
QUESTION_MARK: "?",
|
QUESTION_MARK: "?",
|
||||||
|
F_KEY_CODE: 70,
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
export type Key = keyof typeof KEYS;
|
export type Key = keyof typeof KEYS;
|
||||||
|
@ -69,7 +69,8 @@
|
|||||||
"undo": "Undo",
|
"undo": "Undo",
|
||||||
"redo": "Redo",
|
"redo": "Redo",
|
||||||
"roomDialog": "Start live collaboration",
|
"roomDialog": "Start live collaboration",
|
||||||
"createNewRoom": "Create new room"
|
"createNewRoom": "Create new room",
|
||||||
|
"toggleFullScreen": "Toggle full screen"
|
||||||
},
|
},
|
||||||
"alerts": {
|
"alerts": {
|
||||||
"clearReset": "This will clear the whole canvas. Are you sure?",
|
"clearReset": "This will clear the whole canvas. Are you sure?",
|
||||||
|
@ -144,6 +144,14 @@ export function resetCursor() {
|
|||||||
document.documentElement.style.cursor = "";
|
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 => {
|
export const getShortcutKey = (shortcut: string, prefix = " — "): string => {
|
||||||
const isMac = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
|
const isMac = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
|
||||||
if (isMac) {
|
if (isMac) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user