fix: Drag and resize behavior

* Drag now works when the tile manager is inside
a Shadow Root container, e.g. inside another web component
without being slotted. View transitions are borked in that scenario.

* The resize ghost element is now created at the body-level of
the document preventing clipping from the manager container.

* Both drag and resize controllers remove any lingering ghost
elements if their hosts are removed from the DOM.

Author: rkaraivanov

src/animations/player.ts

@@ -93,6 +93,7 @@ type ViewTransitionResult = {
 export function startViewTransition(
   callback?: ViewTransitionUpdateCallback
 ): ViewTransitionResult {
+  /* c8 ignore next 4 */
   if (getPrefersReducedMotion() || !document.startViewTransition) {
     callback?.();
     return {};

src/components/common/controllers/drag.spec.ts

@@ -308,8 +308,6 @@ describe('Drag controller', () => {
       expect(defaultGhost.getBoundingClientRect()).to.eql(
         instance.getBoundingClientRect()
       );
-
-      instance.controller.dispose();
     });
 
     it('should create a custom ghost element in "deferred" mode when a configuration is passed', async () => {
@@ -322,8 +320,6 @@ describe('Drag controller', () => {
 
       expect(customGhost).to.exist;
       expect(customGhost.localName).to.equal(instance.localName);
-
-      instance.controller.dispose();
     });
 
     it('should correctly place the ghost element in the configured layer container', async () => {
@@ -334,8 +330,6 @@ describe('Drag controller', () => {
       await elementUpdated(instance);
 
       expect(getDefaultGhost().parentElement).to.eql(instance.parentElement);
-
-      instance.controller.dispose();
     });
 
     it('should invoke start callback on drag operation', async () => {
@@ -346,8 +340,6 @@ describe('Drag controller', () => {
 
       expect(dragStart.called).is.true;
       expect(dragStart.callCount).to.equal(1);
-
-      instance.controller.dispose();
     });
 
     it('should not invoke move unless a start is invoked', async () => {
@@ -377,8 +369,6 @@ describe('Drag controller', () => {
       expect(dragStart.called).is.true;
       expect(dragMove.called).is.true;
       expect(dragMove.callCount).to.equal(10);
-
-      instance.controller.dispose();
     });
 
     it('should invoke end when releasing the dragged element', async () => {

src/components/common/controllers/drag.ts

@@ -5,6 +5,7 @@ import type {
 } from 'lit';
 import type { Ref } from 'lit/directives/ref.js';
 
+import { getDefaultLayer } from '../../resize-container/default-ghost.js';
 import { findElementFromEventPath } from '../util.js';
 
 type DragEnterCallback = (target: Element) => unknown;
@@ -202,6 +203,7 @@ class DragController implements ReactiveController {
     this._host.removeEventListener('touchstart', this);
     this._host.removeEventListener('pointerdown', this);
     this._setDragCancelListener(false);
+    this._removeGhost();
   }
 
   /** @internal */
@@ -404,10 +406,6 @@ class DragController implements ReactiveController {
   }
 }
 
-function getDefaultLayer() {
-  return document.body;
-}
-
 function createDefaultDragGhost({ x, y, width, height }: DOMRect): HTMLElement {
   const element = document.createElement('div');
 

src/components/common/util.ts

@@ -171,8 +171,15 @@ export function* iterNodes<T = Node>(
   }
 }
 
+export function getRoot(
+  element: Element,
+  options?: GetRootNodeOptions
+): Document | ShadowRoot {
+  return element.getRootNode(options) as Document | ShadowRoot;
+}
+
 export function getElementByIdFromRoot(root: HTMLElement, id: string) {
-  return (root.getRootNode() as Document | ShadowRoot).getElementById(id);
+  return getRoot(root).getElementById(id);
 }
 
 export function isElement(node: unknown): node is Element {

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

@@ -1,22 +1,29 @@
 /**
  * Default ghost element factory for the igc-resize implementation.
  */
-export function createDefaultGhostElement(
-  width: number,
-  height: number
-): HTMLElement {
+export function createDefaultGhostElement({
+  x,
+  y,
+  width,
+  height,
+}: DOMRect): HTMLElement {
   const element = document.createElement('div');
+  const { scrollX, scrollY } = window;
 
   Object.assign(element.style, {
     position: 'absolute',
-    top: 0,
-    left: 0,
-    zIndex: 1000, // REVIEW: Expose as a CSS variable
-    background: 'pink', // REVIEW: Expose as a CSS variable
-    opacity: 0.85, // REVIEW: Expose as a CSS variable
+    top: `${y + scrollY}px`,
+    left: `${x + scrollX}px`,
+    zIndex: 1000,
+    background: 'pink',
+    opacity: 0.85,
     width: `${width}px`,
     height: `${height}px`,
   });
 
   return element;
 }
+
+export function getDefaultLayer(): HTMLElement {
+  return document.body;
+}

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

@@ -34,12 +34,12 @@ describe('Resize container', () => {
     });
 
     it('should be defined', () => {
-      expect(resizeContainer).to.not.be.null;
+      expect(resizeContainer).is.not.null;
     });
 
     it('should initialize with correct default state', () => {
       expect(resizeContainer.mode).to.equal('immediate');
-      expect(resizeContainer.ghostFactory).to.be.undefined;
+      expect(resizeContainer.ghostFactory).is.undefined;
     });
 
     it('should be accessible', async () => {
@@ -143,7 +143,7 @@ describe('Resize container', () => {
         await elementUpdated(element);
 
         const { ghost } = getResizeEventState(eventSpy);
-        expect(ghost).to.be.null;
+        expect(ghost).is.null;
       });
 
       it('should fire `resizeStart` on pointer interaction', async () => {
@@ -504,17 +504,17 @@ describe('Resize container', () => {
       it('adorners visibility is toggled on pointer enter/leave events', async () => {
         const DOM = getDOM(element);
 
-        expect(Object.values(DOM.adorners).every((e) => e === null)).to.be.true;
+        expect(Object.values(DOM.adorners).every((e) => e === null)).is.true;
 
         // Pointerenter - adorners rendered
         await setResizeActiveState(element);
 
-        expect(Object.values(DOM.adorners).every((e) => e !== null)).to.be.true;
+        expect(Object.values(DOM.adorners).every((e) => e !== null)).is.true;
 
         // Pointerleave - adorners removed
         await setResizeActiveState(element, false);
 
-        expect(Object.values(DOM.adorners).every((e) => e === null)).to.be.true;
+        expect(Object.values(DOM.adorners).every((e) => e === null)).is.true;
       });
 
       it('resize behavior should only start when interacting with the trigger element', async () => {
@@ -548,7 +548,7 @@ describe('Resize container', () => {
         simulatePointerDown(DOM.adorners.corner);
         await elementUpdated(element);
 
-        expect(DOM.ghostElement).to.not.be.null;
+        expect(DOM.ghostElement).is.not.null;
         expect(DOM.ghostElement?.style.background).to.equal('pink');
       });
 
@@ -567,8 +567,8 @@ describe('Resize container', () => {
         simulatePointerDown(DOM.adorners.corner);
         await elementUpdated(element);
 
-        expect(DOM.ghostElement).to.not.be.null;
-        expect(DOM.ghostElement?.classList.contains('custom-ghost')).to.be.true;
+        expect(DOM.ghostElement).is.not.null;
+        expect(DOM.ghostElement?.classList.contains('custom-ghost')).is.true;
       });
 
       it('should fire `resizeStart` on pointer interaction', async () => {
@@ -641,7 +641,7 @@ describe('Resize container', () => {
         await elementUpdated(element);
 
         expect(eventSpy).calledWith('igcResizeEnd');
-        expect(DOM.ghostElement).to.be.null;
+        expect(DOM.ghostElement).is.null;
       });
 
       it('should not fire `resizeCancel` when escape key is pressed without active resizing', async () => {
@@ -693,7 +693,7 @@ describe('Resize container', () => {
         await elementUpdated(element);
 
         expect(eventSpy).calledWith('igcResizeCancel');
-        expect(DOM.ghostElement).to.be.null;
+        expect(DOM.ghostElement).is.null;
       });
     });
 
@@ -939,7 +939,7 @@ function getDOM(resizeElement: IgcResizeContainerComponent) {
     },
     /** The ghost element when in deferred mode */
     get ghostElement() {
-      return resizeElement.querySelector<HTMLElement>('[data-resize-ghost]')!;
+      return document.querySelector<HTMLElement>('[data-resize-ghost]')!;
     },
   };
 }

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

@@ -1,7 +1,7 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
 import { findElementFromEventPath } from '../common/util.js';
-import { createDefaultGhostElement } from './default-ghost.js';
+import { createDefaultGhostElement, getDefaultLayer } from './default-ghost.js';
 import type { ResizeControllerConfiguration, ResizeState } from './types.js';
 
 const additionalEvents = ['pointermove', 'lostpointercapture'] as const;
@@ -13,7 +13,10 @@ type State = {
 
 class ResizeController implements ReactiveController {
   private _host: ReactiveControllerHost & HTMLElement;
-  private _options: ResizeControllerConfiguration = { enabled: true };
+  private _options: ResizeControllerConfiguration = {
+    enabled: true,
+    layer: getDefaultLayer,
+  };
 
   private _id = -1;
   private _hasPointerCapture = false;
@@ -30,6 +33,14 @@ class ResizeController implements ReactiveController {
     return this._options.resizeTarget?.call(this._host) ?? this._host;
   }
 
+  private get _layer(): HTMLElement {
+    if (!this._isDeferred) {
+      return this._host;
+    }
+
+    return this._options.layer?.() ?? this._host;
+  }
+
   /** Whether the controller is in deferred mode. */
   private get _isDeferred(): boolean {
     return this._options.mode === 'deferred';
@@ -98,6 +109,7 @@ class ResizeController implements ReactiveController {
     this._host.removeEventListener('pointerdown', this);
     this._host.removeEventListener('touchstart', this);
     this._setResizeCancelListener(false);
+    this._removeGhostElement();
   }
 
   /** @internal */
@@ -248,13 +260,10 @@ class ResizeController implements ReactiveController {
 
     this._ghost =
       this._options.deferredFactory?.call(this._host) ??
-      createDefaultGhostElement(
-        this._state.initial.width,
-        this._state.initial.height
-      );
+      createDefaultGhostElement(this._resizeTarget.getBoundingClientRect());
 
     this._ghost.setAttribute('data-resize-ghost', '');
-    this._host.append(this._ghost);
+    this._layer.append(this._ghost);
   }
 
   private _removeGhostElement(): void {

src/components/resize-container/types.ts

@@ -24,6 +24,7 @@ export type ResizeControllerConfiguration = {
   ref?: Ref<HTMLElement>[];
   mode?: ResizeMode;
   deferredFactory?: ResizeGhostFactory;
+  layer?: () => HTMLElement;
   /** Callback invoked at the start of a resize operation. */
   start?: ResizeCallback;
   /** Callback invoked on each pointer move during a resize operation. */

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

@@ -454,7 +454,7 @@ function getResizeContainerDOM(tile: IgcTileComponent) {
     },
     /** The ghost element when in deferred mode */
     get ghostElement() {
-      return resizeContainer.querySelector<HTMLElement>('[data-resize-ghost]')!;
+      return document.querySelector<HTMLElement>('[data-resize-ghost]')!;
     },
   };
 }

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

@@ -437,31 +437,35 @@ export function createTileDragGhost(tile: IgcTileComponent): IgcTileComponent {
     width: `${width}px`,
     height: `${height}px`,
     opacity: 0.6,
-    background: `${computed.getPropertyValue('--tile-background')}`,
+    background: computed.getPropertyValue('--tile-background'),
     border: `1px solid ${computed.getPropertyValue('--hover-border-color')}`,
     borderRadius: computed.getPropertyValue('--border-radius'),
-    boxShadow: `${computed.getPropertyValue('--drag-elevation')}`,
+    boxShadow: computed.getPropertyValue('--drag-elevation'),
     zIndex: 1000,
     viewTransitionName: 'dragged-tile-ghost',
   });
 
   return clone;
 }
 
-export function createTileGhost(): HTMLElement {
+export function createTileGhost(tile: IgcTileComponent): HTMLElement {
   const element = document.createElement('div');
+  const computed = getComputedStyle(tile);
+  const { x, y, width, height } = tile.getBoundingClientRect();
+  const { scrollX, scrollY } = window;
 
   Object.assign(element.style, {
+    boxSizing: 'border-box',
     position: 'absolute',
     contain: 'strict',
-    top: 0,
-    left: 0,
+    top: `${y + scrollY}px`,
+    left: `${x + scrollX}px`,
     zIndex: 1000,
-    background: 'var(--placeholder-background)',
-    border: '1px solid var(--ghost-border)',
-    borderRadius: 'var(--border-radius)',
-    width: '100%',
-    height: '100%',
+    background: computed.getPropertyValue('--placeholder-background'),
+    border: `1px solid ${computed.getPropertyValue('--ghost-border')}`,
+    borderRadius: computed.getPropertyValue('--border-radius'),
+    width: `${width}px`,
+    height: `${height}px`,
   });
 
   return element;