8e0206cc1e
* 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
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
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"}
|
|
/>
|
|
),
|
|
};
|