fix: first tile not registering when dragging item

src/components/ToolMenu/ToolMenu.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { Card, useTheme } from '@mui/material';
 import { ItemControlsTypeEnum } from 'src/types';
 import {
-  PanTool as PanToolIcon,
-  ZoomIn as ZoomInIcon,
-  ZoomOut as ZoomOutIcon,
-  NearMe as NearMeIcon,
-  CenterFocusStrong as CenterFocusStrongIcon,
-  Add as AddIcon,
+  PanToolOutlined as PanToolIcon,
+  ZoomInOutlined as ZoomInIcon,
+  ZoomOutOutlined as ZoomOutIcon,
+  NearMeOutlined as NearMeIcon,
+  CenterFocusStrongOutlined as CenterFocusStrongIcon,
+  AddOutlined as AddIcon,
   EastOutlined as ConnectorIcon,
-  CropSquare as CropSquareIcon
+  CropSquareOutlined as CropSquareIcon
 } from '@mui/icons-material';
 import { useUiStateStore } from 'src/stores/uiStateStore';
 import { useDiagramUtils } from 'src/hooks/useDiagramUtils';

src/interaction/reducers/Cursor.ts

@@ -1,24 +1,11 @@
 import { produce } from 'immer';
 import { ItemControlsTypeEnum, InteractionReducer } from 'src/types';
-import {
-  CoordsUtils,
-  filterNodesByTile,
-  getItemById,
-  hasMovedTile
-} from 'src/utils';
+import { filterNodesByTile, getItemById, hasMovedTile } from 'src/utils';
 
 export const Cursor: InteractionReducer = {
   type: 'CURSOR',
   mousemove: ({ uiState }) => {
-    if (
-      uiState.mode.type !== 'CURSOR' ||
-      !hasMovedTile(uiState.mouse) ||
-      !uiState.mouse.delta ||
-      CoordsUtils.isEqual(uiState.mouse.delta.tile, CoordsUtils.zero())
-    )
-      return;
-
-    // User has moved tile since the last event
+    if (uiState.mode.type !== 'CURSOR' || !hasMovedTile(uiState.mouse)) return;
 
     if (uiState.mode.mousedown) {
       // User is in mousedown mode

src/interaction/reducers/DragItems.ts

@@ -3,9 +3,17 @@ import { InteractionReducer } from 'src/types';
 
 export const DragItems: InteractionReducer = {
   type: 'DRAG_ITEMS',
-  entry: ({ rendererRef }) => {
+  entry: ({ uiState, scene, rendererRef }) => {
     const renderer = rendererRef;
+    if (uiState.mode.type !== 'DRAG_ITEMS') return;
+
     renderer.style.userSelect = 'none';
+
+    uiState.mode.items.forEach((node) => {
+      scene.actions.updateNode(node.id, {
+        position: uiState.mouse.position.tile
+      });
+    });
   },
   exit: ({ rendererRef }) => {
     const renderer = rendererRef;

src/utils/renderer.ts

@@ -390,7 +390,7 @@ export const getRectangleFromSize: GetRectangleFromSize = (from, size) => {
 };
 
 export const hasMovedTile = (mouse: Mouse) => {
-  return (
-    mouse.delta && !CoordsUtils.isEqual(mouse.delta.tile, CoordsUtils.zero())
-  );
+  if (!mouse.delta) return false;
+
+  return !CoordsUtils.isEqual(mouse.delta.tile, CoordsUtils.zero());
 };