@itwin/appui-react 3.3.0-dev.41 → 3.3.0-dev.44

package/lib/esm/appui-react/widget-panels/Frontstage.js

@@ -14,7 +14,7 @@ import { assert, Logger, ProcessDetector } from "@itwin/core-bentley";
 import { StagePanelLocation, UiItemsManager, WidgetState } from "@itwin/appui-abstract";
 import { Size, UiStateStorageStatus } from "@itwin/core-react";
 import { ToolbarPopupAutoHideContext } from "@itwin/components-react";
-import { addPanelWidget, addTab, addWidgetTabToFloatingPanel, addWidgetTabToPanelSection, convertAllPopupWidgetContainersToFloating, createNineZoneState, createTabsState, createTabState, createWidgetState, findTab, findWidget, floatingWidgetBringToFront, FloatingWidgets, getUniqueId, getWidgetPanelSectionId, isFloatingLocation, isHorizontalPanelSide, NineZone, NineZoneStateReducer, panelSides, removeTab, toolSettingsTabId, WidgetPanels, } from "@itwin/appui-layout-react";
+import { addPanelWidget, addTab, addWidgetTabToDraftFloatingPanel, addWidgetTabToFloatingPanel, addWidgetTabToPanelSection, convertAllPopupWidgetContainersToFloating, createNineZoneState, createTabsState, createTabState, createWidgetState, findTab, findWidget, floatingWidgetBringToFront, FloatingWidgets, getUniqueId, getWidgetPanelSectionId, isFloatingLocation, isHorizontalPanelSide, isPopoutLocation, NineZone, NineZoneStateReducer, panelSides, removeTab, toolSettingsTabId, WidgetPanels, } from "@itwin/appui-layout-react";
 import { useActiveFrontstageDef } from "../frontstage/Frontstage";
 import { FrontstageManager } from "../frontstage/FrontstageManager";
 import { StagePanelState } from "../stagepanels/StagePanelDef";
@@ -653,6 +653,20 @@ export function restoreNineZoneState(frontstageDef, saved) {
     }
     return restored;
 }
+/**
+ * Checks to see whether a widget id is one of our generated uuids
+ * @param uuid the string value to test
+ * @returns boolean
+ */
+function isUUID(uuid) {
+    const s = `${uuid}`;
+    const result = s.match("^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$");
+    // istanbul ignore else
+    if (result === null) {
+        return false;
+    }
+    return true;
+}
 /** Prepares NineZoneState to be saved.
  * @note Removes toolSettings tab.
  * @note Removes tab labels and iconSpec.
@@ -667,6 +681,9 @@ export function packNineZoneState(state) {
         for (const [, tab] of Object.entries(state.tabs)) {
             if (tab.id === toolSettingsTabId)
                 continue;
+            // istanbul ignore else
+            if (isUUID(tab.id))
+                continue;
             draft.tabs[tab.id] = {
                 id: tab.id,
                 preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
@@ -676,6 +693,18 @@ export function packNineZoneState(state) {
             };
         }
     });
+    packed = produce(packed, (draft) => {
+        for (const [, floatingWidget] of Object.entries(state.floatingWidgets.byId)) {
+            const widgetId = floatingWidget.id;
+            // istanbul ignore else
+            if (isUUID(widgetId)) {
+                const idIndex = draft.floatingWidgets.allIds.indexOf(widgetId);
+                draft.floatingWidgets.allIds.splice(idIndex, 1);
+                delete draft.floatingWidgets.byId[widgetId];
+                delete draft.widgets[widgetId];
+            }
+        }
+    });
     return packed;
 }
 /** @internal */
