npm - @finsemble/finsemble-ui - Versions diffs - 1.0.0-beta-6 → 1.0.0-beta-9 - Mend

@finsemble/finsemble-ui 1.0.0-beta-6 → 1.0.0-beta-9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1901) hide show

package/react/components/windowTitleBar/WindowTitleBarShell.js ADDED Viewed

@@ -0,0 +1,934 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import * as React from "react";
+import { WindowTitleBarContext } from "./windowTitleBarContext";
+import { storeManager, Actions, getStore } from "./stores/windowTitleBarStore";
+import styles from "../../assets/css/windowTitleBar.lazy.css";
+import { clone } from "../sdd/Appearance.helpers";
+import { FEAGlobals } from "../../../common/Globals";
+import _throttle from "lodash/throttle";
+/**
+ * windowTitleBar is injected into pages via a preload. At the time that it is injected, there is no DOM on the page yet.
+ *
+ * Normally, webpack's style-loader will add all the imported styles as <STYLE> tags and add them to the document's <HEAD>.
+ * But this is done at _module load time_ which, when running in a preload, occurs before a <HEAD> tag exists, or even a <BODY>
+ * or <HTML> tag.
+ *
+ * So, instead we load the styles lazily. This requires using the `lazyStyleTag` or `lazySingletonStyleTag` rule in the actual
+ * style-loader, and then to call `styles.use()` when they are safe to load. We do this here, in the constructor for the shell,
+ * and we use a flag to make sure it only happens once (this should be converted to useEffect() if this is converted to a hook).
+ */
+let stylesHaveBeenInjected = false;
+// Values for possible zero
+const possibleZeros = ["0", "0px", 0];
+const maxHeight = "100%";
+export class WindowTitleBarShell extends React.Component {
+    constructor(props) {
+        super(props);
+        // Keep track of if the mouse button is pressed
+        this.isMousePressed = false;
+        this.store = undefined;
+        if (!stylesHaveBeenInjected) {
+            styles.use();
+            stylesHaveBeenInjected = true;
+        }
+        this.bindCorrectContext();
+        this.state = {
+            activeTab: FEAGlobals.FSBL.Clients.WindowClient.getWindowIdentifier(),
+            allowDragOnCenterRegion: true,
+            alwaysOnTop: false,
+            alwaysOnTopButton: false,
+            closeButton: false,
+            dockingEnabled: false,
+            dockingIcon: "",
+            hackScrollbar: false,
+            initialized: false,
+            isTopRight: false,
+            maxButton: false,
+            minButton: false,
+            showDockingTooltip: false,
+            showLinkerButton: false,
+            showShareButton: false,
+            showTabs: false,
+            showTabRegion: false,
+            tabs: [],
+            tabBarBoundingBox: {},
+            windowTitle: "",
+            useDOMBasedMovement: true,
+            dragHandleName: "fsbl-drag-handle",
+            bumpElements: {},
+            adjustContentHeights: true,
+        };
+        FEAGlobals.finsembleWindow.isAlwaysOnTop({}, (err, alwaysOnTop) => {
+            this.setState(Object.assign(Object.assign({}, this.state), { alwaysOnTop }));
+        });
+        FEAGlobals.finsembleWindow.addEventListener("alwaysOnTop", this.alwaysOnTopListener);
+    }
+    alwaysOnTopListener({ data: { alwaysOnTop } }) {
+        this.setState(Object.assign(Object.assign({}, this.state), { alwaysOnTop }));
+    }
+    /**
+     * This is necessary to make sure that the `this` inside of the callback is correct.
+     *
+     * @memberof WindowTitleBar
+     */
+    bindCorrectContext() {
+        this.onTitleChange = this.onTitleChange.bind(this);
+        this.onShowDockingToolTip = this.onShowDockingToolTip.bind(this);
+        this.onToggleDockingIcon = this.onToggleDockingIcon.bind(this);
+        this.onDockingEnabledChanged = this.onDockingEnabledChanged.bind(this);
+        this.onAlwaysOnTopChanged = this.onAlwaysOnTopChanged.bind(this);
+        this.showLinkerButton = this.showLinkerButton.bind(this);
+        this.isTopRight = this.isTopRight.bind(this);
+        this.allowDragOnCenterRegion = this.allowDragOnCenterRegion.bind(this);
+        this.disallowDragOnCenterRegion = this.disallowDragOnCenterRegion.bind(this);
+        this.setDOMBasedMovement = this.setDOMBasedMovement.bind(this);
+        this.onShareEmitterChanged = this.onShareEmitterChanged.bind(this);
+        this.onTabsChanged = this.onTabsChanged.bind(this);
+        this.onShowTabsChanged = this.onShowTabsChanged.bind(this);
+        this.onTilingStop = this.onTilingStop.bind(this);
+        this.onTilingStart = this.onTilingStart.bind(this);
+        this.resizeDragHandle = this.resizeDragHandle.bind(this);
+        this.onDoubleClick = this.onDoubleClick.bind(this);
+        this.alwaysOnTopListener = this.alwaysOnTopListener.bind(this);
+        this.onInitialized = this.onInitialized.bind(this);
+        window.resizeDragHandle = this.resizeDragHandle.bind(this);
+    }
+    onInitialized() {
+        this.store = getStore();
+        this.store.addListeners([
+            { field: "Main.windowTitle", listener: this.onTitleChange },
+            { field: "Main.showDockingTooltip", listener: this.onShowDockingToolTip },
+            { field: "Main.dockingIcon", listener: this.onToggleDockingIcon },
+            { field: "Main.dockingEnabled", listener: this.onDockingEnabledChanged },
+            { field: "AlwaysOnTop.show", listener: this.onAlwaysOnTopChanged },
+            { field: "Linker.showLinkerButton", listener: this.showLinkerButton },
+            { field: "Sharer.emitterEnabled", listener: this.onShareEmitterChanged },
+            { field: "isTopRight", listener: this.isTopRight },
+            { field: "tabs", listener: this.onTabsChanged },
+            { field: "showTabs", listener: this.onShowTabsChanged },
+            { field: "hackScrollbar", listener: this.onShowTabsChanged },
+            { field: "Main.useDOMBasedMovement", listener: this.setDOMBasedMovement },
+        ], () => { });
+        // Add listeners for tiling/tabbing
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.startTilingOrTabbing", this.onTilingStart);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.stopTilingOrTabbing", this.onTilingStop);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.cancelTilingOrTabbing", this.onTilingStop);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.startTilingOrTabbing", this.disallowDragOnCenterRegion);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.stopTilingOrTabbing", this.allowDragOnCenterRegion);
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("DockingService.cancelTilingOrTabbing", this.allowDragOnCenterRegion);
+        this.onStoreChange();
+        this.setState({
+            initialized: true,
+        });
+    }
+    async onStoreChange() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        let activeIdentifier = FEAGlobals.finsembleWindow.identifier;
+        const windowTitleResult = await ((_a = this.store) === null || _a === void 0 ? void 0 : _a.get(["Main", "windowTitle"]));
+        activeIdentifier.title = windowTitleResult === null || windowTitleResult === void 0 ? void 0 : windowTitleResult.data;
+        const minButtonResult = await ((_b = this.store) === null || _b === void 0 ? void 0 : _b.get(["Minimize", "hide"])); //negated
+        const maxButtonResult = await ((_c = this.store) === null || _c === void 0 ? void 0 : _c.get(["Maximize", "hide"])); //negates
+        const closeButtonResult = await ((_d = this.store) === null || _d === void 0 ? void 0 : _d.get(["Close", "hide"])); //negated
+        const showLinkerButtonResult = await ((_e = this.store) === null || _e === void 0 ? void 0 : _e.get(["Linker", "showLinkerButton"]));
+        const showShareButtonResult = await ((_f = this.store) === null || _f === void 0 ? void 0 : _f.get(["Sharer", "emitterEnabled"]));
+        const isTopRightResult = await ((_g = this.store) === null || _g === void 0 ? void 0 : _g.get(["isTopRight"]));
+        const alwaysOnTopButtonResult = await ((_h = this.store) === null || _h === void 0 ? void 0 : _h.get(["AlwaysOnTop", "show"]));
+        const showTabsResult = await ((_j = this.store) === null || _j === void 0 ? void 0 : _j.get(["showTabs"]));
+        const hackScrollbarResult = await ((_k = this.store) === null || _k === void 0 ? void 0 : _k.get(["hackScrollbar"]));
+        const bumpElementsResult = await ((_l = this.store) === null || _l === void 0 ? void 0 : _l.get(["bumpElements"]));
+        const adjustContentHeightsResult = await ((_m = this.store) === null || _m === void 0 ? void 0 : _m.get(["adjustContentHeights"]));
+        const stateToSet = {
+            windowTitle: windowTitleResult === null || windowTitleResult === void 0 ? void 0 : windowTitleResult.data,
+            minButton: !(minButtonResult === null || minButtonResult === void 0 ? void 0 : minButtonResult.data),
+            maxButton: !(maxButtonResult === null || maxButtonResult === void 0 ? void 0 : maxButtonResult.data),
+            closeButton: !(closeButtonResult === null || closeButtonResult === void 0 ? void 0 : closeButtonResult.data),
+            showLinkerButton: showLinkerButtonResult === null || showLinkerButtonResult === void 0 ? void 0 : showLinkerButtonResult.data,
+            showShareButton: showShareButtonResult === null || showShareButtonResult === void 0 ? void 0 : showShareButtonResult.data,
+            isTopRight: isTopRightResult === null || isTopRightResult === void 0 ? void 0 : isTopRightResult.data,
+            alwaysOnTopButton: alwaysOnTopButtonResult === null || alwaysOnTopButtonResult === void 0 ? void 0 : alwaysOnTopButtonResult.data,
+            showTabs: showTabsResult === null || showTabsResult === void 0 ? void 0 : showTabsResult.data,
+            hackScrollbar: hackScrollbarResult === null || hackScrollbarResult === void 0 ? void 0 : hackScrollbarResult.data,
+            bumpElements: bumpElementsResult === null || bumpElementsResult === void 0 ? void 0 : bumpElementsResult.data,
+            adjustContentHeights: adjustContentHeightsResult === null || adjustContentHeightsResult === void 0 ? void 0 : adjustContentHeightsResult.data,
+            tabs: [activeIdentifier], // array of tabs for this window
+        };
+        this.setState(stateToSet);
+    }
+    componentDidMount() {
+        // Goal: If a user gets focus into the title bar (if they Alt+Tab or Cmd+Tab into the window),
+        // we want to let get into the rest of the component using the keyboard alone. The UX for
+        // this task will be to seemingly TAB from the title bar into the window, if possible.
+        // Code: If the user presses the "Tab" key, move their focus to the browser view
+        window.addEventListener("keydown", (e) => {
+            if (e.key === "Tab") {
+                // This magic moves focus to a browserView, if one exists
+                FEAGlobals.finsembleWindow.focus();
+            }
+        });
+        let header = document.getElementsByClassName("fsbl-header")[0];
+        //Add a margin top to the body if there title bar is injected into the component.
+        if (header) {
+            document.body.style.margin = "0px";
+            document.body.style.marginTop = window.getComputedStyle(header, null).getPropertyValue("height");
+        }
+        this.hackScrollbar();
+        storeManager.addInitializedListener(this.onInitialized);
+        storeManager.initialize();
+    }
+    componentDidUpdate() {
+        FEAGlobals.FSBL.Clients.Logger.system.debug("WindowTitleBarShell:componentDidUpdate");
+        // Sometimes handleMouseUp is not invoked; specifically this can happen if the mouse is not over the drag handle when the button is
+        // unpressed. This happens when the drag starts near the bottom of the drag handle and the mouse is moved UP. If the window is
+        // docked to a window ABOVE then it may snap a few pixels up, making the mouse no longer on top of the drag handle. At this point, the
+        // componentDidUpdate is executed and the onmouseup handler is not invoked. Setting this.isMousePressed handles that narrow case.
+        this.isMousePressed = false;
+        this.hackScrollbar();
+        this.maybeAdjustWindow();
+        window.addEventListener("resize", () => this.maybeAdjustWindow());
+        if (!this.dragMutationObserver) {
+            const headerCenter = document.querySelector(".fsbl-header-center");
+            if (headerCenter) {
+                this.dragMutationObserver = new MutationObserver(_throttle(this.resizeDragHandle, 250));
+                this.dragMutationObserver.observe(headerCenter, {
+                    childList: true,
+                    characterData: false,
+                    subtree: true,
+                });
+                this.dragResizeObserver = new ResizeObserver(_throttle(this.resizeDragHandle, 250));
+                this.dragResizeObserver.observe(headerCenter);
+            }
+        }
+    }
+    componentWillUnmount() {
+        var _a, _b, _c;
+        (_a = this.dragMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.dragResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        storeManager.removeInitializedListener(this.onInitialized);
+        window.removeEventListener("resize", () => this.maybeAdjustWindow());
+        if (this.state.initialized) {
+            (_c = this.store) === null || _c === void 0 ? void 0 : _c.removeListeners([
+                { field: "Main.windowTitle", listener: this.onTitleChange },
+                {
+                    field: "Main.showDockingTooltip",
+                    listener: this.onShowDockingToolTip,
+                },
+                { field: "Main.dockingIcon", listener: this.onToggleDockingIcon },
+                {
+                    field: "Main.dockingEnabled",
+                    listener: this.onDockingEnabledChanged,
+                },
+                { field: "AlwaysOnTop.show", listener: this.onAlwaysOnTopChanged },
+                { field: "Linker.showLinkerButton", listener: this.showLinkerButton },
+                {
+                    field: "Sharer.emitterEnabled",
+                    listener: this.onShareEmitterChanged,
+                },
+                { field: "isTopRight", listener: this.isTopRight },
+                { field: "tabs", listener: this.onTabsChanged },
+                { field: "showTabs", listener: this.onShowTabsChanged },
+            ], () => { }, () => { });
+            // Cleanup all listeners
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.startTilingOrTabbing", this.disallowDragOnCenterRegion);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.stopTilingOrTabbing", this.allowDragOnCenterRegion);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.cancelTilingOrTabbing", this.allowDragOnCenterRegion);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.startTilingOrTabbing", this.onTilingStart);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.stopTilingOrTabbing", this.onTilingStop);
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("DockingService.cancelTilingOrTabbing", this.onTilingStop);
+        }
+    }
+    setDOMBasedMovement(err, response) {
+        if (response && response.hasOwnProperty("value")) {
+            this.setState({
+                useDOMBasedMovement: response.value,
+                dragHandleName: response.value ? "fsbl-drag-handle" : "fsbl-drag-handle-native-movement",
+            });
+        }
+    }
+    /**
+     * When we are not tiling/tabbing, we want to allow the user to drag the window around via any available space in the tab-region. This function allows that.
+     */
+    allowDragOnCenterRegion() {
+        this.setState({
+            allowDragOnCenterRegion: true,
+        });
+    }
+    /**
+     * When we are tiling/tabbing, we do not want to allow any window to be dragged around and moved.
+     */
+    disallowDragOnCenterRegion() {
+        this.setState({
+            allowDragOnCenterRegion: false,
+        });
+    }
+    /**
+     * When tiling start, we want to find the dragHandler and hide it
+     */
+    onTilingStart() {
+        var _a;
+        (_a = document.querySelector(`.${this.state.dragHandleName}`)) === null || _a === void 0 ? void 0 : _a.classList.add("hidden");
+    }
+    /**
+     * When tiling stops, we want to find the dragHandler and re-show it
+     */
+    onTilingStop() {
+        var _a;
+        (_a = document.querySelector(`.${this.state.dragHandleName}.hidden`)) === null || _a === void 0 ? void 0 : _a.classList.remove("hidden");
+    }
+    /**
+     * Called whenever a tab is dropped on a non tab area.
+     * It won't be called when dropped on a tab that handles handle the event.
+     */
+    onDropHandler() {
+        FEAGlobals.FSBL.Clients.RouterClient.transmit("DockingService.cancelTilingOrTabbing", {});
+    }
+    /**
+     * Called when user double clicks on drag handle
+     */
+    onDoubleClick() {
+        // Actions.clickMaximize checks the window state
+        // and toggles between maximize and minimize.
+        Actions.clickMaximize();
+    }
+    _setOnMouseUpAndDownHandlers(element) {
+        // Sometimes the mouse cursor can leave the drag handle when the window is moved quickly
+        // In this case, the drag will succeed but handleMouseUp() is not invoked; as a consequence,
+        // this.isMousePressed is not reset and FSBL.Clients.WindowClient.stopMovingWindow() is not called.
+        //
+        // To work around this, a new variable is introduced in order to keep track of if the mouse cursor
+        // has left the drag handle. If handleMouseDown is invoked AND mouseHasLeft has been set to true, then
+        // any click (handleMouseDown) will reset mouseHasLeft and this.isMousePressed (the drag state)
+        let mouseHasLeft = false;
+        /**
+         * Keeps track of when the mouse cursor leaves the drag handle.
+         */
+        const handleMouseLeave = () => {
+            mouseHasLeft = true;
+        };
+        // if do double click it will invoke MouseDown and MouseUp events which could break the window bounds. So wait a 100ms for moving or resizing the window.
+        const handleMouseDown = (event) => {
+            // If the mouse has left the drag handle then reset drag state on click
+            if (mouseHasLeft) {
+                mouseHasLeft = false;
+                this.isMousePressed = false;
+                FEAGlobals.FSBL.Clients.WindowClient.stopMovingWindow();
+            }
+            // prevent a second call if the button hasn't been unpressed
+            if (this.isMousePressed) {
+                return;
+            }
+            // Indicate that the mouse has been pressed
+            this.isMousePressed = true;
+            setTimeout(() => {
+                if (this.isMousePressed) {
+                    FEAGlobals.FSBL.Clients.WindowClient.startMovingWindow(event);
+                }
+            }, 100);
+        };
+        const handleMouseUp = () => {
+            // prevent a call if the button hasn't been pressed
+            if (!this.isMousePressed) {
+                return;
+            }
+            this.isMousePressed = false;
+            FEAGlobals.FSBL.Clients.WindowClient.stopMovingWindow();
+        };
+        element.onmouseleave = handleMouseLeave;
+        element.onmousedown = handleMouseDown;
+        element.onmouseup = handleMouseUp;
+    }
+    makeDragHandle(fsblHeader, dragHandleCssClass) {
+        let dragHandle = document.createElement("div");
+        dragHandle.className = dragHandleCssClass;
+        this._setOnMouseUpAndDownHandlers(dragHandle);
+        dragHandle.ondblclick = () => {
+            this.onDoubleClick();
+        };
+        fsblHeader.insertBefore(dragHandle, fsblHeader.firstChild);
+        return dragHandle;
+    }
+    dragHandleBoundsForShowTabs(startingBounds) {
+        var _a;
+        if (this.state.tabs.length > 1) {
+            // The drag handle is the space between the right-most tab and the left-most window button (minimize, maximize, close, etc)
+            //
+            // The bounds will largely be the same as ".fsbl-header-right"
+            const headerRight = document.querySelector(".fsbl-header-right");
+            if (headerRight) {
+                // The padding (in pixels) for the left and right of the drag handle
+                const padding = 2;
+                // Get the RIGHT-MOST x-coordinate for the drag handle
+                //
+                // The "x" coordinate of the LEFT-MOST element in the "fsbl-header-right" container; but
+                // if there are no elements in the container then use the "innerWidth" of the window because that
+                // value is the furthest RIGHT x-coordinate available to use
+                const leftMostRightHeaderElement = document.querySelector(".fsbl-tabs-multiple .fsbl-header-right div:first-child");
+                const rightXCoord = leftMostRightHeaderElement
+                    ? leftMostRightHeaderElement.getBoundingClientRect().x
+                    : window.innerWidth;
+                // Get the LEFT-MOST x-coordinate for the drag handle
+                //
+                // Get the "x" coordinate for the RIGHT-MOST tab; the "right" attribute will be the
+                // LEFT x-coordinate for the drag handle
+                const allTabs = document.querySelectorAll(".tab-region-wrapper .fsbl-tab");
+                const leftXCoord = allTabs.length
+                    ? Math.max(...[...allTabs].map((n) => n.getBoundingClientRect().right)) + padding
+                    : padding;
+                // The "width" bounds attribute is the difference between leftXCoord and rightXCoord, minus padding
+                const width = rightXCoord - leftXCoord - padding;
+                FEAGlobals.FSBL.Clients.Logger.system.debug("dragHandleBoundsForShowTabs: calculating dimensions:", {
+                    leftMostRightHeaderElement_getBoundingClientRect_x: leftMostRightHeaderElement === null || leftMostRightHeaderElement === void 0 ? void 0 : leftMostRightHeaderElement.getBoundingClientRect().x,
+                    innerWidth,
+                    rightXCoord,
+                    leftXCoord,
+                    width,
+                });
+                // Override bounds.width and bounds.left with the calculated values
+                return Object.assign(Object.assign({}, clone(headerRight.getBoundingClientRect())), { width: width, left: leftXCoord });
+            }
+            else {
+                return startingBounds;
+            }
+        }
+        else {
+            // If tabs are not enabled, then the remained of fsbl-header-center beyond the tabs
+            // is the draggable area. This assumes left aligned tabs.
+            const fsblHeaderCenter = document.querySelector(".fsbl-header-center");
+            const bounds = (_a = fsblHeaderCenter === null || fsblHeaderCenter === void 0 ? void 0 : fsblHeaderCenter.getBoundingClientRect()) !== null && _a !== void 0 ? _a : startingBounds;
+            const tabRegionWrapperDiv = fsblHeaderCenter === null || fsblHeaderCenter === void 0 ? void 0 : fsblHeaderCenter.querySelector(".tab-region-wrapper div.fsbl-header-title");
+            if (tabRegionWrapperDiv) {
+                const theTabBounds = tabRegionWrapperDiv.getBoundingClientRect();
+                // Calculate the right portion
+                return Object.assign(Object.assign({}, clone(bounds)), { left: bounds.left + theTabBounds.width, width: bounds.width - theTabBounds.width });
+            }
+            else {
+                return bounds;
+            }
+        }
+    }
+    /**
+     * The dragger is an absolutely positioned element that is superimposed on the actual area that we'd like to drag.
+     * This is necessary due to a bug in Chromium. Effectively, we need the dragger to change its left position and width
+     * to match the intended drag area. These dimensions can change whenever the header is re-rendered (for instance when
+     * changing mode from tabbing to non-tabbing). Dimensions can also change when the window itself is resized (due to natural
+     * css).
+     *
+     * Can remove all of the cq-drag and cq-no-drag because Chromium bug is fixed
+     * Remove fsbl-drag-region, it is no longer needed
+     * Hide the dragHandle during drop operations, so that it doesn't interfere
+     */
+    resizeDragHandle() {
+        var _a, _b;
+        // Sometimes this function is called during a drag (determined by this.isMousePressed); in this case,
+        // the function should abort.
+        //
+        // This happens if the cursor starts dragging near the left end of the drag handle. When the mouse is moved left, the cursor
+        // moves left (over the right-most) tab for a few moments, triggering an invocation of this function. This is incorrect
+        // behavior and should be avoided
+        if (this.isMousePressed) {
+            return;
+        }
+        // This function is invoked when a window is grouped or ungrouped (or docked); in all these cases, reset the mouse pressed state
+        //
+        // Reset the mouse pressed state
+        this.isMousePressed = false;
+        try {
+            const fsblHeader = document.querySelector(".fsbl-header");
+            // If there isn't an FSBLHeader then there doesn't need to be a drag handle.
+            if (!fsblHeader)
+                return;
+            const dragHandleCssClass = this.state.useDOMBasedMovement
+                ? "fsbl-drag-handle"
+                : "fsbl-drag-handle-native-movement";
+            const dragHandleToRemoveClass = this.state.useDOMBasedMovement
+                ? "fsbl-drag-handle-native-movement"
+                : "fsbl-drag-handle";
+            // Create the dragger if it doesn't already exist
+            let dragHandle = (_a = document.querySelector(`.${dragHandleCssClass}`)) !== null && _a !== void 0 ? _a : this.makeDragHandle(fsblHeader, dragHandleCssClass);
+            // When the titlebar starts up, useDOMBasedMovement will have a default value that is not the same as the config value
+            // When the value from the config propagates down to the UI, we need to make sure the old drag handle is removed in place of the new
+            const dragHandleToRemove = document.querySelector(`.${dragHandleToRemoveClass}`);
+            if (dragHandleToRemove)
+                (_b = dragHandleToRemove.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(dragHandleToRemove);
+            // Set the height of the dragHandle to match the height of the window title bar
+            // Do this every time through the render loop just in case a customer builds a
+            // header bar with dynamic height!
+            let bounds = fsblHeader.getBoundingClientRect();
+            dragHandle.style.height = `${bounds.height - 5}px`; // Subtract 5 pixels from height in order to make room for resize window cursor at top edge of window
+            dragHandle.style.marginTop = `${-bounds.height + 5}px`; // Negative margin pulls the drag handle up over the fixed header
+            // Start logic for determining where to place our dragHandle
+            if (this.state.showTabs) {
+                bounds = this.dragHandleBoundsForShowTabs(bounds);
+                FEAGlobals.FSBL.Clients.Logger.system.debug("dragHandleBoundsForShowTabs: calculated bounds:", bounds);
+            }
+            else {
+                // If tabs are not enabled, then the entire center is the drag area
+                let fsblHeaderCenter = document.querySelector(".fsbl-header-center");
+                if (fsblHeaderCenter)
+                    bounds = fsblHeaderCenter.getBoundingClientRect();
+            }
+            if (bounds) {
+                dragHandle.style.left = `${bounds.left}px`;
+                dragHandle.style.width = `${bounds.width}px`;
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    /**
+     * Whether the component's config allows for the linker.
+     * @param {} err
+     * @param {*} response
+     */
+    showLinkerButton(err, response) {
+        this.setState({ showLinkerButton: response.value });
+    }
+    /**
+     * Whether the window is the top-right-most window in a group of windows. If so, it renders a minimize icon for the whole group.
+     * @param {} err
+     * @param {*} response
+     */
+    isTopRight(err, response) {
+        this.setState({ isTopRight: response.value });
+    }
+    /**
+     * @param {*} err
+     * @param {*} response
+     */
+    onTitleChange(err, response) {
+        let { tabs } = this.state;
+        let myIdentifier = FEAGlobals.FSBL.Clients.WindowClient.getWindowIdentifier();
+        tabs = tabs.map((el) => {
+            if (!el.windowName && el.name)
+                el.windowName = el.name;
+            if (!el.name && el.windowName)
+                el.name = el.windowName;
+            return el;
+        });
+        const myIndex = tabs.findIndex((el) => el.name === myIdentifier.windowName);
+        if (myIndex === -1)
+            return;
+        let myTab = tabs[myIndex] || {};
+        myTab.title = response.value;
+        tabs.splice(myIndex, 1, myTab);
+        this.setState({
+            windowTitle: response.value,
+            tabs: tabs,
+        });
+    }
+    /**
+     * The next few methods are store change handlers that sync local state with the store's state.
+     */
+    onShowDockingToolTip(err, response) {
+        this.setState({ showDockingTooltip: response.value });
+    }
+    onToggleDockingIcon(err, response) {
+        this.setState({ dockingIcon: response.value });
+    }
+    onDockingEnabledChanged(err, response) {
+        this.setState({ dockingEnabled: response.value });
+    }
+    onAlwaysOnTopChanged(err, response) {
+        this.setState({ alwaysOnTopButton: response.value });
+    }
+    onStoreChanged(newState) {
+        this.setState(newState);
+    }
+    onShareEmitterChanged(err, response) {
+        this.setState({ showShareButton: response.value });
+    }
+    onTabsChanged(err, response) {
+        this.setState({
+            tabs: response.value,
+        });
+    }
+    onShowTabsChanged(err, response) {
+        // If we are not showing tabs, then it means that it is a non tabbed window
+        // therefore we need to check whether we have a window title contained in
+        // .div.fsbl-tab-editor so that we can edit it.
+        if (!response.value) {
+            let tabEditor = document.querySelector("div.fsbl-tab-editor");
+            if (tabEditor) {
+                // we set this z-index value to be slightly higher than the drag handle
+                // to make the editor dragable AND double-clickcable
+                tabEditor.style.zIndex = "2147483647";
+                // We add the mousedown and mouseup functions to the tab editor
+                // so that on a single mouse down it allows the user to drag the
+                // window on both the .fsbl-drag-handle and the .fsbl-tab-editor
+                this._setOnMouseUpAndDownHandlers(tabEditor);
+            }
+        }
+        this.setState({
+            showTabs: response.value,
+        });
+    }
+    // Hack the window's scrollbar so that it displays underneath the header. html.overflow: hidden body.overflow:auto
+    // This is turned on by default. Set "Window Manager.hackScrollbar: false" to turn it off
+    hackScrollbar() {
+        if (this.state.hackScrollbar) {
+            const htmlElement = document.querySelector("html");
+            if (htmlElement)
+                htmlElement.style.overflowY = "hidden";
+            const bodyElement = document.querySelector("body");
+            if (bodyElement)
+                bodyElement.style.overflowY = "auto";
+        }
+    }
+    /**
+     * Once document is ready and header is injected into DOM, begin adjusting the height of elements and bump fixed/absolute elements
+     */
+    async maybeAdjustWindow() {
+        // don't start pushing stuff down until page is ready. This is needed for preloaded titlebars because they can happen before the page is ready.
+        if (document.readyState === "complete") {
+            this.beginAdjustment();
+        }
+        else {
+            document.addEventListener("readystatechange", () => {
+                if (document.readyState === "complete")
+                    this.beginAdjustment();
+            });
+        }
+    }
+    /**
+     * Begin adjusting the body and top level elements and their direct descendants by the header height.
+     */
+    beginAdjustment() {
+        const header = document.getElementsByClassName("fsbl-header")[0];
+        if (header) {
+            const bodyElement = document.querySelector("body");
+            const headerHeight = window.getComputedStyle(header, null).getPropertyValue("height");
+            if (bodyElement) {
+                bodyElement.style.height = `calc(100vh - ${headerHeight})`;
+            }
+            if (this.state.adjustContentHeights)
+                this.adjustTopLevelHeight(Number.parseInt(headerHeight, 10));
+            this.bumpElements(this.state.bumpElements);
+            if (this.state.bumpElements.monitorFixedAdditions)
+                this.monitorFixedPositionedElements(headerHeight);
+        }
+        else {
+            FEAGlobals.FSBL.Clients.Logger.system.error("WindowTitleBarShell.maybeAdjustWindow:could not find the header.");
+        }
+    }
+    /**
+     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.adjustContentHeights`
+     * Called from beginAdjustment()
+     *
+     * Adjusts the top level content max-height to be 100% subtracted by the total height of the previous elements.
+     * The height of the previous elements are added to this calculation if they are not fixed or absolute.
+     * These top level elements will be passed into adjustContentHeight where their descendants
+     * will also have their heights adjusted.
+     *
+     * Absolute and Fixed positions elements, however, will just have their max-heights set to 100% subtracted by the header height
+     * since they are not part of the document flow.
+     * Example:
+     * In this below situation, the B element extends passed the view because the header is injected. B doesn't have a
+     * set height so it'll extend as far as it needs.
+     * --------------------
+     * |******************|
+     * |*     Titlebar   *|
+     * |******************|
+     * |******************|
+     * |*       A        *|
+     * |*                *|
+     * |******************|
+     * |******************|
+     * |*                *|
+     * |*                *|
+     * |*       B        *|
+     * |*                *|
+     * |*                *|
+     * |*                *|
+     * --------------------
+     * The chain of adjust functions will set the maxHeight of A and B to ensure they both occupy space that the above element doesn't
+     * and keep it within the bounds of the view.
+     * --------------------
+     * |******************|
+     * |*     Titlebar   *|
+     * |******************|
+     * |******************|
+     * |*       A        *|
+     * |*                *|
+     * |******************|
+     * |******************|
+     * |*                *|
+     * |*                *|
+     * |*       B        *|
+     * |*                *|
+     * |*                *|
+     * |******************|
+     * --------------------
+     * @param {number} headerHeight the height of the header
+     */
+    adjustTopLevelHeight(headerHeight) {
+        const elems = document.body.querySelectorAll(":scope > *:not(#FSBLHeader, .fsbl-header)");
+        let prevHeight = 0;
+        // tags that we should avoid adding max-heights too
+        const avoidTags = ["svg", "script"];
+        elems.forEach((elem) => {
+            if (!avoidTags.includes(String(elem.tagName).toLowerCase())) {
+                this.adjust(elem, prevHeight, maxHeight, headerHeight);
+                // Heights of fixed and absolute positioned elements are not added to the total heights of previous elements
+                // since they are removed from the document flow and can be positioned anywhere in the page.
+                if (elem.style.position !== "fixed" && elem.style.position !== "absolute")
+                    prevHeight = prevHeight + elem.offsetHeight;
+                this.adjustContentHeight(elem, headerHeight);
+            }
+        });
+    }
+    /**
+     * Adjusts the content view height to be maximum of the parent container (passed in by adjustTopLevelHeight()) height
+     * subtracted by the total height of elements above it. The height of the previous elements are added to this calculation
+     * if they are not fixed or absolute.
+     * @param {object} parentElem parent element
+     * @param {number} headerHeight the height of the header
+     */
+    adjustContentHeight(parentElem, headerHeight) {
+        const { children } = parentElem;
+        const len = children.length;
+        let prevHeight = 0;
+        for (let i = 0; i < len; i++) {
+            this.adjust(children[i], prevHeight, maxHeight, headerHeight);
+            // Fixed and absolute positioned elements are ignored since they are removed from the document flow.
+            const elemPosition = window.getComputedStyle(children[i], null).getPropertyValue("position");
+            if (elemPosition !== "fixed" && elemPosition !== "absolute")
+                prevHeight = prevHeight + children[i].offsetHeight;
+        }
+    }
+    /**
+     * This is used in adjustTopLevelHeight() and adjustContentHeight()
+     *
+     * Set the max height of each element to be the height of the parent container
+     * subtracted by the height of the previous element. This forces the element to either obey its
+     * predefined height or stay within the bounds of the max height.
+     *
+     * @param {object} elem HTML element
+     * @param {number} prevHeight height of previous sibling
+     * @param {string} maxElemHeight maximum height of the element
+     * @param {number} headerHeight the height of the header
+     */
+    adjust(elem, prevHeight, maxElemHeight, headerHeight = 25) {
+        var _a;
+        if (
+        // workaround to fix dnd scrim disappearing
+        !((_a = elem.classList) === null || _a === void 0 ? void 0 : _a.contains("fsbl-share-scrim"))) {
+            const clientHeight = elem.clientHeight ? elem.clientHeight : 0;
+            const offsetHeight = elem.offsetHeight ? elem.offsetHeight : 0;
+            const offset = offsetHeight - clientHeight;
+            let adjustPrev = prevHeight + offset;
+            const elemPosition = window.getComputedStyle(elem, null).getPropertyValue("position");
+            if (elemPosition == "fixed" || elemPosition == "absolute")
+                adjustPrev = headerHeight + offset;
+            elem.style.maxHeight = `calc(${maxElemHeight} - ${adjustPrev}px)`;
+            elem.classList.add("adjusted-element");
+        }
+    }
+    /**
+     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.bumpElements.[bumpBy|fixed|absolute]`
+     * Called from beginAdjustment()
+     *
+     * Calls bumpFixedElements and bumpAbsoluteElements to bump fixed and/or absolute elements by the value of bumpBy if configured to do so.
+     * Since absolute and fixed positioned elements are removed from the document flow their positions will not be adjusted when the titlebar
+     * is injected and they have a set top style. However, if the element is an absolute positioned element and it's
+     * parent container has a position that is not set to static, then it'll adjust relative to the parent. Fixed positioned elements, on the otherhand,
+     * won't adjust unless their top stlyes are changed.
+     * @param {object} config bumpElements object
+     */
+    bumpElements(config) {
+        if ((config === null || config === void 0 ? void 0 : config.bumpBy) !== "0px") {
+            if (config.fixed)
+                this.bumpFixedElements(config);
+            if (config.absolute)
+                this.bumpAbsoluteElements(config);
+        }
+    }
+    /**
+     * Called from bumpElements
+     *
+     * Bumps all elements with fixed positioning, that are not in the header, down by the configured amount.
+     * @private
+     * @param {object} params bumpElements object
+     */
+    bumpFixedElements(params) {
+        var _a, _b;
+        let { fixed, bumpBy } = params;
+        const getFixedElements = (selector) => {
+            const fixedElems = [];
+            const nodes = document.body.querySelectorAll(selector);
+            nodes.forEach((node) => {
+                const style = window.getComputedStyle(node, null);
+                if (style.getPropertyValue("position") == "fixed")
+                    fixedElems.push(node);
+            });
+            return fixedElems;
+        };
+        const selector = "*:not(#FSBLHeader, .fsbl-header)";
+        // Get all fixed positioned elements
+        const elems = getFixedElements(selector);
+        const len = elems.length;
+        for (let i = 0; i < len; i++) {
+            const style = window.getComputedStyle(elems[i], null);
+            const topStyle = style.getPropertyValue("top");
+            if (!((_b = (_a = elems[i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains("bumped-element"))) {
+                elems[i].style.top = this.calculateBumpValue(fixed, topStyle, bumpBy);
+                elems[i].classList.add("bumped-element");
+            }
+        }
+    }
+    /**
+     * Called from bumpElements
+     *
+     * Bumps all absolute positioned elements with static parents, that are not in the header, down by the configured amount.
+     * @private
+     * @param {object} params bumpElements object
+     */
+    bumpAbsoluteElements(params) {
+        var _a, _b;
+        let { absolute, bumpBy } = params;
+        const selector = "*:not(#FSBLHeader, .fsbl-header)";
+        // Get top level absolute positioned elements and elements who have static parents
+        const elems = this.traverseHtml({ children: document.body.querySelectorAll(`:scope > ${selector}`) });
+        const len = elems.length;
+        for (let i = 0; i < len; i++) {
+            const style = window.getComputedStyle(elems[i], null);
+            const topStyle = style.getPropertyValue("top");
+            // Target absolute positioned elements
+            if (style.getPropertyValue("position") == "absolute" && !((_b = (_a = elems[i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains("bumped-element"))) {
+                elems[i].style.top = this.calculateBumpValue(absolute, topStyle, bumpBy);
+                elems[i].classList.add("bumped-element");
+            }
+        }
+    }
+    /**
+     * Used in bumpFixedElements and bumpAbsoluteElements
+     * Calculates value to bump element by. If 'all' return top style plus the header height, if '0Positioned' return just header height
+     * @param type Whether all elements are being bumped by the header height and their top style or just header height
+     * @param topStyle Element top value
+     * @param bumpBy Value to bump element by
+     * @returns Top style for element
+     */
+    calculateBumpValue(type, topStyle, bumpBy) {
+        let topVal = topStyle;
+        if (type == "all") {
+            topVal = `calc(${topStyle} + ${bumpBy})`;
+        }
+        else if (type == "0Positioned" && possibleZeros.includes(topStyle)) {
+            topVal = bumpBy;
+        }
+        return topVal;
+    }
+    /**
+     * Used in bumpAbsoluteElements
+     *
+     * Recursively traverse through the HTML document and return an array of the top level elements
+     * and elements with static parents
+     * @param {object} element The HTML element
+     * @param {array} acc accumulator
+     * @returns {array} array top level elements and elements with static parents
+     *
+     */
+    traverseHtml(element, acc = []) {
+        const elems = element.children;
+        const len = elems.length;
+        if (!len) {
+            acc.push(element);
+        }
+        else {
+            for (let i = 0; i < len; i++) {
+                const style = window.getComputedStyle(elems[i], null);
+                if (style.getPropertyValue("position") == "static") {
+                    acc = this.traverseHtml(elems[i], acc);
+                }
+                else {
+                    acc.push(elems[i]);
+                }
+            }
+        }
+        return acc;
+    }
+    /**
+     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.bumpElements.[monitorFixedAdditions]`
+     * Called from beginAdjustment()
+     *
+     * Monitors the DOM for mutations, if the added node has a fixed position with a top style of 0px, it will be bumped by the title bar height.
+     * This ensures that if a fixed positioned element is dynamically added to the DOM, for example a pop-up modal, it'll have it's height adjusted
+     * by the header height since the initial bumping of elements can happen before this element exists.
+     *
+     * Element heights are not monitored and adjusted since this would require that all pre-existing elements have ther height recalculated each time
+     * a new element is dynamically added onto the page. Absolute postioned elements, however, could be monitored and adjusted since all we would
+     * need to check for is that it's parent has a static position or not, if it does then it can be adjusted.
+     * @param headerHeight the height of the header
+     */
+    monitorFixedPositionedElements(headerHeight) {
+        const options = {
+            childList: true,
+            subtree: true,
+        };
+        /**
+         * MutationObserver interface provides the ability to watch for
+         * changes to the DOM tree using the observe method
+         */
+        const mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    var _a;
+                    if (!((_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains("bumped-element"))) {
+                        try {
+                            const nodeStyle = window.getComputedStyle(node);
+                            const topStyle = nodeStyle.top;
+                            // make sure node is fixed, has top style set to 0, and has not been bumped
+                            if (nodeStyle.position === "fixed" && possibleZeros.includes(topStyle)) {
+                                node.style.top = this.calculateBumpValue("0Positioned", topStyle, headerHeight);
+                                node.classList.add("bumped-element");
+                            }
+                        }
+                        catch (err) {
+                            // Expected to error if the node is not an Element e.g text is not of type Element
+                        }
+                    }
+                });
+            });
+        });
+        // We observe the body and do not disconnect because there may be other elements that are dynamically loaded, such as a dialogue menu.
+        mutationObserver.observe(document.body, options);
+    }
+    render() {
+        let showDockingIcon = !this.state.dockingEnabled ? false : this.state.dockingIcon;
+        let isGrouped = this.state.dockingIcon == "ejector";
+        let showMinimizeIcon = (isGrouped && this.state.isTopRight) || !isGrouped; // If not in a group or if topright in a group
+        let tabRegionClasses = "fsbl-tab-area";
+        let headerClasses = "fsbl-header";
+        // If we're showing tabs, we throw these classes on to modify styles.
+        if (this.state.showTabs) {
+            headerClasses = `${headerClasses} fsbl-tabs-enabled`;
+        }
+        if (this.state.tabs.length > 1) {
+            headerClasses = `${headerClasses} fsbl-tabs-multiple`;
+        }
+        const context = {
+            showLinkerButton: this.state.showLinkerButton,
+            showShareButton: this.state.showShareButton,
+            showTabRegion: this.state.showTabs,
+            showMinimizeButton: this.state.minButton && showMinimizeIcon,
+            showMaximizeButton: this.state.maxButton,
+            onTabDropped: this.allowDragOnCenterRegion,
+            showDockingButton: showDockingIcon,
+            showCloseButton: this.state.closeButton,
+            className: tabRegionClasses,
+            thisWindowTitle: this.state.windowTitle,
+            boundingBox: this.state.tabBarBoundingBox,
+            listenForDragOver: !this.state.allowDragOnCenterRegion,
+            tabs: this.state.tabs,
+            onTitleUpdated: Function.prototype,
+            showAlwaysOnTopButton: this.state.alwaysOnTopButton && showMinimizeIcon,
+            showTabs: this.state.showTabs,
+            alwaysOnTop: this.state.alwaysOnTop,
+            useDOMBasedMovement: this.state.useDOMBasedMovement,
+        };
+        return (React.createElement("div", { className: headerClasses, onDrop: this.onDropHandler.bind(this) }, this.state.initialized && (React.createElement(WindowTitleBarContext.Provider, { value: context }, this.props.children))));
+    }
+}
+//# sourceMappingURL=WindowTitleBarShell.js.map