smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add hand/panning tool (#6141)

Browse source 
* 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
This commit is contained in:
David Luzar 2023-01-23 16:12:28 +01:00 • committed by GitHub
parent 849e6a0c86
commit d4afd66268
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 273 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/utils.ts
View file

@ -12,10 +12,11 @@ import {
WINDOWS_EMOJI_FALLBACK_FONT,
} from "./constants";
import { FontFamilyValues, FontString } from "./element/types";
import { AppState, DataURL, LastActiveToolBeforeEraser, Zoom } from "./types";
import { AppState, DataURL, LastActiveTool, Zoom } from "./types";
import { unstable_batchedUpdates } from "react-dom";
import { SHAPES } from "./shapes";
import React from "react";
import { isEraserActive, isHandToolActive } from "./appState";
let mockDateTime: string | null = null;
@ -219,9 +220,9 @@ export const distance = (x: number, y: number) => Math.abs(x - y);
export const updateActiveTool = (
appState: Pick<AppState, "activeTool">,
data: (
| { type: typeof SHAPES[number]["value"] | "eraser" }
| { type: typeof SHAPES[number]["value"] | "eraser" | "hand" }
| { type: "custom"; customType: string }
) & { lastActiveToolBeforeEraser?: LastActiveToolBeforeEraser },
) & { lastActiveToolBeforeEraser?: LastActiveTool },
): AppState["activeTool"] => {
if (data.type === "custom") {
return {
@ -233,9 +234,9 @@ export const updateActiveTool = (
return {
...appState.activeTool,
lastActiveToolBeforeEraser:
lastActiveTool:
data.lastActiveToolBeforeEraser === undefined
? appState.activeTool.lastActiveToolBeforeEraser
? appState.activeTool.lastActiveTool
: data.lastActiveToolBeforeEraser,
type: data.type,
customType: null,
@ -305,7 +306,9 @@ export const setCursorForShape = (
}
if (appState.activeTool.type === "selection") {
resetCursor(canvas);
} else if (appState.activeTool.type === "eraser") {
} else if (isHandToolActive(appState)) {
canvas.style.cursor = CURSOR_TYPE.GRAB;
} else if (isEraserActive(appState)) {
setEraserCursor(canvas, appState.theme);
// do nothing if image tool is selected which suggests there's
// a image-preview set as the cursor