fix: resize ghost refinement + remove tile related stuff from resize controller

Author: onlyexeption

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

@@ -1,9 +1,6 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import type { Ref } from 'lit/directives/ref.js';
-import {
-  findElementFromEventPath,
-  getElementByIdFromRoot,
-} from '../common/util.js';
+import { findElementFromEventPath } from '../common/util.js';
 
 export type ResizeMode = 'immediate' | 'deferred';
 
@@ -14,6 +11,7 @@ export type ResizeCallbackParams = {
     current: DOMRect;
     dx: number;
     dy: number;
+    ghost: HTMLElement | null;
   };
 };
 
@@ -60,11 +58,6 @@ class ResizeController implements ReactiveController {
   protected _initialState!: DOMRect;
   private _state!: DOMRect;
 
-  private _initialPointerX!: number;
-  private _initialPointerY!: number;
-  private _minWidth!: string;
-  private _minHeight!: string;
-
   protected get _element() {
     return this._config?.ref ? this._config.ref.value! : this._host;
   }
@@ -105,16 +98,7 @@ class ResizeController implements ReactiveController {
     const rect = resizableElement!.getBoundingClientRect();
     this._initialState = structuredClone(rect);
     this._state = rect;
-    this._initialPointerX = event.clientX;
-    this._initialPointerY = event.clientY;
     this._id = event.pointerId;
-
-    this._minWidth = getComputedStyle(resizableElement!).getPropertyValue(
-      '--ig-min-col-width'
-    );
-    this._minHeight = getComputedStyle(resizableElement!).getPropertyValue(
-      '--ig-min-row-height'
-    );
   }
 
   private _createCallbackParams(event: PointerEvent): ResizeCallbackParams {
@@ -125,6 +109,7 @@ class ResizeController implements ReactiveController {
         current: this._state,
         dx: this._state.width - this._initialState.width,
         dy: this._state.height - this._initialState.height,
+        ghost: this._ghost,
       },
     };
   }
