refactor: DRY out tool typing (#7086)

src/components/App.tsx

@@ -211,7 +211,7 @@ import {
 import Scene from "../scene/Scene";
 import { RenderInteractiveSceneCallback, ScrollBars } from "../scene/types";
 import { getStateForZoom } from "../scene/zoom";
-import { findShapeByKey, SHAPES } from "../shapes";
+import { findShapeByKey } from "../shapes";
 import {
   AppClassProperties,
   AppProps,
@@ -230,6 +230,7 @@ import {
   SidebarName,
   SidebarTabName,
   KeyboardModifiersObject,
+  ToolType,
 } from "../types";
 import {
   debounce,
@@ -3113,12 +3114,7 @@ class App extends React.Component<AppProps, AppState> {
   setActiveTool = (
     tool:
       | {
-          type:
+          type: ToolType;
-            | typeof SHAPES[number]["value"]
-            | "eraser"
-            | "hand"
-            | "frame"
-            | "embeddable";
         }
       | { type: "custom"; customType: string },
   ) => {

src/types.ts

@@ -18,7 +18,6 @@ import {
   ExcalidrawFrameElement,
   ExcalidrawEmbeddableElement,
 } from "./element/types";
-import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
 import { SuggestedBinding } from "./element/binding";
@@ -86,21 +85,30 @@ export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
 
 export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
 
-export type LastActiveTool =
+export type ToolType =
+  | "selection"
+  | "rectangle"
+  | "diamond"
+  | "ellipse"
+  | "arrow"
+  | "line"
+  | "freedraw"
+  | "text"
+  | "image"
+  | "eraser"
+  | "hand"
+  | "frame"
+  | "embeddable";
+
+export type ActiveTool =
   | {
-      type:
+      type: ToolType;
-        | typeof SHAPES[number]["value"]
-        | "eraser"
-        | "hand"
-        | "frame"
-        | "embeddable";
       customType: null;
     }
   | {
       type: "custom";
       customType: string;
-    }
+    };
-  | null;
 
 export type SidebarName = string;
 export type SidebarTabName = string;
@@ -195,23 +203,9 @@ export type AppState = {
      * indicates a previous tool we should revert back to if we deselect the
      * currently active tool. At the moment applies to `eraser` and `hand` tool.
      */
-    lastActiveTool: LastActiveTool;
+    lastActiveTool: ActiveTool | null;
     locked: boolean;
-  } & (
+  } & ActiveTool;
-    | {
-        type:
-          | typeof SHAPES[number]["value"]
-          | "eraser"
-          | "hand"
-          | "frame"
-          | "embeddable";
-        customType: null;
-      }
-    | {
-        type: "custom";
-        customType: string;
-      }
-  );
   penMode: boolean;
   penDetected: boolean;
   exportBackground: boolean;

src/utils.ts

@@ -15,9 +15,8 @@ import {
   FontString,
   NonDeletedExcalidrawElement,
 } from "./element/types";
-import { AppState, DataURL, LastActiveTool, Zoom } from "./types";
+import { ActiveTool, AppState, DataURL, ToolType, Zoom } from "./types";
 import { unstable_batchedUpdates } from "react-dom";
-import { SHAPES } from "./shapes";
 import { isEraserActive, isHandToolActive } from "./appState";
 import { ResolutionType } from "./utility-types";
 import React from "react";
@@ -371,15 +370,10 @@ export const updateActiveTool = (
   appState: Pick<AppState, "activeTool">,
   data: (
     | {
-        type:
+        type: ToolType;
-          | typeof SHAPES[number]["value"]
-          | "eraser"
-          | "hand"
-          | "frame"
-          | "embeddable";
       }
     | { type: "custom"; customType: string }
-  ) & { lastActiveToolBeforeEraser?: LastActiveTool },
+  ) & { lastActiveToolBeforeEraser?: ActiveTool | null },
 ): AppState["activeTool"] => {
   if (data.type === "custom") {
     return {