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",