Undo/Redo buttons, refactor menu toggles (#793)
* Make Undo & Redo and the menu buttons into actions; add undo/redo buttons * Create variables for the ToolIcon colors * Darken the menu buttons when they’re active * Put the more intensive test in `perform` * Fix & restyle hint viewer * Add pinch zoom for macOS Safari * Chrome/Firefox trackpad pinch zoom * openedMenu → openMenu * needsShapeEditor.ts → showSelectedShapeActions.ts * Call showSelectedShapeActionspull/667/head^2
Jed Fox
5 years ago
committed by
GitHub
parent
0ee33fe341
commit
8e0206cc1e
@ -0,0 +1,73 @@
|
||||
import { Action } from "./types";
|
||||
import React from "react";
|
||||
import { undo, redo } from "../components/icons";
|
||||
import { ToolButton } from "../components/ToolButton";
|
||||
import { t } from "../i18n";
|
||||
import { SceneHistory } from "../history";
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
import { AppState } from "../types";
|
||||
import { KEYS } from "../keys";
|
||||
|
||||
const writeData = (
|
||||
appState: AppState,
|
||||
data: { elements: ExcalidrawElement[]; appState: AppState } | null,
|
||||
) => {
|
||||
if (data !== null) {
|
||||
return {
|
||||
elements: data.elements,
|
||||
appState: { ...appState, ...data.appState },
|
||||
};
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
const testUndo = (shift: boolean) => (
|
||||
event: KeyboardEvent,
|
||||
appState: AppState,
|
||||
) => event[KEYS.META] && /z/i.test(event.key) && event.shiftKey === shift;
|
||||
|
||||
export const createUndoAction: (h: SceneHistory) => Action = history => ({
|
||||
name: "undo",
|
||||
perform: (_, appState) =>
|
||||
[
|
||||
appState.multiElement,
|
||||
appState.resizingElement,
|
||||
appState.editingElement,
|
||||
appState.draggingElement,
|
||||
].every(x => x === null)
|
||||
? writeData(appState, history.undoOnce())
|
||||
: {},
|
||||
keyTest: testUndo(false),
|
||||
PanelComponent: ({ updateData }) => (
|
||||
<ToolButton
|
||||
type="button"
|
||||
icon={undo}
|
||||
aria-label={t("buttons.undo")}
|
||||
onClick={updateData}
|
||||
/>
|
||||
),
|
||||
commitToHistory: () => false,
|
||||
});
|
||||
|
||||
export const createRedoAction: (h: SceneHistory) => Action = history => ({
|
||||
name: "redo",
|
||||
perform: (_, appState) =>
|
||||
[
|
||||
appState.multiElement,
|
||||
appState.resizingElement,
|
||||
appState.editingElement,
|
||||
appState.draggingElement,
|
||||
].every(x => x === null)
|
||||
? writeData(appState, history.redoOnce())
|
||||
: {},
|
||||
keyTest: testUndo(true),
|
||||
PanelComponent: ({ updateData }) => (
|
||||
<ToolButton
|
||||
type="button"
|
||||
icon={redo}
|
||||
aria-label={t("buttons.redo")}
|
||||
onClick={updateData}
|
||||
/>
|
||||
),
|
||||
commitToHistory: () => false,
|
||||
});
|
||||
@ -0,0 +1,45 @@
|
||||
import { Action } from "./types";
|
||||
import React from "react";
|
||||
import { menu, palette } from "../components/icons";
|
||||
import { ToolButton } from "../components/ToolButton";
|
||||
import { t } from "../i18n";
|
||||
import { showSelectedShapeActions } from "../element";
|
||||
|
||||
export const actionToggleCanvasMenu: Action = {
|
||||
name: "toggleCanvasMenu",
|
||||
perform: (_, appState) => ({
|
||||
appState: {
|
||||
...appState,
|
||||
openMenu: appState.openMenu === "canvas" ? null : "canvas",
|
||||
},
|
||||
}),
|
||||
PanelComponent: ({ appState, updateData }) => (
|
||||
<ToolButton
|
||||
type="button"
|
||||
icon={menu}
|
||||
aria-label={t("buttons.menu")}
|
||||
onClick={updateData}
|
||||
selected={appState.openMenu === "canvas"}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
export const actionToggleEditMenu: Action = {
|
||||
name: "toggleEditMenu",
|
||||
perform: (_elements, appState) => ({
|
||||
appState: {
|
||||
...appState,
|
||||
openMenu: appState.openMenu === "shape" ? null : "shape",
|
||||
},
|
||||
}),
|
||||
PanelComponent: ({ elements, appState, updateData }) => (
|
||||
<ToolButton
|
||||
visible={showSelectedShapeActions(appState, elements)}
|
||||
type="button"
|
||||
icon={palette}
|
||||
aria-label={t("buttons.edit")}
|
||||
onClick={updateData}
|
||||
selected={appState.openMenu === "shape"}
|
||||
/>
|
||||
),
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
import { AppState } from "../types";
|
||||
import { ExcalidrawElement } from "./types";
|
||||
import { getSelectedElements } from "../scene";
|
||||
|
||||
export const showSelectedShapeActions = (
|
||||
appState: AppState,
|
||||
elements: readonly ExcalidrawElement[],
|
||||
) =>
|
||||
Boolean(
|
||||
appState.editingElement ||
|
||||
getSelectedElements(elements).length ||
|
||||
appState.elementType !== "selection",
|
||||
);
|
||||
Loading…
Reference in New Issue