@itwin/appui-react 4.5.1 → 4.6.0

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

@@ -20,7 +20,6 @@ const UiFramework_1 = require("../UiFramework");
 const WidgetDef_1 = require("../widgets/WidgetDef");
 const TimeTracker_1 = require("../configurableui/TimeTracker");
 const PopoutWidget_1 = require("../childwindow/PopoutWidget");
-const Frontstage_1 = require("../widget-panels/Frontstage");
 const core_bentley_1 = require("@itwin/core-bentley");
 const StageUsage_1 = require("./StageUsage");
 const StagePanelLocation_1 = require("../stagepanels/StagePanelLocation");
@@ -151,54 +150,59 @@ class FrontstageDef {
             }
         }
     }
-    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_1.UiFramework.frontstages.onWidgetStateChangedEvent.emit({
-                            widgetDef,
-                            widgetState: stateValue,
-                        });
-                        widgetDef.onWidgetStateChanged();
-                    }
-                });
-                newPanelStateMap.forEach((stateValue, panelDef) => {
-                    const originalState = originalPanelStateMap.get(panelDef);
-                    if (originalState !== stateValue) {
-                        UiFramework_1.UiFramework.frontstages.onPanelStateChangedEvent.emit({
-                            panelDef,
-                            panelState: stateValue,
-                        });
-                    }
-                });
-                for (const panelSide of appui_layout_react_1.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 appui_layout_react_1.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 === null || oldState === void 0 ? void 0 : oldState.popoutWidgets.allIds) || [];
+        const newPopouts = (newState === null || newState === void 0 ? void 0 : 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_1.UiFramework.childWindows.close(popoutId, true);
+        }
+        for (const popoutId of popoutsToOpen) {
+            this.openPopoutWidgetContainer(popoutId);
+        }
+    }
     /** @internal */
     get nineZoneState() {
         return this._nineZoneState;
@@ -206,26 +210,32 @@ 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_1.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_1.InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.emit({
+            frontstageDef: this,
+            state,
+        });
     }
     /** @internal */
-    get savedWidgetDefs() {
-        return this._savedWidgetDefs;
-    }
-    set savedWidgetDefs(widgets) {
-        this._savedWidgetDefs = widgets;
+    get dispatch() {
+        var _a;
+        return ((_a = this._dispatch) !== null && _a !== void 0 ? _a : (this._dispatch = (action) => {
+            if (action.type === "RESIZE") {
+                InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize = core_react_1.Size.create(action.size);
+            }
+            const state = this.nineZoneState;
+            if (!state)
+                return;
+            this.nineZoneState = (0, appui_layout_react_1.NineZoneStateReducer)(state, action);
+        }));
     }
     /** @internal */
     get timeTracker() {
@@ -515,7 +525,9 @@ class FrontstageDef {
             frontstageDef: this,
         });
     }
