Swap tiles based on moving direction

src/components/tile-manager/tile.ts

@@ -26,7 +26,6 @@ import {
   asNumber,
   createCounter,
   findElementFromEventPath,
-  getCenterPoint,
   isEmpty,
   partNameMap,
 } from '../common/util.js';
@@ -135,6 +134,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
   private _position = -1;
   private _resizeState = createTileResizeState();
   private _dragStack = createTileDragStack();
+  private _previousPointerPosition: { x: number; y: number } | null = null;
 
   private _customAdorners = new Map<string, boolean>(
     Object.entries({
@@ -402,14 +402,40 @@ export default class IgcTileComponent extends EventEmitterMixin<
   private _handleDragOver(parameters: DragCallbackParameters) {
     const match = parameters.state.element as IgcTileComponent;
     const { clientX, clientY } = parameters.event;
+    const { left, top, width, height } = match.getBoundingClientRect();
 
-    if (this._dragStack.peek() === match) {
-      const { x, y } = getCenterPoint(match);
+    const relativeX = (clientX - left) / width;
+    const relativeY = (clientY - top) / height;
+
+    if (this._previousPointerPosition) {
+      const deltaX = clientX - this._previousPointerPosition.x;
+      const deltaY = clientY - this._previousPointerPosition.y;
+
+      const movingRight = deltaX > 0;
+      const movingLeft = deltaX < 0;
+      const movingDown = deltaY > 0;
+      const movingUp = deltaY < 0;
+
+      const isHorizontalMove = Math.abs(deltaX) > Math.abs(deltaY);
+      const isVerticalMove = Math.abs(deltaY) > Math.abs(deltaX);
 
       const shouldSwap =
-        this.position <= match.position
-          ? clientX > x || clientY > y
-          : clientX < x || clientY < y;
+        (this.position < match.position &&
+          isHorizontalMove &&
+          movingRight &&
+          relativeX > 0.75) ||
+        (this.position > match.position &&
+          isHorizontalMove &&
+          movingLeft &&
+          relativeX < 0.25) ||
+        (this.position < match.position &&
+          isVerticalMove &&
+          movingDown &&
+          relativeY > 0.75) ||
+        (this.position > match.position &&
+          isVerticalMove &&
+          movingUp &&
+          relativeY < 0.25);
 
       if (shouldSwap) {
         this._dragStack.pop();
@@ -419,15 +445,17 @@ export default class IgcTileComponent extends EventEmitterMixin<
           swapTiles(this, match);
         });
       }
-
-      return;
     }
 
-    this._dragStack.push(match);
+    this._previousPointerPosition = { x: clientX, y: clientY };
 
-    startViewTransition(() => {
-      swapTiles(this, match);
-    });
+    if (this._dragStack.peek() !== match) {
+      this._dragStack.push(match);
+
+      startViewTransition(() => {
+        swapTiles(this, match);
+      });
+    }
   }
 
   private _handleDragCancel() {