diff --git a/src/components/HintViewer.tsx b/src/components/HintViewer.tsx index 985953a0a..843233e47 100644 --- a/src/components/HintViewer.tsx +++ b/src/components/HintViewer.tsx @@ -11,14 +11,16 @@ import { } from "../element/typeChecks"; import { getShortcutKey } from "../utils"; -interface Hint { +interface HintViewerProps { appState: AppState; elements: readonly NonDeletedExcalidrawElement[]; + isMobile: boolean; } -const getHints = ({ appState, elements }: Hint) => { +const getHints = ({ appState, elements, isMobile }: HintViewerProps) => { const { elementType, isResizing, isRotating, lastPointerDownWith } = appState; const multiMode = appState.multiElement !== null; + if (elementType === "arrow" || elementType === "line") { if (!multiMode) { return t("hints.linearElement"); @@ -39,6 +41,7 @@ const getHints = ({ appState, elements }: Hint) => { } const selectedElements = getSelectedElements(elements, appState); + if ( isResizing && lastPointerDownWith === "mouse" && @@ -74,13 +77,22 @@ const getHints = ({ appState, elements }: Hint) => { return t("hints.text_editing"); } + if (elementType === "selection" && !selectedElements.length && !isMobile) { + return t("hints.canvasPanning"); + } + return null; }; -export const HintViewer = ({ appState, elements }: Hint) => { +export const HintViewer = ({ + appState, + elements, + isMobile, +}: HintViewerProps) => { let hint = getHints({ appState, elements, + isMobile, }); if (!hint) { return null; diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 98fbb8d2e..41ecd4f81 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -624,7 +624,11 @@ const LayerUI = ({ padding={1} className={clsx({ "zen-mode": zenModeEnabled })} > - + {heading} )} - + ); }; diff --git a/src/locales/en.json b/src/locales/en.json index 42f99efcc..5a40ea4dc 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -189,6 +189,7 @@ "shapes": "Shapes" }, "hints": { + "canvasPanning": "To move canvas, hold mouse wheel or spacebar while dragging", "linearElement": "Click to start multiple points, drag for single line", "freeDraw": "Click and drag, release when you're finished", "text": "Tip: you can also add text by double-clicking anywhere with the selection tool",