@@ -152,10 +137,11 @@ class ResizeController implements ReactiveController {
 
     if (this._config?.start) {
       this._setInitialState(event);
-      this._config.start.call(this._host, this._createCallbackParams(event));
-
       this._createGhost();
 
+      const params = this._createCallbackParams(event);
+      this._config.start.call(this._host, params);
+
       this._element.setPointerCapture(this._id);
       this._toggleSubsequentEvents(true);
     }
@@ -169,19 +155,9 @@ class ResizeController implements ReactiveController {
     // REVIEW: Sequencing
 
     if (this._config?.resize) {
-      const deltaX = event.clientX - this._initialPointerX;
-      const deltaY = event.clientY - this._initialPointerY;
-
-      this._state.width = Math.max(
-        this._initialState.width + deltaX,
-        Number.parseFloat(this._minWidth)
-      );
-      this._state.height = Math.max(
-        this._initialState.height + deltaY,
-        Number.parseFloat(this._minHeight)
-      );
-
-      this._config.resize.call(this._host, this._createCallbackParams(event));
+      const params = this._createCallbackParams(event);
+      this._config.resize.call(this._host, params);
+      this._state = params.state.current;
     }
 
     const target = this._config.mode === 'deferred' ? this._ghost! : this._host;

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

@@ -89,11 +89,11 @@ export default class IgcResizeComponent extends EventEmitterMixin<
 
   private _handleResizeStart(params: ResizeCallbackParams) {
     params.event.preventDefault();
+    this.emitEvent('igcResizeStart', { bubbles: false, detail: params });
 
     this._isResizing = true;
     this._setState(params.state);
     this._adorner.value!.focus();
-    this.emitEvent('igcResizeStart', { bubbles: false, detail: params });
   }
 
   private _handleResize(params: ResizeCallbackParams) {

src/components/tile-manager/tile.ts

@@ -68,6 +68,15 @@ export default class IgcTileComponent extends EventEmitterMixin<
   private _disableDrag = false;
   private _fullscreen = false;
   private _maximized = false;
+  private _initialPointerX: number | null = null;
+  private _initialPointerY: number | null = null;
+  private _cachedStyles: {
+    ghostBackground?: string;
+    ghostBorder?: string;
+    ghostBorderRadius?: string;
+    ghostMinWidth?: string;
+    ghostMinHeight?: string;
+  } = {};
   private _context = new ContextProvider(this, {
     context: tileContext,
     initialValue: this,
@@ -333,9 +342,43 @@ export default class IgcTileComponent extends EventEmitterMixin<
     this._isDragging = false;
   }
 
-  private _handleResize(_: CustomEvent<ResizeCallbackParams>) {
+  private cacheStyles() {
+    const computedStyle = window.getComputedStyle(this);
+
+    this._cachedStyles = {
+      ghostBackground: computedStyle.getPropertyValue(
+        '--placeholder-background'
+      ),
+      ghostBorder: computedStyle.getPropertyValue('--ghost-border'),
+      ghostBorderRadius: computedStyle.getPropertyValue('--border-radius'),
+      ghostMinWidth: computedStyle.getPropertyValue('--ig-min-col-width'),
+      ghostMinHeight: computedStyle.getPropertyValue('--ig-min-row-height'),
+    };
+  }
+
+  private _handleResizeStart(event: CustomEvent<ResizeCallbackParams>) {
+    const ghostElement = event.detail.state.ghost;
+    this._initialPointerX = event.detail.event.clientX;
+    this._initialPointerY = event.detail.event.clientY;
+
+    if (ghostElement) {
+      ghostElement.style.minWidth = this._cachedStyles.ghostMinWidth!;
+      ghostElement.style.minHeight = this._cachedStyles.ghostMinHeight!;
+    }
+  }
+
+  private _handleResize(event: CustomEvent<ResizeCallbackParams>) {
     this._isResizing = true;
-    // console.log(event.detail.state);
+
+    const ghostElement = event.detail.state.current;
+
+    if (ghostElement) {
+      const deltaX = event.detail.event.clientX - this._initialPointerX!;
+      const deltaY = event.detail.event.clientY - this._initialPointerY!;
+
+      ghostElement.width = event.detail.state.initial.width + deltaX;
+      ghostElement.height = event.detail.state.initial.height + deltaY;
+    }
   }
 
   private _handleResizeEnd(event: CustomEvent<ResizeCallbackParams>) {
@@ -360,43 +403,26 @@ export default class IgcTileComponent extends EventEmitterMixin<
     });
 
     this._isResizing = false;
+    this._initialPointerX = null;
+    this._initialPointerY = null;
+    this._cachedStyles = {};
   }
 
   // REVIEW
   protected ghostFactory = () => {
-    const ghostBackground = window
-      .getComputedStyle(this)
-      .getPropertyValue('--placeholder-background');
-
-    const ghostBorder = window
-      .getComputedStyle(this)
-      .getPropertyValue('--ghost-border');
-
-    const ghostBorderRadius = window
-      .getComputedStyle(this)
-      .getPropertyValue('--border-radius');
-
-    const ghostMinWidth = window
-      .getComputedStyle(this)
-      .getPropertyValue('--ig-min-col-width');
-
-    const ghostMinHeight = window
-      .getComputedStyle(this)
-      .getPropertyValue('--ig-min-row-height');
+    this.cacheStyles();
 
     const ghost = document.createElement('div');
     Object.assign(ghost.style, {
       position: 'absolute',
       top: 0,
       left: 0,
       zIndex: 1000,
-      background: ghostBackground,
-      border: `1px solid ${ghostBorder}`,
-      borderRadius: ghostBorderRadius,
+      background: this._cachedStyles.ghostBackground,
+      border: `1px solid ${this._cachedStyles.ghostBorder}`,
+      borderRadius: this._cachedStyles.ghostBorderRadius,
       width: '100%',
       height: '100%',
-      minWidth: ghostMinWidth,
-      minHeight: ghostMinHeight,
       gridRow: '',
       gridColumn: '',
     });
@@ -444,6 +470,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
             part="resize"
             .ghostFactory=${this.ghostFactory}
             mode="deferred"
+            @igcResizeStart=${this._handleResizeStart}
             @igcResize=${this._handleResize}
             @igcResizeEnd=${this._handleResizeEnd}
           >