Don't change tile size when dragging

src/video-grid/NewVideoGrid.tsx

@@ -44,6 +44,7 @@ import {
   forEachCellInArea,
   cycleTileSize,
   appendItems,
+  tryMoveTile,
 } from "./model";
 import { TileWrapper } from "./TileWrapper";
 
@@ -280,6 +281,8 @@ export const NewVideoGrid: FC<Props> = ({
   const animateDraggedTile = (endOfGesture: boolean) => {
     const { tileId, tileX, tileY, cursorX, cursorY } = dragState.current!;
     const tile = tiles.find((t) => t.item.id === tileId)!;
+    const originIndex = grid!.cells.findIndex((c) => c?.item.id === tileId);
+    const originCell = grid!.cells[originIndex]!;
 
     springRef.current
       .find((c) => (c.item as Tile).item.id === tileId)
@@ -310,23 +313,36 @@ export const NewVideoGrid: FC<Props> = ({
             }
       );
 
-    const overTile = tiles.find(
-      (t) =>
-        cursorX >= t.x &&
-        cursorX < t.x + t.width &&
-        cursorY >= t.y &&
-        cursorY < t.y + t.height
+    const columns = grid!.columns;
+    const rows = row(grid!.cells.length - 1, grid!) + 1;
+
+    const cursorColumn = Math.floor(
+      (cursorX / slotGrid!.clientWidth) * columns
     );
-    if (overTile !== undefined && overTile.item.id !== tileId) {
-      setGrid((g) => ({
-        ...g!,
-        cells: g!.cells.map((c) => {
-          if (c?.item === overTile.item) return { ...c, item: tile.item };
-          if (c?.item === tile.item) return { ...c, item: overTile.item };
-          return c;
-        }),
-      }));
-    }
+    const cursorRow = Math.floor((cursorY / slotGrid!.clientHeight) * rows);
+
+    const cursorColumnOnTile = Math.floor(
+      ((cursorX - tileX) / tile.width) * originCell.columns
+    );
+    const cursorRowOnTile = Math.floor(
+      ((cursorY - tileY) / tile.height) * originCell.rows
+    );
+
+    const dest =
+      Math.max(
+        0,
+        Math.min(
+          columns - originCell.columns,
+          cursorColumn - cursorColumnOnTile
+        )
+      ) +
+      grid!.columns *
+        Math.max(
+          0,
+          Math.min(rows - originCell.rows, cursorRow - cursorRowOnTile)
+        );
+
+    if (dest !== originIndex) setGrid((g) => tryMoveTile(g, originIndex, dest));
   };
 
   // Callback for useDrag. We could call useDrag here, but the default