fix(tile): Dragging behavior and clean-ups

Reduced tile shifts while dragging differently sized
tiles.

Tile's actions DOM part will no longer trigger
drag behavior even in `tile` drag mode.

Removed auto-scroll behavior for now.

Added tests for drag behavior with tile actions slot children.

Author: rkaraivanov

src/components/common/util.ts

@@ -324,3 +324,13 @@ export function omit<T extends object>(entry: T, ...props: Array<keyof T>) {
     Object.entries(entry).filter(([key, _]) => !props.includes(key as keyof T))
   );
 }
+
+/** Returns the center x/y coordinate of a given element. */
+export function getCenterPoint(element: Element) {
+  const { left, top, width, height } = element.getBoundingClientRect();
+
+  return {
+    x: left + width * 0.5,
+    y: top + height * 0.5,
+  };
+}

src/components/resize-container/auto-scroll.ts

@@ -18,7 +18,6 @@ import type {
   ResizeMode,
   ResizeState,
 } from './types.js';
-// import { addScrollBehavior } from './auto-scroll.js';
 
 export interface IgcResizeContainerComponentEventMap {
   igcResizeStart: CustomEvent<ResizeCallbackParams>;
@@ -65,9 +64,6 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
     bottom: createRef(),
   };
 
-  // REVIEW: Scroll behavior
-  // private _scroll = addScrollBehavior(this);
-
   @state()
   private _isActive = false;
 
@@ -134,26 +130,6 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
     }
   }
 
-  // REVIEW: Scroll behavior
-  // private _scrollIfNeeded(params: ResizeCallbackParams): void {
-  //   const {
-  //     state: {
-  //       initial: { bottom, right },
-  //       deltaX,
-  //       deltaY,
-  //     },
-  //   } = params;
-  //   const { x, y } = this._scroll.state;
-
-  //   if (bottom + deltaX > x || right + deltaY > y) {
-  //     this._scroll.scrollBy({
-  //       left: deltaX * 2,
-  //       top: deltaY * 2,
-  //       behavior: 'smooth',
-  //     });
-  //   }
-  // }
-
   private _handlePointerEnter(): void {
     this._isActive = true;
   }
