feat: Eraser toggle to switch back to the previous tool (#4981)

* add typeBeforeEraser

* ESC to switch to lastActiveToolBeforeEraser
This commit is contained in:
zsviczian 2022-03-28 21:33:32 +02:00 committed by GitHub
parent f242721f3b
commit 1331cffe93
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 6 deletions

View File

@ -310,12 +310,25 @@ export const actionErase = register({
...appState, ...appState,
selectedElementIds: {}, selectedElementIds: {},
selectedGroupIds: {}, selectedGroupIds: {},
activeTool: { type: isEraserActive(appState) ? "selection" : "eraser" }, activeTool: {
type: isEraserActive(appState)
? appState.activeTool.lastActiveToolBeforeEraser ?? "selection"
: "eraser",
lastActiveToolBeforeEraser:
appState.activeTool.type === "eraser" //node throws incorrect type error when using isEraserActive()
? undefined
: appState.activeTool.type,
},
}, },
commitToHistory: true, commitToHistory: true,
}; };
}, },
keyTest: (event) => event.key === KEYS.E, keyTest: (event, appState) => {
return (
event.key === KEYS.E ||
(event.key === KEYS.ESCAPE && isEraserActive(appState))
);
},
PanelComponent: ({ elements, appState, updateData, data }) => ( PanelComponent: ({ elements, appState, updateData, data }) => (
<ToolButton <ToolButton
type="button" type="button"

View File

@ -14,6 +14,7 @@ import {
bindOrUnbindLinearElement, bindOrUnbindLinearElement,
} from "../element/binding"; } from "../element/binding";
import { isBindingElement } from "../element/typeChecks"; import { isBindingElement } from "../element/typeChecks";
import { isEraserActive } from "../appState";
export const actionFinalize = register({ export const actionFinalize = register({
name: "finalize", name: "finalize",
@ -161,11 +162,12 @@ export const actionFinalize = register({
}; };
}, },
keyTest: (event, appState) => keyTest: (event, appState) =>
(event.key === KEYS.ESCAPE && !isEraserActive(appState) &&
((event.key === KEYS.ESCAPE &&
(appState.editingLinearElement !== null || (appState.editingLinearElement !== null ||
(!appState.draggingElement && appState.multiElement === null))) || (!appState.draggingElement && appState.multiElement === null))) ||
((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) && ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
appState.multiElement !== null), appState.multiElement !== null)),
PanelComponent: ({ appState, updateData, data }) => ( PanelComponent: ({ appState, updateData, data }) => (
<ToolButton <ToolButton
type="button" type="button"

View File

@ -77,7 +77,10 @@ export type AppState = {
// (e.g. text element when typing into the input) // (e.g. text element when typing into the input)
editingElement: NonDeletedExcalidrawElement | null; editingElement: NonDeletedExcalidrawElement | null;
editingLinearElement: LinearElementEditor | null; editingLinearElement: LinearElementEditor | null;
activeTool: { type: typeof SHAPES[number]["value"] | "eraser" }; activeTool: {
type: typeof SHAPES[number]["value"] | "eraser";
lastActiveToolBeforeEraser?: typeof SHAPES[number]["value"];
};
elementLocked: boolean; elementLocked: boolean;
penMode: boolean; penMode: boolean;
penDetected: boolean; penDetected: boolean;