feat: add hand/panning tool (#6141)

* feat: add hand/panning tool * move hand tool right of tool lock separator * tweak i18n * rename `panning` -> `hand` * toggle between last tool and hand on `H` shortcut * hide properties sidebar when `hand` active * revert to rendering HandButton manually due to mobile toolbar
2025-05-03 10:00:07 -04:00 · 2023-01-23 16:12:28 +01:00 · 2023-01-23 16:12:28 +01:00 · d4afd66268
commit d4afd66268
parent 849e6a0c86
22 changed files with 273 additions and 139 deletions
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@ -219,9 +219,10 @@ export const ShapesSwitcher = ({
  <>
    {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
      const label = t(`toolBar.${value}`);
-      const letter = key && (typeof key === "string" ? key : key[0]);
+      const letter =
+        key && capitalizeString(typeof key === "string" ? key : key[0]);
      const shortcut = letter
-        ? `${capitalizeString(letter)} ${t("helpDialog.or")} ${numericKey}`
+        ? `${letter} ${t("helpDialog.or")} ${numericKey}`
        : `${numericKey}`;
      return (
        <ToolButton
@ -232,7 +233,7 @@ export const ShapesSwitcher = ({
          checked={activeTool.type === value}
          name="editor-current-shape"
          title={`${capitalizeString(label)} — ${shortcut}`}
-          keyBindingLabel={numericKey}
+          keyBindingLabel={numericKey || letter}
          aria-label={capitalizeString(label)}
          aria-keyshortcuts={shortcut}
          data-testid={`toolbar-${value}`}
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -41,7 +41,11 @@ import { ActionManager } from "../actions/manager";
 import { actions } from "../actions/register";
 import { ActionResult } from "../actions/types";
 import { trackEvent } from "../analytics";
-import { getDefaultAppState, isEraserActive } from "../appState";
+import {
+  getDefaultAppState,
+  isEraserActive,
+  isHandToolActive,
+} from "../appState";
 import { parseClipboard } from "../clipboard";
 import {
  APP_NAME,
@ -274,6 +278,7 @@ import {
 import { shouldShowBoundingBox } from "../element/transformHandles";
 import { Fonts } from "../scene/Fonts";
 import { actionPaste } from "../actions/actionClipboard";
+import { actionToggleHandTool } from "../actions/actionCanvas";

 const deviceContextInitialValue = {
  isSmScreen: false,
@ -575,6 +580,7 @@ class App extends React.Component<AppProps, AppState> {
                      elements={this.scene.getNonDeletedElements()}
                      onLockToggle={this.toggleLock}
                      onPenModeToggle={this.togglePenMode}
+                      onHandToolToggle={this.onHandToolToggle}
                      onInsertElements={(elements) =>
                        this.addElementsFromPasteOrLibrary({
                          elements,
@ -1812,6 +1818,10 @@ class App extends React.Component<AppProps, AppState> {
    });
  };

+  onHandToolToggle = () => {
+    this.actionManager.executeAction(actionToggleHandTool);
+  };
+
  scrollToContent = (
    target:
      | ExcalidrawElement
@ -2229,11 +2239,13 @@ class App extends React.Component<AppProps, AppState> {

  private setActiveTool = (
    tool:
-      | { type: typeof SHAPES[number]["value"] | "eraser" }
+      | { type: typeof SHAPES[number]["value"] | "eraser" | "hand" }
      | { type: "custom"; customType: string },
  ) => {
    const nextActiveTool = updateActiveTool(this.state, tool);
-    if (!isHoldingSpace) {
+    if (nextActiveTool.type === "hand") {
+      setCursor(this.canvas, CURSOR_TYPE.GRAB);
+    } else if (!isHoldingSpace) {
      setCursorForShape(this.canvas, this.state);
    }
    if (isToolIcon(document.activeElement)) {
@ -2904,7 +2916,12 @@ class App extends React.Component<AppProps, AppState> {
          null;
    }

-    if (isHoldingSpace || isPanning || isDraggingScrollBar) {
+    if (
+      isHoldingSpace ||
+      isPanning ||
+      isDraggingScrollBar ||
+      isHandToolActive(this.state)
+    ) {
      return;
    }

@ -3496,7 +3513,10 @@ class App extends React.Component<AppProps, AppState> {
      );
    } else if (this.state.activeTool.type === "custom") {
      setCursor(this.canvas, CURSOR_TYPE.AUTO);
-    } else if (this.state.activeTool.type !== "eraser") {
+    } else if (
+      this.state.activeTool.type !== "eraser" &&
+      this.state.activeTool.type !== "hand"
+    ) {
      this.createGenericElementOnPointerDown(
        this.state.activeTool.type,
        pointerDownState,
@ -3607,6 +3627,7 @@ class App extends React.Component<AppProps, AppState> {
        gesture.pointers.size <= 1 &&
        (event.button === POINTER_BUTTON.WHEEL ||
          (event.button === POINTER_BUTTON.MAIN && isHoldingSpace) ||
+          isHandToolActive(this.state) ||
          this.state.viewModeEnabled)
      ) ||
      isTextElement(this.state.editingElement)
--- a/src/components/HandButton.tsx
+++ b/src/components/HandButton.tsx
@ -0,0 +1,32 @@
+import "./ToolIcon.scss";
+
+import clsx from "clsx";
+import { ToolButton } from "./ToolButton";
+import { handIcon } from "./icons";
+import { KEYS } from "../keys";
+
+type LockIconProps = {
+  title?: string;
+  name?: string;
+  checked: boolean;
+  onChange?(): void;
+  isMobile?: boolean;
+};
+
+export const HandButton = (props: LockIconProps) => {
+  return (
+    <ToolButton
+      className={clsx("Shape", { fillable: false })}
+      type="radio"
+      icon={handIcon}
+      name="editor-current-shape"
+      checked={props.checked}
+      title={`${props.title} — H`}
+      keyBindingLabel={!props.isMobile ? KEYS.H.toLocaleUpperCase() : undefined}
+      aria-label={`${props.title} — H`}
+      aria-keyshortcuts={KEYS.H}
+      data-testid={`toolbar-hand`}
+      onChange={() => props.onChange?.()}
+    />
+  );
+};
--- a/src/components/HelpDialog.tsx
+++ b/src/components/HelpDialog.tsx
@ -69,6 +69,10 @@ function* intersperse(as: JSX.Element[][], delim: string | null) {
  }
 }

+const upperCaseSingleChars = (str: string) => {
+  return str.replace(/\b[a-z]\b/, (c) => c.toUpperCase());
+};
+
 const Shortcut = ({
  label,
  shortcuts,
@ -83,7 +87,9 @@ const Shortcut = ({
      ? [...shortcut.slice(0, -2).split("+"), "+"]
      : shortcut.split("+");

-    return keys.map((key) => <ShortcutKey key={key}>{key}</ShortcutKey>);
+    return keys.map((key) => (
+      <ShortcutKey key={key}>{upperCaseSingleChars(key)}</ShortcutKey>
+    ));
  });

  return (
@ -120,6 +126,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
            className="HelpDialog__island--tools"
            caption={t("helpDialog.tools")}
          >
+            <Shortcut label={t("toolBar.hand")} shortcuts={[KEYS.H]} />
            <Shortcut
              label={t("toolBar.selection")}
              shortcuts={[KEYS.V, KEYS["1"]]}
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@ -50,6 +50,8 @@ import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
 import { useAtom } from "jotai";
 import MainMenu from "./main-menu/MainMenu";
+import { HandButton } from "./HandButton";
+import { isHandToolActive } from "../appState";

 interface LayerUIProps {
  actionManager: ActionManager;
@ -59,6 +61,7 @@ interface LayerUIProps {
  setAppState: React.Component<any, AppState>["setState"];
  elements: readonly NonDeletedExcalidrawElement[];
  onLockToggle: () => void;
+  onHandToolToggle: () => void;
  onPenModeToggle: () => void;
  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
  showExitZenModeBtn: boolean;
@ -85,6 +88,7 @@ const LayerUI = ({
  elements,
  canvas,
  onLockToggle,
+  onHandToolToggle,
  onPenModeToggle,
  onInsertElements,
  showExitZenModeBtn,
@ -304,13 +308,20 @@ const LayerUI = ({
                            penDetected={appState.penDetected}
                          />
                          <LockButton
-                            zenModeEnabled={appState.zenModeEnabled}
                            checked={appState.activeTool.locked}
-                            onChange={() => onLockToggle()}
+                            onChange={onLockToggle}
                            title={t("toolBar.lock")}
                          />
+
                          <div className="App-toolbar__divider"></div>

+                          <HandButton
+                            checked={isHandToolActive(appState)}
+                            onChange={() => onHandToolToggle()}
+                            title={t("toolBar.hand")}
+                            isMobile
+                          />
+
                          <ShapesSwitcher
                            appState={appState}
                            canvas={canvas}
@ -322,9 +333,6 @@ const LayerUI = ({
                              });
                            }}
                          />
-                          {/* {actionManager.renderAction("eraser", {
-                          // size: "small",
-                        })} */}
                        </Stack.Row>
                      </Island>
                    </Stack.Row>
@ -408,7 +416,8 @@ const LayerUI = ({
          renderJSONExportDialog={renderJSONExportDialog}
          renderImageExportDialog={renderImageExportDialog}
          setAppState={setAppState}
-          onLockToggle={() => onLockToggle()}
+          onLockToggle={onLockToggle}
+          onHandToolToggle={onHandToolToggle}
          onPenModeToggle={onPenModeToggle}
          canvas={canvas}
          onImageAction={onImageAction}
--- a/src/components/LockButton.tsx
+++ b/src/components/LockButton.tsx
@ -9,7 +9,6 @@ type LockIconProps = {
  name?: string;
  checked: boolean;
  onChange?(): void;
-  zenModeEnabled?: boolean;
  isMobile?: boolean;
 };

--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@ -22,6 +22,8 @@ import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
+import { HandButton } from "./HandButton";
+import { isHandToolActive } from "../appState";

 type MobileMenuProps = {
  appState: AppState;
@ -31,6 +33,7 @@ type MobileMenuProps = {
  setAppState: React.Component<any, AppState>["setState"];
  elements: readonly NonDeletedExcalidrawElement[];
  onLockToggle: () => void;
+  onHandToolToggle: () => void;
  onPenModeToggle: () => void;
  canvas: HTMLCanvasElement | null;

@ -52,6 +55,7 @@ export const MobileMenu = ({
  actionManager,
  setAppState,
  onLockToggle,
+  onHandToolToggle,
  onPenModeToggle,
  canvas,
  onImageAction,
@ -88,6 +92,13 @@ export const MobileMenu = ({
                </Island>
                {renderTopRightUI && renderTopRightUI(true, appState)}
                <div className="mobile-misc-tools-container">
+                  {!appState.viewModeEnabled && (
+                    <LibraryButton
+                      appState={appState}
+                      setAppState={setAppState}
+                      isMobile
+                    />
+                  )}
                  <PenModeButton
                    checked={appState.penMode}
                    onChange={onPenModeToggle}
@ -101,13 +112,12 @@ export const MobileMenu = ({
                    title={t("toolBar.lock")}
                    isMobile
                  />
-                  {!appState.viewModeEnabled && (
-                    <LibraryButton
-                      appState={appState}
-                      setAppState={setAppState}
-                      isMobile
-                    />
-                  )}
+                  <HandButton
+                    checked={isHandToolActive(appState)}
+                    onChange={() => onHandToolToggle()}
+                    title={t("toolBar.hand")}
+                    isMobile
+                  />
                </div>
              </Stack.Row>
            </Stack.Col>
--- a/src/components/ToolButton.tsx
+++ b/src/components/ToolButton.tsx
@ -19,7 +19,7 @@ type ToolButtonBaseProps = {
  name?: string;
  id?: string;
  size?: ToolButtonSize;
-  keyBindingLabel?: string;
+  keyBindingLabel?: string | null;
  showAriaLabel?: boolean;
  hidden?: boolean;
  visible?: boolean;
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@ -1532,3 +1532,14 @@ export const publishIcon = createIcon(
 export const eraser = createIcon(
  <path d="M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z" />,
 );
+
+export const handIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5"></path>
+    <path d="M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5"></path>
+    <path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5"></path>
+    <path d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47"></path>
+  </g>,
+  tablerIconProps,
+);