@itwin/appui-react 4.2.0 → 4.3.0-dev.1

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

@@ -13,7 +13,7 @@ import { unstable_batchedUpdates } from "react-dom";
 import { assert, Logger, ProcessDetector } from "@itwin/core-bentley";
 import { Rectangle, Size, UiStateStorageStatus } from "@itwin/core-react";
 import { ToolbarPopupAutoHideContext } from "@itwin/components-react";
-import { addFloatingWidget, addPanelWidget, addTab, addTabToWidget, convertAllPopupWidgetContainersToFloating, createLayoutStore, createNineZoneState, floatingWidgetBringToFront, FloatingWidgets, getTabLocation, getUniqueId, getWidgetPanelSectionId, insertPanelWidget, insertTabToWidget, isFloatingTabLocation, isHorizontalPanelSide, isPanelTabLocation, isPopoutTabLocation, NineZone, NineZoneStateReducer, panelSides, removeTab, removeTabFromWidget, toolSettingsTabId, WidgetPanels, } from "@itwin/appui-layout-react";
+import { addDockedToolSettings, addFloatingWidget, addPanelWidget, addTab, addTabToWidget, addWidgetToolSettings, convertAllPopupWidgetContainersToFloating, createLayoutStore, createNineZoneState, floatingWidgetBringToFront, FloatingWidgets, getTabLocation, getUniqueId, getWidgetPanelSectionId, insertPanelWidget, insertTabToWidget, isFloatingTabLocation, isHorizontalPanelSide, isPanelTabLocation, isPopoutTabLocation, NineZone, NineZoneStateReducer, panelSides, removeTab, removeTabFromWidget, removeToolSettings, WidgetPanels, } from "@itwin/appui-layout-react";
 import { StagePanelState, toPanelSide } from "../stagepanels/StagePanelDef";
 import { UiFramework } from "../UiFramework";
 import { useUiStateStorageHandler } from "../uistate/useUiStateStorage";
@@ -120,14 +120,6 @@ export function useNineZoneDispatch(frontstageDef) {
         if (action.type === "RESIZE") {
             InternalFrontstageManager.nineZoneSize = Size.create(action.size);
         }
-        // istanbul ignore if
-        if (action.type === "TOOL_SETTINGS_DRAG_START") {
-            void UiFramework.postTelemetry("Tool Settings Undocking", "28B04E07-AE73-4533-A0BA-8E2A8DC99ADF");
-        }
-        // istanbul ignore if
-        if (action.type === "TOOL_SETTINGS_DOCK") {
-            void UiFramework.postTelemetry("Tool Settings Docking to Settings Bar", "BEDE684B-B3DB-4637-B3AF-DC3CBA223F94");
-        }
         if (action.type === "WIDGET_TAB_POPOUT") {
             const tabId = action.id;
             frontstageDef.popoutWidget(tabId);
@@ -204,6 +196,19 @@ export function useLabels() {
         popoutActiveTab: UiFramework.translate("widget.tooltips.popoutActiveTab"),
     }), []);
 }
