From 3369035f40d9e5cc4fae0ba22effe6f3ab9f2591 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Mon, 1 Nov 2021 13:36:06 +0100
Subject: [PATCH] feat: add hint around canvas panning (#4159)

---
 src/components/HintViewer.tsx | 18 +++++++++++++++---
 src/components/LayerUI.tsx    |  6 +++++-
 src/components/MobileMenu.tsx |  2 +-
 src/locales/en.json           |  1 +
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/HintViewer.tsx b/src/components/HintViewer.tsx
index 985953a0..843233e4 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 98fbb8d2..41ecd4f8 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -624,7 +624,11 @@ const LayerUI = ({
                       padding={1}
                       className={clsx({ "zen-mode": zenModeEnabled })}
                     >
-                      <HintViewer appState={appState} elements={elements} />
+                      <HintViewer
+                        appState={appState}
+                        elements={elements}
+                        isMobile={isMobile}
+                      />
                       {heading}
                       <Stack.Row gap={1}>
                         <ShapesSwitcher
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 37626b70..cae28184 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -92,7 +92,7 @@ export const MobileMenu = ({
             </Stack.Col>
           )}
         </Section>
-        <HintViewer appState={appState} elements={elements} />
+        <HintViewer appState={appState} elements={elements} isMobile={true} />
       </FixedSideContainer>
     );
   };
diff --git a/src/locales/en.json b/src/locales/en.json
index 42f99efc..5a40ea4d 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",