-    /** @beta */
+    /** Restores frontstage layout to initial configuration.
+     * @beta
+     */
     restoreLayout() {
         for (const panelDef of this.panelDefs) {
             panelDef.size = panelDef.defaultSize;
@@ -532,12 +544,13 @@ class FrontstageDef {
      *  @internal
      */
     getWidgetCurrentState(widgetDef) {
+        var _a, _b;
         const state = this.nineZoneState;
         // istanbul ignore else
         if (state) {
-            const toolSettingsTabId = state.toolSettings?.tabId;
+            const toolSettingsTabId = (_a = state.toolSettings) === null || _a === void 0 ? void 0 : _a.tabId;
             if (toolSettingsTabId === widgetDef.id &&
-                state.toolSettings?.type === "docked") {
+                ((_b = state.toolSettings) === null || _b === void 0 ? void 0 : _b.type) === "docked") {
                 return WidgetState_1.WidgetState.Open;
             }
             const location = (0, appui_layout_react_1.getTabLocation)(state, widgetDef.id);
@@ -545,11 +558,7 @@ class FrontstageDef {
             if (!location)
                 return WidgetState_1.WidgetState.Hidden;
             if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
-                const floatingWidget = state.floatingWidgets.byId[location.floatingWidgetId];
-                if (floatingWidget && floatingWidget.hidden)
-                    return WidgetState_1.WidgetState.Hidden;
-                else
-                    return WidgetState_1.WidgetState.Floating;
+                return WidgetState_1.WidgetState.Floating;
             }
             let collapsedPanel = false;
             // istanbul ignore else
@@ -566,24 +575,6 @@ 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 = (0, StagePanelDef_1.toPanelSide)(panelDef.location);
-            const panel = this.nineZoneState.panels[side];
-            if (panel)
-                return [
-                    panel.collapsed ? StagePanelDef_1.StagePanelState.Minimized : StagePanelDef_1.StagePanelState.Open,
-                    panel.size ?? 0,
-                    panel.pinned,
-                ];
-            return [StagePanelDef_1.StagePanelState.Off, 0, false];
-        }
-        return [panelDef.defaultState, panelDef.defaultSize ?? 0, true];
-    }
     isPopoutWidget(widgetId) {
         // istanbul ignore else
         if (this.nineZoneState) {
@@ -607,89 +598,65 @@ 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 = (0, appui_layout_react_1.getTabLocation)(this.nineZoneState, widgetId);
-            if (location) {
-                let popoutWidgetContainerId;
-                if ((0, appui_layout_react_1.isPopoutTabLocation)(location)) {
-                    popoutWidgetContainerId = location.popoutWidgetId;
-                }
-                const state = (0, appui_layout_react_1.floatWidget)(this.nineZoneState, widgetId, point, size);
-                // istanbul ignore else
-                if (state) {
-                    this.nineZoneState = state;
-                    setTimeout(() => {
-                        popoutWidgetContainerId &&
-                            UiFramework_1.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 = (0, appui_layout_react_1.getTabLocation)(this.nineZoneState, widgetId);
-            // istanbul ignore else
-            if (tabLocation) {
-                if ((0, appui_layout_react_1.isFloatingTabLocation)(tabLocation)) {
-                    const floatingWidget = this.nineZoneState.floatingWidgets.byId[tabLocation.floatingWidgetId];
-                    // istanbul ignore else
-                    if (!!!floatingWidget.hidden)
-                        widgetIsVisible = true;
-                }
-                else if ((0, appui_layout_react_1.isPopoutTabLocation)(tabLocation)) {
-                    widgetIsVisible = true;
-                }
-                else {
-                    // istanbul ignore else
-                    if ((0, appui_layout_react_1.isPanelTabLocation)(tabLocation)) {
-                        const panel = this.nineZoneState.panels[tabLocation.side];
-                        const widgetDef = this.findWidgetDef(widgetId);
-                        if (widgetDef &&
-                            widgetDef.state === WidgetState_1.WidgetState.Open &&
-                            !panel.collapsed)
-                            widgetIsVisible = true;
-                    }
-                }
-            }
+        if (!this.nineZoneState)
+            return false;
+        const tabLocation = (0, appui_layout_react_1.getTabLocation)(this.nineZoneState, widgetId);
+        if (!tabLocation)
+            return false;
+        if ((0, appui_layout_react_1.isPanelTabLocation)(tabLocation)) {
+            const panel = this.nineZoneState.panels[tabLocation.side];
+            const widgetDef = this.findWidgetDef(widgetId);
+            const isVisible = !!widgetDef && widgetDef.state === WidgetState_1.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 = (0, appui_layout_react_1.getWidgetLocation)(state, widgetContainerId);
-        // istanbul ignore next
         if (!location)
             return;
-        // istanbul ignore next
         if (!(0, appui_layout_react_1.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_1.PopoutWidget, { widgetContainerId: widgetContainerId, widgetDef: widgetDef }));
+        const popoutWidget = state.popoutWidgets.byId[location.popoutWidgetId];
         const bounds = core_react_1.Rectangle.create(popoutWidget.bounds);
         const position = {
             width: bounds.getWidth(),
@@ -702,48 +669,23 @@ 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 = (0, appui_layout_react_1.getTabLocation)(this.nineZoneState, widgetId);
-        if (!location || (0, appui_layout_react_1.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 = core_react_1.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 = (0, appui_layout_react_1.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 = (0, appui_layout_react_1.getTabLocation)(state, widgetId);
-        (0, core_bentley_1.assert)(!!location && (0, appui_layout_react_1.isPopoutTabLocation)(location));
-        const widgetContainerId = location.widgetId;
-        const popoutWidget = state.popoutWidgets.byId[widgetContainerId];
-        const bounds = core_react_1.Rectangle.create(popoutWidget.bounds);
-        setTimeout(() => {
-            const popoutContent = (React.createElement(PopoutWidget_1.PopoutWidget, { widgetContainerId: widgetContainerId, widgetDef: widgetDef }));
-            const position = {
-                width: bounds.getWidth(),
-                height: bounds.getHeight(),
-                left: bounds.left,
-                top: bounds.top,
-            };
-            UiFramework_1.UiFramework.childWindows.open(widgetContainerId, widgetDef.label, popoutContent, position, UiFramework_1.UiFramework.useDefaultPopoutUrl);
+        this.dispatch({
+            type: "WIDGET_TAB_POPOUT",
+            id: widgetId,
+            position,
+            size,
         });
     }
     get isStageClosing() {
@@ -757,12 +699,13 @@ class FrontstageDef {
     }
     /** @internal */
     saveChildWindowSizeAndPosition(childWindowId, childWindow) {
-        if (!this.nineZoneState)
+        const state = this.nineZoneState;
+        if (!state)
             return;
-        const location = (0, appui_layout_react_1.getWidgetLocation)(this.nineZoneState, childWindowId);
+        const location = (0, appui_layout_react_1.getWidgetLocation)(state, childWindowId);
         if (!location || !(0, appui_layout_react_1.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)
@@ -775,23 +718,34 @@ 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 = (0, appui_layout_react_1.getWidgetLocation)(this.nineZoneState, widgetContainerId);
-        if (!location || !(0, appui_layout_react_1.isPopoutWidgetLocation)(location))
+        const location = (0, appui_layout_react_1.getWidgetLocation)(state, widgetContainerId);
+        if (!location)
+            return;
+        if ((0, appui_layout_react_1.isFloatingWidgetLocation)(location)) {
+            this.dispatch({
+                type: "FLOATING_WIDGET_SEND_BACK",
+                id: location.floatingWidgetId,
+            });
+            return;
+        }
+        if ((0, appui_layout_react_1.isPopoutWidgetLocation)(location)) {
+            this.dispatch({
+                type: "POPOUT_WIDGET_SEND_BACK",
+                id: location.popoutWidgetId,
+            });
             return;
-        const state = (0, appui_layout_react_1.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
@@ -800,34 +754,28 @@ class FrontstageDef {
      * @beta
      */
     dockWidgetContainer(widgetId) {
-        // istanbul ignore else
-        if (this.nineZoneState) {
-            const location = (0, appui_layout_react_1.getTabLocation)(this.nineZoneState, widgetId);
-            if (location) {
-                const widgetContainerId = location.widgetId;
-                const state = (0, appui_layout_react_1.dockWidgetContainer)(this.nineZoneState, widgetContainerId, true);
-                state && (this.nineZoneState = state);
-                if ((0, appui_layout_react_1.isPopoutTabLocation)(location)) {
-                    UiFramework_1.UiFramework.childWindows.close(location.widgetId, true);
-                }
-            }
-        }
+        const state = this.nineZoneState;
+        if (!state)
+            return;
+        const location = (0, appui_layout_react_1.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 = (0, Frontstage_1.FrameworkStateReducer)(this.nineZoneState, {
+        this.dispatch({
             type: "FLOATING_WIDGET_SET_BOUNDS",
             id: floatingWidgetId,
             bounds,
-        }, this);
-        state = (0, Frontstage_1.FrameworkStateReducer)(state, {
+        });
+        this.dispatch({
             type: "FLOATING_WIDGET_SET_USER_SIZED",
             id: floatingWidgetId,
             userSized: true,
-        }, this);
-        this.nineZoneState = state;
+        });
         return true;
     }
     getFloatingWidgetContainerIds() {
@@ -925,8 +873,9 @@ const useActiveFrontstageId = () => {
     return id;
 };
 exports.useActiveFrontstageId = useActiveFrontstageId;
-/** Hook to return the active Frontstage def */
-/** @public */
+/** Hook to return the active Frontstage def.
+ *  @public
+ */
 function useActiveFrontstageDef() {
     const [def, setDef] = React.useState(UiFramework_1.UiFramework.frontstages.activeFrontstageDef);
     React.useEffect(() => {
@@ -942,9 +891,9 @@ exports.useActiveFrontstageDef = useActiveFrontstageDef;
  */
 function useSpecificWidgetDef(widgetId) {
     const frontstageDef = useActiveFrontstageDef();
-    const [widgetDef, setWidgetDef] = React.useState(() => frontstageDef?.findWidgetDef(widgetId));
+    const [widgetDef, setWidgetDef] = React.useState(() => frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.findWidgetDef(widgetId));
     React.useEffect(() => {
-        setWidgetDef(frontstageDef?.findWidgetDef(widgetId));
+        setWidgetDef(frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.findWidgetDef(widgetId));
         return InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageWidgetsChangedEvent.addListener((args) => {
             if (args.frontstageDef !== frontstageDef)
                 return;