refactor: propagates renaming of rectangle tool

src/components/Groups/Groups.tsx

@@ -17,7 +17,7 @@ export const Groups = () => {
       {groups.map((group) => {
         return <Group key={group.id} {...group} />;
       })}
-      {mode.type === 'RECTANGLE_TOOL' && mode.area && (
+      {mode.type === 'RECTANGLE.DRAW' && 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: 'RECTANGLE_TOOL',
+            type: 'RECTANGLE.DRAW',
             showCursor: true,
             area: null
           });
         }}
-        isActive={mode.type === 'RECTANGLE_TOOL'}
+        isActive={mode.type === 'RECTANGLE.DRAW'}
         size={theme.customVars.toolMenu.height}
       />
       <IconButton

src/interaction/modes/Rectangle/DrawRectangle.ts

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

src/interaction/modes/Rectangle/ResizeRectangle.ts

@@ -0,0 +1,7 @@
+import { ModeActions } from 'src/types';
+
+export const ResizeRectangle: ModeActions = {
+  mousemove: ({ uiState }) => {},
+  mousedown: () => {},
+  mouseup: () => {}
+};

src/interaction/useInteractionManager.ts

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

src/types/ui.ts

@@ -82,8 +82,8 @@ export interface ConnectorMode {
   connector: Connector | null;
 }
 
-export interface AreaToolMode {
-  type: 'RECTANGLE_TOOL';
+export interface DrawRectangleMode {
+  type: 'RECTANGLE.DRAW';
   showCursor: boolean;
   area: {
     from: Coords;
@@ -91,6 +91,12 @@ export interface AreaToolMode {
   } | null;
 }
 
+export interface ResizeRectangleMode {
+  type: 'RECTANGLE.RESIZE';
+  showCursor: boolean;
+  id: string;
+}
+
 export type Mode =
   | InteractionsDisabled
   | CursorMode
@@ -99,7 +105,8 @@ export type Mode =
   | LassoMode
   | PlaceElementMode
   | ConnectorMode
-  | AreaToolMode;
+  | DrawRectangleMode
+  | ResizeRectangleMode;
 // End mode types
 
 export type ContextMenu =