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

package/platform/services/window/Docking/dockableGroup.js

@@ -0,0 +1,1054 @@
+import { WindowGroup } from "../windowGroup";
+import DockableBox from "./dockableBox";
+import { fastClone } from "../../../../common/util";
+import { CORNERS, EDGES, OPPOSITE_EDGE_MAP } from "./constants";
+import BoxMath from "./boxMath";
+import Logger from "../../../../clients/logger";
+import { InitializedBoxCoordinates, } from "./types";
+import debounce from "lodash/debounce";
+const debounceTime = 300;
+export class DockableGroup extends WindowGroup {
+    /**
+     *
+     * @param {*} config Config for the group. See WindowGroup for more.
+     * @param {*} dependencies Dependency object that provides a Logger.
+     */
+    constructor(config) {
+        super(config);
+        this.setBuffer = DockableBox.prototype.setBuffer;
+        this.getEdges = DockableBox.prototype.getEdges;
+        this.getCornerObject = DockableBox.prototype.getCornerObject;
+        this.sharesAnEdgeWith = DockableBox.prototype.sharesAnEdgeWith;
+        this.getSharedEdges = DockableBox.prototype.getSharedEdges;
+        this.willReform = false;
+        this.ungroupedAlwaysOnTopState = {};
+        this.windowBoundingBox = {
+            min: {
+                x: 0,
+                y: 0,
+            },
+            max: {
+                x: 0,
+                y: 0,
+            },
+        };
+        // Number of time's we've tried to fill a particular time. It's limited to 20 attempts to prevent infinite loops. Logs are emitted if we get into that state. Better to throw a warning than an infinite loop.
+        this.fillAttempts = 0;
+        this.dockableBox = new DockableBox();
+        this.deferredWindowMoves = [];
+        this.windows = [];
+        this.isAlwaysOnTop = false;
+        this.left = 0;
+        this.right = 0;
+        this.bottom = 0;
+        this.top = 0;
+        this.width = 0;
+        this.height = 0;
+        this.MINIMUM_WINDOW_WIDTH = 0;
+        this.MINIMUM_WINDOW_HEIGHT = 0;
+        this.vertices = {};
+        this.setMinimums(config);
+        this.name = config.name;
+        this.isMovable = typeof config.isMovable !== "undefined" ? config.isMovable : false;
+        /** A mapping from window names to their previous alwaysOnTop state.
+         * Allows us to set window back to the way they were when they leave
+         * the group.
+         */
+        this.ungroupedAlwaysOnTopState = config.ungroupedAlwaysOnTopState || {};
+        //this.inheritDockableBox();
+        this.removeWindow = this.removeWindow.bind(this);
+        this.handleAlwaysOnTopChange = this.handleAlwaysOnTopChange.bind(this);
+        // Will wait 300 ms after every request before moving the group. This gives time for events to arrive from the other windows in the group
+        // The function will only be called after this amount of time has passed with no requests.
+        // Since the OS doesn't care if a group stays together, we need to move the group after the OS is finished moving all windows
+        this.performDeferredSystemMove = debounce(this.performDeferredSystemMove.bind(this), debounceTime);
+    }
+    pointIsOnBoundingBox(point, includeCorners = true) {
+        return this.dockableBox.pointIsOnBoundingBox.call(this, point, includeCorners);
+    }
+    /**
+     * Fired when the alwaysOnTop of a window in the group changes.
+     * Sets all windows in the group to the new value.
+     */
+    handleAlwaysOnTopChange({ data: { alwaysOnTop } }) {
+        for (const groupWin of Object.values(this.windows)) {
+            const currentAlwaysOnTop = groupWin.isAlwaysOnTop();
+            if (currentAlwaysOnTop != alwaysOnTop)
+                groupWin.alwaysOnTop(alwaysOnTop);
+        }
+    }
+    /**
+     * Returns the JSON representation of the group (stored on the workspace).
+     */
+    getJSON() {
+        const windowNames = this.getWindowNames();
+        const topRightWindow = windowNames.length ? this.getMoveAnchor("BottomLeft").name : null;
+        return {
+            windowNames,
+            isMovable: this.isMovable,
+            isAlwaysOnTop: this.isAlwaysOnTop,
+            topRightWindow: topRightWindow !== null && topRightWindow !== void 0 ? topRightWindow : "undefined",
+            isARectangle: this.isARectangle(),
+            ungroupedAlwaysOnTopState: this.ungroupedAlwaysOnTopState,
+        };
+    }
+    /**
+     * Responds to system events when the OS has moved a group. Every time a window in this group triggers this function a shared array will
+     * be updated with that window and it's bounds. After each update, request the group move.
+     * If this function is triggered again within a certain time, the group move will continue to be delayed until enough time passes without
+     * any windows events. Ideally the group will only move when all windows in the group with changes have responded to events.
+     * @param {*} windowObject - Contains the window name and it's updated bounds
+     * @param {*} calculator - an instance of docking calculator
+     */
+    deferSystemMove(windowObject, calculator) {
+        this.deferredWindowMoves.push(windowObject);
+        this.performDeferredSystemMove(calculator, this.deferredWindowMoves);
+    }
+    /**
+     * Requests the group move. Uses an array of windows in the group and their bounds to choose which window's bounds to use for the group move.
+     * Intended to move a group after the monitor configuration has changed as the OS may not keep the group intact when it is moved.
+     *
+     * @param {*} calculator
+     * @param {*} deferredWindowMoves array of windowobjects to be used for the move.
+     */
+    performDeferredSystemMove(calculator, deferredWindowMoves) {
+        Logger.system.verbose("dockableGroup.performDeferredSystemMove: Windows in group with bounds updates", deferredWindowMoves);
+        let bounds;
+        const anchors = [
+            this.getMoveAnchor("BottomRight"),
+            this.getMoveAnchor("BottomLeft"),
+            this.getMoveAnchor("TopRight"),
+            this.getMoveAnchor("TopLeft"),
+        ];
+        // Choose one window to be the move anchor. To make sure the group stays intact the updated bounds of only one window
+        // is used when moving the group, the rest of the group will be moved to relative to this "move anchor".
+        // That window needs to be in one of the corner positions of the group.
+        for (let i = 0; i < anchors.length; i++) {
+            // Always pick the maximized window as the move anchor if possible to keep it from restoring.
+            let windowObject = deferredWindowMoves.find((win) => win.isMaximized === true && win.name === anchors[i].name);
+            if (!windowObject) {
+                windowObject = deferredWindowMoves.find((win) => win.name === anchors[i].name);
+            }
+            if (windowObject) {
+                ({ bounds } = windowObject);
+                bounds.anchor = anchors[i];
+                bounds.systemMoved = true;
+                break;
+            }
+        }
+        // Reset the shared array of window moves for this group.
+        // This function will either be passed this object or another locally constructed object.
+        // Either way we want to empty this array so window bounds are only for the current event.
+        this.deferredWindowMoves = [];
+        if (!bounds) {
+            Logger.system.debug("dockableGroup.performDeferredSystemMove: no window was found that matched a move anchor, returning without moving a group");
+            return;
+        }
+        // When a group straddles a monitor the OS will move the overlapping windows fully onto one monitor.
+        // This causes the group to break because we don't allow grouping on monitor edge.
+        // In some cases, the move anchor will be unchanged, even though other windows in the group have moved.
+        // This just means the old bounds of the move anchor are still valid.
+        // By shifting the bounds by one pixel, we insure that the move request is processed, and the group will
+        // be fully attached.
+        Object.keys(bounds).forEach((key) => {
+            if (["right", "left", "top", "bottom"].includes(key))
+                bounds[key]++;
+        });
+        this.moveTo(bounds);
+        calculator.eliminateGaps();
+    }
+    /*inheritDockableBox() {
+        const self = this;
+        const dockableBoxMethods = Object.getOwnPropertyNames(Object.getPrototypeOf(this.dockableBox)).filter((p) => {
+            if (p != "constructor") {
+                return typeof self.dockableBox[p] === "function";
+            }
+            return false;
+        });
+        for (let i = 0; i < dockableBoxMethods.length; i++) {
+            const methodName = dockableBoxMethods[i];
+            if (!this[methodName]) {
+                this[methodName] = function () {
+                    return self.dockableBox[methodName].call(self, ...arguments);
+                };
+            }
+        }
+    }*/
+    addWindow(win) {
+        if (Object.keys(this.windows).length === 0) {
+            this.windowBoundingBox = fastClone(win.windowBoundingBox);
+        }
+        if (this.isMovable) {
+            win.win._updateOptions({ taskbarIconGroup: this.name });
+        }
+        super.addWindows(win);
+        this.updateBounds();
+        if (this.isMovable)
+            this.bringToFront({ restoreWindows: false });
+        // alwaysOnTop setup
+        if (this.isMovable) {
+            win.win.addEventListener("alwaysOnTop", this.handleAlwaysOnTopChange);
+            const winIsAlwaysOnTop = win.isAlwaysOnTop();
+            // Keep a record of the windows prev alwaysOnTop state
+            // In the case of reloading a workspace, the names will already be there,
+            // and we don't want to clobber the old state.
+            if (!(win.name in this.ungroupedAlwaysOnTopState)) {
+                this.ungroupedAlwaysOnTopState[win.name] = winIsAlwaysOnTop;
+            }
+            // If, after adding this window, any of the windows in the group are alwaysOnTop
+            // then all of the windows need to be alwaysOnTop.
+            const anyWindowsAlwaysOnTop = Object.values(this.windows).some((groupWin) => groupWin.isAlwaysOnTop());
+            if (anyWindowsAlwaysOnTop) {
+                if (winIsAlwaysOnTop) {
+                    // If this window is already on top, we still need to check the other windows.
+                    this.handleAlwaysOnTopChange({ data: { alwaysOnTop: true } });
+                }
+                else {
+                    // Otherwise, we need to set this window to always on top.
+                    win.alwaysOnTop(true);
+                }
+            }
+        }
+    }
+    updateBounds() {
+        const groupBounds = this.calculateOuterBounds();
+        if (!groupBounds) {
+            return;
+        }
+        this.windowBoundingBox = groupBounds;
+        this.setBuffer();
+        this.setBounds({
+            left: groupBounds.min.x,
+            top: groupBounds.min.y,
+            right: groupBounds.max.x,
+            bottom: groupBounds.max.y,
+        });
+    }
+    saveIndividualWindowStates() {
+        const windowList = this.getWindows();
+        for (const windowName in windowList) {
+            const win = this.getDockableWindow(windowName);
+            if (win)
+                win.win.saveCompleteWindowState();
+        }
+    }
+    startMove() {
+        const windowList = this.getWindows();
+        for (const windowName in windowList) {
+            const win = this.getDockableWindow(windowName);
+            if (win)
+                win.win.startMove();
+        }
+    }
+    stopMove() {
+        const windowList = this.getWindows();
+        for (const windowName in windowList) {
+            const win = this.getDockableWindow(windowName);
+            win === null || win === void 0 ? void 0 : win.win.stopMove();
+        }
+    }
+    getWindowsOnEdges() {
+        const windowsOnSegment = {};
+        const windowList = this.getWindows();
+        for (const windowName in windowList) {
+            const win = this.getDockableWindow(windowName);
+            if (win) {
+                for (let i = 0; i < EDGES.length; i++) {
+                    const edge = EDGES[i];
+                    if (win[edge] === this[edge]) {
+                        windowsOnSegment[win.name] = win;
+                    }
+                }
+            }
+        }
+        return windowsOnSegment;
+    }
+    isARectangle() {
+        this.updateBounds();
+        const windows = this.getWindows();
+        const groupArea = this.width * this.height;
+        let windowArea = 0;
+        for (const windowName in windows) {
+            const win = this.getDockableWindow(windowName);
+            if (win)
+                windowArea = windowArea + win.width * win.height;
+        }
+        return groupArea === windowArea;
+    }
+    /**
+     * When you move a group of windows left to right, the anchor algorithm finds the left-most window, and then sorts all of the windows on how close they are to that window. This function just finds the appropriate anchor for that move.
+     * @param {*} movingDirection
+     */
+    getMoveAnchor(movingDirection) {
+        const DIMENSIONAL_MAP = {
+            LeftTop: {
+                primaryDimension: "bottom",
+                secondaryDimension: "right",
+            },
+            LeftBottom: {
+                primaryDimension: "top",
+                secondaryDimension: "right",
+            },
+            TopLeft: {
+                primaryDimension: "right",
+                secondaryDimension: "bottom",
+            },
+            BottomLeft: {
+                primaryDimension: "right",
+                secondaryDimension: "top",
+            },
+            RightTop: {
+                primaryDimension: "bottom",
+                secondaryDimension: "left",
+            },
+            RightBottom: {
+                primaryDimension: "top",
+                secondaryDimension: "left",
+            },
+            TopRight: {
+                primaryDimension: "left",
+                secondaryDimension: "bottom",
+            },
+            BottomRight: {
+                primaryDimension: "left",
+                secondaryDimension: "top",
+            },
+            Right: {
+                primaryDimension: "left",
+                secondaryDimension: "top",
+            },
+            Left: {
+                primaryDimension: "right",
+                secondaryDimension: "top",
+            },
+            Top: {
+                primaryDimension: "top",
+                secondaryDimension: "left",
+            },
+            Bottom: {
+                primaryDimension: "bottom",
+                secondaryDimension: "left",
+            },
+        };
+        // Had this happen but not reliably. Possible that it fires when the window isn't moving at all and the direction isn't set. Stopgap.
+        if (!DIMENSIONAL_MAP[movingDirection]) {
+            console.error(`"${movingDirection}" is not a valid argument. Valid options are ${Object.keys(DIMENSIONAL_MAP).join(", ")}.`);
+            // return "NotMoving";
+        }
+        const { primaryDimension, secondaryDimension } = DIMENSIONAL_MAP[movingDirection];
+        const windowArray = this.getWindowArray();
+        // Sorts on the primary dimension; if they're tied, it sorts on the secondary dimension.
+        return windowArray.sort((a, b) => {
+            let aDim = a[primaryDimension];
+            let bDim = b[primaryDimension];
+            let comparingDimension = primaryDimension;
+            if (aDim === bDim) {
+                aDim = a[secondaryDimension];
+                bDim = b[secondaryDimension];
+                comparingDimension = secondaryDimension;
+            }
+            if (comparingDimension === "top" || comparingDimension === "left") {
+                // Will order the array in ascending order.
+                // In our virtual screen, the top-left is the 0,0 point (though it could be (-2000, 2000), or whatever).
+                // The higher the top or left, the further to the right the window is. The higher the top number, the closer to the bottom of the screen the window is.
+                return aDim - bDim;
+            }
+            // sort the array in descending order.
+            // The higher the right value, the closer the window is to the right of the screen. The higher the bottom number, the closer it is to the toolbar/top of the monitor.
+            return bDim - aDim;
+        })[0];
+    }
+    /**
+     * Used for resize. Grabs the windows on the opposite side of the resize handle.
+     * @function {function name}
+     * @param  {type} handle {description}
+     * @return {type} {description}
+     */
+    getAnchors(handle) {
+        const edges = {
+            top: "bottom",
+            right: "left",
+            bottom: "top",
+            left: "right",
+        };
+        const edgeArray = handle.split(/(?=[A-Z])/).map((s) => s.toLowerCase());
+        const anchorNames = [];
+        const self = this;
+        for (const windowName in this.windows) {
+            if (anchorNames.includes(windowName)) {
+                continue;
+            }
+            const win = this.windows[windowName];
+            let isAnchor = true;
+            edgeArray.forEach((requestedEdge) => {
+                const edge = edges[requestedEdge];
+                if (win[edge] !== self[edge]) {
+                    isAnchor = false;
+                }
+            });
+            if (isAnchor) {
+                anchorNames.push(windowName);
+            }
+        }
+        return anchorNames;
+    }
+    /**
+     * @function {function name}
+     * @return {type} {description}
+     */
+    calculateOuterBounds() {
+        let groupBounds = null;
+        for (const windowName in this.windows) {
+            const win = this.windows[windowName];
+            // sometimes we get into a state where right and bottom are not set so groups break rectangularity.
+            if (!win.right)
+                win.right = win.left + win.width;
+            if (!win.bottom)
+                win.bottom = win.top + win.height;
+            if (!groupBounds) {
+                groupBounds = {
+                    min: {
+                        x: win.left,
+                        y: win.top,
+                    },
+                    max: {
+                        x: win.right,
+                        y: win.bottom,
+                    },
+                };
+                continue;
+            }
+            // Did some testing and this is much faster than ternary operators.
+            if (win.left < groupBounds.min.x) {
+                groupBounds.min.x = win.left;
+            }
+            if (win.top < groupBounds.min.y) {
+                groupBounds.min.y = win.top;
+            }
+            if (win.bottom > groupBounds.max.y) {
+                groupBounds.max.y = win.bottom;
+            }
+            if (win.right > groupBounds.max.x) {
+                groupBounds.max.x = win.right;
+            }
+        }
+        return groupBounds;
+    }
+    /**
+     * @function {function name}
+     * @param  {type} name {description}
+     * @return {type} {description}
+     */
+    removeWindow(name, updateAOT = true) {
+        const win = this.getDockableWindow(name);
+        if (win && this.isMovable) {
+            win.win._updateOptions({
+                taskbarIconGroup: win.win.uuid,
+            });
+            // Clean up alwaysOnTop state
+            // remove the listener
+            // Set the window's alwaysOnTop back to its previous state.
+            win.win.removeEventListener("alwaysOnTop", this.handleAlwaysOnTopChange);
+            if (updateAOT) {
+                win.alwaysOnTop(this.ungroupedAlwaysOnTopState[win.name]);
+            }
+            // On workspace reload, the window will be removed then added back.
+            // We want the ungroupedAlwaysOnTopState to stick around in that case,
+            // so we don't delete it from the object on remove. Window names are unique
+            // so there's no risk of collision.
+        }
+        super.removeWindows(name);
+        this.updateBounds();
+    }
+    /**
+     * @function {function name}
+     * @param  {type} bounds {description}
+     * @return {type} {description}
+     */
+    getDelta(bounds) {
+        return {
+            left: bounds.left - this.left,
+            right: bounds.right - this.right,
+            height: (bounds.height || 0) - this.height,
+            width: (bounds.width || 0) - this.width,
+        };
+    }
+    /**
+     * @function {function name}
+     * @param  {type} bounds {description}
+     * @return {type} {description}
+     */
+    setBounds(bounds) {
+        this.left = bounds.left;
+        this.right = bounds.right;
+        this.bottom = bounds.bottom || 0;
+        this.top = bounds.top || 0;
+        this.width = bounds.right - bounds.left;
+        this.height = this.bottom - this.top;
+        this.vertices = this.getCornerObject(bounds);
+    }
+    getBounds() {
+        return {
+            left: this.left,
+            right: this.right,
+            bottom: this.bottom,
+            top: this.top,
+            width: this.width,
+            height: this.height,
+            vertices: this.vertices,
+        };
+    }
+    /**
+     *
+     * @param {bounds} newBounds Bounds to scale the group to
+     * @param {string} anchor
+     * @param {DockingCalculator} calculator
+     * @param {function} cb
+     */
+    scale(newBounds, anchor, calculator) {
+        // If you go bananas and try to make the group have negative height or width, many problems arise. Check to make sure the bounds aren't negative or too tiny.
+        newBounds = calculator.checkShortCircuits(newBounds, this);
+        const windowList = this.getWindowArray().map((win) => {
+            return Object.assign(Object.assign({}, win.getBounds()), { name: win.name, limits: Object.assign({
+                    minWidth: this.MINIMUM_WINDOW_WIDTH,
+                    minHeight: this.MINIMUM_WINDOW_HEIGHT,
+                    maxWidth: Infinity,
+                    maxHeight: Infinity,
+                }, win.limits) });
+        });
+        const scaleDescriptor = DockableGroup.getScaleDescriptor(this.getBounds(), newBounds);
+        // /eventually Fix this. Right now it'll just go to the top left.
+        const corners = JSON.parse(JSON.stringify(this.vertices));
+        for (const corner in corners) {
+            corners[corner.toLowerCase()] = corners[corner];
+        }
+        let anchorPoint = { top: 0, left: 0, right: 0, bottom: 0 };
+        // The "Anchor" Is where the group is offset by. It's a point. Top/left is a misnomer. After scaling, each window will be shifted by deltaX and deltaY, where the delta is the distance between that window's top left and the anchor's point.
+        if (EDGES.includes(anchor)) {
+            anchorPoint.top = newBounds.top || 0;
+            anchorPoint.left = newBounds.left;
+            switch (anchor) {
+                case "left":
+                    // When resizing from the left, we want to make sure the right edge of the group doesn't move.
+                    anchorPoint.left = newBounds.right;
+                    break;
+                case "top":
+                    // When resizing from the top, we want to make sure the bottom edge of the group doesn't move.
+                    anchorPoint.top = newBounds.bottom || 0;
+                    break;
+                default:
+                    break;
+            }
+        }
+        else if (CORNERS.includes(anchor)) {
+            // Get the opposite corner; that's the anchor.
+            // e.g., when resizing from the top right, the bottom left shouldn't move at all.
+            const corner = corners[OPPOSITE_EDGE_MAP[anchor]];
+            anchorPoint = {
+                top: corner.y,
+                left: corner.x,
+                right: 0,
+                bottom: 0,
+            };
+        }
+        // Pass in the list of windows and how we much we want to scale it. This returns a list of mutated window bounds objects.
+        const scaledWindowList = DockableGroup.getScaledWindowList({
+            windowList,
+            scaleDescriptor,
+            anchor: anchorPoint,
+        });
+        // Actually move the windows.
+        scaledWindowList.forEach((scaledBounds) => {
+            calculator.moveWindow(scaledBounds);
+        });
+        const windowBounds = {};
+        this.getWindowArray().forEach((win) => (windowBounds[win.name] = win.getBounds()));
+        /**
+         * 8/13/19 JC: Added true to the end to set 'triggerByAutoArrange', this will tell the calculator to move the group and to save the bounds
+         */
+        calculator.cleanupSharedEdges(this, windowBounds, true);
+        this.updateBounds();
+    }
+    /**
+     * Sets the minimum height and width for windows. This is used when scaling windows. It prevents us from creating very tiny windows when scaling an entire group.
+     * @param {object} cfg
+     * @param {number} cfg.MINIMUM_HEIGHT Minimum height a window can scale to.
+     * @param {number} cfg.MINIMUM_WIDTH Minimum width a window can scale to.
+     */
+    setMinimums(cfg) {
+        if (cfg) {
+            this.MINIMUM_WINDOW_HEIGHT = cfg.MINIMUM_HEIGHT;
+            this.MINIMUM_WINDOW_WIDTH = cfg.MINIMUM_WIDTH;
+        }
+    }
+    /**
+     * Returns an array of windows that have an edge on a given line segment.
+     * @param {object} segment
+     * @param {object} segment.min minimum point for the line segment.
+     * @param {number} segment.min.x X coordinate for the minimum point for the line segment.
+     * @param {number} segment.min.y y coordinate for the minimum point for the line segment.
+     * @param {object} segment.min maximum point for the line segment.
+     * @param {number} segment.max.x X coordinate for the maximum point for the line segment.
+     * @param {number} segment.max.y y coordinate for the maximum point for the line segment.
+     * @returns {array} windowsOnSegment Array of dockable windows that have an edge on the line segment.
+     */
+    getWindowBoxesOnSegment(segment) {
+        const windowsOnSegment = [];
+        const winPool = this.getWindowNames();
+        const points = [segment.min, segment.max];
+        for (let i = 0; i < winPool.length; i++) {
+            const win = this.getDockableWindow(winPool[i]);
+            if (win) {
+                for (let p = 0, len = points.length; p < len; p++) {
+                    const point = points[p];
+                    if (win.pointIsOnBoundingBox(point)) {
+                        const snapObj = {
+                            name: win.name,
+                            edge: win.getEdgeByPoint(point),
+                            segment: win.getEdges("obj")[win.getEdgeByPoint(point)],
+                            win,
+                        };
+                        windowsOnSegment.push(snapObj);
+                        break;
+                    }
+                }
+            }
+        }
+        return windowsOnSegment;
+    }
+    /**
+     * Not sure why this function doesn't use the one above. Similar functionality, but you can pass in a string instead of a line segment.
+     * @param  {dockableWindow} win
+     * @param  {string} edge E.g., 'left', 'right', etc.
+     * @return {array}
+     */
+    getWindowsOnEdge(win, edge, includeCorners) {
+        if (includeCorners === undefined) {
+            includeCorners = false;
+        }
+        const windowsOnEdge = [];
+        if (!edge) {
+            return [];
+        }
+        const oppEdge = OPPOSITE_EDGE_MAP[edge];
+        const windowSegment = win.getEdges("obj", includeCorners)[edge];
+        for (const windowName in this.windows) {
+            const possibleSnapper = this.windows[windowName];
+            if (possibleSnapper.name === win.name) {
+                continue;
+            }
+            const segment = possibleSnapper.getEdges("obj", includeCorners)[oppEdge];
+            let shouldPush = false;
+            let points = [
+                {
+                    name: possibleSnapper.name,
+                    val: segment.min,
+                },
+                {
+                    name: possibleSnapper.name,
+                    val: segment.max,
+                },
+                {
+                    name: win.name,
+                    val: windowSegment.min,
+                },
+                {
+                    name: win.name,
+                    val: windowSegment.max,
+                },
+            ];
+            if (["top", "bottom"].includes(edge)) {
+                if (segment.min.y !== windowSegment.min.y) {
+                    continue;
+                }
+                points = points.sort((a, b) => b.val.x - a.val.x);
+            }
+            if (["left", "right"].includes(edge)) {
+                if (segment.min.x !== windowSegment.min.x) {
+                    continue;
+                }
+                points = points.sort((a, b) => b.val.y - a.val.y);
+            }
+            if (points[0].name !== points[1].name) {
+                shouldPush = true;
+            }
+            if (shouldPush) {
+                const snapObj = {
+                    name: possibleSnapper.name,
+                    edge: oppEdge,
+                    win: possibleSnapper,
+                };
+                windowsOnEdge.push(snapObj);
+            }
+        }
+        return windowsOnEdge;
+    }
+    scaleRemainingWindows(win, myHole) {
+        const bounds = InitializedBoxCoordinates;
+        // calculates the bounds of the group prior to the hole being created.
+        bounds.left = Math.min(myHole.left, this.left);
+        bounds.right = Math.max(myHole.right, this.right);
+        bounds.top = Math.min(myHole.top, this.top);
+        bounds.bottom = Math.max(myHole.bottom, this.bottom);
+        bounds.height = bounds.bottom - bounds.top;
+        bounds.width = bounds.right - bounds.left;
+        let edge = null;
+        // These are opposite. When the window leaves the group, the bounds are updated. So here, we compare the edge of the window that left to the group. If it was on the left side of the group - the right side of that window will be butted up against the left side of the group after it leaves.
+        if (myHole.width === this.width) {
+            if (myHole.top === this.bottom)
+                edge = "bottom";
+            if (myHole.bottom === this.top)
+                edge = "top";
+        }
+        if (myHole.height === this.height) {
+            if (myHole.left === this.right)
+                edge = "right";
+            if (myHole.right === this.left)
+                edge = "left";
+        }
+        if (!edge) {
+            Logger.system.error("No edge found in DockableGroup.fillHole()");
+            return;
+        }
+        this.scale(bounds, edge, win.calculator);
+    }
+    /**
+     * Given a hole, this function recursively fills the hole, expanding 1 window at a time - until the hole is filled.
+     * @param {object} hole
+     * @param {*} cb
+     */
+    async fillHole(hole) {
+        this.fillAttempts++;
+        const myHole = new DockableBox(hole);
+        // First, we need to see which windows in this group border our hole.
+        // Get the edges in array format, don't include corners in the calculations.
+        const edges = myHole.getEdges("arr", false);
+        let edgesOfEdges = edges.map((edge) => this.getWindowBoxesOnSegment(edge));
+        // flatten the array.
+        let candidates = edgesOfEdges
+            .flatMap((boxes) => boxes)
+            .map((box) => {
+            return Object.assign(Object.assign({}, box), { impactedWindows: 0 });
+        });
+        // If we have no windows bordering the hole, there's nothing we can do.
+        if (!candidates.length)
+            return;
+        // We need some of the methods on the docking calculator. This isn't an ideal way to do things. Would be nice if there was some kind of bridge that could allow move requests without needing the calculator.
+        const win = this.getDockableWindow(candidates[0].name);
+        if (!win)
+            return;
+        // Bounding box is needed for `sharesAnEdgeWith`.
+        myHole.windowBoundingBox = BoxMath.getWindowBoundingBox(myHole);
+        // If the hole takes up the whole width or whole height of the group, we should scale the remaining windows to fill the hole.
+        if ((myHole.width === this.width || myHole.height === this.height) && this.sharesAnEdgeWith(myHole)) {
+            this.scaleRemainingWindows(win, myHole);
+            return;
+        }
+        // Once we know that we aren't going to have to scale all of the windows, we get here.
+        // The goal is to do the least amount of damage possible. So if there are 4 windows that border the hole, we will choose the one that will cascade into the fewest windows. If they all impact no other windows, we just choose the first.
+        const potentialImpact = [];
+        for (let i = 0; i < candidates.length; i++) {
+            let candidate = candidates[i];
+            const win2 = this.getDockableWindow(candidate.name);
+            const { edge } = candidate;
+            // These are the windows that would be affected if we resized the candidate window.
+            if (win2 && typeof edge === "string") {
+                const impactedWindows = this.getWindowsOnEdge(win2, edge, false);
+                candidate.impactedWindows = impactedWindows.length;
+                candidate.win = win2;
+                potentialImpact.push(candidate);
+            }
+        }
+        // Goes through and gets the window whose resize would trigger a resize on the fewest windows possible.
+        let leastImpactfulChange = potentialImpact.reduce((p, v) => (p.impactedWindows < v.impactedWindows ? p : v));
+        if (!leastImpactfulChange.win)
+            return;
+        // Which edge we're resizing.
+        let impactedEdge = leastImpactfulChange.edge;
+        // Clone so we don't impact the original windows. Calculate the bounds for our window. We'll use this window if none of the other candidates are better matches.
+        const oldBounds = leastImpactfulChange.win.getBounds();
+        let newBounds = Object.assign(Object.assign({}, oldBounds), { [impactedEdge]: myHole[impactedEdge], height: oldBounds.bottom - oldBounds.top, width: oldBounds.right - oldBounds.left, changeType: 1, resizeHandle: impactedEdge, forceResizeHandle: true });
+        // We'll use this later.
+        const holeArea = (hole.width || 0) * (hole.height || 0);
+        let leastImpactfulArea = newBounds.width * newBounds.height;
+        for (let i = 0; i < candidates.length; i++) {
+            const candidate = candidates[i];
+            const proposedImpactedEdge = candidate.edge;
+            const candidateBounds = candidate.win.getBounds();
+            const proposedBounds = Object.assign(Object.assign({}, candidateBounds), { [proposedImpactedEdge]: myHole[proposedImpactedEdge], height: candidateBounds.bottom - candidateBounds.top, width: candidateBounds.right - candidateBounds.left });
+            const candidateArea = proposedBounds.height * proposedBounds.width;
+            // If the candidateArea is less than the holeArea, larger than the currently chosen window, and resizing it would cause no more damage than the currently chosen window, it becomes the window to resize.
+            const smallerThanHole = candidateArea - holeArea > 0;
+            const largerThanCurrentWindow = candidateArea > leastImpactfulArea;
+            const fewerImpactedWindows = candidate.impactedWindows <= leastImpactfulChange.impactedWindows;
+            if (smallerThanHole && largerThanCurrentWindow && fewerImpactedWindows) {
+                leastImpactfulChange = candidate;
+                leastImpactfulArea = candidateArea;
+                impactedEdge = proposedImpactedEdge;
+                newBounds = Object.assign(Object.assign(Object.assign({}, newBounds), proposedBounds), { resizeHandle: impactedEdge });
+            }
+        }
+        // Once we have the window that will cause the least amount of damage, we create a moveRequest to pass to docking. This will be a resize, and it will cascade onto other affected windows.
+        newBounds.name = leastImpactfulChange.win.name;
+        await win.calculator.requestMove(newBounds);
+        this.updateBounds();
+        // Done
+        if (this.isARectangle()) {
+            win.calculator.onMouseUp();
+            this.fillAttempts = 0;
+            return;
+        }
+        // Too many attempts
+        if (this.fillAttempts === 20) {
+            const windowBounds = JSON.stringify(this.getWindowArray().map((win2) => win2.getBounds()));
+            Logger.system.warn("forceObjectsToLogger", "FillHoles failed after 20 attempts. Use first string for test case. Second string is hole", windowBounds, JSON.stringify(myHole.getBounds()));
+            this.fillAttempts = 0;
+            return;
+        }
+        // If we only partially filled the hole, calculate the remaining hole, and call recursively.
+        const leftovers = BoxMath.clipRect(myHole, new DockableBox(newBounds), impactedEdge);
+        await this.fillHole(leftovers);
+    }
+    moveTo(bounds, cb = Function.prototype) {
+        // System moves should already have an anchor window defined. For other moves set choose the top-left window.
+        if (!bounds.anchor || !bounds.anchor.calculator) {
+            Logger.system.verbose("dockableGroup.moveTo: No bounds anchor predefined, defaulting to bottomRight move anchor");
+            bounds.anchor = this.getMoveAnchor("BottomRight");
+        }
+        // The group move needs to be handled differently if the move was initiated by the system or auto-arrange.. If a user moved the group neither of these values will be set.
+        const params = {
+            systemMoved: bounds.systemMoved,
+            triggeredByAutoArrange: bounds.triggeredByAutoArrange,
+        };
+        const { calculator } = bounds.anchor;
+        bounds.name = bounds.anchor.name;
+        bounds.changeType = 0;
+        calculator.requestMove(bounds, () => {
+            this.updateBounds();
+            calculator.onMouseUp(params);
+            cb();
+        });
+    }
+    /**
+     * In certain configurations, whether a group is a rectangle is _NOT_ the deciding factor in scaling it. Instead, that decision is made based on whether the user is dragging a corner or an edge. If it's a corner, it must not be on another window's edge. If those conditions are met, we scale the group. This function returns the list of x,y points that will trigger this behavior.
+     */
+    getCornersThatCauseScaling() {
+        const { corners, edges } = this.getCornersAndEdgesOfAllWindows();
+        const uniqueCorners = corners.filter((value, index, self) => {
+            const firstOccurence = self.findIndex((val) => val.x === value.x && val.y === value.y);
+            return firstOccurence === index;
+        });
+        return uniqueCorners.filter((corner) => {
+            const otherEdges = edges.filter((edge) => edge.window !== corner.window);
+            return !otherEdges.some((edge) => BoxMath.isPointOnSegment(corner, edge));
+        });
+    }
+    /**
+     * @typedef cornerLabel
+     * @param {"topLeft"|"topRight"|"bottomLeft"|"bottomRight"} Label for the corner.
+     */
+    /**
+     * @typedef cornerObject
+     * @param {string?} window Name of the window the corner belongs to
+     * @param {number} x X coordinate of the corner
+     * @param {number} y Y coordinate of the corner
+     * @param {cornerLabel} label for the corner.
+     */
+    /**
+     * @typedef edgeObject
+     * @param {string?} window Name of the window the edge belongs to
+     * @param {object} min Minimum point for line segment
+     * @param {number} min.x X coordinate of the minimum point for the edge's line segment.
+     * @param {number} min.y Y coordinate of the minimum point for the edge's line segment.
+     * @param {object} max maximum point for line segment
+     * @param {number} max.x X coordinate of the maximum point for the edge's line segment
+     * @param {number} max.y Y coordinate of the maximum point for the edge's line segment
+     */
+    /**
+     * @typedef {object} cornersAndEdges
+     * @param {Array<cornerObject>} corners
+     * @param {Array<edgeObject>} edges
+     */
+    /**
+     * Helper function that will return all corners and all edges for each window in the group.
+     * @returns {cornersAndEdges} cornersAndEdges Corners and edges.
+
+     */
+    getCornersAndEdgesOfAllWindows() {
+        let corners = this.getWindowArray().map((win) => {
+            let crn = win.getVertices(win.getBounds());
+            crn = crn.map((c) => {
+                c.window = win.name;
+                return c;
+            });
+            return crn;
+        });
+        corners = corners.reduce((acc, val) => acc.concat(val));
+        let edges = this.getWindowArray().map((win) => {
+            let edg = win.getEdges("arr", true);
+            edg = edg.map((e) => {
+                e.window = win.name;
+                return e;
+            });
+            return edg;
+        });
+        edges = edges.reduce((acc, val) => acc.concat(val));
+        return { corners, edges };
+    }
+    /**
+     * Returns the scale of bounds 1 relative to bounds 2.
+     * If bounds1 is 1, and bounds2 is 2, the scale will come out as 2.
+     * If bounds1 is 10 and bounds2 is 5, the scale will come out as 0.5. This is done for both x and y
+     * @param {bounds} bounds1
+     * @param {bounds} bounds2
+     */
+    static getScaleDescriptor(bounds1, bounds2) {
+        const xScale = bounds1.width && bounds2.width ? bounds2.width / bounds1.width : 0;
+        const yScale = bounds1.height && bounds2.height ? bounds2.height / bounds1.height : 0;
+        return {
+            x: xScale,
+            y: yScale,
+        };
+    }
+    /**
+     * Essentially moves the window's top-left to the x/y coordinates passed in.
+     * @param {object} params
+     * @param {num} params.x x coordinate of a cartesian coordinate pair.
+     * @param {num} params.y y coordinate of a cartesian coordinate pair.
+     * @param {bounds} params.bounds bounds object that is being offset
+     */
+    static getCoordinatesByOffset(params) {
+        const { x, y, bounds } = params;
+        const offsetX = bounds.left - x;
+        const offsetY = (bounds.top || 0) - y;
+        const newBounds = {
+            top: (bounds.top || 0) - offsetY,
+            left: bounds.left - offsetX,
+            height: 0,
+            width: 0,
+            right: 0,
+            bottom: 0,
+        };
+        newBounds.height = bounds.height || 0;
+        newBounds.width = bounds.width || 0;
+        newBounds.right = newBounds.left + (bounds.width || 0);
+        newBounds.bottom = newBounds.top + (bounds.height || 0);
+        return newBounds;
+    }
+    /**
+     * Given bounds and a scaleDescriptor, returns a scaled bounds object.
+     * @param {*} params
+     * @param {object} params.bounds Bounds.
+     * @param {object} params.scaleDescriptor Tells us how much to scale in the X and Y directions.
+     * @param {num} params.scaleDescriptor.x 0-Infinity; how much to scale the window in the x direction
+     * @param {num} params.scaleDescriptor.y 0-Infinity; how much to scale the window in the y direction
+     * @returns {object} bounds
+     */
+    static scaleWindow(params) {
+        const { bounds, scaleDescriptor } = params;
+        // "move" the window to 0,0 -- makes scaling calculations correct.
+        const scaledBounds = {
+            left: Math.round(bounds.left * scaleDescriptor.x),
+            top: Math.round((bounds.top || 0) * scaleDescriptor.y),
+            height: Math.round((bounds.height || 0) * scaleDescriptor.y),
+            width: Math.round((bounds.width || 0) * scaleDescriptor.x),
+        };
+        scaledBounds.right = scaledBounds.left + scaledBounds.width;
+        scaledBounds.bottom = scaledBounds.top + scaledBounds.height;
+        return scaledBounds;
+    }
+    /**
+     * Called after performing scale operations on the group. Depending on where the user scaled the group from, we re-anchor the group so that the move makes sense. Internally, resizes are calculated as if the group was at 0,0. After we do those calculations, we need to re-anchor the group so that the move makes intuitive sense.
+     * @param {object} params
+     * @param {array} params.windowList Array of bounds objects. Or windows. Haven't decided.ANGLE_instanced_arrays
+     * @param {object} params.offset object describing by how much the top and left of a window's bounds should be offset.
+     * @param {num} params.offset.left how much to offset the left edge of each window in the group.
+     * @param {num} params.offset.top how much to offset the left edge of each window in the group.
+     */
+    static offsetGroup(params) {
+        const { windowList, offset } = params;
+        return windowList.map((bounds) => {
+            bounds.left = bounds.left - offset.left;
+            bounds.top = (bounds.top || 0) - (offset.top || 0);
+            bounds.right = bounds.left + (bounds.width || 0);
+            bounds.bottom = bounds.top + (bounds.height || 0);
+            return bounds;
+        });
+    }
+    /**
+     * The workhorse of scaling operations. Given a list of windows, how we want to scale them, where to put them after scaling, and a minimum height and width, it will do everything.
+     * 1. Moves the group to 0,0.
+     * 2. Calculates the size of each window in the array.
+     * 3. Actually scales each window.
+     * 4. Makes sure no windows got too narrow or too short (check minimum height/width).
+     * 5. Fixes any windows that were too small/too narrow.
+     * 6. Re-anchors the group so that the move "feels" right. See DockableGroup.'offsetGroup' for a better explanation of what "feels right" means.
+     * @param {params} params
+     * @param {Array<bounds>} params.windowList
+     * @param {scaleDescriptor} params.scaleDescriptor how much to scale in the x and y dimensions.
+     * @param {num} param.scaleDescriptor.x How much to scale in the x direction
+     * @param {num} param.scaleDescriptor.y How much to scale in the y direction
+     * @param {object} param.anchor top/left coordinates of the 'anchor' for the list of windows. After scaling the windows, we need to make sure every window is reset to this anchor. If one resizes from the bottom right of a group, the top left of the group shouldn't change. If you resize from the top left, the bottom right shouldn't move after scaling.
+     */
+    static getScaledWindowList(params) {
+        let { windowList, scaleDescriptor, anchor } = params;
+        // /MOVE IT TO 0,0
+        windowList = this.offsetGroup({
+            windowList,
+            offset: {
+                left: anchor.left,
+                top: anchor.top,
+                right: 0,
+            },
+        });
+        // Check if the window exceeds it's limits, recalc scale factor and find the most strict
+        let newScaleX = scaleDescriptor.x;
+        let newScaleY = scaleDescriptor.y;
+        windowList.map((bounds) => {
+            const scaledBounds = this.scaleWindow({
+                bounds,
+                scaleDescriptor,
+            });
+            if (scaledBounds.width < bounds.limits.minWidth) {
+                newScaleX = Math.max(newScaleX, bounds.limits.minWidth / bounds.width);
+            }
+            else if (scaledBounds.width > bounds.limits.maxWidth) {
+                newScaleX = Math.min(newScaleX, bounds.limits.maxWidth / bounds.width);
+            }
+            if (scaledBounds.height < bounds.limits.minHeight) {
+                newScaleY = Math.max(newScaleY, bounds.limits.minHeight / bounds.height);
+            }
+            else if (scaledBounds.height > bounds.limits.maxHeight) {
+                newScaleY = Math.min(newScaleY, bounds.limits.maxHeight / bounds.height);
+            }
+        });
+        // If the scale factor was changed then update scaleDescriptor
+        if (newScaleX != scaleDescriptor.x || newScaleY != scaleDescriptor.y) {
+            scaleDescriptor.x = newScaleX;
+            scaleDescriptor.y = newScaleY;
+        }
+        // Do final scaling of the windows
+        windowList = windowList.map((bounds) => {
+            const scaledBounds = this.scaleWindow({
+                bounds,
+                scaleDescriptor,
+            });
+            scaledBounds.name = bounds.name;
+            scaledBounds.limits = bounds.limits;
+            return scaledBounds;
+        });
+        // MOVE IT BACK TO WHERE THE ANCHOR IS
+        windowList = this.offsetGroup({
+            windowList,
+            offset: {
+                left: -anchor.left,
+                top: -anchor.top,
+                right: 0,
+            },
+        });
+        return windowList;
+    }
+}
+// DockableGroup.prototype = DockableBox;
+export default DockableGroup;
+//# sourceMappingURL=dockableGroup.js.map