refactor: Reorganized some controllers and utility functions

Author: rkaraivanov

…s/tile-manager/controllers/fullscreen.ts …ponents/common/controllers/fullscreen.tssrc/components/tile-manager/controllers/fullscreen.ts renamed to src/components/common/controllers/fullscreen.ts src/components/tile-manager/controllers/fullscreen.ts renamed to src/components/common/controllers/fullscreen.ts

@@ -9,22 +9,22 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
 type FullscreenControllerCallback = (state: boolean) => boolean;
 
 /** Configuration object for the fullscreen controller. */
-type FullscreenControllerConfig = {
+type FullscreenControllerConfiguration = {
   /**
    * Invoked when the host element is entering fullscreen mode.
    * See the {@link FullscreenControllerCallback} for details.
    */
-  onEnterFullscreen?: FullscreenControllerCallback;
+  enter?: FullscreenControllerCallback;
   /**
    * Invoked when the host element is leaving fullscreen mode.
    * See the {@link FullscreenControllerCallback} for details.
    */
-  onExitFullscreen?: FullscreenControllerCallback;
+  exit?: FullscreenControllerCallback;
 };
 
 class FullscreenController implements ReactiveController {
   private _host: ReactiveControllerHost & HTMLElement;
-  private _config: FullscreenControllerConfig = {};
+  private _options: FullscreenControllerConfiguration = {};
 
   private _fullscreen = false;
 
@@ -34,21 +34,19 @@ class FullscreenController implements ReactiveController {
 
   constructor(
     host: ReactiveControllerHost & HTMLElement,
-    config?: FullscreenControllerConfig
+    options?: FullscreenControllerConfiguration
   ) {
     this._host = host;
-    Object.assign(this._config, config);
+    Object.assign(this._options, options);
     host.addController(this);
   }
 
   /**
    * Transitions the host element to/from fullscreen mode.
-   * This method **will invoke** onEnter/onExitFullscreen callbacks if present.
+   * This method **will invoke** enter/exit callbacks if present.
    */
   public setState(fullscreen: boolean): void {
-    const callback = fullscreen
-      ? this._config.onEnterFullscreen
-      : this._config.onExitFullscreen;
+    const callback = fullscreen ? this._options.enter : this._options.exit;
 
     if (callback && !callback.call(this._host, fullscreen)) {
       return;
@@ -70,18 +68,20 @@ class FullscreenController implements ReactiveController {
     }
   }
 
+  /** @internal */
   public hostConnected(): void {
     this._host.addEventListener('fullscreenchange', this);
   }
 
+  /** @internal */
   public hostDisconnected(): void {
     this._host.removeEventListener('fullscreenchange', this);
   }
 }
 
 export function addFullscreenController(
   host: ReactiveControllerHost & HTMLElement,
-  config?: FullscreenControllerConfig
-) {
-  return new FullscreenController(host, config);
+  options?: FullscreenControllerConfiguration
+): FullscreenController {
+  return new FullscreenController(host, options);
 }

src/components/common/util.ts

@@ -312,3 +312,15 @@ export function partition<T>(
 
   return [truthy, falsy];
 }
+
+export function pick<T extends object>(entry: T, ...props: Array<keyof T>) {
+  return Object.fromEntries(
+    Object.entries(entry).filter(([key, _]) => props.includes(key as keyof T))
+  );
+}
+
+export function omit<T extends object>(entry: T, ...props: Array<keyof T>) {
+  return Object.fromEntries(
+    Object.entries(entry).filter(([key, _]) => !props.includes(key as keyof T))
+  );
+}

src/components/tile-manager/serializer.ts

@@ -1,3 +1,4 @@
+import { omit, pick } from '../common/util.js';
 import type IgcTileManagerComponent from './tile-manager.js';
 
 export interface SerializedTile {
@@ -68,15 +69,3 @@ class TileManagerSerializer {
 export function createSerializer(host: IgcTileManagerComponent) {
   return new TileManagerSerializer(host);
 }
-
-function pick<T extends object>(entry: T, ...props: Array<keyof T>) {
-  return Object.fromEntries(
-    Object.entries(entry).filter(([key, _]) => props.includes(key as keyof T))
-  );
-}
-
-function omit<T extends object>(entry: T, ...props: Array<keyof T>) {
-  return Object.fromEntries(
-    Object.entries(entry).filter(([key, _]) => !props.includes(key as keyof T))
-  );
-}

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

@@ -128,7 +128,6 @@ describe('Tile drag and drop', () => {
       });
     });
 
-    // REVIEW when the logic is implemented
     it('should cancel dragging with Escape', async () => {
       const draggedTile = getTile(0);
       const dropTarget = getTile(4);

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

@@ -146,7 +146,6 @@ describe('Tile resize', () => {
       expect(eventSpy).calledWith('igcResize');
       expect(state.ghost).to.equal(DOM.ghostElement);
       expect(state.initial).to.eql(tileRect);
-      // FIXME: Investigate why the the delta is so great
       assertRectsAreEqual(
         state.current,
         DOM.ghostElement.getBoundingClientRect()

src/components/tile-manager/tile.ts

@@ -11,6 +11,7 @@ import {
 } from '../common/context.js';
 import { createAsyncContext } from '../common/controllers/async-consumer.js';
 import { addDragController } from '../common/controllers/drag.js';
+import { addFullscreenController } from '../common/controllers/fullscreen.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
@@ -23,7 +24,6 @@ import {
 import IgcDividerComponent from '../divider/divider.js';
 import IgcResizeContainerComponent from '../resize-container/resize-container.js';
 import type { ResizeCallbackParams } from '../resize-container/types.js';
-import { addFullscreenController } from './controllers/fullscreen.js';
 import { createTileDragStack, swapTiles } from './position.js';
 import { styles as shared } from './themes/shared/tile/tile.common.css.js';
 import { styles } from './themes/tile.base.css.js';
@@ -107,8 +107,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
   });
 
   private _fullscreenController = addFullscreenController(this, {
-    onEnterFullscreen: this.emitFullScreenEvent,
-    onExitFullscreen: this.emitFullScreenEvent,
+    enter: this.emitFullScreenEvent,
+    exit: this.emitFullScreenEvent,
   });
 
   private _colSpan = 1;