@openfin/core 29.72.2 → 29.72.5

package/OpenFin.d.ts

@@ -250,17 +250,18 @@ declare namespace OpenFin {
 
     export type WindowOptions = MutableWindowOptions & ConstWindowOptions;
 
-    export interface ShowViewOnWindowResizeOptions {
+    export type ViewVisibilityOption = { 
         enabled?: boolean;
-        paintIntervalMs?: number;
     }
 
-    export interface ShowViewOnSplitterDragOptions {
-        enabled?: boolean;
+    export type ShowViewOnWindowResizeOptions =  ViewVisibilityOption & {
+        paintIntervalMs?: number;
     }
+
     export type ViewVisibilityOptions = {
         showViewsOnWindowResize?: ShowViewOnWindowResizeOptions;
-        showViewsOnSplitterDrag?: ShowViewOnSplitterDragOptions;
+        showViewsOnSplitterDrag?: ViewVisibilityOption;
+        showViewsOnTabDrag?: ViewVisibilityOption;
     };
 
     export type WindowState = 'maximized' | 'minimized' | 'normal';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@openfin/core",
-    "version": "29.72.2",
+    "version": "29.72.5",
     "license": "Apache-2.0",
     "main": "./src/mock.js",
     "types": "./src/mock.d.ts",

package/src/api/platform/layout/Factory.js

@@ -16,10 +16,11 @@ var _layoutManager;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutModule = void 0;
 /* eslint-disable no-undef, import/prefer-default-export */
+const tab_drag_controller_1 = require("./controllers/tab-drag-controller");
 const Instance_1 = require("./Instance");
 const base_1 = require("../../base");
-const SplitterController_1 = require("./SplitterController");
-const view_overlay_1 = require("./SplitterController/view-overlay");
+const splitter_controller_1 = require("./controllers/splitter-controller");
+const view_overlay_1 = require("./utils/view-overlay");
 /**
  * InitLayoutOptions interface
  * @typedef { object } InitLayoutOptions
@@ -108,8 +109,9 @@ class LayoutModule extends base_1.Base {
             // We need to go through environment to make sure it is only imported/bundled in OpenFin.
             const ManagerConstructor = await this.wire.environment.getManagerConstructor();
             const viewOverlay = new view_overlay_1.ViewOverlay(this.wire);
-            const splitterController = new SplitterController_1.SplitterController(viewOverlay);
-            __classPrivateFieldSet(this, _layoutManager, new ManagerConstructor(splitterController));
+            const splitterController = new splitter_controller_1.SplitterController(viewOverlay);
+            const tabDragController = new tab_drag_controller_1.TabDragController(viewOverlay);
+            __classPrivateFieldSet(this, _layoutManager, new ManagerConstructor(splitterController, tabDragController));
             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
             // @ts-ignore - layout warning here for backwards compatibility, can remove layout check in .52
             let { layout, containerId } = options;

package/src/api/platform/layout/{SplitterController/index.d.ts → controllers/splitter-controller.d.ts}

@@ -1,11 +1,11 @@
-import { ViewOverlay } from './view-overlay';
+import { ViewOverlay } from '../utils/view-overlay';
 export declare type SplitterItem = GoldenLayout.ContentItem & {
     viewEventsAdded: boolean;
     isVertical: boolean;
 };
 /**
- * @ignore
  * Utility class for managing Golden Layout splitter drag interactions.
+ * @ignore
  */
 export declare class SplitterController {
     private readonly viewOverlay;

package/src/api/platform/layout/{SplitterController/index.js → controllers/splitter-controller.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterController = void 0;
-const bounds_observer_1 = require("./bounds-observer");
+const bounds_observer_1 = require("../utils/bounds-observer");
 const applyBoundsOffset = (bounds, offsets = {}) => {
     const sum = (bound, offset) => {
         return bound + (offset || 0);
@@ -14,8 +14,8 @@ const applyBoundsOffset = (bounds, offsets = {}) => {
     };
 };
 /**
- * @ignore
  * Utility class for managing Golden Layout splitter drag interactions.
+ * @ignore
  */
 class SplitterController {
     // eslint-disable-next-line
@@ -65,8 +65,9 @@ class SplitterController {
                 splitterDiv.style.visibility = 'hidden';
                 const onBoundsChange = (bounds) => {
                     const offsetBounds = applyBoundsOffset(bounds, { height: splitterItem.isVertical ? 0 : 2 });
-                    this.viewOverlay.renderOverlay({ bounds: offsetBounds, backgroundColor });
+                    this.viewOverlay.renderOverlay(offsetBounds);
                 };
+                await this.viewOverlay.setStyle({ backgroundColor });
                 const teardownBoundsObserver = bounds_observer_1.observeBounds(splitterDiv, onBoundsChange);
                 this.teardown = () => {
                     teardownBoundsObserver();

package/src/api/platform/layout/controllers/tab-drag-controller.d.ts

@@ -0,0 +1,48 @@
+import { ViewOverlay } from '../utils/view-overlay';
+import { View } from '../../../view';
+/**
+ * Set of apis used to facilitate tab drag interactions without needing to hide views.
+ * @ignore
+ */
+export declare class TabDragController {
+    private readonly viewOverlay;
+    constructor(viewOverlay: ViewOverlay);
+    private dropZonePreview?;
+    /**
+     * When a tab is dragged from a stack greater than one, it's view will need to be hidden and the
+     * view next in the stack shown.
+     *
+     * Conversely, when a view is the last view in a window, it will need to remain visible.
+     *
+     * This function implements this logic accordingly
+     * @param movingView The view which is currently being dragged
+     * @param currentView The current active view of the tabstack
+     * @param isOnlyViewInWindow Indicates whether the moving view is the only in the platform window.
+     */
+    handleTabStackActiveView: (movingView: View, currentView: View, isOnlyViewInWindow: boolean) => Promise<void>;
+    /**
+     * Extracts the border and backgroundColor css values from the drop zone preview,
+     * and sets the viewOverlay to match them.
+     */
+    inheritStyles: () => Promise<void>;
+    /**
+     * Called when a tab drag interaction is started from the current window (not when it enters the window).
+     *
+     * Sets all views in the platform to ignore mouse events so that they can pass through to the golden-layout
+     * document whilst remaining visible.
+     */
+    startDrag: () => Promise<void>;
+    /**
+     * Called when a tab drag interaction which was started from the current window ends.
+     *
+     * Disables the click through setting on every view in the platform.
+     */
+    endDrag: () => Promise<void>;
+    /**
+     * Observes a golden-layout drop zone preview in order to render a BrowserView
+     * overlay whenever a tab is dragged over a droppable region.
+     * @param dropZonePreview The drop zone preview element created by Golden Layout in order to highlight
+     * droppable regions of the UI.
+     */
+    observeOverlay: (dropZonePreview: HTMLElement) => Promise<void>;
+}

package/src/api/platform/layout/controllers/tab-drag-controller.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabDragController = void 0;
+const bounds_observer_1 = require("../utils/bounds-observer");
+/**
+ * Set of apis used to facilitate tab drag interactions without needing to hide views.
+ * @ignore
+ */
+class TabDragController {
+    // eslint-disable-next-line
+    constructor(viewOverlay) {
+        this.viewOverlay = viewOverlay;
+        /**
+         * When a tab is dragged from a stack greater than one, it's view will need to be hidden and the
+         * view next in the stack shown.
+         *
+         * Conversely, when a view is the last view in a window, it will need to remain visible.
+         *
+         * This function implements this logic accordingly
+         * @param movingView The view which is currently being dragged
+         * @param currentView The current active view of the tabstack
+         * @param isOnlyViewInWindow Indicates whether the moving view is the only in the platform window.
+         */
+        this.handleTabStackActiveView = async (movingView, currentView, isOnlyViewInWindow) => {
+            if (this.dropZonePreview) {
+                const hideMovingViewIfPossible = async () => {
+                    if (!isOnlyViewInWindow) {
+                        await movingView.hide();
+                    }
+                };
+                const showCurrentView = async () => {
+                    if (currentView.identity.name !== movingView.identity.name) {
+                        await currentView.show();
+                    }
+                };
+                await Promise.all([hideMovingViewIfPossible(), showCurrentView()]);
+            }
+        };
+        /**
+         * Extracts the border and backgroundColor css values from the drop zone preview,
+         * and sets the viewOverlay to match them.
+         */
+        this.inheritStyles = async () => {
+            if (this.dropZonePreview) {
+                const { border, backgroundColor } = getComputedStyle(this.dropZonePreview);
+                await this.viewOverlay.setStyle({ border, backgroundColor });
+            }
+        };
+        /**
+         * Called when a tab drag interaction is started from the current window (not when it enters the window).
+         *
+         * Sets all views in the platform to ignore mouse events so that they can pass through to the golden-layout
+         * document whilst remaining visible.
+         */
+        this.startDrag = async () => {
+            await this.viewOverlay.setIgnoreViewMouseEvents(true);
+        };
+        /**
+         * Called when a tab drag interaction which was started from the current window ends.
+         *
+         * Disables the click through setting on every view in the platform.
+         */
+        this.endDrag = async () => {
+            await this.viewOverlay.setIgnoreViewMouseEvents(false);
+        };
+        /**
+         * Observes a golden-layout drop zone preview in order to render a BrowserView
+         * overlay whenever a tab is dragged over a droppable region.
+         * @param dropZonePreview The drop zone preview element created by Golden Layout in order to highlight
+         * droppable regions of the UI.
+         */
+        this.observeOverlay = async (dropZonePreview) => {
+            if (!this.dropZonePreview) {
+                this.dropZonePreview = dropZonePreview;
+                let lastBounds;
+                dropZonePreview.style.visibility = 'hidden';
+                dropZonePreview.addEventListener('drop-area-highlighted', async (e) => {
+                    try {
+                        const { bounds } = e.detail;
+                        if (!lastBounds || !bounds_observer_1.isDomRectEqual(lastBounds, bounds)) {
+                            lastBounds = bounds;
+                            await this.viewOverlay.renderOverlay(bounds);
+                        }
+                    }
+                    catch (error) {
+                        console.warn('Unexpected error encountered rendering tab drag preview.', error);
+                    }
+                });
+                dropZonePreview.addEventListener('drop-area-hidden', async () => {
+                    try {
+                        lastBounds = undefined;
+                        await this.viewOverlay.detachOverlay();
+                    }
+                    catch (error) {
+                        console.warn('Unexpected error encountered hiding tab drag preview.', error);
+                    }
+                });
+            }
+        };
+    }
+}
+exports.TabDragController = TabDragController;

package/src/api/platform/layout/{SplitterController → utils}/bounds-observer.d.ts

@@ -1,5 +1,5 @@
+export declare const isDomRectEqual: (a: DOMRect, b: DOMRect) => boolean;
 /**
- * @ignore
  * Observes the bounding client box rectangle of the given element for changes.
  *
  * This solution only works for 2 scenarios, though could be updated to support more
@@ -14,5 +14,6 @@
  * @param element The element to observe the bounding box for (i.e. position, width, height)
  * @param onChange Called every time the bounding box changes.
  * @returns Function which disposes the observers when invoked.
+ * @ignore
  */
 export declare const observeBounds: (element: Element, onChange: (bounds: DOMRect) => void) => () => void;

package/src/api/platform/layout/{SplitterController → utils}/bounds-observer.js

@@ -1,8 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.observeBounds = void 0;
+exports.observeBounds = exports.isDomRectEqual = void 0;
+exports.isDomRectEqual = (a, b) => {
+    if (a.top !== b.top ||
+        a.left !== b.left ||
+        a.width !== b.width ||
+        a.height !== b.height ||
+        a.x !== b.x ||
+        a.y !== b.y) {
+        return false;
+    }
+    return true;
+};
 /**
- * @ignore
  * Observes the bounding client box rectangle of the given element for changes.
  *
  * This solution only works for 2 scenarios, though could be updated to support more
@@ -17,23 +27,13 @@ exports.observeBounds = void 0;
  * @param element The element to observe the bounding box for (i.e. position, width, height)
  * @param onChange Called every time the bounding box changes.
  * @returns Function which disposes the observers when invoked.
+ * @ignore
  */
 exports.observeBounds = (element, onChange) => {
     let lastBounds;
-    const isDomRectEqual = (a, b) => {
-        if (a.top !== b.top
-            || a.left !== b.left
-            || a.width !== b.width
-            || a.height !== b.height
-            || a.x !== b.x
-            || a.y !== b.y) {
-            return false;
-        }
-        return true;
-    };
     const checkBounds = () => {
         const currentBounds = element.getBoundingClientRect();
-        if (!lastBounds || !isDomRectEqual(lastBounds, currentBounds)) {
+        if (!lastBounds || !exports.isDomRectEqual(lastBounds, currentBounds)) {
             lastBounds = currentBounds;
             onChange(element.getBoundingClientRect());
         }

package/src/api/platform/layout/utils/view-overlay.d.ts

@@ -0,0 +1,34 @@
+import Transport from '../../../../transport/transport';
+/**
+ * Api client allowing an empty electron BrowserView to be rendered
+ * in the current window with the specified bounds.
+ *
+ * Please note, only one  view based overlay can be rendered at a time per runtime.
+ * @ignore
+ */
+export declare class ViewOverlay {
+    private wire;
+    constructor(wire: Transport);
+    /**
+     * Sets the style of the root <html> element of the view overlay webcontent.
+     * @param style A partial collection of Css style declarations to set.
+     */
+    setStyle: (style: Partial<CSSStyleDeclaration>) => Promise<void>;
+    /**
+     * Renders the overlay at the specified position relative to the calling window.
+     * @param options Bounds and background color to display in the overlay.
+     */
+    renderOverlay: (bounds: OpenFin.Bounds) => Promise<void>;
+    /**
+     * Removes the overlay from the current window.
+     */
+    detachOverlay: () => Promise<void>;
+    /**
+     * Allows setting all OpenFin views to ignore or consume mouse events.
+     *
+     * This can help with the rendering of view overlays that depend on OpenFin views not consuming mouse events.
+     *
+     * @param enabled If true, all mouse events are ignored by openfin views. If false, all OpenFin views will consume mouse events.
+     */
+    setIgnoreViewMouseEvents(enabled: boolean): Promise<void>;
+}

package/src/api/platform/layout/{SplitterController → utils}/view-overlay.js

@@ -2,23 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewOverlay = void 0;
 /**
- * @ignore
  * Api client allowing an empty electron BrowserView to be rendered
  * in the current window with the specified bounds.
  *
  * Please note, only one  view based overlay can be rendered at a time per runtime.
+ * @ignore
  */
 class ViewOverlay {
     // eslint-disable-next-line
     constructor(wire) {
         this.wire = wire;
+        /**
+         * Sets the style of the root <html> element of the view overlay webcontent.
+         * @param style A partial collection of Css style declarations to set.
+         */
+        this.setStyle = async (style) => {
+            await this.wire.sendAction('set-overlay-style', { style });
+        };
         /**
          * Renders the overlay at the specified position relative to the calling window.
          * @param options Bounds and background color to display in the overlay.
          */
-        this.renderOverlay = async (options) => {
-            const { bounds, backgroundColor } = options;
-            await this.wire.sendAction('render-overlay', { bounds, backgroundColor });
+        this.renderOverlay = async (bounds) => {
+            await this.wire.sendAction('render-overlay', { bounds });
         };
         /**
          * Removes the overlay from the current window.
@@ -27,5 +33,17 @@ class ViewOverlay {
             await this.wire.sendAction('detach-overlay');
         };
     }
+    /**
+     * Allows setting all OpenFin views to ignore or consume mouse events.
+     *
+     * This can help with the rendering of view overlays that depend on OpenFin views not consuming mouse events.
+     *
+     * @param enabled If true, all mouse events are ignored by openfin views. If false, all OpenFin views will consume mouse events.
+     */
+    async setIgnoreViewMouseEvents(enabled) {
+        await this.wire.sendAction('set-ignore-all-view-mouse-events', {
+            enabled
+        });
+    }
 }
 exports.ViewOverlay = ViewOverlay;

package/src/api/window/Instance.d.ts

@@ -358,7 +358,8 @@ import WindowEvents = OpenFin.WindowEvents;
  * @typedef {Object} ViewVisibility _Platform Windows Only_. Controls behavior for showing views when they are being resized by the user.
  * @property {ShowViewsOnWindowResize} [showViewsOnWindowResize] Enables views to be shown when a Platform Window is being resized by the user.
  * @property {ShowViewsOnSplitterDrag} [showViewsOnSplitterDrag] Allows views to be shown when they are resized by the user dragging the splitter between layout stacks.
- */
+ * @property {ShowViewsOnTabDrag} [showViewsOnTabDrag] _Supported on Windows Operating Systems only_. Allows views to be shown when the user is dragging a tab around a layout.
+*/
 /**
  * @typedef {Object} ShowViewsOnWindowResize _Platform Windows Only_. Enables views to be shown when a Platform Window is being resized by the user.
  * @property {boolean} [enabled=false] Enables or disables showing Views when a Platform Window is being resized.
@@ -368,6 +369,10 @@ import WindowEvents = OpenFin.WindowEvents;
  * @typedef {Object} ShowViewsOnSplitterDrag _Platform Windows Only_. Allows views to be shown when they are resized by the user dragging the splitter between layout stacks.
  * @property {boolean} [enabled=false] Enables or disables showing views when the layout splitter is being dragged.
  */
+/**
+ * @typedef {Object} ShowViewsOnTabDrag _Platform Windows Only_. Allows views to be shown when the user is manipulating the layout by repositioning a tab.
+ * @property {boolean} [enabled=false] Enables or disables showing views when a tab is being dragged.
+ */
 /**
  * @typedef {object} CapturePageOptions
  * @property { Area } [area] The area of the window to be captured.

package/src/api/window/Instance.js

@@ -365,7 +365,8 @@ const view_1 = require("../view");
  * @typedef {Object} ViewVisibility _Platform Windows Only_. Controls behavior for showing views when they are being resized by the user.
  * @property {ShowViewsOnWindowResize} [showViewsOnWindowResize] Enables views to be shown when a Platform Window is being resized by the user.
  * @property {ShowViewsOnSplitterDrag} [showViewsOnSplitterDrag] Allows views to be shown when they are resized by the user dragging the splitter between layout stacks.
- */
+ * @property {ShowViewsOnTabDrag} [showViewsOnTabDrag] _Supported on Windows Operating Systems only_. Allows views to be shown when the user is dragging a tab around a layout.
+*/
 /**
  * @typedef {Object} ShowViewsOnWindowResize _Platform Windows Only_. Enables views to be shown when a Platform Window is being resized by the user.
  * @property {boolean} [enabled=false] Enables or disables showing Views when a Platform Window is being resized.
@@ -375,6 +376,10 @@ const view_1 = require("../view");
  * @typedef {Object} ShowViewsOnSplitterDrag _Platform Windows Only_. Allows views to be shown when they are resized by the user dragging the splitter between layout stacks.
  * @property {boolean} [enabled=false] Enables or disables showing views when the layout splitter is being dragged.
  */
+/**
+ * @typedef {Object} ShowViewsOnTabDrag _Platform Windows Only_. Allows views to be shown when the user is manipulating the layout by repositioning a tab.
+ * @property {boolean} [enabled=false] Enables or disables showing views when a tab is being dragged.
+ */
 /**
  * @typedef {object} CapturePageOptions
  * @property { Area } [area] The area of the window to be captured.

package/src/shapes/protocol.d.ts

@@ -122,11 +122,22 @@ export interface ProtocolMap extends ProtocolMapBase {
     'render-overlay': {
         request: {
             bounds: OpenFin.Bounds;
-            backgroundColor: string;
+        };
+        response: void;
+    };
+    'set-overlay-style': {
+        request: {
+            style: Partial<CSSStyleDeclaration>;
         };
         response: void;
     };
     'detach-overlay': VoidCall;
+    'set-ignore-all-view-mouse-events': {
+        request: {
+            enabled: boolean;
+        };
+        response: void;
+    };
     'system-get-printers': {
         request: void;
         response: OpenFin.PrinterInfo[];

package/src/api/platform/layout/SplitterController/view-overlay.d.ts

@@ -1,24 +0,0 @@
-import Transport from "../../../../transport/transport";
-/**
- * @ignore
- * Api client allowing an empty electron BrowserView to be rendered
- * in the current window with the specified bounds.
- *
- * Please note, only one  view based overlay can be rendered at a time per runtime.
- */
-export declare class ViewOverlay {
-    private wire;
-    constructor(wire: Transport);
-    /**
-     * Renders the overlay at the specified position relative to the calling window.
-     * @param options Bounds and background color to display in the overlay.
-     */
-    renderOverlay: (options: {
-        bounds: OpenFin.Bounds;
-        backgroundColor: string;
-    }) => Promise<void>;
-    /**
-     * Removes the overlay from the current window.
-     */
-    detachOverlay: () => Promise<void>;
-}