refactor: Make resize container dynamic again

rkaraivanov · rkaraivanov · commit 4e4de2617edc · 2025-03-10T15:28:07.000+02:00
Don't render it disabled resize state, maximized
and fullscreen modes
diff --git a/src/components/resize-container/resize-container.ts b/src/components/resize-container/resize-container.ts
@@ -51,7 +51,6 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
 
   private _controller: ReturnType<typeof addResizeController>;
 
-  private _enabled = true;
   private _mode: ResizeMode = 'immediate';
   private _ghostFactory?: ResizeGhostFactory;
 
@@ -68,17 +67,6 @@ 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.
    */
@@ -106,15 +94,6 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
     return this._mode;
   }
 
-  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();
 
@@ -190,7 +169,7 @@ export default class IgcResizeContainerComponent extends EventEmitterMixin<
   }
 
   protected _renderAdorners() {
-    if (!this._enabled || (!this._isActive && !this.active)) {
+    if (!this._isActive && !this.active) {
       return nothing;
     }
 
@@ -207,14 +186,12 @@ 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=${skipHandlers ? nothing : this._handlePointerEnter}
-        @pointerleave=${skipHandlers ? nothing : this._handlePointerLeave}
+        @pointerenter=${this.active ? nothing : this._handlePointerEnter}
+        @pointerleave=${this.active ? nothing : this._handlePointerLeave}
       >
         <slot></slot>
         ${this._renderAdorners()}
diff --git a/src/components/resize-container/resize-controller.ts b/src/components/resize-container/resize-controller.ts
@@ -88,16 +88,6 @@ class ResizeController implements ReactiveController {
     this._activeRef = null;
   }
 
-  /** Assign the given width and height in pixels to the resize target of the controller. */
-  public setSize(width: number | null, height: number | null): void {
-    if (this._resizeTarget) {
-      Object.assign(this._resizeTarget.style, {
-        width: width ? `${width}px` : '',
-        height: height ? `${height}px` : '',
-      });
-    }
-  }
-
   /** @internal */
   public hostConnected(): void {
     this._host.addEventListener('pointerdown', this);
diff --git a/src/components/tile-manager/tile-manager.spec.ts b/src/components/tile-manager/tile-manager.spec.ts
@@ -155,53 +155,27 @@ describe('Tile Manager component', () => {
 
       expect(tiles[0]).shadowDom.to.equal(
         `
-        <igc-resize
-          exportparts="trigger-side, trigger, trigger-bottom"
-          mode="deferred"
-          part="resize">
-          <div part="base">
-            <section part="header">
-              <header part="title">
-                <slot name="title"></slot>
-              </header>
-              <section id="tile-actions" part="actions">
-                <slot name="maximize-action">
-                  <igc-icon-button
-                    aria-label="expand_content"
-                    collection="default"
-                    exportparts="icon"
-                    name="expand_content"
-                    type="button"
-                    variant="flat"
-                  >
-                </slot>
-                <slot name="fullscreen-action">
-                  <igc-icon-button
-                    aria-label="fullscreen"
-                    collection="default"
-                    exportparts="icon"
-                    name="fullscreen"
-                    type="button"
-                    variant="flat"
-                  >
-                </slot>
-                <slot name="actions"></slot>
-              </section>
+        <div part="base">
+          <section part="header">
+            <header part="title">
+              <slot name="title"></slot>
+            </header>
+            <section id="tile-actions" part="actions">
+              <slot name="maximize-action">
+                <igc-icon-button variant="flat" collection="default" exportparts="icon" name="expand_content" aria-label="expand_content" type="button"></igc-icon-button>
+              </slot>
+              <slot name="fullscreen-action">
+                <igc-icon-button variant="flat" collection="default" exportparts="icon" name="fullscreen" aria-label="fullscreen" type="button"></igc-icon-button>
+              </slot>
+              <slot name="actions"></slot>
             </section>
-            <igc-divider type="solid"></igc-divider>
-            <div part="content-container">
+          </section>
+          <igc-divider type="solid"></igc-divider>
+
+          <div part="content-container">
               <slot></slot>
-            </div>
           </div>
-          <slot name="side-adorner" slot="side-adorner">
-            </slot>
-
-            <slot name="corner-adorner" slot="corner-adorner">
-            </slot>
-
-            <slot name="bottom-adorner" slot="bottom-adorner">
-            </slot>
-        </igc-resize>
+        </div>
         `
       );
     });
@@ -495,10 +469,7 @@ describe('Tile Manager component', () => {
       tileManager.resizeMode = 'none';
       await elementUpdated(tileManager);
 
-      const resize = tile.renderRoot.querySelector('igc-resize')!;
-
-      expect(resize).is.not.null;
-      expect(resize.enabled).to.be.false;
+      expect(tile.renderRoot.querySelector('igc-resize')).is.null;
     });
   });
 
diff --git a/src/components/tile-manager/tile-resize.spec.ts b/src/components/tile-manager/tile-resize.spec.ts
@@ -393,13 +393,11 @@ describe('Tile resize', () => {
       const DOM = getTileDOM(firstTile);
 
       expect(DOM.resizeElement).is.not.null;
-      expect(DOM.resizeElement.enabled).is.true;
 
       firstTile.disableResize = true;
       await elementUpdated(firstTile);
 
-      expect(DOM.resizeElement).is.not.null;
-      expect(DOM.resizeElement.enabled).is.false;
+      expect(DOM.resizeElement).is.null;
     });
 
     it('should update tile parts on resizing', async () => {
diff --git a/src/components/tile-manager/tile.ts b/src/components/tile-manager/tile.ts
@@ -635,32 +635,32 @@ export default class IgcTileComponent extends EventEmitterMixin<
   }
 
   protected override render() {
-    const isEnabled = !this._resizeDisabled;
-    const isActive = !this._resizeDisabled && this._resizeMode === 'always';
-
-    return html`
-      <igc-resize
-        part=${partNameMap({
-          resize: true,
-          'side-adorner': this._customAdorners.get('side')!,
-          'corner-adorner': this._customAdorners.get('corner')!,
-          'bottom-adorner': this._customAdorners.get('bottom')!,
-        })}
-        exportparts="trigger-side, trigger, trigger-bottom"
-        mode="deferred"
-        .enabled=${isEnabled}
-        ?active=${isActive}
-        .ghostFactory=${this._createResizeGhost}
-        @igcResizeStart=${this._handleResizeStart}
-        @igcResize=${this._handleResize}
-        @igcResizeEnd=${this._handleResizeEnd}
-        @igcResizeCancel=${this._handleResizeCancel}
-      >
-        ${this._renderContent()} ${this._renderAdornerSlot('side')}
-        ${this._renderAdornerSlot('corner')}
-        ${this._renderAdornerSlot('bottom')}
-      </igc-resize>
-    `;
+    const isActive = this._resizeMode === 'always';
+
+    return this._resizeDisabled
+      ? this._renderContent()
+      : html`
+          <igc-resize
+            part=${partNameMap({
+              resize: true,
+              'side-adorner': this._customAdorners.get('side')!,
+              'corner-adorner': this._customAdorners.get('corner')!,
+              'bottom-adorner': this._customAdorners.get('bottom')!,
+            })}
+            exportparts="trigger-side, trigger, trigger-bottom"
+            mode="deferred"
+            ?active=${isActive}
+            .ghostFactory=${this._createResizeGhost}
+            @igcResizeStart=${this._handleResizeStart}
+            @igcResize=${this._handleResize}
+            @igcResizeEnd=${this._handleResizeEnd}
+            @igcResizeCancel=${this._handleResizeCancel}
+          >
+            ${this._renderContent()} ${this._renderAdornerSlot('side')}
+            ${this._renderAdornerSlot('corner')}
+            ${this._renderAdornerSlot('bottom')}
+          </igc-resize>
+        `;
   }
 }
 
