fix: bug with moving rectangles

src/interaction/modes/Cursor.ts

@@ -1,10 +1,10 @@
 import { produce } from 'immer';
 import { ItemControlsTypeEnum, ModeActions } from 'src/types';
-import { getItemAtTile, getItemById, hasMovedTile } from 'src/utils';
+import { getItemAtTile, getItemById } from 'src/utils';
 
 export const Cursor: ModeActions = {
   mousemove: ({ uiState }) => {
-    if (uiState.mode.type !== 'CURSOR' || !hasMovedTile(uiState.mouse)) return;
+    if (uiState.mode.type !== 'CURSOR') return;
 
     if (uiState.mode.mousedownItem) {
       // User is in dragging mode
@@ -13,17 +13,6 @@ export const Cursor: ModeActions = {
         showCursor: true,
         items: [uiState.mode.mousedownItem]
       });
-
-      // draftState.mode = {
-      //   type: 'LASSO',
-      //   showCursor: false,
-      //   selection: {
-      //     startTile: draftState.mode.mousedown.tile,
-      //     endTile: draftState.mouse.position.tile,
-      //     items: []
-      //   },
-      //   isDragging: false
-      // };
     }
   },
   mousedown: ({ uiState, scene, isRendererInteraction }) => {

src/interaction/modes/DragItems.ts

@@ -1,20 +1,12 @@
-import { hasMovedTile, CoordsUtils, getItemById } from 'src/utils';
 import { ModeActions } from 'src/types';
+import { getItemById, CoordsUtils, hasMovedTile } from 'src/utils';
 
 export const DragItems: ModeActions = {
-  entry: ({ uiState, scene, rendererRef }) => {
+  entry: ({ uiState, rendererRef }) => {
     const renderer = rendererRef;
     if (uiState.mode.type !== 'DRAG_ITEMS') return;
 
     renderer.style.userSelect = 'none';
-
-    uiState.mode.items.forEach((item) => {
-      if (item.type === 'NODE') {
-        scene.actions.updateNode(item.id, {
-          position: uiState.mouse.position.tile
-        });
-      }
-    });
   },
   exit: ({ rendererRef }) => {
     const renderer = rendererRef;
@@ -24,32 +16,22 @@ export const DragItems: ModeActions = {
     if (
       uiState.mode.type !== 'DRAG_ITEMS' ||
       !uiState.mouse.mousedown ||
-      !hasMovedTile(uiState.mouse)
+      !hasMovedTile(uiState.mouse) ||
+      !uiState.mouse.delta?.tile
     )
       return;
 
-    // User is dragging
+    const delta = uiState.mouse.delta.tile;
+
     uiState.mode.items.forEach((item) => {
       if (item.type === 'NODE') {
         scene.actions.updateNode(item.id, {
           position: uiState.mouse.position.tile
         });
-      } else if (item.type === 'RECTANGLE' && uiState.mouse.delta?.tile) {
+      } else if (item.type === 'RECTANGLE') {
         const { item: rectangle } = getItemById(scene.rectangles, item.id);
-        const newFrom = CoordsUtils.add(
-          rectangle.from,
-          uiState.mouse.delta.tile
-        );
-        const newTo = CoordsUtils.add(rectangle.to, uiState.mouse.delta.tile);
-        // const bounds = getBoundingBox([rectangle.from, rectangle.to]);
-
-        // scene.nodes.forEach((node) => {
-        //   if (isWithinBounds(node.position, bounds)) {
-        //     draftState.actions.updateNode(node.id, {
-        //       position: CoordsUtils.add(node.position, delta)
-        //     });
-        //   }
-        // });
+        const newFrom = CoordsUtils.add(rectangle.from, delta);
+        const newTo = CoordsUtils.add(rectangle.to, delta);
 
         scene.actions.updateRectangle(item.id, { from: newFrom, to: newTo });
       }

src/interaction/modes/Rectangle/ResizeRectangle.ts

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

src/interaction/useInteractionManager.ts

@@ -6,7 +6,6 @@ import { getMouse } from 'src/utils';
 import { Cursor } from './modes/Cursor';
 import { DragItems } from './modes/DragItems';
 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';
@@ -15,7 +14,6 @@ const modes: { [k in string]: ModeActions } = {
   CURSOR: Cursor,
   DRAG_ITEMS: DragItems,
   'RECTANGLE.DRAW': DrawRectangle,
-  'RESIZE.RECTANGLE': ResizeRectangle,
   CONNECTOR: Connector,
   PAN: Pan,
   PLACE_ELEMENT: PlaceElement

src/types/ui.ts

@@ -48,28 +48,17 @@ export interface CursorMode {
   mousedownItem: SceneItemReference | null;
 }
 
-export interface PanMode {
-  type: 'PAN';
-  showCursor: boolean;
-}
-
-export interface LassoMode {
-  type: 'LASSO';
-  showCursor: boolean;
-  selection: {
-    startTile: Coords;
-    endTile: Coords;
-    items: SceneItemReference[];
-  };
-  isDragging: boolean;
-}
-
 export interface DragItemsMode {
   type: 'DRAG_ITEMS';
   showCursor: boolean;
   items: SceneItemReference[];
 }
 
+export interface PanMode {
+  type: 'PAN';
+  showCursor: boolean;
+}
+
 export interface PlaceElementMode {
   type: 'PLACE_ELEMENT';
   showCursor: boolean;
@@ -101,12 +90,11 @@ export type Mode =
   | InteractionsDisabled
   | CursorMode
   | PanMode
-  | DragItemsMode
-  | LassoMode
   | PlaceElementMode
   | ConnectorMode
   | DrawRectangleMode
-  | ResizeRectangleMode;
+  | ResizeRectangleMode
+  | DragItemsMode;
 // End mode types
 
 export type ContextMenu =