@@ -685,6 +714,7 @@ export function isPanelCollapsed(zoneStates, panelStates) {
     return !openZone && !openPanel;
 }
 function addRemovedTab(nineZone, widgetDef) {
+    var _a, _b;
     const newTab = createTabState(widgetDef.id, {
         label: getWidgetLabel(widgetDef.label),
         canPopout: widgetDef.canPopout,
@@ -699,6 +729,18 @@ function addRemovedTab(nineZone, widgetDef) {
         const newTabWidget = nineZone.widgets[widgetId];
         newTabWidget.tabs.splice(widgetDef.tabLocation.tabIndex, 0, newTab.id);
     }
+    else if (widgetDef.tabLocation.floating) {
+        const id = widgetDef.tabLocation.widgetId;
+        if (id in nineZone.floatingWidgets.byId) {
+            nineZone.floatingWidgets.allIds.push(id);
+            nineZone.floatingWidgets.byId[id].hidden = false;
+            addWidgetTabToDraftFloatingPanel(nineZone, (_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : widgetDef.id, widgetDef.id, nineZone.floatingWidgets.byId[id].home, newTab);
+        }
+        else {
+            const home = { side: widgetDef.tabLocation.side, widgetId: widgetDef.floatingContainerId, widgetIndex: 0 };
+            addWidgetTabToDraftFloatingPanel(nineZone, (_b = widgetDef.floatingContainerId) !== null && _b !== void 0 ? _b : widgetDef.id, widgetDef.id, home, newTab);
+        }
+    }
     else {
         const newTabPanel = nineZone.panels[widgetDef.tabLocation.side];
         if (newTabPanel.maxWidgetCount === newTabPanel.widgets.length) {
@@ -718,7 +760,7 @@ function addRemovedTab(nineZone, widgetDef) {
 }
 /** @internal */
 export const setWidgetState = produce((nineZone, widgetDef, state) => {
-    var _a;
+    var _a, _b;
     if (state === WidgetState.Open) {
         const id = widgetDef.id;
         let location = findTab(nineZone, id);
@@ -727,6 +769,9 @@ export const setWidgetState = produce((nineZone, widgetDef, state) => {
             location = findTab(nineZone, id);
             assert(!!location);
         }
+        if (!!widgetDef.tabLocation.floating) {
+            nineZone.floatingWidgets.byId[(_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : widgetDef.id].hidden = false;
+        }
         const widget = nineZone.widgets[location.widgetId];
         widget.minimized = false;
         widget.activeTabId = id;
@@ -737,7 +782,7 @@ export const setWidgetState = produce((nineZone, widgetDef, state) => {
             panel.collapsed && (panel.collapsed = false);
             // istanbul ignore next
             if (undefined === panel.size || 0 === panel.size) {
-                panel.size = (_a = panel.minSize) !== null && _a !== void 0 ? _a : 200;
+                panel.size = (_b = panel.minSize) !== null && _b !== void 0 ? _b : 200;
             }
         }
     }
@@ -765,16 +810,31 @@ function hideWidget(state, widgetDef) {
     const location = findTab(state, widgetDef.id);
     if (!location)
         return;
-    const widgetId = location.widgetId;
-    const side = "side" in location ? location.side : "left";
-    const widgetIndex = "side" in location ? state.panels[side].widgets.indexOf(widgetId) : 0;
-    const tabIndex = state.widgets[location.widgetId].tabs.indexOf(widgetDef.id);
-    widgetDef.tabLocation = {
-        side,
-        tabIndex,
-        widgetId,
-        widgetIndex,
-    };
+    if (isFloatingLocation(location)) {
+        const widget = state.floatingWidgets.byId[location.widgetId];
+        widgetDef.setFloatingContainerId(location.floatingWidgetId);
+        widgetDef.tabLocation = {
+            side: widget.home.side,
+            tabIndex: widget.home.widgetIndex,
+            widgetId: widgetDef.id,
+            widgetIndex: widget.home.widgetIndex,
+            floating: true,
+        };
+    }
+    else 
+    // istanbul ignore else
+    if (!isPopoutLocation(location)) {
+        const widgetId = location.widgetId;
+        const side = "side" in location ? location.side : "left";
+        const widgetIndex = "side" in location ? state.panels[side].widgets.indexOf(widgetId) : 0;
+        const tabIndex = state.widgets[location.widgetId].tabs.indexOf(widgetDef.id);
+        widgetDef.tabLocation = {
+            side,
+            tabIndex,
+            widgetId,
+            widgetIndex,
+        };
+    }
     removeTab(state, widgetDef.id);
 }
 /** @internal */