fix(serialization): remove resize container size

Author: mtsvyatkova

src/components/tile-manager/serializer.ts

@@ -1,22 +1,16 @@
-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;
   colStart: number | null;
   disableFullscreen: boolean;
   disableMaximize: boolean;
   disableResize: boolean;
-  gridColumn: string;
-  gridRow: string;
   maximized: boolean;
   position: number;
   rowSpan: number;
   rowStart: number | null;
   id: string | null;
-  width: number | null;
-  height: number | null;
 }
 
 class TileManagerSerializer {
@@ -26,31 +20,19 @@ 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,
         colStart: tile.colStart,
         disableFullscreen: tile.disableFullscreen,
         disableMaximize: tile.disableMaximize,
         disableResize: tile.disableResize,
-        gridColumn,
-        gridRow,
         maximized: tile.maximized,
         position: tile.position,
         rowSpan: tile.rowSpan,
         rowStart: tile.rowStart,
         id: tile.id,
-        width: asNumber(width) || null,
-        height: asNumber(height) || null,
       };
     });
   }
@@ -61,26 +43,15 @@ class TileManagerSerializer {
 
   public load(tiles: SerializedTile[]): void {
     const mapped = new Map(tiles.map((tile) => [tile.id, tile]));
-    const keys: (keyof SerializedTile)[] = [
-      'gridColumn',
-      'gridRow',
-      'width',
-      'height',
-    ];
 
     for (const tile of this.tileManager.tiles) {
       if (!mapped.has(tile.id)) {
         continue;
       }
 
       const serialized = mapped.get(tile.id)!;
-      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);
+      Object.assign(tile, serialized);
     }
   }
 

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

@@ -738,31 +738,23 @@ describe('Tile Manager component', () => {
           disableFullscreen: false,
           disableMaximize: false,
           disableResize: false,
-          gridColumn: 'auto / span 1',
-          gridRow: 'auto / span 1',
           maximized: false,
           position: 0,
           rowSpan: 1,
           rowStart: null,
           id: 'custom-id1',
-          width: null,
-          height: null,
         },
         {
           colSpan: 10,
           colStart: 8,
           disableFullscreen: true,
           disableMaximize: true,
           disableResize: true,
-          gridColumn: '8 / span 10',
-          gridRow: '7 / span 7',
           maximized: false,
           position: 1,
           rowSpan: 7,
           rowStart: 7,
           id: 'custom-id2',
-          width: null,
-          height: null,
         },
       ];
 
@@ -777,8 +769,6 @@ describe('Tile Manager component', () => {
           disableFullscreen: false,
           disableMaximize: false,
           disableResize: true,
-          gridColumn: '1 / span 5',
-          gridRow: '1 / span 5',
           maximized: true,
           position: 0,
           rowSpan: 5,
@@ -791,8 +781,6 @@ describe('Tile Manager component', () => {
           disableFullscreen: false,
           disableMaximize: false,
           disableResize: false,
-          gridColumn: 'span 3',
-          gridRow: 'span 3',
           maximized: false,
           position: 1,
           rowSpan: 3,
@@ -805,8 +793,6 @@ describe('Tile Manager component', () => {
           disableFullscreen: false,
           disableMaximize: false,
           disableResize: false,
-          gridColumn: 'span 3',
-          gridRow: 'span 3',
           maximized: false,
           position: 2,
           rowSpan: 3,
@@ -846,10 +832,10 @@ describe('Tile Manager component', () => {
       const firstTileStyles = window.getComputedStyle(tiles[0]);
       const secondTileStyles = window.getComputedStyle(tiles[1]);
 
-      expect(firstTileStyles.gridColumn).to.equal('1 / span 5');
-      expect(firstTileStyles.gridRow).to.equal('1 / span 5');
-      expect(secondTileStyles.gridColumn).to.equal('span 3');
-      expect(secondTileStyles.gridRow).to.equal('span 3');
+      expect(firstTileStyles.gridColumn).to.equal('auto');
+      expect(firstTileStyles.gridRow).to.equal('auto');
+      expect(secondTileStyles.gridColumn).to.equal('7 / span 3');
+      expect(secondTileStyles.gridRow).to.equal('7 / span 3');
     });
 
     it('should handle tiles with missing `id` correctly when deserializing', async () => {

src/components/tile-manager/tile.ts

@@ -649,13 +649,6 @@ export default class IgcTileComponent extends EventEmitterMixin<
   }
 
   protected override render() {
-    const { width, height } =
-      this.fullscreen || this.maximized
-        ? this._resizeState.emptyResizeDimensions
-        : this._resizeState.resizedDimensions;
-
-    this._resizeContainer?.setSize(width, height);
-
     const isEnabled = !this._resizeDisabled;
     const isActive = !this._resizeDisabled && this._resizeMode === 'always';