@itwin/appui-react 4.5.1 → 4.6.1

package/lib/esm/appui-react/frontstage/FrontstageDef.js

@@ -9,16 +9,15 @@
 import * as React from "react";
 import { IModelApp } from "@itwin/core-frontend";
 import { UiError } from "@itwin/appui-abstract";
-import { Rectangle } from "@itwin/core-react";
-import { dockWidgetContainer, floatWidget, getTabLocation, getWidgetLocation, isFloatingTabLocation, isPanelTabLocation, isPopoutTabLocation, isPopoutWidgetLocation, panelSides, popoutWidgetToChildWindow, } from "@itwin/appui-layout-react";
+import { Rectangle, Size } from "@itwin/core-react";
+import { getTabLocation, getWidgetLocation, isFloatingTabLocation, isFloatingWidgetLocation, isPanelTabLocation, isPopoutTabLocation, isPopoutWidgetLocation, NineZoneStateReducer, panelSides, } from "@itwin/appui-layout-react";
 import { ContentGroupProvider } from "../content/ContentGroup";
-import { StagePanelDef, StagePanelState, toPanelSide, } from "../stagepanels/StagePanelDef";
+import { StagePanelDef, StagePanelState } from "../stagepanels/StagePanelDef";
 import { UiFramework } from "../UiFramework";
 import { WidgetDef, WidgetType } from "../widgets/WidgetDef";
 import { TimeTracker } from "../configurableui/TimeTracker";
 import { PopoutWidget } from "../childwindow/PopoutWidget";
-import { FrameworkStateReducer } from "../widget-panels/Frontstage";
-import { assert, BentleyStatus, ProcessDetector } from "@itwin/core-bentley";
+import { BentleyStatus, ProcessDetector } from "@itwin/core-bentley";
 import { StageUsage } from "./StageUsage";
 import { StagePanelLocation } from "../stagepanels/StagePanelLocation";
 import { WidgetState } from "../widgets/WidgetState";
@@ -101,101 +100,90 @@ export class FrontstageDef {
             const panel = nineZone.panels[panelSide];
             const location = this.toStagePanelLocation(panelSide);
             const panelDef = this.getStagePanelDef(location);
-            if (panelDef) {
-                const panelState = panel.collapsed
-                    ? StagePanelState.Minimized
-                    : StagePanelState.Open;
-                panelMap.set(panelDef, panelState);
-            }
-            for (const widgetId of panel.widgets) {
-                const widget = nineZone.widgets[widgetId];
-                // istanbul ignore else
-                if (widget) {
-                    for (const tabId of widget.tabs) {
-                        const widgetDef = this.findWidgetDef(tabId);
-                        if (widgetDef) {
-                            let widgetState = WidgetState.Open;
-                            if (widget.minimized || tabId !== widget.activeTabId)
-                                widgetState = WidgetState.Closed;
-                            widgetMap.set(widgetDef, widgetState);
-                        }
-                    }
-                }
-            }
+            if (!panelDef)
+                continue;
+            const panelState = panel.collapsed
+                ? StagePanelState.Minimized
+                : StagePanelState.Open;
+            panelMap.set(panelDef, panelState);
         }
