sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show shortcuts dialog when pressing ? (#1224)

Browse Source
This commit is contained in:
Lipis 2020-04-05 15:58:00 +03:00 committed by GitHub
parent 0eb2f7092b
commit 9a0889c698
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 317 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/appState.ts
View File

@ -39,6 +39,7 @@ export function getDefaultAppState(): AppState {
selectedElementIds: {},
collaborators: new Map(),
shouldCacheIgnoreZoom: false,
showShortcutsDialog: false,
};
}
@ -55,6 +56,7 @@ export function clearAppStateForLocalStorage(appState: AppState) {
isCollaborating,
isLoading,
errorMessage,
showShortcutsDialog,
...exportedState
} = appState;
return exportedState;

6
src/components/App.tsx
View File

@ -1006,6 +1006,12 @@ export class App extends React.Component<any, AppState> {
return;
}
if (event.key === KEYS.QUESTION_MARK) {
this.setState({
showShortcutsDialog: true,
});
}
if (event.code === "KeyC" && event.altKey && event.shiftKey) {
this.copyToClipboardAsPng();
event.preventDefault();

6
src/components/LayerUI.tsx
View File

@ -23,6 +23,7 @@ import { ZoomActions, SelectedShapeActions, ShapesSwitcher } from "./Actions";
import { Section } from "./Section";
import { RoomDialog } from "./RoomDialog";
import { ErrorDialog } from "./ErrorDialog";
import { ShortcutsDialog } from "./ShortcutsDialog";
import { LoadingMessage } from "./LoadingMessage";
interface LayerUIProps {
@ -112,6 +113,11 @@ export const LayerUI = React.memo(
onClose={() => setAppState({ errorMessage: null })}
/>
)}
{appState.showShortcutsDialog && (
<ShortcutsDialog
onClose={() => setAppState({ showShortcutsDialog: null })}
/>
)}
<FixedSideContainer side="top">
<HintViewer appState={appState} elements={elements} />
<div className="App-menu App-menu_top">

9
src/components/Modal.tsx
View File

@ -28,7 +28,14 @@ export function Modal(props: {
aria-labelledby={props.labelledBy}
>
<div className="Modal__background" onClick={props.onCloseRequest}></div>
<div className="Modal__content" style={{ maxWidth: props.maxWidth }}>
<div
className="Modal__content"
style={{
maxWidth: props.maxWidth,
maxHeight: "100%",
overflowY: "scroll",
}}
>
{props.children}
</div>
</div>,

228
src/components/ShortcutsDialog.tsx Normal file
View File

@ -0,0 +1,228 @@
import React from "react";
import { t } from "../i18n";
import { isDarwin } from "../keys";
import { Dialog } from "./Dialog";
import { getShortcutKey } from "../utils";
const ShortcutIsland = (props: {
title: string;
children: React.ReactNode;
}) => (
<div
style={{
width: "49%",
border: "1px solid #ced4da",
marginBottom: "16px",
}}
{...props}
>
<h3
style={{
margin: "0",
padding: "4px",
backgroundColor: "#e9ecef",
textAlign: "center",
}}
>
{props.title}
</h3>
{props.children}
</div>
);
const Shortcut = (props: { title: string; shortcuts: string[] }) => (
<div
style={{
borderTop: "1px solid #ced4da",
}}
{...props}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
margin: "0",
padding: "4px",
alignItems: "center",
}}
>
<div
style={{
flexBasis: 0,
flexGrow: 2,
lineHeight: 1.4,
}}
>
{props.title}
</div>
<div
style={{
display: "flex",
flexBasis: 0,
flexGrow: 1,
justifyContent: "center",
}}
>
{props.shortcuts.map((shortcut) => (
<ShortcutKey>{shortcut}</ShortcutKey>
))}
</div>
</div>
</div>
);
const ShortcutKey = (props: { children: React.ReactNode }) => (
<span
style={{
border: "1px solid #ced4da",
padding: "2px 8px",
margin: "0 8px",
backgroundColor: "#e9ecef",
borderRadius: "2px",
fontSize: "0.8em",
}}
{...props}
/>
);
const Footer = () => (
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
borderTop: "1px solid #ced4da",
marginTop: 8,
paddingTop: 16,
}}
>
<a
href="https://blog.excalidraw.com"
target="_blank"
rel="noopener noreferrer"
>
{t("shortcutsDialog.blog")}
</a>
<a
href="https://howto.excalidraw.com"
target="_blank"
rel="noopener noreferrer"
>
{t("shortcutsDialog.howto")}
</a>
<a
href="https://github.com/excalidraw/excalidraw/issues"
target="_blank"
rel="noopener noreferrer"
>
{t("shortcutsDialog.github")}
</a>
</div>
);
export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
const handleClose = React.useCallback(() => {
if (onClose) {
onClose();
}
}, [onClose]);
return (
<>
<Dialog
maxWidth={800}
onCloseRequest={handleClose}
title={t("shortcutsDialog.title")}
>
<div
style={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-between",
}}
>
<ShortcutIsland title={t("shortcutsDialog.shapes")}>
<Shortcut title={t("toolBar.selection")} shortcuts={["S", "1"]} />
<Shortcut title={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
<Shortcut title={t("toolBar.diamond")} shortcuts={["D", "3"]} />
<Shortcut title={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
<Shortcut title={t("toolBar.arrow")} shortcuts={["A", "5"]} />
<Shortcut title={t("toolBar.line")} shortcuts={["L", "6"]} />
<Shortcut title={t("toolBar.text")} shortcuts={["T", "7"]} />
<Shortcut title={t("toolBar.lock")} shortcuts={["Q"]} />
</ShortcutIsland>
<ShortcutIsland title={t("shortcutsDialog.editor")}>
<Shortcut
title={t("labels.copy")}
shortcuts={[getShortcutKey("CtrlOrCmd+C", "")]}
/>
<Shortcut
title={t("labels.paste")}
shortcuts={[getShortcutKey("CtrlOrCmd+V", "")]}
/>
<Shortcut
title={t("labels.copyAsPng")}
shortcuts={[getShortcutKey("Shift+Alt+C", "")]}
/>
<Shortcut
title={t("labels.copyStyles")}
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+C", "")]}
/>
<Shortcut
title={t("labels.pasteStyles")}
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V", "")]}
/>
<Shortcut
title={t("labels.delete")}
shortcuts={[getShortcutKey("Del", "")]}
/>
<Shortcut
title={t("labels.sendToBack")}
shortcuts={[
isDarwin
? getShortcutKey("CtrlOrCmd+Alt+[", "")
: getShortcutKey("CtrlOrCmd+Shift+[", ""),
]}
/>
<Shortcut
title={t("labels.bringToFront")}
shortcuts={[
isDarwin
? getShortcutKey("CtrlOrCmd+Alt+]", "")
: getShortcutKey("CtrlOrCmd+Shift+]", ""),
]}
/>
<Shortcut
title={t("labels.sendBackward")}
shortcuts={[getShortcutKey("CtrlOrCmd+[", "")]}
/>
<Shortcut
title={t("labels.bringForward")}
shortcuts={[getShortcutKey("CtrlOrCmd+]", "")]}
/>
<Shortcut
title={t("labels.duplicateSelection")}
shortcuts={[getShortcutKey("CtrlOrCmd+D", "")]}
/>
</ShortcutIsland>
<ShortcutIsland title={t("shortcutsDialog.view")}>
<Shortcut
title={t("buttons.zoomIn")}
shortcuts={[getShortcutKey("CtrlOrCmd++", "")]}
/>
<Shortcut
title={t("buttons.zoomOut")}
shortcuts={[getShortcutKey("CtrlOrCmd+-", "")]}
/>
<Shortcut
title={t("buttons.resetZoom")}
shortcuts={[getShortcutKey("CtrlOrCmd+0", "")]}
/>
</ShortcutIsland>
</div>
<Footer />
</Dialog>
</>
);
};

