fix(tile): Resize events sequence

Author: rkaraivanov

src/components/common/controllers/drag.ts

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

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

@@ -134,9 +134,14 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
     this._isActive = false;
   }
 
-  private _handleResizeStart(params: ResizeCallbackParams): void {
+  private _handleResizeStart(params: ResizeCallbackParams) {
     params.event.preventDefault();
-    this.emitEvent('igcResizeStart', { bubbles: false, detail: params });
+
+    return this.emitEvent('igcResizeStart', {
+      bubbles: false,
+      cancelable: true,
+      detail: params,
+    });
   }
 
   private _handleResize(params: ResizeCallbackParams): void {

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

@@ -138,11 +138,13 @@ class ResizeController implements ReactiveController {
 
     this._setInitialState(event);
     this._createGhostElement();
+    const parameters = { event, state: this._stateParameters };
+
+    if (this._options.start?.call(this._host, parameters) === false) {
+      this.dispose();
+      return;
+    }
 
-    this._options.start?.call(this._host, {
-      event,
-      state: this._stateParameters,
-    });
     this._setResizeState();
   }
 
@@ -164,8 +166,8 @@ class ResizeController implements ReactiveController {
 
     this._options.end?.call(this._host, parameters);
     this._state.current = parameters.state.current;
-    // TODO:
-    // this._updatePosition(this._resizeTarget);
+
+    parameters.state.commit?.() ?? this._updatePosition(this._resizeTarget);
     this.dispose();
   }
 

src/components/resize-container/types.ts

@@ -12,6 +12,7 @@ export type ResizeState = {
   deltaY: number;
   ghost: HTMLElement | null;
   trigger: HTMLElement | null;
+  commit?: () => unknown;
 };
 
 export type ResizeCallbackParams = {

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

@@ -181,6 +181,8 @@ describe('Tile drag and drop', () => {
       await dragAndDrop(tile, target);
 
       expect(eventSpy).calledOnceWith('igcTileDragStart');
+      expect(eventSpy).not.calledWith('igcTileDragEnd');
+      expect(eventSpy.callCount).to.equal(1);
     });
 
     it('should correctly fire `igcTileDragEnd` event', async () => {

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

@@ -36,6 +36,12 @@ describe('Tile resize', () => {
   let columnSize: number;
   let rowSize: number;
 
+  /** Wait tile dragging view transition(s) to complete. */
+  async function viewTransitionComplete() {
+    await nextFrame();
+    await nextFrame();
+  }
+
   function getTiles() {
     return Array.from(tileManager.querySelectorAll(IgcTileComponent.tagName));
   }
@@ -389,6 +395,92 @@ describe('Tile resize', () => {
       assertRectsAreEqual(firstTile.getBoundingClientRect(), tileRect);
     });
 
+    it('should fire `igcTileResizeStart` when a resize operation begins', async () => {
+      const DOM = getResizeContainerDOM(firstTile);
+      const eventSpy = spy(firstTile, 'emitEvent');
+
+      simulatePointerDown(DOM.adorners.corner);
+      await elementUpdated(firstTile);
+
+      expect(eventSpy).calledWith('igcTileResizeStart');
+    });
+
+    it('should stop resize operations by canceling the `igcTileResizeStart` event', async () => {
+      const DOM = getResizeContainerDOM(firstTile);
+      const eventSpy = spy(firstTile, 'emitEvent');
+
+      firstTile.addEventListener('igcTileResizeStart', (event) =>
+        event.preventDefault()
+      );
+
+      simulatePointerDown(DOM.adorners.corner);
+      await elementUpdated(firstTile);
+
+      expect(eventSpy).calledWith('igcTileResizeStart');
+
+      simulatePointerMove(DOM.adorners.corner);
+      simulateLostPointerCapture(DOM.adorners.corner);
+      await elementUpdated(firstTile);
+
+      expect(eventSpy.callCount).to.equal(1);
+      expect(eventSpy).not.calledWith('igcTileResizeEnd');
+    });
+
+    it('should fire `igcTileResizeEnd` when a resize operation is performed successfully', async () => {
+      const DOM = getResizeContainerDOM(firstTile);
+      const eventSpy = spy(firstTile, 'emitEvent');
+
+      const { colSpan: initialColumnSpan, rowSpan: initialRowSpan } = firstTile;
+
+      const tileRect = firstTile.getBoundingClientRect();
+
+      simulatePointerDown(DOM.adorners.corner);
+      await elementUpdated(firstTile);
+
+      expect(eventSpy).calledWith('igcTileResizeStart');
+
+      simulatePointerMove(DOM.adorners.corner, {
+        clientX: tileRect.right * 2,
+        clientY: tileRect.bottom * 2,
+      });
+      simulateLostPointerCapture(DOM.adorners.corner);
+      await viewTransitionComplete();
+
+      expect(eventSpy).calledWith('igcTileResizeEnd');
+      expect(DOM.ghostElement).to.be.null;
+
+      const { colSpan, rowSpan } = firstTile;
+      expect(initialColumnSpan).is.lessThan(colSpan);
+      expect(initialRowSpan).is.lessThan(rowSpan);
+    });
+
+    it('should fire `igcTileResizeCancel` when canceling a resize operation', async () => {
+      const DOM = getResizeContainerDOM(firstTile);
+      const eventSpy = spy(firstTile, 'emitEvent');
+
+      const tileRect = firstTile.getBoundingClientRect();
+
+      simulatePointerDown(DOM.adorners.corner);
+      await elementUpdated(firstTile);
+
+      expect(eventSpy).calledWith('igcTileResizeStart');
+
+      simulatePointerMove(DOM.adorners.corner, {
+        clientX: tileRect.right * 2,
+        clientY: tileRect.bottom * 2,
+      });
+      await elementUpdated(firstTile);
+
+      expect(DOM.ghostElement).not.to.be.null;
+
+      simulateKeyboard(DOM.resizeElement, escapeKey);
+      await elementUpdated(firstTile);
+
+      expect(eventSpy).calledWith('igcTileResizeCancel');
+      expect(DOM.ghostElement).to.be.null;
+      assertRectsAreEqual(firstTile.getBoundingClientRect(), tileRect);
+    });
+
     it('should disable igc-resize behavior when `disableResize` is true', async () => {
       const DOM = getTileDOM(firstTile);
 

src/components/tile-manager/tile.ts

@@ -55,9 +55,9 @@ export interface IgcTileComponentEventMap {
   igcTileDragStart: CustomEvent<IgcTileComponent>;
   igcTileDragEnd: CustomEvent<IgcTileComponent>;
   igcTileDragCancel: CustomEvent<IgcTileComponent>;
-  igcResizeStart: CustomEvent<IgcTileComponent>;
-  igcResizeMove: CustomEvent<IgcTileComponent>;
-  igcResizeEnd: CustomEvent<IgcTileComponent>;
+  igcTileResizeStart: CustomEvent<IgcTileComponent>;
+  igcTileResizeEnd: CustomEvent<IgcTileComponent>;
+  igcTileResizeCancel: CustomEvent<IgcTileComponent>;
 }
 
 /**
@@ -71,9 +71,9 @@ export interface IgcTileComponentEventMap {
  * @fires igcTileDragStart - Fired when a drag operation on a tile is about to begin. Cancelable.
  * @fires igcTileDragEnd - Fired when a drag operation with a tile is successfully completed.
  * @fires igcTileDragCancel - Fired when a tile drag operation is canceled by the user.
- * @fires igcResizeStart - Fired when tile begins resizing.
- * @fires igcResizeMove - Fired when tile is being resized.
- * @fires igcResizeEnd - Fired when tile finishes resizing.
+ * @fires igcTileResizeStart - Fired when a resize operation on a tile is about to begin. Cancelable.
+ * @fires igcTileResizeEnd - Fired when a resize operation on a tile is successfully completed.
+ * @fires igcTileResizeCancel - Fired when a resize operation on a tile is canceled by the user.
  *
  * @slot title - Renders the title of the tile header.
  * @slot maximize-action - Renders the maximize action element.
@@ -466,10 +466,17 @@ export default class IgcTileComponent extends EventEmitterMixin<
     this.part.toggle('resizing', state);
   }
 
-  private _handleResizeStart({
-    detail: { state },
-  }: CustomEvent<ResizeCallbackParams>) {
-    this._resizeState.updateState(state.initial, this, this._cssContainer);
+  private _handleResizeStart(event: CustomEvent<ResizeCallbackParams>) {
+    if (!this._emitTileResizeStart()) {
+      event.preventDefault();
+      return;
+    }
+
+    this._resizeState.updateState(
+      event.detail.state.initial,
+      this,
+      this._cssContainer
+    );
     this._setResizeState();
   }
 
@@ -492,23 +499,27 @@ export default class IgcTileComponent extends EventEmitterMixin<
     }
   }
 
-  private async _handleResizeEnd({
+  private _handleResizeEnd({
     detail: { state },
   }: CustomEvent<ResizeCallbackParams>) {
     const { colSpan, rowSpan } = this._resizeState.calculateResizedGridPosition(
       state.current
     );
 
-    await startViewTransition(() => {
-      this.colSpan = colSpan;
-      this.rowSpan = rowSpan;
-    }).transition?.updateCallbackDone;
+    state.commit = async () => {
+      await startViewTransition(() => {
+        this.colSpan = colSpan;
+        this.rowSpan = rowSpan;
+      }).transition?.updateCallbackDone;
 
-    this._setResizeState(false);
+      this._setResizeState(false);
+      this.emitEvent('igcTileResizeEnd', { detail: this });
+    };
   }
 
   private _handleResizeCancel() {
     this._setResizeState(false);
+    this.emitEvent('igcTileResizeCancel', { detail: this });
   }
 
   private _handleFullscreen() {
@@ -546,6 +557,13 @@ export default class IgcTileComponent extends EventEmitterMixin<
     });
   }
 
+  private _emitTileResizeStart() {
+    return this.emitEvent('igcTileResizeStart', {
+      detail: this,
+      cancelable: true,
+    });
+  }
+
   protected _renderDefaultAction(type: 'maximize' | 'fullscreen') {
     const [icon, listener] =
       type === 'fullscreen'