-        // istanbul ignore next
-        for (const widgetId of nineZone.floatingWidgets.allIds) {
-            const widget = nineZone.widgets[widgetId];
-            if (widget) {
-                for (const tabId of widget.tabs) {
-                    const widgetDef = this.findWidgetDef(tabId);
-                    if (widgetDef) {
-                        let widgetState = WidgetState.Open;
-                        if (widget.minimized || tabId !== widget.activeTabId)
-                            widgetState = WidgetState.Closed;
-                        widgetMap.set(widgetDef, widgetState);
-                    }
+        for (const widgetDef of this.widgetDefs) {
+            const widgetId = widgetDef.id;
+            if (widgetDef === this.toolSettings) {
+                if (!nineZone.toolSettings) {
+                    widgetMap.set(widgetDef, WidgetState.Hidden);
+                    continue;
+                }
+                else if (nineZone.toolSettings.type === "docked") {
+                    widgetMap.set(widgetDef, WidgetState.Open);
+                    continue;
                 }
             }
-        }
-        const toolSettingsDef = this.toolSettings;
-        if (toolSettingsDef) {
-            if (!nineZone.toolSettings) {
-                widgetMap.set(toolSettingsDef, WidgetState.Hidden);
-            }
-            else if (nineZone.toolSettings.type === "docked") {
-                widgetMap.set(toolSettingsDef, WidgetState.Open);
+            const tabLocation = getTabLocation(nineZone, widgetId);
+            if (!tabLocation) {
+                widgetMap.set(widgetDef, WidgetState.Hidden);
+                continue;
             }
+            const widget = nineZone.widgets[tabLocation.widgetId];
+            let widgetState = WidgetState.Open;
+            if (widget.minimized || widgetId !== widget.activeTabId)
+                widgetState = WidgetState.Closed;
+            widgetMap.set(widgetDef, widgetState);
         }
     }
-    triggerStateChangeEventForWidgetsAndPanels(state) {
-        // istanbul ignore else
-        if (!(this._isStageClosing || this._isApplicationClosing)) {
-            if (state) {
-                const originalPanelStateMap = new Map();
-                const originalWidgetStateMap = new Map();
-                const newPanelStateMap = new Map();
-                const newWidgetStateMap = new Map();
-                this._nineZoneState &&
-                    this.populateStateMaps(this._nineZoneState, originalPanelStateMap, originalWidgetStateMap);
-                this.populateStateMaps(state, newPanelStateMap, newWidgetStateMap);
-                // set internal state value before triggering events
-                this._nineZoneState = state;
-                // now walk and trigger set state events
-                newWidgetStateMap.forEach((stateValue, widgetDef) => {
-                    const originalState = originalWidgetStateMap.get(widgetDef);
-                    if (originalState !== stateValue) {
-                        UiFramework.frontstages.onWidgetStateChangedEvent.emit({
-                            widgetDef,
-                            widgetState: stateValue,
-                        });
-                        widgetDef.onWidgetStateChanged();
-                    }
-                });
-                newPanelStateMap.forEach((stateValue, panelDef) => {
-                    const originalState = originalPanelStateMap.get(panelDef);
-                    if (originalState !== stateValue) {
-                        UiFramework.frontstages.onPanelStateChangedEvent.emit({
-                            panelDef,
-                            panelState: stateValue,
-                        });
-                    }
-                });
-                for (const panelSide of panelSides) {
-                    const panel = state.panels[panelSide];
-                    const location = this.toStagePanelLocation(panelSide);
-                    const panelDef = this.getStagePanelDef(location);
-                    if (panelDef) {
-                        panelDef.size = panel.size;
-                        panelDef.pinned = panel.pinned;
-                    }
-                }
+    triggerStateChangeEvents(oldState) {
+        const newState = this.nineZoneState;
+        if (!newState)
+            return;
+        if (this._isStageClosing || this._isApplicationClosing)
+            return;
+        const originalPanelStateMap = new Map();
+        const originalWidgetStateMap = new Map();
+        const newPanelStateMap = new Map();
+        const newWidgetStateMap = new Map();
+        this.populateStateMaps(oldState, originalPanelStateMap, originalWidgetStateMap);
+        this.populateStateMaps(newState, newPanelStateMap, newWidgetStateMap);
+        // Now walk and trigger set state events
+        newWidgetStateMap.forEach((newWidgetState, widgetDef) => {
+            const originalState = originalWidgetStateMap.get(widgetDef);
+            if (originalState === newWidgetState)
+                return;
+            widgetDef.handleWidgetStateChanged(newWidgetState);
+        });
+        newPanelStateMap.forEach((newPanelState, panelDef) => {
+            const originalState = originalPanelStateMap.get(panelDef);
+            if (originalState === newPanelState)
+                return;
+            panelDef.handlePanelStateChanged(newPanelState);
+        });
+        for (const panelSide of panelSides) {
+            const panel = newState.panels[panelSide];
+            const oldPanel = oldState.panels[panelSide];
+            const location = this.toStagePanelLocation(panelSide);
+            const panelDef = this.getStagePanelDef(location);
+            if (!panelDef)
+                continue;
+            if (panel.size !== oldPanel.size) {
+                panelDef.handleSizeChanged(panel.size);
             }
-            else {
-                this._nineZoneState = state;
+            if (panel.pinned !== oldPanel.pinned) {
+                panelDef.handlePinnedChanged(panel.pinned);
             }
         }
     }
+    handlePopouts(oldState) {
+        const newState = this.nineZoneState;
+        const oldPopouts = oldState?.popoutWidgets.allIds || [];
+        const newPopouts = newState?.popoutWidgets.allIds || [];
+        const popoutsToClose = oldPopouts.filter((p) => !newPopouts.includes(p));
+        const popoutsToOpen = newPopouts.filter((p) => !oldPopouts.includes(p));
+        for (const popoutId of popoutsToClose) {
+            UiFramework.childWindows.close(popoutId, true);
+        }
+        for (const popoutId of popoutsToOpen) {
+            this.openPopoutWidgetContainer(popoutId);
+        }
+    }
     /** @internal */
     get nineZoneState() {
         return this._nineZoneState;
@@ -203,26 +191,31 @@ export class FrontstageDef {
     set nineZoneState(state) {
         if (this._nineZoneState === state)
             return;
-        if (!this._nineZoneState) {
-            this._nineZoneState = state;
-        }
-        else {
-            this.triggerStateChangeEventForWidgetsAndPanels(state);
-        }
-        // istanbul ignore next - don't trigger any side effects until stage "isReady"
-        if (!(this._isStageClosing || this._isApplicationClosing) || this.isReady) {
-            InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.emit({
-                frontstageDef: this,
-                state,
-            });
-        }
+        const oldState = this._nineZoneState;
+        this._nineZoneState = state;
+        this.handlePopouts(oldState);
+        if (oldState) {
+            this.triggerStateChangeEvents(oldState);
+        }
+        const isClosing = this._isStageClosing || this._isApplicationClosing;
+        if (isClosing && !this.isReady)
+            return;
+        InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.emit({
+            frontstageDef: this,
+            state,
+        });
     }
     /** @internal */
-    get savedWidgetDefs() {
-        return this._savedWidgetDefs;
-    }
-    set savedWidgetDefs(widgets) {
-        this._savedWidgetDefs = widgets;
+    get dispatch() {
+        return (this._dispatch ??= (action) => {
+            if (action.type === "RESIZE") {
+                InternalFrontstageManager.nineZoneSize = Size.create(action.size);
+            }
+            const state = this.nineZoneState;
+            if (!state)
+                return;
+            this.nineZoneState = NineZoneStateReducer(state, action);
+        });
     }
     /** @internal */
     get timeTracker() {
@@ -512,7 +505,9 @@ export class FrontstageDef {
             frontstageDef: this,
         });
     }
-    /** @beta */
+    /** Restores frontstage layout to initial configuration.
+     * @beta
+     */
     restoreLayout() {
         for (const panelDef of this.panelDefs) {
             panelDef.size = panelDef.defaultSize;
@@ -542,11 +537,7 @@ export class FrontstageDef {
             if (!location)
                 return WidgetState.Hidden;
             if (isFloatingTabLocation(location)) {
-                const floatingWidget = state.floatingWidgets.byId[location.floatingWidgetId];
-                if (floatingWidget && floatingWidget.hidden)
-                    return WidgetState.Hidden;
-                else
-                    return WidgetState.Floating;
+                return WidgetState.Floating;
             }
             let collapsedPanel = false;
             // istanbul ignore else
@@ -563,24 +554,6 @@ export class FrontstageDef {
         }
         return widgetDef.defaultState;
     }
-    /** Used only in UI 2.0 to determine StagePanelState and size from NinezoneState
-     *  @internal
-     */
-    getPanelCurrentState(panelDef) {
-        // istanbul ignore next
-        if (this.nineZoneState) {
-            const side = toPanelSide(panelDef.location);
-            const panel = this.nineZoneState.panels[side];
-            if (panel)
-                return [
-                    panel.collapsed ? StagePanelState.Minimized : StagePanelState.Open,
-                    panel.size ?? 0,
-                    panel.pinned,
-                ];
-            return [StagePanelState.Off, 0, false];
-        }
-        return [panelDef.defaultState, panelDef.defaultSize ?? 0, true];
-    }
     isPopoutWidget(widgetId) {
         // istanbul ignore else
         if (this.nineZoneState) {
@@ -604,89 +577,65 @@ export class FrontstageDef {
     /** Create a new floating panel that contains the widget specified by its Id. Supported only when in
      *  UI 2.0 or higher.
      * @param widgetId case sensitive Widget Id
-     * @param point Position of top left corner of floating panel in pixels. If undefined {x:50, y:100} is used.
+     * @param position Position of top left corner of floating panel in pixels. If undefined {x:50, y:100} is used.
      * @param size defines the width and height of the floating panel. If undefined and widget has been floated before
      * the previous size is used, else {height:400, width:400} is used.
      * @beta
      */
-    floatWidget(widgetId, point, size) {
-        // istanbul ignore else
-        if (this.nineZoneState) {
-            const location = getTabLocation(this.nineZoneState, widgetId);
-            if (location) {
-                let popoutWidgetContainerId;
-                if (isPopoutTabLocation(location)) {
-                    popoutWidgetContainerId = location.popoutWidgetId;
-                }
-                const state = floatWidget(this.nineZoneState, widgetId, point, size);
-                // istanbul ignore else
-                if (state) {
-                    this.nineZoneState = state;
-                    setTimeout(() => {
-                        popoutWidgetContainerId &&
-                            UiFramework.childWindows.close(popoutWidgetContainerId, true);
-                    }, 600);
-                }
-            }
-        }
+    floatWidget(widgetId, position, size) {
+        const state = this.nineZoneState;
+        if (!state)
+            return;
+        const widgetDef = this.findWidgetDef(widgetId);
+        if (!widgetDef)
+            return;
+        this.dispatch({
+            type: "WIDGET_TAB_FLOAT",
+            id: widgetId,
+            position,
+            size,
+        });
     }
     /** Check widget and panel state to determine whether the widget is currently displayed
      * @param widgetId case-sensitive Widget Id
      * @public
      */
     isWidgetDisplayed(widgetId) {
-        let widgetIsVisible = false;
-        // istanbul ignore else
-        if (this.nineZoneState) {
-            const tabLocation = getTabLocation(this.nineZoneState, widgetId);
-            // istanbul ignore else
-            if (tabLocation) {
-                if (isFloatingTabLocation(tabLocation)) {
-                    const floatingWidget = this.nineZoneState.floatingWidgets.byId[tabLocation.floatingWidgetId];
-                    // istanbul ignore else
-                    if (!!!floatingWidget.hidden)
-                        widgetIsVisible = true;
-                }
-                else if (isPopoutTabLocation(tabLocation)) {
-                    widgetIsVisible = true;
-                }
-                else {
-                    // istanbul ignore else
-                    if (isPanelTabLocation(tabLocation)) {
-                        const panel = this.nineZoneState.panels[tabLocation.side];
-                        const widgetDef = this.findWidgetDef(widgetId);
-                        if (widgetDef &&
-                            widgetDef.state === WidgetState.Open &&
-                            !panel.collapsed)
-                            widgetIsVisible = true;
-                    }
-                }
-            }
+        if (!this.nineZoneState)
+            return false;
+        const tabLocation = getTabLocation(this.nineZoneState, widgetId);
+        if (!tabLocation)
+            return false;
+        if (isPanelTabLocation(tabLocation)) {
+            const panel = this.nineZoneState.panels[tabLocation.side];
+            const widgetDef = this.findWidgetDef(widgetId);
+            const isVisible = !!widgetDef && widgetDef.state === WidgetState.Open && !panel.collapsed;
+            return isVisible;
         }
-        return widgetIsVisible;
+        return true;
     }
     /** Opens window for specified PopoutWidget container. Used to reopen popout when running in Electron.
-     * @internal */
-    openPopoutWidgetContainer(state, widgetContainerId) {
+     * @internal
+     */
+    openPopoutWidgetContainer(widgetContainerId) {
+        const state = this.nineZoneState;
+        if (!state)
+            return;
         const location = getWidgetLocation(state, widgetContainerId);
-        // istanbul ignore next
         if (!location)
             return;
-        // istanbul ignore next
         if (!isPopoutWidgetLocation(location))
             return;
         const widget = state.widgets[widgetContainerId];
-        const popoutWidget = state.popoutWidgets.byId[location.popoutWidgetId];
         // Popout widget should only contain a single tab.
-        // istanbul ignore next
         if (widget.tabs.length !== 1)
             return;
         const tabId = widget.tabs[0];
         const widgetDef = this.findWidgetDef(tabId);
-        // istanbul ignore next
         if (!widgetDef)
             return;
         const popoutContent = (React.createElement(PopoutWidget, { widgetContainerId: widgetContainerId, widgetDef: widgetDef }));
+        const popoutWidget = state.popoutWidgets.byId[location.popoutWidgetId];
         const bounds = Rectangle.create(popoutWidget.bounds);
         const position = {
             width: bounds.getWidth(),
@@ -699,48 +648,23 @@ export class FrontstageDef {
     /** Create a new popout/child window that contains the widget specified by its Id. Supported only when in
      *  UI 2.0 or higher.
      * @param widgetId case sensitive Widget Id
-     * @param point Position of top left corner of floating panel in pixels. If undefined {x:0, y:0} is used.
+     * @param position Position of top left corner of floating panel in pixels. If undefined {x:0, y:0} is used.
      * @param size defines the width and height of the floating panel. If undefined and widget has been floated before
      * the previous size is used, else {height:800, width:600} is used.
      * @beta
      */
-    popoutWidget(widgetId, point, size) {
-        // istanbul ignore next
-        if (!this.nineZoneState)
-            return;
-        let location = getTabLocation(this.nineZoneState, widgetId);
-        if (!location || isPopoutTabLocation(location))
+    popoutWidget(widgetId, position, size) {
+        const state = this.nineZoneState;
+        if (!state)
             return;
         const widgetDef = this.findWidgetDef(widgetId);
-        // istanbul ignore next
         if (!widgetDef)
             return;
-        // get the state to apply that will pop-out the specified WidgetTab to child window.
-        let preferredBounds = Rectangle.createFromSize({ height: 800, width: 600 });
-        // istanbul ignore next
-        if (widgetDef.popoutBounds)
-            preferredBounds = widgetDef.popoutBounds;
-        if (size)
-            preferredBounds = preferredBounds.setSize(size);
-        if (point)
-            preferredBounds = preferredBounds.setPosition(point);
-        const state = popoutWidgetToChildWindow(this.nineZoneState, widgetId, preferredBounds);
-        this.nineZoneState = state;
-        // now that the state is updated get the id of the container that houses the widgetTab/widgetId
-        location = getTabLocation(state, widgetId);
-        assert(!!location && isPopoutTabLocation(location));
-        const widgetContainerId = location.widgetId;
-        const popoutWidget = state.popoutWidgets.byId[widgetContainerId];
-        const bounds = Rectangle.create(popoutWidget.bounds);
-        setTimeout(() => {
-            const popoutContent = (React.createElement(PopoutWidget, { widgetContainerId: widgetContainerId, widgetDef: widgetDef }));
-            const position = {
-                width: bounds.getWidth(),
-                height: bounds.getHeight(),
-                left: bounds.left,
-                top: bounds.top,
-            };
-            UiFramework.childWindows.open(widgetContainerId, widgetDef.label, popoutContent, position, UiFramework.useDefaultPopoutUrl);
+        this.dispatch({
+            type: "WIDGET_TAB_POPOUT",
+            id: widgetId,
+            position,
+            size,
         });
     }
     get isStageClosing() {
@@ -754,12 +678,13 @@ export class FrontstageDef {
     }
     /** @internal */
     saveChildWindowSizeAndPosition(childWindowId, childWindow) {
-        if (!this.nineZoneState)
+        const state = this.nineZoneState;
+        if (!state)
             return;
-        const location = getWidgetLocation(this.nineZoneState, childWindowId);
+        const location = getWidgetLocation(state, childWindowId);
         if (!location || !isPopoutWidgetLocation(location))
             return;
-        const widget = this.nineZoneState.widgets[location.popoutWidgetId];
+        const widget = state.widgets[location.popoutWidgetId];
         const tabId = widget.tabs[0];
         const widgetDef = this.findWidgetDef(tabId);
         if (!widgetDef)
@@ -772,23 +697,34 @@ export class FrontstageDef {
             x: childWindow.screenX,
             y: childWindow.screenY,
         });
-        widgetDef.popoutBounds = bounds;
+        this.dispatch({
+            type: "WIDGET_TAB_SET_POPOUT_BOUNDS",
+            id: tabId,
+            bounds,
+        });
     }
-    /** Method used to possibly change a Popout Widget back to a docked widget if the user was the one closing the popout's child
-     * window.
-     *  @internal
-     */
-    dockPopoutWidgetContainer(widgetContainerId) {
-        if (!this.nineZoneState)
+    /** @internal */
+    dockWidgetContainerByContainerId(widgetContainerId) {
+        const state = this.nineZoneState;
+        if (!state)
             return;
-        // Make sure the widgetContainerId is still in popout state. We don't want to set it to docked if the window is being closed because
-        // an API call has moved the widget from a popout state to a floating state.
-        // istanbul ignore else
-        const location = getWidgetLocation(this.nineZoneState, widgetContainerId);
-        if (!location || !isPopoutWidgetLocation(location))
+        const location = getWidgetLocation(state, widgetContainerId);
+        if (!location)
+            return;
+        if (isFloatingWidgetLocation(location)) {
+            this.dispatch({
+                type: "FLOATING_WIDGET_SEND_BACK",
+                id: location.floatingWidgetId,
+            });
+            return;
+        }
+        if (isPopoutWidgetLocation(location)) {
+            this.dispatch({
+                type: "POPOUT_WIDGET_SEND_BACK",
+                id: location.popoutWidgetId,
+            });
             return;
-        const state = dockWidgetContainer(this.nineZoneState, widgetContainerId, true);
-        this.nineZoneState = state;
+        }
     }
     /** Finds the container with the specified widget and re-docks all widgets
      * back to the panel zone location that was used when the floating container
@@ -797,34 +733,28 @@ export class FrontstageDef {
      * @beta
      */
     dockWidgetContainer(widgetId) {
-        // istanbul ignore else
-        if (this.nineZoneState) {
-            const location = getTabLocation(this.nineZoneState, widgetId);
-            if (location) {
-                const widgetContainerId = location.widgetId;
-                const state = dockWidgetContainer(this.nineZoneState, widgetContainerId, true);
-                state && (this.nineZoneState = state);
-                if (isPopoutTabLocation(location)) {
-                    UiFramework.childWindows.close(location.widgetId, true);
-                }
-            }
-        }
+        const state = this.nineZoneState;
+        if (!state)
+            return;
+        const location = getTabLocation(state, widgetId);
+        if (!location)
+            return;
+        this.dockWidgetContainerByContainerId(location.widgetId);
     }
     setFloatingWidgetContainerBounds(floatingWidgetId, bounds) {
         if (!this.nineZoneState ||
             !(floatingWidgetId in this.nineZoneState.floatingWidgets.byId))
             return false;
-        let state = FrameworkStateReducer(this.nineZoneState, {
+        this.dispatch({
             type: "FLOATING_WIDGET_SET_BOUNDS",
             id: floatingWidgetId,
             bounds,
-        }, this);
-        state = FrameworkStateReducer(state, {
+        });
+        this.dispatch({
             type: "FLOATING_WIDGET_SET_USER_SIZED",
             id: floatingWidgetId,
             userSized: true,
-        }, this);
-        this.nineZoneState = state;
+        });
         return true;
     }
     getFloatingWidgetContainerIds() {
@@ -920,8 +850,9 @@ export const useActiveFrontstageId = () => {
     const id = React.useMemo(() => (def ? /* istanbul ignore next */ def.id : ""), [def]);
     return id;
 };
-/** Hook to return the active Frontstage def */
-/** @public */
+/** Hook to return the active Frontstage def.
+ *  @public
+ */
 export function useActiveFrontstageDef() {
     const [def, setDef] = React.useState(UiFramework.frontstages.activeFrontstageDef);
     React.useEffect(() => {