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

Fixes in Shortcuts dialog and minor refactor (#1297)

Browse Source
This commit is contained in:
Lipis 2020-04-07 14:39:06 +03:00 committed by GitHub
parent e4c154f43e
commit 0c3d34261e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 96 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/actions/actionCanvas.tsx
View File

@ -90,7 +90,7 @@ export const actionZoomIn = register({
<ToolButton <ToolButton
type="button" type="button"
icon={zoomIn} icon={zoomIn}
title={`${t("buttons.zoomIn")} ${getShortcutKey("CtrlOrCmd++")}`} title={`${t("buttons.zoomIn")} — ${getShortcutKey("CtrlOrCmd++")}`}
aria-label={t("buttons.zoomIn")} aria-label={t("buttons.zoomIn")}
onClick={() => { onClick={() => {
updateData(null); updateData(null);
@ -117,7 +117,7 @@ export const actionZoomOut = register({
<ToolButton <ToolButton
type="button" type="button"
icon={zoomOut} icon={zoomOut}
title={`${t("buttons.zoomOut")} ${getShortcutKey("CtrlOrCmd+-")}`} title={`${t("buttons.zoomOut")} — ${getShortcutKey("CtrlOrCmd+-")}`}
aria-label={t("buttons.zoomOut")} aria-label={t("buttons.zoomOut")}
onClick={() => { onClick={() => {
updateData(null); updateData(null);

2
src/actions/actionDuplicateSelection.tsx
View File

@ -38,7 +38,7 @@ export const actionDuplicateSelection = register({
<ToolButton <ToolButton
type="button" type="button"
icon={clone} icon={clone}
title={`${t("labels.duplicateSelection")} ${getShortcutKey( title={`${t("labels.duplicateSelection")} — ${getShortcutKey(
"CtrlOrCmd+D", "CtrlOrCmd+D",
)}`} )}`}
aria-label={t("labels.duplicateSelection")} aria-label={t("labels.duplicateSelection")}

8
src/actions/actionZindex.tsx
View File

@ -91,7 +91,7 @@ export const actionSendBackward = register({
type="button" type="button"
className="zIndexButton" className="zIndexButton"
onClick={() => updateData(null)} onClick={() => updateData(null)}
title={`${t("labels.sendBackward")} ${getShortcutKey("CtrlOrCmd+[")}`} title={`${t("labels.sendBackward")} — ${getShortcutKey("CtrlOrCmd+[")}`}
> >
{sendBackward} {sendBackward}
</button> </button>
@ -116,7 +116,7 @@ export const actionBringForward = register({
type="button" type="button"
className="zIndexButton" className="zIndexButton"
onClick={() => updateData(null)} onClick={() => updateData(null)}
title={`${t("labels.bringForward")} ${getShortcutKey("CtrlOrCmd+]")}`} title={`${t("labels.bringForward")} — ${getShortcutKey("CtrlOrCmd+]")}`}
> >
{bringForward} {bringForward}
</button> </button>
@ -145,7 +145,7 @@ export const actionSendToBack = register({
type="button" type="button"
className="zIndexButton" className="zIndexButton"
onClick={() => updateData(null)} onClick={() => updateData(null)}
title={`${t("labels.sendToBack")} ${ title={`${t("labels.sendToBack")} — ${
isDarwin isDarwin
? getShortcutKey("CtrlOrCmd+Alt+[") ? getShortcutKey("CtrlOrCmd+Alt+[")
: getShortcutKey("CtrlOrCmd+Shift+[") : getShortcutKey("CtrlOrCmd+Shift+[")
@ -178,7 +178,7 @@ export const actionBringToFront = register({
type="button" type="button"
className="zIndexButton" className="zIndexButton"
onClick={(event) => updateData(null)} onClick={(event) => updateData(null)}
title={`${t("labels.bringToFront")} ${ title={`${t("labels.bringToFront")} — ${
isDarwin isDarwin
? getShortcutKey("CtrlOrCmd+Alt+]") ? getShortcutKey("CtrlOrCmd+Alt+]")
: getShortcutKey("CtrlOrCmd+Shift+]") : getShortcutKey("CtrlOrCmd+Shift+]")

11
src/components/Actions.tsx
View File

@ -6,7 +6,7 @@ import { hasBackground, hasStroke, hasText, getTargetElement } from "../scene";
import { t } from "../i18n"; import { t } from "../i18n";
import { SHAPES } from "../shapes"; import { SHAPES } from "../shapes";
import { ToolButton } from "./ToolButton"; import { ToolButton } from "./ToolButton";
import { capitalizeString, getShortcutKey, setCursorForShape } from "../utils"; import { capitalizeString, setCursorForShape } from "../utils";
import Stack from "./Stack"; import Stack from "./Stack";
import useIsMobile from "../is-mobile"; import useIsMobile from "../is-mobile";
@ -94,9 +94,9 @@ export function ShapesSwitcher({
<> <>
{SHAPES.map(({ value, icon }, index) => { {SHAPES.map(({ value, icon }, index) => {
const label = t(`toolBar.${value}`); const label = t(`toolBar.${value}`);
const shortcut = getShortcutKey( const shortcut = `${capitalizeString(value)[0]} ${t(
`${capitalizeString(value)[0]}, ${index + 1}`, "shortcutsDialog.or",
); )} ${index + 1}`;
return ( return (
<ToolButton <ToolButton
key={value} key={value}
@ -104,10 +104,11 @@ export function ShapesSwitcher({
icon={icon} icon={icon}
checked={elementType === value} checked={elementType === value}
name="editor-current-shape" name="editor-current-shape"
title={`${capitalizeString(label)} ${shortcut}`} title={`${capitalizeString(label)} — ${shortcut}`}
keyBindingLabel={`${index + 1}`} keyBindingLabel={`${index + 1}`}
aria-label={capitalizeString(label)} aria-label={capitalizeString(label)}
aria-keyshortcuts={`${label[0]} ${index + 1}`} aria-keyshortcuts={`${label[0]} ${index + 1}`}
data-testid={value}
onChange={() => { onChange={() => {
setAppState({ setAppState({
elementType: value, elementType: value,

6
src/components/HelpIcon.tsx
View File

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
import { getShortcutKey } from "../utils";
type HelpIconProps = { type HelpIconProps = {
title?: string; title?: string;
@ -21,10 +20,7 @@ const ICON = (
export function HelpIcon(props: HelpIconProps) { export function HelpIcon(props: HelpIconProps) {
return ( return (
<label <label title={`${props.title} — ?`} className="help-icon">
title={`${props.title} ${getShortcutKey("?")}`}
className="help-icon"
>
<div onClick={props.onClick}>{ICON}</div> <div onClick={props.onClick}>{ICON}</div>
</label> </label>
); );

3
src/components/LockIcon.tsx
View File

@ -1,7 +1,6 @@
import "./ToolIcon.scss"; import "./ToolIcon.scss";
import React from "react"; import React from "react";
import { getShortcutKey } from "../utils";
type LockIconSize = "s" | "m"; type LockIconSize = "s" | "m";
@ -46,7 +45,7 @@ export function LockIcon(props: LockIconProps) {
return ( return (
<label <label
className={`ToolIcon ToolIcon__lock ToolIcon_type_floating ${sizeCn}`} className={`ToolIcon ToolIcon__lock ToolIcon_type_floating ${sizeCn}`}
title={`${props.title} ${getShortcutKey("Q")}`} title={`${props.title} — Q`}
> >
<input <input
className="ToolIcon_type_checkbox" className="ToolIcon_type_checkbox"

121
src/components/ShortcutsDialog.tsx
View File

@ -5,7 +5,7 @@ import { Dialog } from "./Dialog";
import { getShortcutKey } from "../utils"; import { getShortcutKey } from "../utils";
const ShortcutIsland = (props: { const ShortcutIsland = (props: {
title: string; caption: string;
children: React.ReactNode; children: React.ReactNode;
}) => ( }) => (
<div <div
@ -24,13 +24,17 @@ const ShortcutIsland = (props: {
textAlign: "center", textAlign: "center",
}} }}
> >
{props.title} {props.caption}
</h3> </h3>
{props.children} {props.children}
</div> </div>
); );
const Shortcut = (props: { title: string; shortcuts: string[] }) => ( const Shortcut = (props: {
label: string;
shortcuts: string[];
isOr: boolean;
}) => (
<div <div
style={{ style={{
borderTop: "1px solid #ced4da", borderTop: "1px solid #ced4da",
@ -53,7 +57,7 @@ const Shortcut = (props: { title: string; shortcuts: string[] }) => (
lineHeight: 1.4, lineHeight: 1.4,
}} }}
> >
{props.title} {props.label}
</div> </div>
<div <div
style={{ style={{
@ -63,14 +67,23 @@ const Shortcut = (props: { title: string; shortcuts: string[] }) => (
justifyContent: "center", justifyContent: "center",
}} }}
> >
{props.shortcuts.map((shortcut) => ( {props.shortcuts.map((shortcut, index) => (
<ShortcutKey>{shortcut}</ShortcutKey> <>
<ShortcutKey>{shortcut}</ShortcutKey>
{props.isOr &&
index !== props.shortcuts.length - 1 &&
t("shortcutsDialog.or")}
</>
))} ))}
</div> </div>
</div> </div>
</div> </div>
); );
Shortcut.defaultProps = {
isOr: true,
};
const ShortcutKey = (props: { children: React.ReactNode }) => ( const ShortcutKey = (props: { children: React.ReactNode }) => (
<span <span
style={{ style={{
@ -90,7 +103,7 @@ const Footer = () => (
style={{ style={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-evenly",
borderTop: "1px solid #ced4da", borderTop: "1px solid #ced4da",
marginTop: 8, marginTop: 8,
paddingTop: 16, paddingTop: 16,
@ -142,96 +155,98 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
justifyContent: "space-between", justifyContent: "space-between",
}} }}
> >
<ShortcutIsland title={t("shortcutsDialog.shapes")}> <ShortcutIsland caption={t("shortcutsDialog.shapes")}>
<Shortcut title={t("toolBar.selection")} shortcuts={["S", "1"]} /> <Shortcut label={t("toolBar.selection")} shortcuts={["S", "1"]} />
<Shortcut title={t("toolBar.rectangle")} shortcuts={["R", "2"]} /> <Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
<Shortcut title={t("toolBar.diamond")} shortcuts={["D", "3"]} /> <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
<Shortcut title={t("toolBar.ellipse")} shortcuts={["E", "4"]} /> <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
<Shortcut title={t("toolBar.arrow")} shortcuts={["A", "5"]} /> <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
<Shortcut title={t("toolBar.line")} shortcuts={["L", "6"]} /> <Shortcut label={t("toolBar.line")} shortcuts={["L", "6"]} />
<Shortcut title={t("toolBar.text")} shortcuts={["T", "7"]} /> <Shortcut label={t("toolBar.text")} shortcuts={["T", "7"]} />
<Shortcut <Shortcut
title={t("shortcutsDialog.curvedArrow")} label={t("shortcutsDialog.curvedArrow")}
shortcuts={["A", "click", "click", "click"]} shortcuts={["A", "click", "click", "click"]}
isOr={false}
/> />
<Shortcut <Shortcut
title={t("shortcutsDialog.curvedLine")} label={t("shortcutsDialog.curvedLine")}
shortcuts={["L", "click", "click", "click"]} shortcuts={["L", "click", "click", "click"]}
isOr={false}
/> />
<Shortcut title={t("toolBar.lock")} shortcuts={["Q"]} /> <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
</ShortcutIsland> </ShortcutIsland>
<ShortcutIsland title={t("shortcutsDialog.editor")}> <ShortcutIsland caption={t("shortcutsDialog.editor")}>
<Shortcut <Shortcut
title={t("labels.selectAll")} label={t("labels.selectAll")}
shortcuts={[getShortcutKey("CtrlOrCmd+A", "")]} shortcuts={[getShortcutKey("CtrlOrCmd+A")]}
/> />
<Shortcut <Shortcut
title={t("labels.copy")} label={t("labels.copy")}
shortcuts={[getShortcutKey("CtrlOrCmd+C", "")]} shortcuts={[getShortcutKey("CtrlOrCmd+C")]}
/> />
<Shortcut <Shortcut
title={t("labels.paste")} label={t("labels.paste")}
shortcuts={[getShortcutKey("CtrlOrCmd+V", "")]} shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
/> />
<Shortcut <Shortcut
title={t("labels.copyAsPng")} label={t("labels.copyAsPng")}
shortcuts={[getShortcutKey("Shift+Alt+C", "")]} shortcuts={[getShortcutKey("Shift+Alt+C")]}
/> />
<Shortcut <Shortcut
title={t("labels.copyStyles")} label={t("labels.copyStyles")}
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+C", "")]} shortcuts={[getShortcutKey("CtrlOrCmd+Shift+C")]}
/> />
<Shortcut <Shortcut
title={t("labels.pasteStyles")} label={t("labels.pasteStyles")}
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V", "")]} shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V")]}
/> />
<Shortcut <Shortcut
title={t("labels.delete")} label={t("labels.delete")}
shortcuts={[getShortcutKey("Del", "")]} shortcuts={[getShortcutKey("Del")]}
/> />
<Shortcut <Shortcut
title={t("labels.sendToBack")} label={t("labels.sendToBack")}
shortcuts={[ shortcuts={[
isDarwin isDarwin
? getShortcutKey("CtrlOrCmd+Alt+[", "") ? getShortcutKey("CtrlOrCmd+Alt+[")
: getShortcutKey("CtrlOrCmd+Shift+[", ""), : getShortcutKey("CtrlOrCmd+Shift+["),
]} ]}
/> />
<Shortcut <Shortcut
title={t("labels.bringToFront")} label={t("labels.bringToFront")}
shortcuts={[ shortcuts={[
isDarwin isDarwin
? getShortcutKey("CtrlOrCmd+Alt+]", "") ? getShortcutKey("CtrlOrCmd+Alt+]")
: getShortcutKey("CtrlOrCmd+Shift+]", ""), : getShortcutKey("CtrlOrCmd+Shift+]"),
]} ]}
/> />
<Shortcut <Shortcut
title={t("labels.sendBackward")} label={t("labels.sendBackward")}
shortcuts={[getShortcutKey("CtrlOrCmd+[", "")]} shortcuts={[getShortcutKey("CtrlOrCmd+[")]}
/> />
<Shortcut <Shortcut
title={t("labels.bringForward")} label={t("labels.bringForward")}
shortcuts={[getShortcutKey("CtrlOrCmd+]", "")]} shortcuts={[getShortcutKey("CtrlOrCmd+]")]}
/> />
<Shortcut <Shortcut
title={t("labels.duplicateSelection")} label={t("labels.duplicateSelection")}
shortcuts={[getShortcutKey("CtrlOrCmd+D", "")]} shortcuts={[getShortcutKey("CtrlOrCmd+D")]}
/> />
</ShortcutIsland> </ShortcutIsland>
<ShortcutIsland title={t("shortcutsDialog.view")}> <ShortcutIsland caption={t("shortcutsDialog.view")}>
<Shortcut <Shortcut
title={t("buttons.zoomIn")} label={t("buttons.zoomIn")}
shortcuts={[getShortcutKey("CtrlOrCmd++", "")]} shortcuts={[getShortcutKey("CtrlOrCmd++")]}
/> />
<Shortcut <Shortcut
title={t("buttons.zoomOut")} label={t("buttons.zoomOut")}
shortcuts={[getShortcutKey("CtrlOrCmd+-", "")]} shortcuts={[getShortcutKey("CtrlOrCmd+-")]}
/> />
<Shortcut <Shortcut
title={t("buttons.resetZoom")} label={t("buttons.resetZoom")}
shortcuts={[getShortcutKey("CtrlOrCmd+0", "")]} shortcuts={[getShortcutKey("CtrlOrCmd+0")]}
/> />
<Shortcut title={t("buttons.toggleFullScreen")} shortcuts={["F"]} /> <Shortcut label={t("buttons.toggleFullScreen")} shortcuts={["F"]} />
</ShortcutIsland> </ShortcutIsland>
</div> </div>
<Footer /> <Footer />

2
src/components/ToolButton.tsx
View File

@ -8,6 +8,7 @@ type ToolButtonBaseProps = {
icon?: React.ReactNode; icon?: React.ReactNode;
"aria-label": string; "aria-label": string;
"aria-keyshortcuts"?: string; "aria-keyshortcuts"?: string;
"data-testid"?: string;
label?: string; label?: string;
title?: string; title?: string;
name?: string; name?: string;
@ -78,6 +79,7 @@ export const ToolButton = React.forwardRef(function (
name={props.name} name={props.name}
aria-label={props["aria-label"]} aria-label={props["aria-label"]}
aria-keyshortcuts={props["aria-keyshortcuts"]} aria-keyshortcuts={props["aria-keyshortcuts"]}
data-testid={props["data-testid"]}
id={props.id} id={props.id}
onChange={props.onChange} onChange={props.onChange}
checked={props.checked} checked={props.checked}

1
src/locales/en.json
View File

@ -134,6 +134,7 @@
"shortcutsDialog": { "shortcutsDialog": {
"title": "Keyboard shortcuts", "title": "Keyboard shortcuts",
"shapes": "Shapes", "shapes": "Shapes",
"or": "or",
"curvedArrow": "Curved arrow", "curvedArrow": "Curved arrow",
"curvedLine": "Curved line", "curvedLine": "Curved line",
"editor": "Editor", "editor": "Editor",

14
src/tests/queries/toolQueries.ts
View File

@ -1,19 +1,19 @@
import { queries, buildQueries } from "@testing-library/react"; import { queries, buildQueries } from "@testing-library/react";
const toolMap = { const toolMap = {
selection: "Selection — S, 1", selection: "selection",
rectangle: "Rectangle — R, 2", rectangle: "rectangle",
diamond: "Diamond — D, 3", diamond: "diamond",
ellipse: "Ellipse — E, 4", ellipse: "ellipse",
arrow: "Arrow — A, 5", arrow: "arrow",
line: "Line — L, 6", line: "line",
}; };
export type ToolName = keyof typeof toolMap; export type ToolName = keyof typeof toolMap;
const _getAllByToolName = (container: HTMLElement, tool: string) => { const _getAllByToolName = (container: HTMLElement, tool: string) => {
const toolTitle = toolMap[tool as ToolName]; const toolTitle = toolMap[tool as ToolName];
return queries.getAllByTitle(container, toolTitle); return queries.getAllByTestId(container, toolTitle);
}; };
const getMultipleError = (_container: any, tool: any) => const getMultipleError = (_container: any, tool: any) =>

6
src/utils.ts
View File

@ -161,17 +161,17 @@ export const allowFullScreen = () =>
export const exitFullScreen = () => document.exitFullscreen(); export const exitFullScreen = () => document.exitFullscreen();
export const getShortcutKey = (shortcut: string, prefix = " — "): string => { export const getShortcutKey = (shortcut: string): 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) {
return `${prefix}${shortcut return `${shortcut
.replace("CtrlOrCmd+", "⌘") .replace("CtrlOrCmd+", "⌘")
.replace("Alt+", "⌥") .replace("Alt+", "⌥")
.replace("Ctrl+", "⌃") .replace("Ctrl+", "⌃")
.replace("Shift+", "⇧") .replace("Shift+", "⇧")
.replace("Del", "⌫")}`; .replace("Del", "⌫")}`;
} }
return `${prefix}${shortcut.replace("CtrlOrCmd", "Ctrl")}`; return `${shortcut.replace("CtrlOrCmd", "Ctrl")}`;
}; };
export function viewportCoordsToSceneCoords( export function viewportCoordsToSceneCoords(
{ clientX, clientY }: { clientX: number; clientY: number }, { clientX, clientY }: { clientX: number; clientY: number },