Move size calculation further into nine zone state

iTwin · Oct 30, 2023 · c908a22 · c908a22
1 parent c74aee4
commit c908a22
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 29 deletions.
diff --git a/full-stack-tests/ui/tests/popout-widget.test.ts b/full-stack-tests/ui/tests/popout-widget.test.ts
@@ -92,9 +92,10 @@ test.describe("popout widget", () => {
     ]);
     await expect(popoutPage).toHaveTitle(/View Attributes/);
 
+    // Fit size of content on initial popout
     expect(popoutPage.viewportSize()).toEqual({
-      height: 800,
-      width: 600,
+      height: 270,
+      width: 215,
     });
 
     // Update widget size and close the popout.

diff --git a/ui/appui-layout-react/src/appui-layout-react/state/NineZoneStateReducer.ts b/ui/appui-layout-react/src/appui-layout-react/state/NineZoneStateReducer.ts
@@ -530,9 +530,25 @@ export function NineZoneStateReducer(
       if (location && isPopoutTabLocation(location)) return state;
 
       const savedTab = state.savedTabs.byId[id];
+
+      const popoutContentContainer = document.getElementById(
+        `content-container:${savedTab?.id}`
+      );
+
+      let contentHeight = 800;
+      let contentWidth = 600;
+
+      if (popoutContentContainer !== null) {
+        contentWidth = popoutContentContainer.offsetWidth + 20;
+        contentHeight = popoutContentContainer.offsetHeight + 20;
+      }
+
       let preferredBounds = savedTab?.popoutBounds
         ? Rectangle.create(savedTab.popoutBounds)
-        : Rectangle.createFromSize({ height: 800, width: 600 });
+        : Rectangle.createFromSize({
+            height: contentHeight,
+            width: contentWidth,
+          });
       if (size) preferredBounds = preferredBounds.setSize(size);
       if (position) preferredBounds = preferredBounds.setPosition(position);
 

diff --git a/ui/appui-react/src/appui-react/frontstage/FrontstageDef.tsx b/ui/appui-react/src/appui-react/frontstage/FrontstageDef.tsx
@@ -844,22 +844,9 @@ export class FrontstageDef {
     const popoutWidget = state.popoutWidgets.byId[location.popoutWidgetId];
     const bounds = Rectangle.create(popoutWidget.bounds);
 
-    const nineZoneState =
-      UiFramework.frontstages.activeFrontstageDef?.nineZoneState;
-
-    if (nineZoneState === undefined) return false;
-
-    const popoutContentContainer = document.getElementById(
-      `content-container:${nineZoneState.widgets[widgetContainerId].activeTabId}`
-    );
-    if (popoutContentContainer === null) return false;
-
-    const contentWidth = popoutContentContainer.offsetWidth + 20;
-    const contentHeight = popoutContentContainer.offsetHeight + 20;
-
     const position: ChildWindowLocationProps = {
-      width: widgetDef.hasPoppedOut ? bounds.getWidth() : contentWidth,
-      height: widgetDef.hasPoppedOut ? bounds.getHeight() : contentHeight,
+      width: bounds.getWidth(),
+      height: bounds.getHeight(),
       left: bounds.left,
       top: bounds.top,
     };
@@ -877,8 +864,6 @@ export class FrontstageDef {
       return false;
     }
 
-    widgetDef.setHasPoppedOut(true);
-
     return true;
   }
 

diff --git a/ui/appui-react/src/appui-react/widgets/WidgetDef.tsx b/ui/appui-react/src/appui-react/widgets/WidgetDef.tsx
@@ -90,7 +90,6 @@ export class WidgetDef {
   private _preferredPanelSize: "fit-content" | undefined;
   private _defaultFloatingSize: SizeProps | undefined;
   private _canPopout?: boolean;
-  private _hasPoppedOut?: boolean = false;
   private _floatingContainerId?: string;
   private _defaultFloatingPosition: XAndY | undefined;
 
@@ -452,14 +451,6 @@ export class WidgetDef {
     return this._canPopout;
   }
 
-  public setHasPoppedOut(value: boolean | undefined) {
-    this._hasPoppedOut = value;
-  }
-
-  public get hasPoppedOut(): boolean | undefined {
-    return this._hasPoppedOut;
-  }
-
   public setFloatingContainerId(value: string | undefined) {
     this._floatingContainerId = value;
   }