fix: bug on dragging items

src/interaction/modes/Cursor.ts

@@ -1,16 +1,19 @@
 import { produce } from 'immer';
 import { ModeActions } from 'src/types';
-import { getItemAtTile } from 'src/utils';
+import { getItemAtTile, hasMovedTile } from 'src/utils';
 
 export const Cursor: ModeActions = {
   mousemove: ({ uiState }) => {
-    if (uiState.mode.type !== 'CURSOR') return;
+    if (uiState.mode.type !== 'CURSOR' || !hasMovedTile(uiState.mouse)) return;
 
-    if (uiState.mode.mousedownItem) {
+    const { mousedownItem } = uiState.mode;
+
+    if (mousedownItem) {
       uiState.actions.setMode({
         type: 'DRAG_ITEMS',
         showCursor: true,
-        items: [uiState.mode.mousedownItem]
+        items: [mousedownItem],
+        isInitialMovement: true
       });
     }
   },

src/interaction/modes/DragItems.ts

@@ -1,3 +1,4 @@
+import { produce } from 'immer';
 import { ModeActions, Coords, SceneItemReference, SceneStore } from 'src/types';
 import { getItemById, CoordsUtils, hasMovedTile } from 'src/utils';
 
@@ -24,36 +25,41 @@ const dragItems = (
 };
 
 export const DragItems: ModeActions = {
-  entry: ({ uiState, scene, rendererRef }) => {
+  entry: ({ uiState, rendererRef }) => {
     if (uiState.mode.type !== 'DRAG_ITEMS' || !uiState.mouse.mousedown) return;
 
     const renderer = rendererRef;
     renderer.style.userSelect = 'none';
-
-    const delta = CoordsUtils.subtract(
-      uiState.mouse.position.tile,
-      uiState.mouse.mousedown.tile
-    );
-    dragItems(uiState.mode.items, delta, scene);
   },
   exit: ({ rendererRef }) => {
     const renderer = rendererRef;
     renderer.style.userSelect = 'auto';
   },
   mousemove: ({ uiState, scene }) => {
-    if (
-      uiState.mode.type !== 'DRAG_ITEMS' ||
-      !uiState.mouse.mousedown ||
-      !hasMovedTile(uiState.mouse) ||
-      !uiState.mouse.delta?.tile
-    )
+    if (uiState.mode.type !== 'DRAG_ITEMS' || !uiState.mouse.mousedown) return;
+
+    if (uiState.mode.isInitialMovement) {
+      const delta = CoordsUtils.subtract(
+        uiState.mouse.position.tile,
+        uiState.mouse.mousedown.tile
+      );
+
+      dragItems(uiState.mode.items, delta, scene);
+
+      uiState.actions.setMode(
+        produce(uiState.mode, (draftState) => {
+          draftState.isInitialMovement = false;
+        })
+      );
+
       return;
+    }
+
+    if (!hasMovedTile(uiState.mouse) || !uiState.mouse.delta?.tile) return;
 
     const delta = uiState.mouse.delta.tile;
 
     dragItems(uiState.mode.items, delta, scene);
-
-    uiState.actions.setContextMenu(null);
   },
   mouseup: ({ uiState }) => {
     uiState.actions.setMode({

src/types/ui.ts

@@ -59,6 +59,7 @@ export interface DragItemsMode {
   type: 'DRAG_ITEMS';
   showCursor: boolean;
   items: SceneItemReference[];
+  isInitialMovement: Boolean;
 }
 
 export interface PanMode {