refactor: rename elementType to activeTool make it an object

src/actions/actionCanvas.tsx

@@ -68,8 +68,8 @@ export const actionClearCanvas = register({
         gridSize: appState.gridSize,
         showStats: appState.showStats,
         pasteDialog: appState.pasteDialog,
-        elementType:
-          appState.elementType === "image" ? "selection" : appState.elementType,
+        activeTool:
+          appState.activeTool === "image" ? "selection" : appState.activeTool,
       },
       commitToHistory: true,
     };
@@ -299,7 +299,7 @@ export const actionErase = register({
         ...appState,
         selectedElementIds: {},
         selectedGroupIds: {},
-        elementType: isEraserActive(appState) ? "selection" : "eraser",
+        activeTool: isEraserActive(appState) ? "selection" : "eraser",
       },
       commitToHistory: true,
     };

src/actions/actionDeleteSelected.tsx

@@ -133,7 +133,7 @@ export const actionDeleteSelected = register({
       elements: nextElements,
       appState: {
         ...nextAppState,
-        elementType: "selection",
+        activeTool: "selection",
         multiElement: null,
       },
       commitToHistory: isSomeElementSelected(

src/actions/actionFinalize.tsx

@@ -119,13 +119,13 @@ export const actionFinalize = register({
         );
       }
 
-      if (!appState.elementLocked && appState.elementType !== "freedraw") {
+      if (!appState.elementLocked && appState.activeTool !== "freedraw") {
         appState.selectedElementIds[multiPointElement.id] = true;
       }
     }
 
     if (
-      (!appState.elementLocked && appState.elementType !== "freedraw") ||
+      (!appState.elementLocked && appState.activeTool !== "freedraw") ||
       !multiPointElement
     ) {
       resetCursor(canvas);
@@ -135,10 +135,10 @@ export const actionFinalize = register({
       elements: newElements,
       appState: {
         ...appState,
-        elementType:
-          (appState.elementLocked || appState.elementType === "freedraw") &&
+        activeTool:
+          (appState.elementLocked || appState.activeTool === "freedraw") &&
           multiPointElement
-            ? appState.elementType
+            ? appState.activeTool
             : "selection",
         draggingElement: null,
         multiElement: null,
@@ -148,15 +148,15 @@ export const actionFinalize = register({
         selectedElementIds:
           multiPointElement &&
           !appState.elementLocked &&
-          appState.elementType !== "freedraw"
+          appState.activeTool !== "freedraw"
             ? {
                 ...appState.selectedElementIds,
                 [multiPointElement.id]: true,
               }
             : appState.selectedElementIds,
         pendingImageElement: null,
       },
-      commitToHistory: appState.elementType === "freedraw",
+      commitToHistory: appState.activeTool === "freedraw",
     };
   },
   keyTest: (event, appState) =>

src/actions/actionProperties.tsx

@@ -847,10 +847,10 @@ export const actionChangeSharpness = register({
     );
     const shouldUpdateForNonLinearElements = targetElements.length
       ? targetElements.every((el) => !isLinearElement(el))
-      : !isLinearElementType(appState.elementType);
+      : !isLinearElementType(appState.activeTool);
     const shouldUpdateForLinearElements = targetElements.length
       ? targetElements.every(isLinearElement)
-      : isLinearElementType(appState.elementType);
+      : isLinearElementType(appState.activeTool);
     return {
       elements: changeProperty(elements, appState, (el) =>
         newElementWith(el, {
@@ -890,8 +890,8 @@ export const actionChangeSharpness = register({
           elements,
           appState,
           (element) => element.strokeSharpness,
-          (canChangeSharpness(appState.elementType) &&
-            (isLinearElementType(appState.elementType)
+          (canChangeSharpness(appState.activeTool) &&
+            (isLinearElementType(appState.activeTool)
               ? appState.currentItemLinearStrokeSharpness
               : appState.currentItemStrokeSharpness)) ||
             null,

src/appState.ts

@@ -42,7 +42,7 @@ export const getDefaultAppState = (): Omit<
     editingGroupId: null,
     editingLinearElement: null,
     elementLocked: false,
-    elementType: "selection",
+    activeTool: "selection",
     penMode: false,
     penDetected: false,
     errorMessage: null,
@@ -131,7 +131,7 @@ const APP_STATE_STORAGE_CONF = (<
   editingGroupId: { browser: true, export: false, server: false },
   editingLinearElement: { browser: false, export: false, server: false },
   elementLocked: { browser: true, export: false, server: false },
-  elementType: { browser: true, export: false, server: false },
+  activeTool: { browser: true, export: false, server: false },
   penMode: { browser: true, export: false, server: false },
   penDetected: { browser: true, export: false, server: false },
   errorMessage: { browser: false, export: false, server: false },
@@ -215,7 +215,7 @@ export const clearAppStateForDatabase = (appState: Partial<AppState>) => {
 };
 
 export const isEraserActive = ({
-  elementType,
+  activeTool,
 }: {
-  elementType: AppState["elementType"];
-}) => elementType === "eraser";
+  activeTool: AppState["activeTool"];
+}) => activeTool === "eraser";

src/components/Actions.tsx

@@ -30,12 +30,12 @@ export const SelectedShapeActions = ({
   appState,
   elements,
   renderAction,
-  elementType,
+  activeTool,
 }: {
   appState: AppState;
   elements: readonly ExcalidrawElement[];
   renderAction: ActionManager["renderAction"];
-  elementType: AppState["elementType"];
+  activeTool: AppState["activeTool"];
 }) => {
   const targetElements = getTargetElements(
     getNonDeletedElements(elements),
@@ -55,13 +55,13 @@ export const SelectedShapeActions = ({
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
   const showFillIcons =
-    hasBackground(elementType) ||
+    hasBackground(activeTool) ||
     targetElements.some(
       (element) =>
         hasBackground(element.type) && !isTransparent(element.backgroundColor),
     );
   const showChangeBackgroundIcons =
-    hasBackground(elementType) ||
+    hasBackground(activeTool) ||
     targetElements.some((element) => hasBackground(element.type));
 
   const showLinkIcon =
@@ -78,36 +78,36 @@ export const SelectedShapeActions = ({
 
   return (
     <div className="panelColumn">
-      {((hasStrokeColor(elementType) &&
-        elementType !== "image" &&
+      {((hasStrokeColor(activeTool) &&
+        activeTool !== "image" &&
         commonSelectedType !== "image") ||
         targetElements.some((element) => hasStrokeColor(element.type))) &&
         renderAction("changeStrokeColor")}
       {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
       {showFillIcons && renderAction("changeFillStyle")}
 
-      {(hasStrokeWidth(elementType) ||
+      {(hasStrokeWidth(activeTool) ||
         targetElements.some((element) => hasStrokeWidth(element.type))) &&
         renderAction("changeStrokeWidth")}
 
-      {(elementType === "freedraw" ||
+      {(activeTool === "freedraw" ||
         targetElements.some((element) => element.type === "freedraw")) &&
         renderAction("changeStrokeShape")}
 
-      {(hasStrokeStyle(elementType) ||
+      {(hasStrokeStyle(activeTool) ||
         targetElements.some((element) => hasStrokeStyle(element.type))) && (
         <>
           {renderAction("changeStrokeStyle")}
           {renderAction("changeSloppiness")}
         </>
       )}
 
-      {(canChangeSharpness(elementType) ||
+      {(canChangeSharpness(activeTool) ||
         targetElements.some((element) => canChangeSharpness(element.type))) && (
         <>{renderAction("changeSharpness")}</>
       )}
 
-      {(hasText(elementType) ||
+      {(hasText(activeTool) ||
         targetElements.some((element) => hasText(element.type))) && (
         <>
           {renderAction("changeFontSize")}
@@ -122,7 +122,7 @@ export const SelectedShapeActions = ({
         (element) =>
           hasBoundTextElement(element) || isBoundToContainer(element),
       ) && renderAction("changeVerticalAlign")}
-      {(canHaveArrowheads(elementType) ||
+      {(canHaveArrowheads(activeTool) ||
         targetElements.some((element) => canHaveArrowheads(element.type))) && (
         <>{renderAction("changeArrowhead")}</>
       )}
@@ -190,23 +190,23 @@ export const SelectedShapeActions = ({
 
 export const ShapesSwitcher = ({
   canvas,
-  elementType,
+  activeTool,
   setAppState,
   onImageAction,
   appState,
 }: {
   canvas: HTMLCanvasElement | null;
-  elementType: AppState["elementType"];
+  activeTool: AppState["activeTool"];
   setAppState: React.Component<any, AppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
   appState: AppState;
 }) => {
   const onChange = withBatchedUpdates(
     ({
-      elementType,
+      activeTool,
       pointerType,
     }: {
-      elementType: typeof SHAPES[number]["value"];
+      activeTool: typeof SHAPES[number]["value"];
       pointerType: PointerType | null;
     }) => {
       if (!appState.penDetected && pointerType === "pen") {
@@ -216,12 +216,12 @@ export const ShapesSwitcher = ({
         });
       }
       setAppState({
-        elementType,
+        activeTool,
         multiElement: null,
         selectedElementIds: {},
       });
-      setCursorForShape(canvas, { ...appState, elementType });
-      if (elementType === "image") {
+      setCursorForShape(canvas, { ...appState, activeTool });
+      if (activeTool === "image") {
         onImageAction({ pointerType });
       }
     },
@@ -241,18 +241,18 @@ export const ShapesSwitcher = ({
             key={value}
             type="radio"
             icon={icon}
-            checked={elementType === value}
+            checked={activeTool === value}
             name="editor-current-shape"
             title={`${capitalizeString(label)} — ${shortcut}`}
             keyBindingLabel={`${index + 1}`}
             aria-label={capitalizeString(label)}
             aria-keyshortcuts={shortcut}
             data-testid={value}
             onPointerDown={({ pointerType }) => {
-              onChange({ elementType: value, pointerType });
+              onChange({ activeTool: value, pointerType });
             }}
             onChange={({ pointerType }) => {
-              onChange({ elementType: value, pointerType });
+              onChange({ activeTool: value, pointerType });
             }}
           />
         );