From e6f74350ac7d561646475642597b8a27e103bb98 Mon Sep 17 00:00:00 2001 From: David Luzar Date: Wed, 4 Oct 2023 23:39:00 +0200 Subject: [PATCH] refactor: DRY out tool typing (#7086) --- src/components/App.tsx | 10 +++------ src/types.ts | 46 ++++++++++++++++++------------------------ src/utils.ts | 12 +++-------- 3 files changed, 26 insertions(+), 42 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 2372f0a2..8a905955 100644 --- a/src/components/App.tsx +++ b/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 { setActiveTool = ( tool: | { - type: - | typeof SHAPES[number]["value"] - | "eraser" - | "hand" - | "frame" - | "embeddable"; + type: ToolType; } | { type: "custom"; customType: string }, ) => { diff --git a/src/types.ts b/src/types.ts index 991de9f1..c3b0252e 100644 --- a/src/types.ts +++ b/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; export type BinaryFiles = Record; -export type LastActiveTool = +export type ToolType = + | "selection" + | "rectangle" + | "diamond" + | "ellipse" + | "arrow" + | "line" + | "freedraw" + | "text" + | "image" + | "eraser" + | "hand" + | "frame" + | "embeddable"; + +export type ActiveTool = | { - type: - | typeof SHAPES[number]["value"] - | "eraser" - | "hand" - | "frame" - | "embeddable"; + type: ToolType; 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; - } & ( - | { - type: - | typeof SHAPES[number]["value"] - | "eraser" - | "hand" - | "frame" - | "embeddable"; - customType: null; - } - | { - type: "custom"; - customType: string; - } - ); + } & ActiveTool; penMode: boolean; penDetected: boolean; exportBackground: boolean; diff --git a/src/utils.ts b/src/utils.ts index 8b142744..5acd1b66 100644 --- a/src/utils.ts +++ b/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, data: ( | { - type: - | typeof SHAPES[number]["value"] - | "eraser" - | "hand" - | "frame" - | "embeddable"; + type: ToolType; } | { type: "custom"; customType: string } - ) & { lastActiveToolBeforeEraser?: LastActiveTool }, + ) & { lastActiveToolBeforeEraser?: ActiveTool | null }, ): AppState["activeTool"] => { if (data.type === "custom") { return {