@itwin/appui-react 3.3.0-dev.9 → 3.4.0-dev.10

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";
@@ -31,6 +31,7 @@ import { ToolSettingsContent, WidgetPanelsToolSettings } from "./ToolSettings";
 import { useEscapeSetFocusToHome } from "../hooks/useEscapeSetFocusToHome";
 import { useSelector } from "react-redux";
 import { useUiVisibility } from "../hooks/useUiVisibility";
+import { IModelApp } from "@itwin/core-frontend";
 const panelZoneKeys = ["start", "end"];
 const WidgetInternals = React.memo(function WidgetInternals() {
     const activeModalFrontstageInfo = useActiveModalFrontstageInfo();
@@ -178,7 +179,6 @@ export function ActiveFrontstageDefProvider({ frontstageDef }) {
     useUpdateNineZoneSize(frontstageDef);
     useSavedFrontstageState(frontstageDef);
     useSaveFrontstageSettings(frontstageDef);
-    useFrontstageManager(frontstageDef);
     useItemsManager(frontstageDef);
     const labels = useLabels();
     const uiIsVisible = useUiVisibility();
@@ -194,6 +194,11 @@ export function ActiveFrontstageDefProvider({ frontstageDef }) {
         const frameworkState = state[UiFramework.frameworkStateKey];
         return !!frameworkState.configurableUiState.animateToolSettings;
     });
+    const useToolAsToolSettingsLabel = useSelector((state) => {
+        const frameworkState = state[UiFramework.frameworkStateKey];
+        return !!frameworkState.configurableUiState.useToolAsToolSettingsLabel;
+    });
+    useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel);
     const handleKeyDown = useEscapeSetFocusToHome();
     return (React.createElement("div", { className: "uifw-widgetPanels-frontstage", onKeyDown: handleKeyDown, role: "presentation" },
         React.createElement(NineZone, { dispatch: dispatch, labels: labels, state: nineZone, tab: tabElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
@@ -227,11 +232,12 @@ export function addWidgets(state, widgets, side, widgetId) {
             preferredFloatingWidgetSize: widget.defaultFloatingSize,
             canPopout: widget.canPopout,
             isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
+            hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
         });
         tabs.push(widget.id);
     }
     const activeWidget = visibleWidgets.find((widget) => widget.isActive);
-    const minimized = !activeWidget;
+    const minimized = false;
     // istanbul ignore else
     if ((activeWidget === null || activeWidget === void 0 ? void 0 : activeWidget.defaultState) !== WidgetState.Floating) {
         state = addPanelWidget(state, side, widgetId, tabs, {
@@ -266,6 +272,7 @@ export function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
             preferredPopoutWidgetSize,
             userSized,
             isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
+            hideWithUiWhenFloating: !!widgetDef.hideWithUiWhenFloating,
         });
         if (widgetDef.isFloatingStateSupported && widgetDef.defaultState === WidgetState.Floating) {
             const floatingContainerId = (_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : getUniqueId();
@@ -302,24 +309,24 @@ function processPopoutWidgets(initialState, frontstageDef) {
 export function addMissingWidgets(frontstageDef, initialState) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     let state = initialState;
-    state = appendWidgets(state, determineNewWidgets((_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.widgetDefs, initialState), "left", 0);
-    state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.panelZones.start.widgetDefs, initialState), "left", 0);
-    state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.bottomLeft) === null || _c === void 0 ? void 0 : _c.widgetDefs, initialState), "left", 1);
-    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelWidgetDefs, initialState), "left", 1);
-    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelZones.end.widgetDefs, initialState), "left", 1);
-    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.centerRight) === null || _f === void 0 ? void 0 : _f.widgetDefs, initialState), "right", 0);
-    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.rightPanel) === null || _g === void 0 ? void 0 : _g.panelZones.start.widgetDefs, initialState), "right", 0);
-    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.bottomRight) === null || _h === void 0 ? void 0 : _h.widgetDefs, initialState), "right", 1);
-    state = appendWidgets(state, determineNewWidgets((_j = frontstageDef.rightPanel) === null || _j === void 0 ? void 0 : _j.panelWidgetDefs, initialState), "right", 1);
-    state = appendWidgets(state, determineNewWidgets((_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelZones.end.widgetDefs, initialState), "right", 1);
-    state = appendWidgets(state, determineNewWidgets((_l = frontstageDef.topPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs, initialState), "top", 0);
-    state = appendWidgets(state, determineNewWidgets((_m = frontstageDef.topPanel) === null || _m === void 0 ? void 0 : _m.panelZones.start.widgetDefs, initialState), "top", 0);
-    state = appendWidgets(state, determineNewWidgets((_o = frontstageDef.topMostPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs, initialState), "top", 1); // eslint-disable-line deprecation/deprecation
-    state = appendWidgets(state, determineNewWidgets((_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.end.widgetDefs, initialState), "top", 1);
-    state = appendWidgets(state, determineNewWidgets((_q = frontstageDef.bottomPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs, initialState), "bottom", 0);
-    state = appendWidgets(state, determineNewWidgets((_r = frontstageDef.bottomPanel) === null || _r === void 0 ? void 0 : _r.panelZones.start.widgetDefs, initialState), "bottom", 0);
-    state = appendWidgets(state, determineNewWidgets((_s = frontstageDef.bottomMostPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs, initialState), "bottom", 1); // eslint-disable-line deprecation/deprecation
-    state = appendWidgets(state, determineNewWidgets((_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.end.widgetDefs, initialState), "bottom", 1);
+    state = appendWidgets(state, determineNewWidgets((_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.widgetDefs, state), "left", 0);
+    state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.panelZones.start.widgetDefs, state), "left", 0);
+    state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.bottomLeft) === null || _c === void 0 ? void 0 : _c.widgetDefs, state), "left", 1);
+    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelWidgetDefs, state), "left", 1);
+    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelZones.end.widgetDefs, state), "left", 1);
+    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.centerRight) === null || _f === void 0 ? void 0 : _f.widgetDefs, state), "right", 0);
+    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.rightPanel) === null || _g === void 0 ? void 0 : _g.panelZones.start.widgetDefs, state), "right", 0);
+    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.bottomRight) === null || _h === void 0 ? void 0 : _h.widgetDefs, state), "right", 1);
+    state = appendWidgets(state, determineNewWidgets((_j = frontstageDef.rightPanel) === null || _j === void 0 ? void 0 : _j.panelWidgetDefs, state), "right", 1);
+    state = appendWidgets(state, determineNewWidgets((_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelZones.end.widgetDefs, state), "right", 1);
+    state = appendWidgets(state, determineNewWidgets((_l = frontstageDef.topPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs, state), "top", 0);
+    state = appendWidgets(state, determineNewWidgets((_m = frontstageDef.topPanel) === null || _m === void 0 ? void 0 : _m.panelZones.start.widgetDefs, state), "top", 0);
+    state = appendWidgets(state, determineNewWidgets((_o = frontstageDef.topMostPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs, state), "top", 1); // eslint-disable-line deprecation/deprecation
+    state = appendWidgets(state, determineNewWidgets((_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.end.widgetDefs, state), "top", 1);
+    state = appendWidgets(state, determineNewWidgets((_q = frontstageDef.bottomPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs, state), "bottom", 0);
+    state = appendWidgets(state, determineNewWidgets((_r = frontstageDef.bottomPanel) === null || _r === void 0 ? void 0 : _r.panelZones.start.widgetDefs, state), "bottom", 0);
+    state = appendWidgets(state, determineNewWidgets((_s = frontstageDef.bottomMostPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs, state), "bottom", 1); // eslint-disable-line deprecation/deprecation
+    state = appendWidgets(state, determineNewWidgets((_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.end.widgetDefs, state), "bottom", 1);
     return state;
 }
 /** Removes widgets with Hidden defaultState. */
@@ -488,10 +495,10 @@ export function getPanelZoneWidgets(frontstageDef, panelZone) {
 export function addPanelWidgets(state, frontstageDef, side) {
     const start = getWidgetId(side, "start");
     const startWidgets = getPanelZoneWidgets(frontstageDef, start);
-    state = addWidgets(state, startWidgets, side, start);
+    state = addWidgets(state, determineNewWidgets(startWidgets, state), side, start);
     const end = getWidgetId(side, "end");
     const endWidgets = getPanelZoneWidgets(frontstageDef, end);
-    state = addWidgets(state, endWidgets, side, end);
+    state = addWidgets(state, determineNewWidgets(endWidgets, state), side, end);
     return state;
 }
 /** @internal */
@@ -605,6 +612,7 @@ export function restoreNineZoneState(frontstageDef, saved) {
             draft.tabs[tab.id] = {
                 ...tab,
                 label: getWidgetLabel((_a = widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.label) !== null && _a !== void 0 ? _a : "undefined"),
+                hideWithUiWhenFloating: widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.hideWithUiWhenFloating,
                 iconSpec: widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.iconSpec,
                 canPopout: widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.canPopout,
                 isFloatingStateWindowResizable: widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.isFloatingStateWindowResizable,
@@ -648,6 +656,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.
@@ -662,6 +684,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,
@@ -671,6 +696,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 */
@@ -680,12 +717,14 @@ 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,
         iconSpec: widgetDef.iconSpec,
         preferredPanelWidgetSize: widgetDef.preferredPanelSize,
         isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
+        hideWithUiWhenFloating: !!widgetDef.hideWithUiWhenFloating,
     });
     nineZone.tabs[newTab.id] = newTab;
     if (widgetDef.tabLocation.widgetId in nineZone.widgets) {
@@ -694,6 +733,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) {
@@ -713,7 +764,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);
@@ -722,6 +773,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;
@@ -732,7 +786,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;
             }
         }
     }
@@ -760,16 +814,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 */
@@ -907,7 +976,7 @@ const createListener = (frontstageDef, listener) => {
     };
 };
 /** @internal */
-export function useFrontstageManager(frontstageDef) {
+export function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
     React.useEffect(() => {
         const listener = createListener(frontstageDef, ({ widgetDef, widgetState }) => {
             assert(!!frontstageDef.nineZoneState);
@@ -968,6 +1037,34 @@ export function useFrontstageManager(frontstageDef) {
             FrontstageManager.onWidgetLabelChangedEvent.removeListener(listener);
         };
     }, [frontstageDef]);
+    const defaultLabel = React.useMemo(() => UiFramework.translate("widget.labels.toolSettings"), []);
+    React.useEffect(() => {
+        const updateLabel = createListener(frontstageDef, () => {
+            var _a;
+            const toolId = FrontstageManager.activeToolId;
+            assert(!!frontstageDef.nineZoneState);
+            const label = useToolAsToolSettingsLabel ?
+                ((_a = IModelApp.tools.find(toolId)) === null || _a === void 0 ? void 0 : _a.flyover) || defaultLabel : defaultLabel;
+            frontstageDef.nineZoneState = setWidgetLabel(frontstageDef.nineZoneState, toolSettingsTabId, label);
+        });
+        // Whenever the frontstageDef or the useTool... changes, keep the label up to date.
+        updateLabel();
+        // If useTool... is true, listen for events to keep up the label up to date.
+        if (useToolAsToolSettingsLabel) {
+            FrontstageManager.onFrontstageReadyEvent.addListener(updateLabel);
+            FrontstageManager.onFrontstageRestoreLayoutEvent.addListener(updateLabel);
+            FrontstageManager.onToolActivatedEvent.addListener(updateLabel);
+            FrontstageManager.onToolSettingsReloadEvent.addListener(updateLabel);
+        }
+        return () => {
+            if (useToolAsToolSettingsLabel) {
+                FrontstageManager.onFrontstageReadyEvent.removeListener(updateLabel);
+                FrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(updateLabel);
+                FrontstageManager.onToolActivatedEvent.removeListener(updateLabel);
+                FrontstageManager.onToolSettingsReloadEvent.removeListener(updateLabel);
+            }
+        };
+    }, [frontstageDef, useToolAsToolSettingsLabel, defaultLabel]);
 }
 /** @internal */
 // istanbul ignore next