refactor: Removed manager drag overlay container

Attaching the drag ghost inside the overlay messes up
the any Light DOM styles and there is no easy way
to fix that.

Author: rkaraivanov

src/components/common/context.ts

@@ -1,17 +1,13 @@
 import { createContext } from '@lit/context';
 import type { Ref } from 'lit/directives/ref.js';
 import type IgcCarouselComponent from '../carousel/carousel.js';
-import type { addFullscreenController } from '../tile-manager/controllers/fullscreen.js';
 import type IgcTileManagerComponent from '../tile-manager/tile-manager.js';
-import type IgcTileComponent from '../tile-manager/tile.js';
 
 export type TileManagerContext = {
   /** The igc-tile-manager instance. */
   instance: IgcTileManagerComponent;
   /** The internal CSS grid container of the igc-tile-manager. */
   grid: Ref<HTMLElement>;
-  /** The internal igc-tile-manager overlay container. */
-  overlay: Ref<HTMLElement>;
 };
 
 const carouselContext = createContext<IgcCarouselComponent>(

src/components/tile-manager/themes/tile-manager.base.scss

@@ -8,16 +8,6 @@
     --ig-min-row-height: 200px;
 }
 
-[part="overlay"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-}
-
 [part~='base'] {
     display: grid;
     position: relative;

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

@@ -166,12 +166,11 @@ describe('Tile Manager component', () => {
       );
 
       expect(tileManager).shadowDom.to.equal(
-        `<div part="overlay">
-        </div>
-        <div
-          part="base"
-          style=""
-        >
+        `</div>
+          <div
+            part="base"
+            style=""
+          >
           <slot></slot>
         </div>`
       );

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

@@ -26,6 +26,7 @@ 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
@@ -74,7 +75,6 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
   private _tilesState = createTilesState(this);
 
   private _grid = createRef<HTMLElement>();
-  private _overlay = createRef<HTMLElement>();
 
   // #endregion
 
@@ -89,7 +89,6 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
     return {
       instance: this,
       grid: this._grid,
-      overlay: this._overlay,
     };
   }
 
@@ -225,7 +224,7 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
 
     createMutationController(this, {
       callback: this._observerCallback,
-      filter: [IgcTileComponent.tagName],
+      filter: [`${IgcTileComponent.tagName}:not([${DraggedTileAttribute}])`],
       config: {
         childList: true,
       },
@@ -284,18 +283,13 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
 
   // #region Rendering
 
-  protected _renderOverlay() {
-    return html`<div ${ref(this._overlay)} part="overlay"></div>`;
-  }
-
   protected override render() {
     const parts = partNameMap({
       base: true,
       'maximized-tile': this.tiles.some((tile) => tile.maximized),
     });
 
     return html`
-      ${this._renderOverlay()}
       <div
         ${ref(this._grid)}
         style=${styleMap(this._internalStyles)}

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

@@ -12,6 +12,8 @@ type TileGridPosition = {
   row: TilePosition;
 };
 
+export const DraggedTileAttribute = 'data-drag-ghost-tile';
+
 type TileGridDimension = { count: number; entries: number[]; minSize: number };
 
 const CssValues = new RegExp(/(?<start>\d+)?\s*\/?\s*span\s*(?<span>\d+)?/gi);
@@ -332,6 +334,32 @@ export function createTileResizeState(): TileResizeState {
   return new TileResizeState();
 }
 
+export function createTileDragGhost(tile: IgcTileComponent): IgcTileComponent {
+  const clone = tile.cloneNode(true) as IgcTileComponent;
+  const { width, height } = tile.getBoundingClientRect();
+
+  clone.removeAttribute('id');
+  clone.setAttribute(DraggedTileAttribute, '');
+  clone.inert = true;
+  clone.position = -1;
+
+  Object.assign(clone.style, {
+    position: 'absolute',
+    contain: 'strict',
+    top: 0,
+    left: 0,
+    width: `${width}px`,
+    height: `${height}px`,
+    background: 'var(--placeholder-background)',
+    border: '1px solid var(--ghost-border)',
+    borderRadius: 'var(--border-radius)',
+    zIndex: 1000,
+    viewTransitionName: 'dragged-tile-ghost',
+  });
+
+  return clone;
+}
+
 export function createTileGhost(): HTMLElement {
   const element = document.createElement('div');
 

src/components/tile-manager/tile.ts

@@ -28,7 +28,11 @@ import { swapTiles } from './position.js';
 import { styles as shared } from './themes/shared/tile/tile.common.css.js';
 import { styles } from './themes/tile.base.css.js';
 import { all } from './themes/tile.js';
-import { createTileGhost, createTileResizeState } from './tile-util.js';
+import {
+  createTileDragGhost,
+  createTileGhost,
+  createTileResizeState,
+} from './tile-util.js';
 
 type IgcTileChangeState = {
   tile: IgcTileComponent;
@@ -94,7 +98,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
   private _dragController = addDragController(this, {
     skip: this._skipDrag,
     matchTarget: this._match,
-    layer: () => this._tileOverlay,
+    layer: () => this._tileManager!,
     ghost: this._createDragGhost,
     dragStart: this._handleDragStart,
     dragMove: this._handleDragMove,
@@ -133,36 +137,35 @@ export default class IgcTileComponent extends EventEmitterMixin<
     });
   };
 
-  private _managerContext = createAsyncContext(
+  private _context = createAsyncContext(
     this,
     tileManagerContext,
     this._setDragConfiguration
   );
 
-  /** Returns the parent tile manager. */
-  private get _tileManager(): TileManagerContext | undefined {
-    return this._managerContext.value;
+  /** Returns the parent tile manager context. */
+  private get _tileManagerCtx(): TileManagerContext | undefined {
+    return this._context.value;
   }
 
-  /** Returns the overlay container of the tile manager. */
-  private get _tileOverlay(): HTMLElement {
-    return this._tileManager?.overlay.value!;
+  private get _tileManager() {
+    return this._tileManagerCtx?.instance;
   }
 
   /** Returns the tile manager internal CSS grid container. */
   private get _cssContainer(): HTMLElement {
-    return this._tileManager?.grid.value!;
+    return this._tileManagerCtx?.grid.value!;
   }
 
   /** Returns the tile manager current resize mode. */
   private get _resizeMode() {
-    return this._tileManager?.instance.resizeMode ?? 'none';
+    return this._tileManager?.resizeMode ?? 'none';
   }
 
   /** Whether the parent tile manager drag action is in **slide** mode. */
   private get _isSlideMode(): boolean {
-    return this._tileManager
-      ? this._tileManager.instance.dragAction === 'slide'
+    return this._tileManagerCtx
+      ? this._tileManagerCtx.instance.dragAction === 'slide'
       : true;
   }
 
@@ -293,8 +296,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
   public set maximized(value: boolean) {
     this._maximized = value;
 
-    if (this._tileManager) {
-      this._tileManager.instance.requestUpdate();
+    if (this._tileManagerCtx) {
+      this._tileManagerCtx.instance.requestUpdate();
     }
   }
 
@@ -346,7 +349,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
     super.connectedCallback();
     this.tileId = this.tileId || `tile-${IgcTileComponent.increment()}`;
 
-    this.style.viewTransitionName = `tile-transition-${this.tileId}`;
+    this.style.viewTransitionName =
+      this.style.viewTransitionName || `tile-transition-${this.tileId}`;
   }
 
   private _setDragState(state = true) {
@@ -397,30 +401,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
     return element !== this && IgcTileComponent.tagName === element.localName;
   }
 
-  private _createDragGhost(): HTMLElement {
-    const ghost = this.cloneNode(true) as HTMLElement;
-    const { width, height } = this.getBoundingClientRect();
-
-    Object.assign(ghost, {
-      inert: true,
-      id: '',
-    });
-
-    Object.assign(ghost.style, {
-      position: 'absolute',
-      contain: 'strict',
-      top: 0,
-      left: 0,
-      width: `${width}px`,
-      height: `${height}px`,
-      background: 'var(--placeholder-background)',
-      border: '1px solid var(--ghost-border)',
-      borderRadius: 'var(--border-radius)',
-      zIndex: 1000,
-      viewTransitionName: '',
-    });
-
-    return ghost;
+  private _createDragGhost(): IgcTileComponent {
+    return createTileDragGhost(this);
   }
 
   private _setResizeState(state = true) {