feat(tile-manager): Added transition for UI triggered maximized state changes

* Updated tests to wait for said transition when applicable
* Changed icon service test to wait on macrotask queue
  since tests were flaky.

Author: rkaraivanov

src/components/common/controllers/drag.ts

@@ -27,8 +27,8 @@ type State = {
   position: { x: number; y: number };
   offset: { x: number; y: number };
   pointerState: {
-    initial: { initialX: number; initialY: number };
-    current: { currentX: number; currentY: number };
+    previous: { x: number; y: number };
+    current: { x: number; y: number };
     direction: Direction;
   };
 };
@@ -169,30 +169,13 @@ class DragController implements ReactiveController {
   }
 
   private get _stateParameters(): DragState {
-    this._state.pointerState.direction = this._trackPointerMovement();
-
     return {
       ...this._state,
       ghost: this._ghost,
       element: this._matchedElement,
     };
   }
 
-  private _trackPointerMovement(): Direction {
-    const { initialX, initialY } = this._state.pointerState.initial;
-    const { currentX, currentY } = this._state.pointerState.current;
-    const deltaX = currentX - initialX;
-    const deltaY = currentY - initialY;
-    const LTR = isLTR(this._host);
-
-    const isHorizontalMove = Math.abs(deltaX) >= Math.abs(deltaY);
-
-    if (isHorizontalMove) {
-      return (LTR ? deltaX >= 0 : deltaX <= 0) ? 'end' : 'start';
-    }
-    return deltaY >= 0 ? 'bottom' : 'top';
-  }
-
   constructor(
     host: ReactiveControllerHost & LitElement,
     options?: DragControllerConfiguration
@@ -298,17 +281,9 @@ class DragController implements ReactiveController {
     }
 
     this._updatePosition(event);
+    this._updatePointerState(event);
     this._updateMatcher(event);
 
-    this._state.pointerState.initial = {
-      initialX: this._state.pointerState.current.currentX,
-      initialY: this._state.pointerState.current.currentY,
-    };
-    this._state.pointerState.current = {
-      currentX: event.clientX,
-      currentY: event.clientY,
-    };
-
     const parameters = {
       event,
       state: this._stateParameters,
@@ -360,8 +335,8 @@ class DragController implements ReactiveController {
       position,
       offset,
       pointerState: {
-        initial: { initialX: clientX, initialY: clientY },
-        current: { currentX: clientX, currentY: clientY },
+        previous: { x: clientX, y: clientY },
+        current: { x: clientX, y: clientY },
         direction: 'end',
       },
     };
@@ -437,6 +412,23 @@ class DragController implements ReactiveController {
     Object.assign(this._state.position, { x: posX, y: posY });
   }
 
+  private _updatePointerState({ clientX, clientY }: PointerEvent): void {
+    const state = this._state.pointerState;
+
+    state.previous = state.current;
+    state.current = { x: clientX, y: clientY };
+
+    const dx = state.current.x - state.previous.x;
+    const dy = state.current.y - state.previous.y;
+
+    if (Math.abs(dx) >= Math.abs(dy)) {
+      const swapHorizontal = isLTR(this._host) ? dx >= 0 : dx <= 0;
+      state.direction = swapHorizontal ? 'end' : 'start';
+    } else {
+      state.direction = dy >= 0 ? 'bottom' : 'top';
+    }
+  }
+
   private _assignPosition(element: HTMLElement): void {
     element.style.transform = `translate3d(${roundByDPR(this._state.position.x)}px,${roundByDPR(this._state.position.y)}px,0)`;
   }

src/components/icon/icon.spec.ts

@@ -4,7 +4,6 @@ import {
   expect,
   fixture,
   html,
-  nextFrame,
 } from '@open-wc/testing';
 import { stub } from 'sinon';
 
@@ -163,7 +162,7 @@ describe('Icon broadcast service', () => {
       const iconName = 'bug';
 
       registerIconFromText(iconName, bugSvg, collectionName);
-      await nextFrame();
+      await aTimeout(0);
 
       const { actionType, collections } = first(events).data;
       expect(actionType).to.equal(ActionType.RegisterIcon);
@@ -183,7 +182,7 @@ describe('Icon broadcast service', () => {
       for (const each of icons) {
         registerIconFromText(each[0], each[1], collectionName);
       }
-      await nextFrame();
+      await aTimeout(0);
 
       expect(events).lengthOf(icons.length);
       for (const [idx, event] of events.entries()) {
@@ -207,7 +206,7 @@ describe('Icon broadcast service', () => {
         name: 'reference-test',
         collection: collectionName,
       });
-      await nextFrame();
+      await aTimeout(0);
 
       const { actionType, collections, references } = last(events).data;
 
@@ -227,7 +226,7 @@ describe('Icon broadcast service', () => {
       meta.name = 'reference-test';
       meta.collection = collectionName;
       setIconRef(refName, refCollectionName, meta);
-      await nextFrame();
+      await aTimeout(0);
 
       const { actionType, collections, references } = last(events).data;
 
@@ -250,7 +249,7 @@ describe('Icon broadcast service', () => {
         },
         overwrite: true,
       });
-      await nextFrame();
+      await aTimeout(0);
 
       expect(events.length).to.equal(0);
     });
@@ -286,7 +285,7 @@ describe('Icon broadcast service', () => {
 
       // a peer is requesting a state sync
       channel.postMessage({ actionType: ActionType.SyncState });
-      await nextFrame();
+      await aTimeout(0);
 
       expect(events).lengthOf(2); // [ActionType.RegisterIcon, ActionType.SyncState]
 
@@ -311,7 +310,7 @@ describe('Icon broadcast service', () => {
 
       // a peer is requesting a state sync
       channel.postMessage({ actionType: ActionType.SyncState });
-      await nextFrame();
+      await aTimeout(0);
 
       expect(events).lengthOf(1); // [ActionType.SyncState]
 

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

@@ -529,14 +529,16 @@ describe('Tile drag and drop', () => {
       const [maximize, _] = getActionButtons(tile);
       const eventSpy = spy(tile, 'emitEvent');
 
+      // Wait for maximized transition trigger from UI
       maximize.click();
-      await elementUpdated(tile);
+      await viewTransitionComplete();
 
       expect(tile.maximized).to.be.true;
       expect(eventSpy).not.calledWith('igcTileDragStart');
 
+      // Wait for maximized transition trigger from UI
       maximize.click();
-      await elementUpdated(tile);
+      await viewTransitionComplete();
 
       expect(tile.maximized).to.be.false;
     });
@@ -547,14 +549,16 @@ describe('Tile drag and drop', () => {
       const [maximize, _] = getActionButtons(tile);
       const eventSpy = spy(tile, 'emitEvent');
 
+      // Wait for maximized transition trigger from UI
       maximize.click();
-      await elementUpdated(tile);
+      await viewTransitionComplete();
 
       expect(tile.maximized).to.be.true;
       expect(eventSpy).not.calledWith('igcTileDragStart');
 
+      // Wait for maximized transition trigger from UI
       maximize.click();
-      await elementUpdated(tile);
+      await viewTransitionComplete();
 
       expect(tile.maximized).to.be.false;
     });

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

@@ -1,4 +1,10 @@
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+} from '@open-wc/testing';
 import { range } from 'lit/directives/range.js';
 import { match, restore, spy, stub } from 'sinon';
 import IgcIconButtonComponent from '../button/icon-button.js';
@@ -15,6 +21,11 @@ describe('Tile Manager component', () => {
 
   let tileManager: IgcTileManagerComponent;
 
+  async function viewTransitionComplete() {
+    await nextFrame();
+    await nextFrame();
+  }
+
   function getTileManagerBase() {
     return tileManager.renderRoot.querySelector<HTMLElement>('[part="base"]')!;
   }
@@ -635,18 +646,19 @@ describe('Tile Manager component', () => {
       const eventSpy = spy(tile, 'emitEvent');
       const btnMaximize = getActionButtons(tile)[0];
 
+      // Wait for maximized transition trigger from UI
       simulateClick(btnMaximize);
-      await elementUpdated(tile);
-      await elementUpdated(tileManager);
+      await viewTransitionComplete();
 
       expect(eventSpy).calledWith('igcTileMaximize', {
         detail: { tile: tile, state: true },
         cancelable: true,
       });
       expect(tile.maximized).to.be.true;
 
+      // Wait for maximized transition trigger from UI
       simulateClick(btnMaximize);
-      await elementUpdated(tileManager);
+      await viewTransitionComplete();
 
       expect(eventSpy).to.have.been.calledTwice;
       expect(eventSpy).calledWith('igcTileMaximize', {
@@ -678,8 +690,10 @@ describe('Tile Manager component', () => {
       const btnMaximize = getActionButtons(tile)[0];
 
       expect(btnMaximize.name).equals('expand_content');
+
+      // Wait for maximized transition trigger from UI
       simulateClick(btnMaximize);
-      await elementUpdated(tileManager);
+      await viewTransitionComplete();
 
       expect(btnMaximize.name).equals('collapse_content');
 

src/components/tile-manager/tile.ts

@@ -135,7 +135,6 @@ 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({
@@ -400,58 +399,20 @@ export default class IgcTileComponent extends EventEmitterMixin<
     return true;
   }
 
-  private _handleDragOver(parameters: DragCallbackParameters): void {
-    const match = parameters.state.element as IgcTileComponent;
+  private _handleDragOver({ event, state }: DragCallbackParameters): void {
+    const match = state.element as IgcTileComponent;
 
     if (this._dragStack.peek() === match) {
-      const direction = parameters.state.pointerState.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);
-
-      let shouldSwap = false;
-
-      switch (direction) {
-        case 'start':
-          shouldSwap =
-            this.position > match.position &&
-            (LTR ? relativeX <= 0.25 : relativeX >= 0.75);
-          break;
-
-        case 'end':
-          shouldSwap =
-            this.position < match.position &&
-            (LTR ? relativeX >= 0.75 : relativeX <= 0.25);
-          break;
-
-        case 'top':
-          shouldSwap = this.position > match.position && relativeY <= 0.25;
-          break;
-
-        case 'bottom':
-          shouldSwap = this.position < match.position && relativeY >= 0.75;
-          break;
-      }
-
-      if (shouldSwap) {
+      if (this._shouldSwap(event, state, match)) {
         this._dragStack.pop();
         this._dragStack.push(match);
-
-        startViewTransition(() => {
-          swapTiles(this, match);
-        });
+        this._performSwap(match);
       }
-
       return;
     }
 
     this._dragStack.push(match);
-
-    startViewTransition(() => {
-      swapTiles(this, match);
-    });
+    this._performSwap(match);
   }
 
   private _handleDragCancel() {
@@ -471,6 +432,42 @@ export default class IgcTileComponent extends EventEmitterMixin<
     this.emitEvent('igcTileDragEnd', { detail: this });
   }
 
+  private _performSwap(match: IgcTileComponent): void {
+    startViewTransition(() => swapTiles(this, match));
+  }
+
+  private _shouldSwap(
+    { clientX, clientY }: PointerEvent,
+    state: DragCallbackParameters['state'],
+    match: IgcTileComponent
+  ): boolean {
+    const LTR = isLTR(this);
+    const direction = state.pointerState.direction;
+
+    const { left, top, width, height } = match.getBoundingClientRect();
+    const relativeX = (clientX - left) / width;
+    const relativeY = (clientY - top) / height;
+
+    switch (direction) {
+      case 'start':
+        return (
+          this.position > match.position &&
+          (LTR ? relativeX <= 0.25 : relativeX >= 0.75)
+        );
+      case 'end':
+        return (
+          this.position < match.position &&
+          (LTR ? relativeX >= 0.75 : relativeX <= 0.25)
+        );
+      case 'top':
+        return this.position > match.position && relativeY <= 0.25;
+      case 'bottom':
+        return this.position < match.position && relativeY >= 0.75;
+      default:
+        return false;
+    }
+  }
+
   private _skipDrag(event: PointerEvent): boolean {
     if (this._maximized || this.fullscreen) {
       return true;
@@ -562,12 +559,18 @@ export default class IgcTileComponent extends EventEmitterMixin<
     this._fullscreenController.setState(!this.fullscreen);
   }
 
-  private _handleMaximize() {
+  private async _handleMaximize() {
     if (!this._emitMaximizedEvent()) {
       return;
     }
 
-    this.maximized = !this.maximized;
+    this.style.zIndex = '1';
+
+    await startViewTransition(() => {
+      this.maximized = !this.maximized;
+    }).transition?.finished;
+
+    this.style.zIndex = '';
   }
 
   private _emitFullScreenEvent(state: boolean) {