refactor: renames areaTool -> rectangleTool

src/components/Groups/Groups.tsx

@@ -17,7 +17,7 @@ export const Groups = () => {
       {groups.map((group) => {
         return <Group key={group.id} {...group} />;
       })}
-      {mode.type === 'AREA_TOOL' && mode.area && (
+      {mode.type === 'RECTANGLE_TOOL' && mode.area && (
         <Group from={mode.area.from} to={mode.area.to} color={DEFAULT_COLOR} />
       )}
     </>

src/components/ToolMenu/ToolMenu.tsx

@@ -59,12 +59,12 @@ export const ToolMenu = () => {
         Icon={<CropSquareIcon />}
         onClick={() => {
           uiStateStoreActions.setMode({
-            type: 'AREA_TOOL',
+            type: 'RECTANGLE_TOOL',
             showCursor: true,
             area: null
           });
         }}
-        isActive={mode.type === 'AREA_TOOL'}
+        isActive={mode.type === 'RECTANGLE_TOOL'}
         size={theme.customVars.toolMenu.height}
       />
       <IconButton

src/interaction/modes/RectangleTool.ts

@@ -3,8 +3,8 @@ import { produce } from 'immer';
 import { generateId, hasMovedTile, setWindowCursor } from 'src/utils';
 import { DEFAULT_COLOR } from 'src/config';
 
-export const AreaTool: ModeActions = {
-  type: 'AREA_TOOL',
+export const RectangleTool: ModeActions = {
+  type: 'RECTANGLE_TOOL',
   entry: () => {
     setWindowCursor('crosshair');
   },
@@ -13,7 +13,7 @@ export const AreaTool: ModeActions = {
   },
   mousemove: ({ uiState }) => {
     if (
-      uiState.mode.type !== 'AREA_TOOL' ||
+      uiState.mode.type !== 'RECTANGLE_TOOL' ||
       !hasMovedTile(uiState.mouse) ||
       !uiState.mode.area ||
       !uiState.mouse.mousedown
@@ -29,7 +29,7 @@ export const AreaTool: ModeActions = {
     uiState.actions.setMode(newMode);
   },
   mousedown: ({ uiState }) => {
-    if (uiState.mode.type !== 'AREA_TOOL') return;
+    if (uiState.mode.type !== 'RECTANGLE_TOOL') return;
 
     const newMode = produce(uiState.mode, (draftState) => {
       draftState.area = {
@@ -42,7 +42,7 @@ export const AreaTool: ModeActions = {
   },
   mouseup: ({ uiState, scene, isRendererInteraction }) => {
     if (
-      uiState.mode.type !== 'AREA_TOOL' ||
+      uiState.mode.type !== 'RECTANGLE_TOOL' ||
       !uiState.mode.area ||
       !isRendererInteraction
     )

src/interaction/useInteractionManager.ts

@@ -5,7 +5,7 @@ import { ModeActions, State } from 'src/types';
 import { getMouse } from 'src/utils';
 import { Cursor } from './modes/Cursor';
 import { DragItems } from './modes/DragItems';
-import { AreaTool } from './modes/AreaTool';
+import { RectangleTool } from './modes/RectangleTool';
 import { Connector } from './modes/Connector';
 import { Pan } from './modes/Pan';
 import { PlaceElement } from './modes/PlaceElement';
@@ -13,7 +13,7 @@ import { PlaceElement } from './modes/PlaceElement';
 const modes: { [k in string]: ModeActions } = {
   CURSOR: Cursor,
   DRAG_ITEMS: DragItems,
-  AREA_TOOL: AreaTool,
+  RECTANGLE_TOOL: RectangleTool,
   CONNECTOR: Connector,
   PAN: Pan,
   PLACE_ELEMENT: PlaceElement

src/types/ui.ts

@@ -83,7 +83,7 @@ export interface ConnectorMode {
 }
 
 export interface AreaToolMode {
-  type: 'AREA_TOOL';
+  type: 'RECTANGLE_TOOL';
   showCursor: boolean;
   area: {
     from: Coords;