refactor(tile): Drag events dispatch

* Added missing drag events dispatch in the tile
* Cleaned-up some drag handling logic and removed some dead code
* Adjusted tests

Author: rkaraivanov

src/components/common/controllers/drag.ts

@@ -244,7 +244,10 @@ class DragController implements ReactiveController {
     this._updatePosition(event);
 
     const parameters = { event, state: this._stateParameters };
-    this._options.start?.call(this._host, parameters);
+    if (this._options.start?.call(this._host, parameters) === false) {
+      this._removeGhost();
+      return;
+    }
 
     this._assignPosition(this._dragItem);
     this._setDragState();

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

@@ -54,11 +54,36 @@ describe('Tile drag and drop', () => {
     );
   }
 
+  type DragOverOptions = {
+    x: number;
+    y: number;
+    dx: number;
+    dy: number;
+  };
+
+  /**
+   * Simulates drag over behavior for the given tile by firing two pointermove events
+   * inside the tile's bounding box.
+   */
+  function simulateTileDragOver(
+    tile: IgcTileComponent,
+    options?: Partial<DragOverOptions>
+  ) {
+    const opts = Object.assign({ x: 0, y: 0, dx: 1, dy: 1 }, options);
+
+    simulatePointerMove(
+      tile,
+      { clientX: opts.x, clientY: opts.y },
+      { x: opts.dx, y: opts.dy },
+      2
+    );
+  }
+
   async function dragAndDrop(tile: IgcTileComponent, target: IgcTileComponent) {
     const { x, y } = getCenterPoint(target);
 
     simulatePointerDown(tile);
-    simulatePointerMove(tile, { clientX: x, clientY: y });
+    simulateTileDragOver(tile, { x, y });
 
     await viewTransitionComplete();
 
@@ -89,11 +114,11 @@ describe('Tile drag and drop', () => {
     });
 
     it('should not allow dragging tiles', async () => {
-      const eventSpy = spy(tileManager, 'emitEvent');
-
       const draggedTile = getTile(0);
       const dropTarget = getTile(1);
 
+      const eventSpy = spy(draggedTile, 'emitEvent');
+
       await dragAndDrop(draggedTile, dropTarget);
 
       expect(eventSpy).not.called;
@@ -132,42 +157,55 @@ describe('Tile drag and drop', () => {
       );
     });
 
-    it('should correctly fire `igcTileDragStarted` event', async () => {
-      const eventSpy = spy(tileManager, 'emitEvent');
-
+    it('should correctly fire `igcTileDragStart` event', async () => {
       const tile = getTile(0);
+      const eventSpy = spy(tile, 'emitEvent');
 
       simulatePointerDown(tile);
-      await elementUpdated(tileManager);
+      await elementUpdated(tile);
 
-      expect(eventSpy).calledOnceWithExactly('igcTileDragStarted', {
+      expect(eventSpy).calledOnceWithExactly('igcTileDragStart', {
         detail: tile,
+        cancelable: true,
       });
     });
 
-    it('should correctly fire `igcTileDragEnded` event', async () => {
-      const eventSpy = spy(tileManager, 'emitEvent');
+    it('should stop drag operation when `igcTileDragStart` is prevented', async () => {
+      const [tile, target] = [getTile(0), getTile(4)];
+      const eventSpy = spy(tile, 'emitEvent');
 
+      tile.addEventListener('igcTileDragStart', (event) => {
+        event.preventDefault();
+      });
+
+      await dragAndDrop(tile, target);
+
+      expect(eventSpy).calledOnceWith('igcTileDragStart');
+    });
+
+    it('should correctly fire `igcTileDragEnd` event', async () => {
       const [tile, target] = [getTile(0), getTile(4)];
+      const eventSpy = spy(tile, 'emitEvent');
 
       await dragAndDrop(tile, target);
 
       expect(eventSpy).calledTwice;
-      expect(eventSpy).calledWith('igcTileDragEnded', {
+      expect(eventSpy).calledWith('igcTileDragEnd', {
         detail: tile,
       });
     });
 
     it('should cancel dragging with Escape', async () => {
       const draggedTile = getTile(0);
       const dropTarget = getTile(4);
+      const eventSpy = spy(draggedTile, 'emitEvent');
       const { x, y } = getCenterPoint(dropTarget);
 
       expect(draggedTile.position).to.equal(0);
       expect(dropTarget.position).to.equal(4);
 
       simulatePointerDown(draggedTile);
-      simulatePointerMove(draggedTile, { clientX: x, clientY: y });
+      simulateTileDragOver(draggedTile, { x, y });
 
       await viewTransitionComplete();
       expect(draggedTile.position).to.equal(4);
@@ -176,6 +214,8 @@ describe('Tile drag and drop', () => {
       simulateKeyboard(tileManager, escapeKey);
       await viewTransitionComplete();
 
+      expect(eventSpy).calledWith('igcTileDragCancel');
+
       expect(draggedTile.position).to.equal(0);
       expect(dropTarget.position).to.equal(4);
     });
@@ -266,14 +306,12 @@ describe('Tile drag and drop', () => {
       const { x, y } = getCenterPoint(dropTarget);
 
       simulatePointerDown(draggedTile);
-      simulatePointerMove(draggedTile, { clientX: x, clientY: y });
+      simulateTileDragOver(draggedTile, { x, y });
       await viewTransitionComplete();
 
       // Simulate second dragover event (inside dropTarget bounds)
-      simulatePointerMove(draggedTile, {
-        clientX: x + 5,
-        clientY: y + 5,
-      });
+      simulateTileDragOver(draggedTile, { x: x + 5, y: y + 5 });
+
       await viewTransitionComplete();
 
       expect(draggedTile.position).to.equal(1);
@@ -284,7 +322,6 @@ describe('Tile drag and drop', () => {
     });
   });
 
-  // REVIEW after tile header is finalized
   describe('Tile header drag', () => {
     beforeEach(async () => {
       tileManager = await fixture<IgcTileManagerComponent>(
@@ -300,7 +337,7 @@ describe('Tile drag and drop', () => {
       const { x, y } = getCenterPoint(target);
 
       simulatePointerDown(header);
-      simulatePointerMove(tile, { clientX: x, clientY: y });
+      simulateTileDragOver(tile, { x, y });
 
       await viewTransitionComplete();
 
@@ -311,7 +348,7 @@ describe('Tile drag and drop', () => {
     it('should rearrange tiles when the tile is dropped', async () => {
       const draggedTile = getTile(3);
       const dropTarget = getTile(1);
-      const eventSpy = spy(tileManager, 'emitEvent');
+      const eventSpy = spy(draggedTile, 'emitEvent');
 
       await dragAndDropFromHeader(draggedTile, dropTarget);
 
@@ -334,14 +371,14 @@ describe('Tile drag and drop', () => {
     it('should not start dragging if pointer is not over the header', async () => {
       const draggedTile = getTile(0);
       const dropTarget = getTile(1);
-      const eventSpy = spy(tileManager, 'emitEvent');
+      const eventSpy = spy(draggedTile, 'emitEvent');
 
       const contentContainer = getTileContentContainer(draggedTile);
       const { x, y } = getCenterPoint(dropTarget);
 
       simulatePointerDown(contentContainer);
 
-      simulatePointerMove(draggedTile, { clientX: x, clientY: y });
+      simulateTileDragOver(draggedTile, { x, y });
       await viewTransitionComplete();
 
       simulateLostPointerCapture(draggedTile);
@@ -372,9 +409,9 @@ describe('Tile drag and drop', () => {
     }
 
     it('should disable drag and drop when tile is maximized', async () => {
-      const eventSpy = spy(tileManager, 'emitEvent');
       const draggedTile = getTile(0);
       const dropTarget = getTile(1);
+      const eventSpy = spy(draggedTile, 'emitEvent');
 
       draggedTile.maximized = true;
       await elementUpdated(tileManager);
@@ -387,9 +424,9 @@ describe('Tile drag and drop', () => {
     });
 
     it('should disable drag and drop when tile is in fullscreen mode', async () => {
-      const eventSpy = spy(tileManager, 'emitEvent');
       const draggedTile = getTile(0);
       const dropTarget = getTile(1);
+      const eventSpy = spy(draggedTile, 'emitEvent');
 
       const buttonFullscreen = draggedTile.renderRoot.querySelector(
         '[name="fullscreen"]'
@@ -410,7 +447,8 @@ describe('Tile drag and drop', () => {
 
       await dragAndDrop(draggedTile, dropTarget);
 
-      expect(eventSpy).not.called;
+      expect(eventSpy).not.calledWith('igcTileDragStart');
+      expect(eventSpy).not.calledWith('igcTileDragEnd');
 
       const expectedIdsAfterDrag = [
         'tile0',
@@ -437,13 +475,13 @@ describe('Tile drag and drop', () => {
       tileManager.dragMode = 'tile-header';
       const tile = getTile(0);
       const [maximize, _] = getActionButtons(tile);
-      const eventSpy = spy(tileManager, 'emitEvent');
+      const eventSpy = spy(tile, 'emitEvent');
 
       maximize.click();
       await elementUpdated(tile);
 
       expect(tile.maximized).to.be.true;
-      expect(eventSpy).not.calledWith('igcTileDragStarted');
+      expect(eventSpy).not.calledWith('igcTileDragStart');
 
       maximize.click();
       await elementUpdated(tile);
@@ -455,13 +493,13 @@ describe('Tile drag and drop', () => {
       tileManager.dragMode = 'tile';
       const tile = getTile(0);
       const [maximize, _] = getActionButtons(tile);
-      const eventSpy = spy(tileManager, 'emitEvent');
+      const eventSpy = spy(tile, 'emitEvent');
 
       maximize.click();
       await elementUpdated(tile);
 
       expect(tile.maximized).to.be.true;
-      expect(eventSpy).not.calledWith('igcTileDragStarted');
+      expect(eventSpy).not.calledWith('igcTileDragStart');
 
       maximize.click();
       await elementUpdated(tile);
@@ -470,8 +508,8 @@ describe('Tile drag and drop', () => {
     });
 
     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();
+      const eventSpy = spy(tile, 'emitEvent');
 
       tileManager.dragMode = 'tile-header';
       tileManager.append(tile);
@@ -480,12 +518,12 @@ describe('Tile drag and drop', () => {
       button.click();
       await elementUpdated(tile);
 
-      expect(eventSpy).not.calledWith('igcTileDragStarted');
+      expect(eventSpy).not.calledWith('igcTileDragStart');
     });
 
     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();
+      const eventSpy = spy(tile, 'emitEvent');
 
       tileManager.dragMode = 'tile';
       tileManager.append(tile);
@@ -494,7 +532,7 @@ describe('Tile drag and drop', () => {
       button.click();
       await elementUpdated(tile);
 
-      expect(eventSpy).not.calledWith('igcTileDragStarted');
+      expect(eventSpy).not.calledWith('igcTileDragStart');
     });
   });
 });

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

@@ -151,10 +151,7 @@ describe('Tile Manager component', () => {
           exportparts="trigger-side, trigger, trigger-bottom"
           mode="deferred"
           part="resize">
-          <div
-            part="base"
-            style="--ig-col-span:1;--ig-row-span:1;"
-          >
+          <div part="base">
             <section part="header">
               <header part="title">
                 <slot name="title"></slot>

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

@@ -13,41 +13,27 @@ import {
   createMutationController,
 } from '../common/controllers/mutation-observer.js';
 import { registerComponent } from '../common/definitions/register.js';
-import type { Constructor } from '../common/mixins/constructor.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { asNumber, partNameMap } from '../common/util.js';
 import type { TileManagerDragMode, TileManagerResizeMode } from '../types.js';
 import { createTilesState } from './position.js';
 import { createSerializer } from './serializer.js';
 import { all } from './themes/container.js';
 import { styles as shared } from './themes/shared/tile-manager.common.css.js';
 import { styles } from './themes/tile-manager.base.css.js';
-import { DraggedTileAttribute } from './tile-util.js';
 import IgcTileComponent from './tile.js';
 
-// REVIEW: WIP
-export interface IgcTileManagerComponentEventMap {
-  igcTileDragStarted: CustomEvent<IgcTileComponent>;
-  igcTileDragEnded: CustomEvent<IgcTileComponent>;
-}
-
 /**
  * The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.
  *
  * @element igc-tile-manager
  *
- * @fires igcTileDragStarted - Fired when an owning tile begins a drag operation.
- * @fires igcTileDragEnded - Fired when an owning tile completes a drag operation, either by dropping onto a new position or canceling the drag.
  */
 @themes(all)
-export default class IgcTileManagerComponent extends EventEmitterMixin<
-  IgcTileManagerComponentEventMap,
-  Constructor<LitElement>
->(LitElement) {
+export default class IgcTileManagerComponent extends LitElement {
   public static readonly tagName = 'igc-tile-manager';
-  public static styles = [styles, shared];
+  public static override styles = [styles, shared];
 
-  protected static shadowRootOptions: ShadowRootInit = {
+  public static override shadowRootOptions: ShadowRootInit = {
     mode: 'open',
     slotAssignment: 'manual',
   };
@@ -213,7 +199,7 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
 
     createMutationController(this, {
       callback: this._observerCallback,
-      filter: [`${IgcTileComponent.tagName}:not([${DraggedTileAttribute}])`],
+      filter: [IgcTileComponent.tagName],
       config: {
         childList: true,
       },
@@ -247,15 +233,6 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
     this._tilesState.assignTiles();
   }
 
-  private _handleTileDragStart({ detail }: CustomEvent<IgcTileComponent>) {
-    this.emitEvent('igcTileDragStarted', { detail });
-    this._setManagerContext();
-  }
-
-  private _handleTileDragEnd({ detail }: CustomEvent<IgcTileComponent>) {
-    this.emitEvent('igcTileDragEnded', { detail });
-  }
-
   // #endregion
 
   // #region Public API
@@ -283,8 +260,6 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
         ${ref(this._grid)}
         style=${styleMap(this._internalStyles)}
         part=${parts}
-        @tileDragStart=${this._handleTileDragStart}
-        @tileDragEnd=${this._handleTileDragEnd}
       >
         <slot></slot>
       </div>