Type action names (#1079)

* Type action names

* improve typing

Co-authored-by: dwelle <luzar.david@gmail.com>

src/actions/manager.tsx

@@ -4,13 +4,14 @@ import {
   ActionsManagerInterface,
   UpdaterFn,
   ActionFilterFn,
+  ActionName,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { t } from "../i18n";
 
 export class ActionManager implements ActionsManagerInterface {
-  actions: { [keyProp: string]: Action } = {};
+  actions = {} as ActionsManagerInterface["actions"];
 
   updater: UpdaterFn;
 
@@ -77,7 +78,7 @@ export class ActionManager implements ActionsManagerInterface {
       }));
   }
 
-  renderAction = (name: string) => {
+  renderAction = (name: ActionName) => {
     if (this.actions[name] && "PanelComponent" in this.actions[name]) {
       const action = this.actions[name];
       const PanelComponent = action.PanelComponent!;

src/actions/types.ts

@@ -17,8 +17,41 @@ type ActionFn = (
 export type UpdaterFn = (res: ActionResult, commitToHistory?: boolean) => void;
 export type ActionFilterFn = (action: Action) => void;
 
+export type ActionName =
+  | "sendBackward"
+  | "bringForward"
+  | "sendToBack"
+  | "bringToFront"
+  | "copyStyles"
+  | "selectAll"
+  | "pasteStyles"
+  | "changeStrokeColor"
+  | "changeBackgroundColor"
+  | "changeFillStyle"
+  | "changeStrokeWidth"
+  | "changeSloppiness"
+  | "changeOpacity"
+  | "changeFontSize"
+  | "toggleCanvasMenu"
+  | "toggleEditMenu"
+  | "undo"
+  | "redo"
+  | "finalize"
+  | "changeProjectName"
+  | "changeExportBackground"
+  | "saveScene"
+  | "loadScene"
+  | "duplicateSelection"
+  | "deleteSelectedElements"
+  | "changeViewBackgroundColor"
+  | "clearCanvas"
+  | "zoomIn"
+  | "zoomOut"
+  | "resetZoom"
+  | "changeFontFamily";
+
 export interface Action {
-  name: string;
+  name: ActionName;
   PanelComponent?: React.FC<{
     elements: readonly ExcalidrawElement[];
     appState: AppState;
@@ -37,12 +70,12 @@ export interface Action {
 
 export interface ActionsManagerInterface {
   actions: {
-    [keyProp: string]: Action;
+    [actionName in ActionName]: Action;
   };
   registerAction: (action: Action) => void;
   handleKeyDown: (event: KeyboardEvent) => boolean;
   getContextMenuItems: (
     actionFilter: ActionFilterFn,
   ) => { label: string; action: () => void }[];
-  renderAction: (name: string) => React.ReactElement | null;
+  renderAction: (name: ActionName) => React.ReactElement | null;
 }