feat: Serialization takes tile's width and height into account when saving/loading

Adjusted tests.

Dropped `dragAction` from the public API.

Author: rkaraivanov

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

@@ -51,6 +51,7 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
 
   private _controller: ReturnType<typeof addResizeController>;
 
+  private _enabled = true;
   private _mode: ResizeMode = 'immediate';
   private _ghostFactory?: ResizeGhostFactory;
 
@@ -67,6 +68,17 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
   @state()
   private _isActive = false;
 
+  /** Whether the resize behavior is enabled. */
+  @property({ type: Boolean })
+  public set enabled(value: boolean) {
+    this._enabled = value;
+    this._controller.set({ enabled: value });
+  }
+
+  public get enabled(): boolean {
+    return this._enabled;
+  }
+
   /**
    * Whether to always show the resize element adorners.
    */
@@ -94,10 +106,15 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
     return this._mode;
   }
 
-  public setSize(width: number, height: number): void {
+  public setSize(width: number | null, height: number | null): void {
     this._controller.setSize(width, height);
   }
 
+  public getSize() {
+    const { width, height } = this._container.value!.style;
+    return { width, height };
+  }
+
   constructor() {
     super();
 
@@ -174,7 +191,7 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
   }
 
   protected _renderAdorners() {
-    if (!this._isActive && !this.active) {
+    if (!this._enabled || (!this._isActive && !this.active)) {
       return nothing;
     }
 
@@ -191,12 +208,14 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
       active: this._isActive || this.active,
     });
 
+    const skipHandlers = this.active || !this._enabled;
+
     return html`
       <div
         ${ref(this._container)}
         part=${parts}
-        @pointerenter=${this.active ? nothing : this._handlePointerEnter}
-        @pointerleave=${this.active ? nothing : this._handlePointerLeave}
+        @pointerenter=${skipHandlers ? nothing : this._handlePointerEnter}
+        @pointerleave=${skipHandlers ? nothing : this._handlePointerLeave}
       >
         <slot></slot>
         ${this._renderAdorners()}

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

@@ -13,7 +13,7 @@ type State = {
 
 class ResizeController implements ReactiveController {
   private _host: ReactiveControllerHost & HTMLElement;
-  private _options: ResizeControllerConfiguration = {};
+  private _options: ResizeControllerConfiguration = { enabled: true };
 
   private _id = -1;
   private _hasPointerCapture = false;
@@ -60,6 +60,11 @@ class ResizeController implements ReactiveController {
 
   // #region Public API
 
+  /** Whether the controller is enabled and will listen for events. */
+  public get enabled(): boolean {
+    return Boolean(this._options.enabled);
+  }
+
   /** Updates the configuration of the resize controller. */
   public set(options?: ResizeControllerConfiguration): void {
     Object.assign(this._options, options);
@@ -73,11 +78,11 @@ class ResizeController implements ReactiveController {
   }
 
   /** Assign the given width and height in pixels to the resize target of the controller. */
-  public setSize(width: number, height: number): void {
+  public setSize(width: number | null, height: number | null): void {
     if (this._resizeTarget) {
       Object.assign(this._resizeTarget.style, {
-        width: `${width}px`,
-        height: `${height}px`,
+        width: width ? `${width}px` : '',
+        height: height ? `${height}px` : '',
       });
     }
   }
@@ -97,6 +102,10 @@ class ResizeController implements ReactiveController {
 
   /** @internal */
   public handleEvent(event: PointerEvent & KeyboardEvent): void {
+    if (!this.enabled) {
+      return;
+    }
+
     switch (event.type) {
       case 'touchstart':
         event.preventDefault();

src/components/resize-container/types.ts

@@ -20,6 +20,7 @@ export type ResizeCallbackParams = {
 };
 
 export type ResizeControllerConfiguration = {
+  enabled?: boolean;
   ref?: Ref<HTMLElement>[];
   mode?: ResizeMode;
   deferredFactory?: ResizeGhostFactory;

src/components/tile-manager/serializer.ts

@@ -1,5 +1,6 @@
-import { omit, pick } from '../common/util.js';
+import { asNumber, omit, pick } from '../common/util.js';
 import type IgcTileManagerComponent from './tile-manager.js';
+import type IgcTileComponent from './tile.js';
 
 export interface SerializedTile {
   colSpan: number;
@@ -12,6 +13,8 @@ export interface SerializedTile {
   rowSpan: number;
   rowStart: number | null;
   tileId: string | null;
+  width: number | null;
+  height: number | null;
 }
 
 class TileManagerSerializer {
@@ -21,9 +24,15 @@ class TileManagerSerializer {
     this.tileManager = tileManager;
   }
 
+  private _getResizeContainer(tile: IgcTileComponent) {
+    // biome-ignore lint/complexity/useLiteralKeys: Until we migrate to a symbol
+    return tile['_resizeContainer']!;
+  }
+
   public save(): SerializedTile[] {
     return this.tileManager.tiles.map((tile) => {
       const { gridColumn, gridRow } = getComputedStyle(tile);
+      const { width, height } = this._getResizeContainer(tile).getSize();
 
       return {
         colSpan: tile.colSpan,
@@ -36,6 +45,8 @@ class TileManagerSerializer {
         rowSpan: tile.rowSpan,
         rowStart: tile.rowStart,
         tileId: tile.tileId,
+        width: asNumber(width) || null,
+        height: asNumber(height) || null,
       };
     });
   }
@@ -46,18 +57,26 @@ class TileManagerSerializer {
 
   public load(tiles: SerializedTile[]): void {
     const mapped = new Map(tiles.map((tile) => [tile.tileId, tile]));
+    const keys: (keyof SerializedTile)[] = [
+      'gridColumn',
+      'gridRow',
+      'width',
+      'height',
+    ];
 
     for (const tile of this.tileManager.tiles) {
       if (!mapped.has(tile.tileId)) {
         continue;
       }
 
       const serialized = mapped.get(tile.tileId)!;
-      const properties = omit(serialized, 'gridColumn', 'gridRow');
+      const properties = omit(serialized, ...keys);
       const styles = pick(serialized, 'gridColumn', 'gridRow');
+      const { width, height } = pick(serialized, 'width', 'height');
 
       Object.assign(tile, properties);
       Object.assign(tile.style, styles);
+      this._getResizeContainer(tile).setSize(width, height);
     }
   }
 

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

@@ -184,7 +184,6 @@ describe('Tile drag and drop', () => {
       const draggedTile = getTile(0);
       const dropTarget = getTile(1);
 
-      expect(tileManager.dragAction).to.equal('slide');
       tileManager.tiles.forEach((tile, index) => {
         expect(tile.id).to.equal(`tile${index}`);
       });
@@ -211,7 +210,6 @@ describe('Tile drag and drop', () => {
       const initialTiles = tileManager.tiles;
       const tile = getTile(0);
 
-      expect(tileManager.dragAction).to.equal('slide');
       expect(tileManager.tiles[0].id).to.equal('tile0');
       expect(tileManager.tiles[1].id).to.equal('tile1');
 
@@ -226,13 +224,11 @@ describe('Tile drag and drop', () => {
       const draggedTile = getTile(0);
       const dropTarget = getTile(4);
 
-      expect(tileManager.dragAction).to.equal('slide');
       expect(tileManager.tiles[0].id).to.equal('tile0');
       expect(tileManager.tiles[4].id).to.equal('tile4');
       expect(draggedTile.position).to.equal(0);
       expect(dropTarget.position).to.equal(4);
 
-      tileManager.dragAction = 'swap';
       await dragAndDrop(draggedTile, dropTarget);
 
       expect(tileManager.tiles[0].id).to.equal('tile4');
@@ -245,11 +241,9 @@ describe('Tile drag and drop', () => {
       const initialTiles = tileManager.tiles;
       const tile = getTile(0);
 
-      expect(tileManager.dragAction).to.equal('slide');
       expect(tileManager.tiles[0].id).to.equal('tile0');
       expect(tileManager.tiles[1].id).to.equal('tile1');
 
-      tileManager.dragAction = 'swap';
       await dragAndDrop(tile, tile);
 
       expect(tileManager.tiles).eql(initialTiles);

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

@@ -94,7 +94,6 @@ describe('Tile Manager component', () => {
 
     it('is correctly initialized with its default component state', () => {
       expect(tileManager.columnCount).to.equal(0);
-      expect(tileManager.dragAction).to.equal('slide');
       expect(tileManager.dragMode).to.equal('none');
       expect(tileManager.gap).to.equal(undefined);
       expect(tileManager.minColumnWidth).to.equal(undefined);
@@ -148,6 +147,7 @@ describe('Tile Manager component', () => {
 
       expect(tiles[0]).shadowDom.to.equal(
         `
+        <igc-resize mode="deferred" part="resize">
           <div
             part="base"
             style="--ig-col-span:1;--ig-row-span:1;"
@@ -185,6 +185,18 @@ describe('Tile Manager component', () => {
               <slot></slot>
             </div>
           </div>
+          <slot name="side-adorner" slot="side-adorner">
+              <div part="adorner-indicator"></div>
+            </slot>
+
+            <slot name="corner-adorner" slot="corner-adorner">
+              <div part="adorner-indicator"></div>
+            </slot>
+
+            <slot name="bottom-adorner" slot="bottom-adorner">
+              <div part="adorner-indicator"></div>
+            </slot>
+        </igc-resize>
         `
       );
     });
@@ -472,17 +484,16 @@ describe('Tile Manager component', () => {
       });
     });
 
-    it('should hide igc-resize component and not render adorners in igc-tile when resize mode is "none"', async () => {
+    it('should disable igc-resize component when resize mode is "none"', async () => {
       const tile = tileManager.tiles[0];
 
       tileManager.resizeMode = 'none';
       await elementUpdated(tileManager);
 
-      const resize = tile.shadowRoot?.querySelector('igc-resize');
-      const adorners = tile.shadowRoot?.querySelectorAll('[slot$="-adorner"]');
+      const resize = tile.renderRoot.querySelector('igc-resize')!;
 
-      expect(resize).to.be.null;
-      expect(adorners).lengthOf(0);
+      expect(resize).is.not.null;
+      expect(resize.enabled).to.be.false;
     });
   });
 
@@ -709,6 +720,8 @@ describe('Tile Manager component', () => {
           rowSpan: 1,
           rowStart: null,
           tileId: 'custom-id1',
+          width: null,
+          height: null,
         },
         {
           colSpan: 10,
@@ -721,6 +734,8 @@ describe('Tile Manager component', () => {
           rowSpan: 7,
           rowStart: 7,
           tileId: 'custom-id2',
+          width: null,
+          height: null,
         },
       ];
 

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

@@ -16,11 +16,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { asNumber, partNameMap } from '../common/util.js';
-import type {
-  TileManagerDragAction,
-  TileManagerDragMode,
-  TileManagerResizeMode,
-} from '../types.js';
+import type { TileManagerDragMode, TileManagerResizeMode } from '../types.js';
 import { createTilesState } from './position.js';
 import { createSerializer } from './serializer.js';
 import { all } from './themes/container.js';
@@ -132,13 +128,6 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
     return this._dragMode;
   }
 
-  /**
-   * Whether the tiles will slide or swap on drop during a drag and drop operation.
-   * @attr drag-action
-   */
-  @property({ attribute: 'drag-action' })
-  public dragAction: TileManagerDragAction = 'slide';
-
   /**
    * Sets the number of columns for the tile manager.
    * Setting value <= than zero will trigger a responsive layout.

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

@@ -389,15 +389,17 @@ describe('Tile resize', () => {
       assertRectsAreEqual(firstTile.getBoundingClientRect(), tileRect);
     });
 
-    it('should not have resizeElement when `disableResize` is true', async () => {
+    it('should disable igc-resize behavior when `disableResize` is true', async () => {
       const DOM = getTileDOM(firstTile);
 
-      expect(DOM.resizeElement).not.to.be.null;
+      expect(DOM.resizeElement).is.not.null;
+      expect(DOM.resizeElement.enabled).is.true;
 
       firstTile.disableResize = true;
       await elementUpdated(firstTile);
 
-      expect(DOM.resizeElement).to.be.null;
+      expect(DOM.resizeElement).is.not.null;
+      expect(DOM.resizeElement.enabled).is.false;
     });
 
     it('should update tile parts on resizing', async () => {