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 showSelectedShapeActions

src/actions/actionFinalize.tsx

@@ -54,18 +54,13 @@ export const actionFinalize: Action = {
     ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
       appState.multiElement !== null),
   PanelComponent: ({ appState, updateData }) => (
-    <div
-      style={{
-        visibility: appState.multiElement != null ? "visible" : "hidden",
-      }}
-    >
-      <ToolButton
-        type="button"
-        icon={done}
-        title={t("buttons.done")}
-        aria-label={t("buttons.done")}
-        onClick={() => updateData(null)}
-      />
-    </div>
+    <ToolButton
+      type="button"
+      icon={done}
+      title={t("buttons.done")}
+      aria-label={t("buttons.done")}
+      onClick={updateData}
+      visible={appState.multiElement != null}
+    />
   ),
 };

src/actions/actionHistory.tsx

@@ -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,
+});

src/actions/actionMenu.tsx

@@ -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"}
+    />
+  ),
+};

src/actions/index.ts

@@ -36,3 +36,4 @@ export {
 } from "./actionExport";
 
 export { actionCopyStyles, actionPasteStyles } from "./actionStyles";
+export { actionToggleCanvasMenu, actionToggleEditMenu } from "./actionMenu";

src/actions/manager.tsx

@@ -83,7 +83,7 @@ export class ActionManager implements ActionsManagerInterface {
     if (this.actions[name] && "PanelComponent" in this.actions[name]) {
       const action = this.actions[name];
       const PanelComponent = action.PanelComponent!;
-      const updateData = (formState: any) => {
+      const updateData = (formState?: any) => {
         const commitToHistory =
           action.commitToHistory &&
           action.commitToHistory(this.getAppState(), this.getElements());

src/actions/types.ts

@@ -21,7 +21,7 @@ export interface Action {
   PanelComponent?: React.FC<{
     elements: readonly ExcalidrawElement[];
     appState: AppState;
-    updateData: (formData: any) => void;
+    updateData: (formData?: any) => void;
   }>;
   perform: ActionFn;
   keyPriority?: number;