fix(*): move drag direction to controller and add rtl checks

Author: mtsvyatkova

src/components/common/controllers/drag.ts

@@ -6,14 +6,20 @@ import type {
 import type { Ref } from 'lit/directives/ref.js';
 
 import { getDefaultLayer } from '../../resize-container/default-ghost.js';
-import { findElementFromEventPath, getRoot, roundByDPR } from '../util.js';
+import {
+  findElementFromEventPath,
+  getRoot,
+  isLTR,
+  roundByDPR,
+} from '../util.js';
 
 type DragCallback = (parameters: DragCallbackParameters) => unknown;
 type DragCancelCallback = (state: DragState) => unknown;
 
 export type DragCallbackParameters = {
   event: PointerEvent;
   state: DragState;
+  direction: Direction | null;
 };
 
 type State = {
@@ -28,6 +34,13 @@ type DragState = State & {
   element: Element | null;
 };
 
+type Direction = {
+  isHorizontalMove: boolean;
+  movingDown: boolean;
+  movingToEndHorizontally: boolean;
+  movingToStartHorizontally: boolean;
+};
+
 type DragControllerConfiguration = {
   /** Whether the drag feature is enabled for the current host. */
   enabled?: boolean;
@@ -109,6 +122,8 @@ class DragController implements ReactiveController {
   private _hasPointerCapture = false;
 
   private _ghost: HTMLElement | null = null;
+  private _previousPointerPosition: { x: number; y: number } | null = null;
+  private _direction: Direction | null = null;
 
   /** Whether `snapToCursor` is enabled for the controller. */
   private get _hasSnapping(): boolean {
@@ -164,6 +179,29 @@ class DragController implements ReactiveController {
     };
   }
 
+  private _trackPointerMovement(
+    clientX: number,
+    clientY: number
+  ): {
+    isHorizontalMove: boolean;
+    movingDown: boolean;
+    movingToEndHorizontally: boolean;
+    movingToStartHorizontally: boolean;
+  } {
+    const deltaX = clientX - (this._previousPointerPosition?.x ?? clientX);
+    const deltaY = clientY - (this._previousPointerPosition?.y ?? clientY);
+    const LTR = isLTR(this._host);
+
+    this._previousPointerPosition = { x: clientX, y: clientY };
+
+    return {
+      isHorizontalMove: Math.abs(deltaX) >= Math.abs(deltaY),
+      movingDown: deltaY >= 0,
+      movingToEndHorizontally: LTR ? deltaX >= 0 : deltaX <= 0,
+      movingToStartHorizontally: LTR ? deltaX < 0 : deltaX > 0,
+    };
+  }
+
   constructor(
     host: ReactiveControllerHost & LitElement,
     options?: DragControllerConfiguration
@@ -249,7 +287,15 @@ class DragController implements ReactiveController {
     this._createDragGhost();
     this._updatePosition(event);
 
-    const parameters = { event, state: this._stateParameters };
+    this._previousPointerPosition = { x: event.clientX, y: event.clientY };
+    this._direction = this._trackPointerMovement(event.clientX, event.clientY);
+
+    const parameters = {
+      event,
+      state: this._stateParameters,
+      direction: this._direction,
+    };
+
     if (this._options.start?.call(this._host, parameters) === false) {
       this.dispose();
       return;
@@ -267,16 +313,30 @@ class DragController implements ReactiveController {
     this._updatePosition(event);
     this._updateMatcher(event);
 
-    const parameters = { event, state: this._stateParameters };
+    this._direction = this._trackPointerMovement(event.clientX, event.clientY);
+
+    const parameters = {
+      event,
+      state: this._stateParameters,
+      direction: this._direction,
+    };
+
     this._options.move?.call(this._host, parameters);
 
     this._assignPosition(this._dragItem);
   }
 
   private _handlePointerEnd(event: PointerEvent): void {
+    this._previousPointerPosition = null;
     this._options.end?.call(this._host, {
       event,
       state: this._stateParameters,
+      direction: {
+        isHorizontalMove: false,
+        movingDown: false,
+        movingToEndHorizontally: false,
+        movingToStartHorizontally: false,
+      },
     });
     this.dispose();
   }
@@ -353,6 +413,7 @@ class DragController implements ReactiveController {
       this._options.enter?.call(this._host, {
         event,
         state: this._stateParameters,
+        direction: this._direction,
       });
       return;
     }
@@ -361,6 +422,7 @@ class DragController implements ReactiveController {
       this._options.leave?.call(this._host, {
         event,
         state: this._stateParameters,
+        direction: this._direction,
       });
       this._matchedElement = null;
       return;
@@ -370,6 +432,7 @@ class DragController implements ReactiveController {
       this._options.over?.call(this._host, {
         event,
         state: this._stateParameters,
+        direction: this._direction,
       });
     }
   }

src/components/tile-manager/tile-dnd.spec.ts

@@ -75,7 +75,7 @@ describe('Tile drag and drop', () => {
       tile,
       { clientX: opts.x, clientY: opts.y },
       { x: opts.dx, y: opts.dy },
-      2
+      3
     );
   }
 
@@ -292,6 +292,22 @@ describe('Tile drag and drop', () => {
       await elementUpdated(draggedTile);
     });
 
+    it('should swap positions properly in RTL mode', async () => {
+      tileManager.dir = 'rtl';
+      const draggedTile = getTile(0);
+      const dropTarget = getTile(1);
+
+      await elementUpdated(tileManager);
+
+      expect(draggedTile.position).to.equal(0);
+      expect(dropTarget.position).to.equal(1);
+
+      await dragAndDrop(draggedTile, dropTarget);
+
+      expect(draggedTile.position).to.equal(1);
+      expect(dropTarget.position).to.equal(0);
+    });
+
     it('should swap positions properly when row, column and span are specified', async () => {
       const draggedTile = getTile(0);
       const dropTarget = getTile(1);

src/components/tile-manager/tile-ghost-util.ts

@@ -1,3 +1,4 @@
+import { isLTR } from '../common/util.js';
 import type IgcTileComponent from './tile.js';
 
 export function createTileDragGhost(tile: IgcTileComponent): IgcTileComponent {
@@ -13,6 +14,7 @@ export function createTileDragGhost(tile: IgcTileComponent): IgcTileComponent {
   });
 
   Object.assign(clone.style, {
+    direction: isLTR(tile) ? 'ltr' : 'rtl',
     position: 'absolute',
     contain: 'strict',
     top: 0,

src/components/tile-manager/tile.ts

@@ -27,6 +27,7 @@ import {
   createCounter,
   findElementFromEventPath,
   isEmpty,
+  isLTR,
   partNameMap,
 } from '../common/util.js';
 import IgcDividerComponent from '../divider/divider.js';
@@ -399,43 +400,41 @@ export default class IgcTileComponent extends EventEmitterMixin<
     return true;
   }
 
-  private _handleDragOver(parameters: DragCallbackParameters) {
+  private _handleDragOver(parameters: DragCallbackParameters): void {
     const match = parameters.state.element as IgcTileComponent;
-    const { clientX, clientY } = parameters.event;
-    const { left, top, width, height } = match.getBoundingClientRect();
 
-    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);
+    if (this._dragStack.peek() === match) {
+      if (!parameters.direction) return;
+
+      const {
+        isHorizontalMove,
+        movingDown,
+        movingToEndHorizontally,
+        movingToStartHorizontally,
+      } = parameters.direction;
+      const { clientX, clientY } = parameters.event;
+      const { left, top, width, height } = match.getBoundingClientRect();
+      const relativeX = (clientX - left) / width;
+      const relativeY = (clientY - top) / height;
+      const LTR = isLTR(this);
 
       const shouldSwap =
         (this.position < match.position &&
           isHorizontalMove &&
-          movingRight &&
-          relativeX > 0.75) ||
+          movingToEndHorizontally &&
+          (LTR ? relativeX >= 0.75 : relativeX <= 0.25)) ||
         (this.position > match.position &&
           isHorizontalMove &&
-          movingLeft &&
-          relativeX < 0.25) ||
+          movingToStartHorizontally &&
+          (LTR ? relativeX <= 0.25 : relativeX >= 0.75)) ||
         (this.position < match.position &&
-          isVerticalMove &&
+          !isHorizontalMove &&
           movingDown &&
-          relativeY > 0.75) ||
+          relativeY >= 0.75) ||
         (this.position > match.position &&
-          isVerticalMove &&
-          movingUp &&
-          relativeY < 0.25);
+          !isHorizontalMove &&
+          !movingDown &&
+          relativeY <= 0.25);
 
       if (shouldSwap) {
         this._dragStack.pop();
@@ -445,17 +444,15 @@ export default class IgcTileComponent extends EventEmitterMixin<
           swapTiles(this, match);
         });
       }
-    }
 
-    this._previousPointerPosition = { x: clientX, y: clientY };
+      return;
+    }
 
-    if (this._dragStack.peek() !== match) {
-      this._dragStack.push(match);
+    this._dragStack.push(match);
 
-      startViewTransition(() => {
-        swapTiles(this, match);
-      });
-    }
+    startViewTransition(() => {
+      swapTiles(this, match);
+    });
   }
 
   private _handleDragCancel() {