+function toTabArgs(widget) {
+    const label = getWidgetLabel(widget.label);
+    return {
+        allowedPanelTargets: widget.allowedPanelTargets?.map((location) => toPanelSide(location)),
+        hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
+        canPopout: widget.canPopout,
+        iconSpec: widget.iconSpec,
+        isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
+        label,
+        preferredFloatingWidgetSize: widget.defaultFloatingSize,
+        preferredPanelWidgetSize: widget.preferredPanelSize,
+    };
+}
 /** @internal */
 export function addWidgets(state, widgets, side, widgetId) {
     const visibleWidgets = widgets.filter((w) => w.isVisible && w.defaultState !== WidgetState.Floating);
@@ -211,17 +216,7 @@ export function addWidgets(state, widgets, side, widgetId) {
         return state;
     const tabs = new Array();
     for (const widget of visibleWidgets) {
-        const label = getWidgetLabel(widget.label);
-        state = addTab(state, widget.id, {
-            label,
-            iconSpec: widget.iconSpec,
-            preferredPanelWidgetSize: widget.preferredPanelSize,
-            preferredFloatingWidgetSize: widget.defaultFloatingSize,
-            canPopout: widget.canPopout,
-            isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
-            hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
-            allowedPanelTargets: widget.allowedPanelTargets?.map((location) => toPanelSide(location)),
-        });
+        state = addTab(state, widget.id, toTabArgs(widget));
         tabs.push(widget.id);
     }
     const activeWidget = visibleWidgets.find((widget) => widget.isActive);
@@ -238,12 +233,9 @@ export function addWidgets(state, widgets, side, widgetId) {
 /** @internal */
 // istanbul ignore next
 export function appendWidgets(state, widgetDefs, location, section) {
-    if (widgetDefs.length === 0)
-        return state;
     const side = toPanelSide(location);
     // Add missing widget tabs.
     for (const widgetDef of widgetDefs) {
-        const label = getWidgetLabel(widgetDef.label);
         const saveTab = state.tabs[widgetDef.id];
         const preferredPanelWidgetSize = saveTab
             ? saveTab.preferredPanelWidgetSize
@@ -258,15 +250,10 @@ export function appendWidgets(state, widgetDefs, location, section) {
                     !!saveTab.preferredFloatingWidgetSize)
             : !!widgetDef.defaultFloatingSize;
         state = addTab(state, widgetDef.id, {
-            label,
-            iconSpec: widgetDef.iconSpec,
-            canPopout: widgetDef.canPopout,
-            preferredPanelWidgetSize,
+            ...toTabArgs(widgetDef),
             preferredFloatingWidgetSize,
+            preferredPanelWidgetSize,
             userSized,
-            isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
-            hideWithUiWhenFloating: !!widgetDef.hideWithUiWhenFloating,
-            allowedPanelTargets: widgetDef.allowedPanelTargets?.map((l) => toPanelSide(l)),
         });
         if (widgetDef.isFloatingStateSupported &&
             widgetDef.defaultState === WidgetState.Floating) {
@@ -364,6 +351,12 @@ export function addMissingWidgets(frontstageDef, initialState) {
         .widgetDefs, state), StagePanelLocation.Bottom, StagePanelSection.Start);
     state = appendWidgets(state, determineNewWidgets(frontstageDef.bottomPanel?.getPanelSectionDef(StagePanelSection.End)
         .widgetDefs, state), StagePanelLocation.Bottom, StagePanelSection.End);
+    if (frontstageDef.toolSettings) {
+        const newToolSettingsWidgets = determineNewWidgets([frontstageDef.toolSettings], state);
+        for (const newToolSettingsWidget of newToolSettingsWidgets) {
+            state = addTab(state, newToolSettingsWidget.id, toTabArgs(newToolSettingsWidget));
+        }
+    }
     return state;
 }
 /** Hide widgets with Hidden defaultState. */
@@ -382,8 +375,8 @@ function hideWidgets(state, frontstageDef) {
 /** Removes NineZoneState widgets that are missing in frontstageDef.
  * @internal
  */
-export function removeMissingWidgets(frontstageDef, initialState) {
-    let state = initialState;
+export function removeMissingWidgets(frontstageDef, state) {
+    const toolSettingsTabId = state.toolSettings?.tabId;
     for (const [, tab] of Object.entries(state.tabs)) {
         if (tab.id === toolSettingsTabId)
             continue;
@@ -487,7 +480,8 @@ function getPanelMaxSize(maxSizeSpec, panel, nineZoneSize) {
         : nineZoneSize.width;
     return (maxSizeSpec.percentage / 100) * size;
 }
-const stateVersion = 13; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
+/** @internal */
+export const stateVersion = 14; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
 /** @internal */
 export function initializeNineZoneState(frontstageDef) {
     let nineZone = defaultNineZone;
@@ -504,29 +498,26 @@ export function initializeNineZoneState(frontstageDef) {
     nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Right);
     nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Top);
     nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Bottom);
-    nineZone = produce(nineZone, (stateDraft) => {
-        for (const [, panel] of Object.entries(stateDraft.panels)) {
-            const expanded = panel.widgets.find((widgetId) => stateDraft.widgets[widgetId].minimized === false);
-            const firstWidget = panel.widgets.length > 0
-                ? stateDraft.widgets[panel.widgets[0]]
-                : undefined;
+    nineZone = produce(nineZone, (draft) => {
+        for (const [, panel] of Object.entries(draft.panels)) {
+            const expanded = panel.widgets.find((widgetId) => draft.widgets[widgetId].minimized === false);
+            const firstWidget = panel.widgets.length > 0 ? draft.widgets[panel.widgets[0]] : undefined;
             // istanbul ignore next
             if (!expanded && firstWidget) {
                 firstWidget.minimized = false;
             }
         }
-        stateDraft.panels.left.collapsed = isPanelCollapsed(frontstageDef.leftPanel?.panelState);
-        stateDraft.panels.right.collapsed = isPanelCollapsed(frontstageDef.rightPanel?.panelState);
-        stateDraft.panels.top.collapsed = isPanelCollapsed(frontstageDef.topPanel?.panelState);
-        stateDraft.panels.bottom.collapsed = isPanelCollapsed(frontstageDef.bottomPanel?.panelState);
-        const toolSettingsWidgetDef = frontstageDef.toolSettings;
-        if (toolSettingsWidgetDef) {
-            const toolSettingsTab = stateDraft.tabs[toolSettingsTabId];
-            toolSettingsTab.preferredPanelWidgetSize =
-                toolSettingsWidgetDef.preferredPanelSize;
-        }
+        draft.panels.left.collapsed = isPanelCollapsed(frontstageDef.leftPanel?.panelState);
+        draft.panels.right.collapsed = isPanelCollapsed(frontstageDef.rightPanel?.panelState);
+        draft.panels.top.collapsed = isPanelCollapsed(frontstageDef.topPanel?.panelState);
+        draft.panels.bottom.collapsed = isPanelCollapsed(frontstageDef.bottomPanel?.panelState);
     });
     nineZone = addMissingWidgets(frontstageDef, nineZone);
+    const toolSettingsWidgetDef = frontstageDef.toolSettings;
+    if (toolSettingsWidgetDef) {
+        const toolSettingsTabId = toolSettingsWidgetDef.id;
+        nineZone = addDockedToolSettings(nineZone, toolSettingsTabId);
+    }
     nineZone = hideWidgets(nineZone, frontstageDef);
     nineZone = processPopoutWidgets(nineZone, frontstageDef);
     return nineZone;
@@ -539,7 +530,7 @@ export function initializeNineZoneState(frontstageDef) {
 export function restoreNineZoneState(frontstageDef, saved) {
     let restored = {
         ...saved,
-        tabs: defaultNineZone.tabs,
+        tabs: {},
     };
     for (const [, tab] of Object.entries(saved.tabs)) {
         // Re-add the placeholder tab in order to correctly remove it from the state if WidgetDef is not found.
@@ -556,12 +547,9 @@ export function restoreNineZoneState(frontstageDef, saved) {
         restored = produce(restored, (draft) => {
             draft.tabs[tab.id] = {
                 ...tab,
-                label: getWidgetLabel(widgetDef.label),
-                hideWithUiWhenFloating: widgetDef.hideWithUiWhenFloating,
-                iconSpec: widgetDef.iconSpec,
-                canPopout: widgetDef.canPopout,
-                isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
-                allowedPanelTargets: widgetDef.allowedPanelTargets?.map((location) => toPanelSide(location)),
+                ...toTabArgs(widgetDef),
+                preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
+                preferredPanelWidgetSize: tab.preferredPanelWidgetSize,
             };
         });
     }
@@ -618,12 +606,9 @@ export function packNineZoneState(state) {
     };
     packed = produce(packed, (draft) => {
         for (const [, tab] of Object.entries(state.tabs)) {
-            if (tab.id === toolSettingsTabId)
-                continue;
             draft.tabs[tab.id] = {
                 id: tab.id,
                 preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
-                allowedPanelTargets: tab.allowedPanelTargets,
                 userSized: tab.userSized,
             };
         }
@@ -721,10 +706,20 @@ export function setWidgetState(state, widgetDef, widgetState) {
     }
     else if (widgetState === WidgetState.Open) {
         const id = widgetDef.id;
+        if (widgetDef.isToolSettings) {
+            if (!state.toolSettings && !widgetDef.tabLocation) {
+                state = addDockedToolSettings(state, id);
+            }
+            if (state.toolSettings?.type === "docked")
+                return state;
+        }
         let location = getTabLocation(state, id);
         if (!location) {
             state = addHiddenWidget(state, widgetDef);
             location = getTabLocation(state, id);
+            if (widgetDef.isToolSettings) {
+                state = addWidgetToolSettings(state, id);
+            }
         }
         return produce(state, (draft) => {
             assert(!!location);
@@ -748,6 +743,9 @@ export function setWidgetState(state, widgetDef, widgetState) {
     }
     else if (widgetState === WidgetState.Closed) {
         const id = widgetDef.id;
+        if (widgetDef.isToolSettings && state.toolSettings?.type !== "widget") {
+            return state;
+        }
         let location = getTabLocation(state, id);
         if (!location) {
             state = addHiddenWidget(state, widgetDef);
@@ -778,11 +776,28 @@ export function setWidgetState(state, widgetDef, widgetState) {
         state = removeTabFromWidget(state, id);
         const bounds = widgetDef.tabLocation?.floatingWidget?.bounds;
         state = addFloatingWidget(state, getUniqueId(), [id], { bounds });
+        if (widgetDef.isToolSettings) {
+            if (state.toolSettings?.type === "docked") {
+                state = removeToolSettings(state);
+            }
+            if (!state.toolSettings) {
+                state = addWidgetToolSettings(state, id);
+            }
+        }
     }
     return state;
 }
 /** Stores widget location and hides it in the UI. */
 function hideWidget(state, widgetDef) {
+    const toolSettingsTabId = state.toolSettings?.tabId;
+    if (widgetDef.id === toolSettingsTabId) {
+        widgetDef.tabLocation = undefined;
+        state = produce(state, (draft) => {
+            draft.toolSettings = undefined;
+        });
+        if (state.toolSettings?.type === "docked")
+            return state;
+    }
     const location = getTabLocation(state, widgetDef.id);
     if (!location)
         return state;
@@ -886,8 +901,8 @@ export function useSavedFrontstageState(frontstageDef) {
                 return;
             if (isFrontstageStateSettingResult(settingResult)) {
                 const setting = settingResult.setting;
-                if (setting.version >= version &&
-                    setting.stateVersion >= stateVersion) {
+                if (setting.version === version &&
+                    setting.stateVersion === stateVersion) {
                     const restored = restoreNineZoneState(frontstageDef, setting.nineZone);
                     frontstageDef.savedWidgetDefs = setting.widgets;
                     restoreSavedWidgets(frontstageDef);
@@ -974,14 +989,11 @@ const createListener = (frontstageDef, listener) => {
 /** @internal */
 export function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
     React.useEffect(() => {
-        const listener = createListener(frontstageDef, ({ widgetDef, widgetState }) => {
-            assert(!!frontstageDef.nineZoneState);
+        return UiFramework.frontstages.onWidgetStateChangedEvent.addListener(({ widgetDef, widgetState }) => {
+            if (!frontstageDef.nineZoneState)
+                return;
             frontstageDef.nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, widgetState);
         });
-        UiFramework.frontstages.onWidgetStateChangedEvent.addListener(listener);
-        return () => {
-            UiFramework.frontstages.onWidgetStateChangedEvent.removeListener(listener);
-        };
     }, [frontstageDef]);
     React.useEffect(() => {
         const listener = createListener(frontstageDef, ({ widgetDef }) => {
@@ -1044,6 +1056,9 @@ export function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel)
             const label = useToolAsToolSettingsLabel
                 ? IModelApp.tools.find(toolId)?.flyover || defaultLabel
                 : defaultLabel;
+            const toolSettingsTabId = frontstageDef.nineZoneState.toolSettings?.tabId;
+            if (!toolSettingsTabId)
+                return;
             frontstageDef.nineZoneState = setWidgetLabel(frontstageDef.nineZoneState, toolSettingsTabId, label);
         });
         // Whenever the frontstageDef or the useTool... changes, keep the label up to date.