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

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

@@ -34,6 +34,7 @@ const ToolSettings_1 = require("./ToolSettings");
 const useEscapeSetFocusToHome_1 = require("../hooks/useEscapeSetFocusToHome");
 const react_redux_1 = require("react-redux");
 const useUiVisibility_1 = require("../hooks/useUiVisibility");
+const core_frontend_1 = require("@itwin/core-frontend");
 const panelZoneKeys = ["start", "end"];
 const WidgetInternals = React.memo(function WidgetInternals() {
     const activeModalFrontstageInfo = (0, ModalFrontstageComposer_1.useActiveModalFrontstageInfo)();
@@ -184,7 +185,6 @@ function ActiveFrontstageDefProvider({ frontstageDef }) {
     useUpdateNineZoneSize(frontstageDef);
     useSavedFrontstageState(frontstageDef);
     useSaveFrontstageSettings(frontstageDef);
-    useFrontstageManager(frontstageDef);
     useItemsManager(frontstageDef);
     const labels = useLabels();
     const uiIsVisible = (0, useUiVisibility_1.useUiVisibility)();
@@ -200,6 +200,11 @@ function ActiveFrontstageDefProvider({ frontstageDef }) {
         const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey];
         return !!frameworkState.configurableUiState.animateToolSettings;
     });
+    const useToolAsToolSettingsLabel = (0, react_redux_1.useSelector)((state) => {
+        const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey];
+        return !!frameworkState.configurableUiState.useToolAsToolSettingsLabel;
+    });
+    useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel);
     const handleKeyDown = (0, useEscapeSetFocusToHome_1.useEscapeSetFocusToHome)();
     return (React.createElement("div", { className: "uifw-widgetPanels-frontstage", onKeyDown: handleKeyDown, role: "presentation" },
         React.createElement(appui_layout_react_1.NineZone, { dispatch: dispatch, labels: labels, state: nineZone, tab: tabElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
@@ -235,6 +240,7 @@ function addWidgets(state, widgets, side, widgetId) {
             preferredFloatingWidgetSize: widget.defaultFloatingSize,
             canPopout: widget.canPopout,
             isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
+            hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
         });
         tabs.push(widget.id);
     }
@@ -275,6 +281,7 @@ function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
             preferredPopoutWidgetSize,
             userSized,
             isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
+            hideWithUiWhenFloating: !!widgetDef.hideWithUiWhenFloating,
         });
         if (widgetDef.isFloatingStateSupported && widgetDef.defaultState === appui_abstract_1.WidgetState.Floating) {
             const floatingContainerId = (_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : (0, appui_layout_react_1.getUniqueId)();
@@ -312,24 +319,24 @@ function processPopoutWidgets(initialState, frontstageDef) {
 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;
 }
 exports.addMissingWidgets = addMissingWidgets;
@@ -502,10 +509,10 @@ exports.getPanelZoneWidgets = getPanelZoneWidgets;
 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;
 }
 exports.addPanelWidgets = addPanelWidgets;
@@ -623,6 +630,7 @@ 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,
@@ -667,6 +675,20 @@ function restoreNineZoneState(frontstageDef, saved) {
     return restored;
 }
 exports.restoreNineZoneState = restoreNineZoneState;
+/**
+ * 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.
@@ -681,6 +703,9 @@ function packNineZoneState(state) {
         for (const [, tab] of Object.entries(state.tabs)) {
             if (tab.id === appui_layout_react_1.toolSettingsTabId)
                 continue;
+            // istanbul ignore else
+            if (isUUID(tab.id))
+                continue;
             draft.tabs[tab.id] = {
                 id: tab.id,
                 preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
@@ -690,6 +715,18 @@ function packNineZoneState(state) {
             };
         }
     });
+    packed = (0, immer_1.default)(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;
 }
 exports.packNineZoneState = packNineZoneState;
@@ -701,12 +738,14 @@ function isPanelCollapsed(zoneStates, panelStates) {
 }
 exports.isPanelCollapsed = isPanelCollapsed;
 function addRemovedTab(nineZone, widgetDef) {
+    var _a, _b;
     const newTab = (0, appui_layout_react_1.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) {
@@ -715,6 +754,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;
+            (0, appui_layout_react_1.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 };
+            (0, appui_layout_react_1.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) {
@@ -734,7 +785,7 @@ function addRemovedTab(nineZone, widgetDef) {
 }
 /** @internal */
 exports.setWidgetState = (0, immer_1.default)((nineZone, widgetDef, state) => {
-    var _a;
+    var _a, _b;
     if (state === appui_abstract_1.WidgetState.Open) {
         const id = widgetDef.id;
         let location = (0, appui_layout_react_1.findTab)(nineZone, id);
@@ -743,6 +794,9 @@ exports.setWidgetState = (0, immer_1.default)((nineZone, widgetDef, state) => {
             location = (0, appui_layout_react_1.findTab)(nineZone, id);
             (0, core_bentley_1.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;
@@ -753,7 +807,7 @@ exports.setWidgetState = (0, immer_1.default)((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;
             }
         }
     }
@@ -781,16 +835,31 @@ function hideWidget(state, widgetDef) {
     const location = (0, appui_layout_react_1.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 ((0, appui_layout_react_1.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 (!(0, appui_layout_react_1.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,
+        };
+    }
     (0, appui_layout_react_1.removeTab)(state, widgetDef.id);
 }
 /** @internal */
@@ -931,7 +1000,7 @@ const createListener = (frontstageDef, listener) => {
     };
 };
 /** @internal */
-function useFrontstageManager(frontstageDef) {
+function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
     React.useEffect(() => {
         const listener = createListener(frontstageDef, ({ widgetDef, widgetState }) => {
             (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
@@ -992,6 +1061,34 @@ function useFrontstageManager(frontstageDef) {
             FrontstageManager_1.FrontstageManager.onWidgetLabelChangedEvent.removeListener(listener);
         };
     }, [frontstageDef]);
+    const defaultLabel = React.useMemo(() => UiFramework_1.UiFramework.translate("widget.labels.toolSettings"), []);
+    React.useEffect(() => {
+        const updateLabel = createListener(frontstageDef, () => {
+            var _a;
+            const toolId = FrontstageManager_1.FrontstageManager.activeToolId;
+            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+            const label = useToolAsToolSettingsLabel ?
+                ((_a = core_frontend_1.IModelApp.tools.find(toolId)) === null || _a === void 0 ? void 0 : _a.flyover) || defaultLabel : defaultLabel;
+            frontstageDef.nineZoneState = (0, exports.setWidgetLabel)(frontstageDef.nineZoneState, appui_layout_react_1.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_1.FrontstageManager.onFrontstageReadyEvent.addListener(updateLabel);
+            FrontstageManager_1.FrontstageManager.onFrontstageRestoreLayoutEvent.addListener(updateLabel);
+            FrontstageManager_1.FrontstageManager.onToolActivatedEvent.addListener(updateLabel);
+            FrontstageManager_1.FrontstageManager.onToolSettingsReloadEvent.addListener(updateLabel);
+        }
+        return () => {
+            if (useToolAsToolSettingsLabel) {
+                FrontstageManager_1.FrontstageManager.onFrontstageReadyEvent.removeListener(updateLabel);
+                FrontstageManager_1.FrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(updateLabel);
+                FrontstageManager_1.FrontstageManager.onToolActivatedEvent.removeListener(updateLabel);
+                FrontstageManager_1.FrontstageManager.onToolSettingsReloadEvent.removeListener(updateLabel);
+            }
+        };
+    }, [frontstageDef, useToolAsToolSettingsLabel, defaultLabel]);
 }
 exports.useFrontstageManager = useFrontstageManager;
 /** @internal */