1
src/keys.ts
View File

@ -12,6 +12,7 @@ export const KEYS = {
CTRL_OR_CMD: isDarwin ? "metaKey" : "ctrlKey",
TAB: "Tab",
SPACE: " ",
QUESTION_MARK: "?",
} as const;
export type Key = keyof typeof KEYS;

9
src/locales/en.json
View File

@ -127,5 +127,14 @@
},
"errorDialog": {
"title": "Error"
},
"shortcutsDialog": {
"title": "Keyboard shortcuts",
"shapes": "Shapes",
"editor": "Editor",
"view": "View",
"blog": "Read our blog",
"howto": "Follow our guides",
"github": "Found an issue? Submit"
}
}

10
src/styles.scss
View File

@ -22,6 +22,16 @@ body {
cursor: text;
}
a {
font-weight: 500;
text-decoration: none;
color: #1c7ed6; /* OC Blue 7 */
&:hover {
text-decoration: underline;
}
}
canvas {
touch-action: none;
user-select: none;

41
src/tests/__snapshots__/regressionTests.test.tsx.snap
View File

@ -37,6 +37,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -224,6 +225,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -335,6 +337,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -587,6 +590,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -735,6 +739,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -917,6 +922,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -1106,6 +1112,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -1386,6 +1393,7 @@ Object {
"selectedElementIds": Object {},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -1985,6 +1993,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -2096,6 +2105,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -2207,6 +2217,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -2318,6 +2329,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -2451,6 +2463,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -2584,6 +2597,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -2717,6 +2731,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -2828,6 +2843,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -2939,6 +2955,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -3072,6 +3089,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -3183,6 +3201,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": true,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -3252,6 +3271,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -3930,6 +3950,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -4291,6 +4312,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -4580,6 +4602,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -4797,6 +4820,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -4958,6 +4982,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -5607,6 +5632,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -6184,6 +6210,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -6689,6 +6716,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -7123,6 +7151,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -7520,6 +7549,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -7845,6 +7875,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -8098,6 +8129,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -8295,6 +8327,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -8980,6 +9013,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -9593,6 +9627,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -10134,6 +10169,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -10599,6 +10635,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -10838,6 +10875,7 @@ Object {
"selectedElementIds": Object {},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -10891,6 +10929,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": true,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -10944,6 +10983,7 @@ Object {
},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}
@ -11225,6 +11265,7 @@ Object {
"selectedElementIds": Object {},
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
"showShortcutsDialog": false,
"viewBackgroundColor": "#ffffff",
"zoom": 1,
}

1
src/types.ts
View File

@ -56,6 +56,7 @@ export type AppState = {
}
>;
shouldCacheIgnoreZoom: boolean;
showShortcutsDialog: boolean;
};
export type PointerCoords = Readonly<{

9
src/utils.ts
View File

@ -144,16 +144,17 @@ export function resetCursor() {
document.documentElement.style.cursor = "";
}
export const getShortcutKey = (shortcut: string): string => {
export const getShortcutKey = (shortcut: string, prefix = " — "): string => {
const isMac = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
if (isMac) {
return ` — ${shortcut
return `${prefix}${shortcut
.replace("CtrlOrCmd+", "⌘")
.replace("Alt+", "⌥")
.replace("Ctrl+", "⌃")
.replace("Shift+", "⇧")}`;
.replace("Shift+", "⇧")
.replace("Del", "⌫")}`;
}
return ` — ${shortcut.replace("CtrlOrCmd", "Ctrl")}`;
return `${prefix}${shortcut.replace("CtrlOrCmd", "Ctrl")}`;
};
export function viewportCoordsToSceneCoords(
{ clientX, clientY }: { clientX: number; clientY: number },