@@ -163,18 +139,12 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
   }
 
   private _handleResizeStart(params: ResizeCallbackParams): void {
-    // REVIEW: Expose a property to control this behavior?
-    params.event.preventDefault();
-
     this.emitEvent('igcResizeStart', { bubbles: false, detail: params });
-    // REVIEW: Scroll behavior
-    // this._scroll.saveCurrentState();
   }
 
   private _handleResize(params: ResizeCallbackParams): void {
     this._updateResizingState(params);
     this.emitEvent('igcResize', { bubbles: false, detail: params });
-    // this._scrollIfNeeded(params);
   }
 
   private _handleResizeEnd(params: ResizeCallbackParams): void {

src/components/resize-container/resize-container.ts

@@ -95,7 +95,11 @@ class TileDragStack {
     return last(this._stack).tile;
   }
 
-  public add(tile: IgcTileComponent): void {
+  public pop(): TileDragStackEntry | undefined {
+    return this._stack.pop();
+  }
+
+  public push(tile: IgcTileComponent): void {
     this._stack.push({
       tile,
       position: tile.position,

src/components/tile-manager/position.ts

@@ -8,8 +8,10 @@ import {
 import { restore, spy, stub } from 'sinon';
 
 import { range } from 'lit/directives/range.js';
+import IgcIconButtonComponent from '../button/icon-button.js';
 import { escapeKey } from '../common/controllers/key-bindings.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
+import { getCenterPoint } from '../common/util.js';
 import {
   simulateClick,
   simulateKeyboard,
@@ -38,27 +40,32 @@ describe('Tile drag and drop', () => {
     return tileManager.tiles[index];
   }
 
+  function getTileContentContainer(element: IgcTileComponent) {
+    return element.renderRoot.querySelector<HTMLDivElement>(
+      '[part="content-container"]'
+    )!;
+  }
+
+  function getActionButtons(tile: IgcTileComponent) {
+    return Array.from(
+      tile.renderRoot
+        .querySelector('[part="header"]')
+        ?.querySelectorAll(IgcIconButtonComponent.tagName) ?? []
+    );
+  }
+
   async function dragAndDrop(tile: IgcTileComponent, target: IgcTileComponent) {
-    const { top, left, width, height } = target.getBoundingClientRect();
+    const { x, y } = getCenterPoint(target);
 
     simulatePointerDown(tile);
-    simulatePointerMove(tile, {
-      clientX: left + width * 0.5,
-      clientY: top + height * 0.5,
-    });
+    simulatePointerMove(tile, { clientX: x, clientY: y });
 
     await viewTransitionComplete();
 
     simulateLostPointerCapture(tile);
     await elementUpdated(tileManager);
   }
 
-  function getTileContentContainer(element: IgcTileComponent) {
-    return element.renderRoot.querySelector<HTMLDivElement>(
-      '[part="content-container"]'
-    )!;
-  }
-
   function createTileManager(mode: TileManagerDragMode = 'none') {
     const result = Array.from(range(5)).map(
       (i) => html`
@@ -154,16 +161,13 @@ describe('Tile drag and drop', () => {
     it('should cancel dragging with Escape', async () => {
       const draggedTile = getTile(0);
       const dropTarget = getTile(4);
-      const dropTargetRect = dropTarget.getBoundingClientRect();
+      const { x, y } = getCenterPoint(dropTarget);
 
       expect(draggedTile.position).to.equal(0);
       expect(dropTarget.position).to.equal(4);
 
       simulatePointerDown(draggedTile);
-      simulatePointerMove(draggedTile, {
-        clientX: dropTargetRect.left + dropTargetRect.width * 0.5,
-        clientY: dropTargetRect.top + dropTargetRect.height * 0.5,
-      });
+      simulatePointerMove(draggedTile, { clientX: x, clientY: y });
 
       await viewTransitionComplete();
       expect(draggedTile.position).to.equal(4);
@@ -253,12 +257,10 @@ describe('Tile drag and drop', () => {
       expect(tileManager.tiles[1].id).to.equal('tile1');
     });
 
-    // REVIEW
     it('should swap positions only once while dragging smaller tile over bigger tile when using slide action', async () => {
       tileManager.columnCount = 5;
       const draggedTile = getTile(0);
       const dropTarget = getTile(1);
-      const dropTargetRect = dropTarget.getBoundingClientRect();
 
       draggedTile.rowSpan = 1;
       draggedTile.colSpan = 1;
@@ -267,22 +269,24 @@ describe('Tile drag and drop', () => {
       dropTarget.colSpan = 3;
       await elementUpdated(tileManager);
 
+      const { x, y } = getCenterPoint(dropTarget);
+
       simulatePointerDown(draggedTile);
-      simulatePointerMove(draggedTile, {
-        clientX: dropTargetRect.left + dropTargetRect.width * 0.5,
-        clientY: dropTargetRect.top + dropTargetRect.height * 0.5,
-      });
+      simulatePointerMove(draggedTile, { clientX: x, clientY: y });
       await viewTransitionComplete();
 
       // Simulate second dragover event (inside dropTarget bounds)
       simulatePointerMove(draggedTile, {
-        clientX: dropTargetRect.left + dropTargetRect.width * 0.5 + 5,
-        clientY: dropTargetRect.top + dropTargetRect.height * 0.5 + 5,
+        clientX: x + 5,
+        clientY: y + 5,
       });
       await viewTransitionComplete();
 
       expect(draggedTile.position).to.equal(1);
       expect(dropTarget.position).to.equal(0);
+
+      simulateLostPointerCapture(draggedTile);
+      await elementUpdated(draggedTile);
     });
   });
 
@@ -299,13 +303,10 @@ describe('Tile drag and drop', () => {
       target: IgcTileComponent
     ) {
       const header = tile.renderRoot.querySelector('[part="title"]')!;
-      const { top, left, width, height } = target.getBoundingClientRect();
+      const { x, y } = getCenterPoint(target);
 
       simulatePointerDown(header);
-      simulatePointerMove(tile, {
-        clientX: left + width * 0.5,
-        clientY: top + height * 0.5,
-      });
+      simulatePointerMove(tile, { clientX: x, clientY: y });
 
       await viewTransitionComplete();
 
@@ -342,14 +343,11 @@ describe('Tile drag and drop', () => {
       const eventSpy = spy(tileManager, 'emitEvent');
 
       const contentContainer = getTileContentContainer(draggedTile);
-      const dropTargetRect = dropTarget.getBoundingClientRect();
+      const { x, y } = getCenterPoint(dropTarget);
 
       simulatePointerDown(contentContainer);
 
-      simulatePointerMove(draggedTile, {
-        clientX: dropTargetRect.left + dropTargetRect.width * 0.5,
-        clientY: dropTargetRect.top + dropTargetRect.height * 0.5,
-      });
+      simulatePointerMove(draggedTile, { clientX: x, clientY: y });
       await viewTransitionComplete();
 
       simulateLostPointerCapture(draggedTile);
@@ -368,6 +366,17 @@ describe('Tile drag and drop', () => {
       );
     });
 
+    function createSlottedActionTile() {
+      const tile = document.createElement(IgcTileComponent.tagName);
+      const button = document.createElement('button');
+
+      button.slot = 'actions';
+      button.textContent = 'Custom action';
+      tile.append(button);
+
+      return { tile, button };
+    }
+
     it('should disable drag and drop when tile is maximized', async () => {
       const eventSpy = spy(tileManager, 'emitEvent');
       const draggedTile = getTile(0);
@@ -429,5 +438,69 @@ describe('Tile drag and drop', () => {
 
       restore();
     });
+
+    it('should not start a drag operation when interacting with the default tile actions in `tile-header` drag mode', async () => {
+      tileManager.dragMode = 'tile-header';
+      const tile = getTile(0);
+      const [maximize, _] = getActionButtons(tile);
+      const eventSpy = spy(tileManager, 'emitEvent');
+
+      maximize.click();
+      await elementUpdated(tile);
+
+      expect(tile.maximized).to.be.true;
+      expect(eventSpy).not.calledWith('igcTileDragStarted');
+
+      maximize.click();
+      await elementUpdated(tile);
+
+      expect(tile.maximized).to.be.false;
+    });
+
+    it('should not start a drag operation when interacting with the default tile actions in `tile` drag mode', async () => {
+      tileManager.dragMode = 'tile';
+      const tile = getTile(0);
+      const [maximize, _] = getActionButtons(tile);
+      const eventSpy = spy(tileManager, 'emitEvent');
+
+      maximize.click();
+      await elementUpdated(tile);
+
+      expect(tile.maximized).to.be.true;
+      expect(eventSpy).not.calledWith('igcTileDragStarted');
+
+      maximize.click();
+      await elementUpdated(tile);
+
+      expect(tile.maximized).to.be.false;
+    });
+
+    it('should not start a drag operation when interacting with the slotted tile actions in `tile-header` drag mode', async () => {
+      const eventSpy = spy(tileManager, 'emitEvent');
+      const { tile, button } = createSlottedActionTile();
+
+      tileManager.dragMode = 'tile-header';
+      tileManager.append(tile);
+      await elementUpdated(tileManager);
+
+      button.click();
+      await elementUpdated(tile);
+
+      expect(eventSpy).not.calledWith('igcTileDragStarted');
+    });
+
+    it('should not start a drag operation when interacting with the slotted tile actions in `tile` drag mode', async () => {
+      const eventSpy = spy(tileManager, 'emitEvent');
+      const { tile, button } = createSlottedActionTile();
+
+      tileManager.dragMode = 'tile';
+      tileManager.append(tile);
+      await elementUpdated(tileManager);
+
+      button.click();
+      await elementUpdated(tile);
+
+      expect(eventSpy).not.calledWith('igcTileDragStarted');
+    });
   });
 });

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

@@ -156,7 +156,7 @@ describe('Tile Manager component', () => {
               <header part="title">
                 <slot name="title"></slot>
               </header>
-              <section part="actions">
+              <section id="tile-actions" part="actions">
                 <slot name="maximize-action">
                   <igc-icon-button
                     aria-label="expand_content"