Add ability for windows to save custom state as part of the persisted window layout

examples/web/assets/js/app.js

@@ -203,3 +203,13 @@ loadlayoutButton.onclick = function () {
 savelayoutButton.onclick = function () {
 	container.saveLayout("Layout");
 };
+
+/** Invoked by window layout saving to maintain state specific to this window */
+function getState() {
+	return { value: "Foo" };
+}
+
+/** Invoked by window layout loading to restore state specific to this window */
+function setState(state) {
+	this.container.log("info", state);
+}

src/Default/default.ts

@@ -107,6 +107,22 @@ export class DefaultContainerWindow extends ContainerWindow {
         });
     }
 
+    public getState(): Promise<any> {
+        return new Promise<any>(resolve => {
+            (this.nativeWindow && (<any>this.nativeWindow).getState) ? resolve((<any>this.nativeWindow).getState()) : resolve(undefined);
+        });
+    }
+
+    public setState(state: any): Promise<void> {
+        return new Promise<void>(resolve => {
+            if (this.nativeWindow && (<any>this.nativeWindow).setState) {
+                (<any>this.nativeWindow).setState(state);
+            }
+
+            resolve();
+        });
+    }
+
     protected attachListener(eventName: string, listener: (...args: any[]) => void): void {
         this.innerWindow.addEventListener(windowEventMap[eventName] || eventName, listener);
     }
@@ -329,7 +345,7 @@ export class DefaultContainer extends WebContainerBase {
             const windows: ContainerWindow[] = [];
             const trackedWindows = this.globalWindow[DefaultContainer.windowsPropertyKey];
             for (const key in trackedWindows) {
-                windows.push(trackedWindows[key]);
+                windows.push(this.wrapWindow(trackedWindows[key]));
             }
             resolve(windows);
         });
@@ -360,16 +376,33 @@ export class DefaultContainer extends WebContainerBase {
         const layout = new PersistedWindowLayout();
 
         return new Promise<PersistedWindowLayout>((resolve, reject) => {
-            const windows = this.globalWindow[DefaultContainer.windowsPropertyKey];
-            for (const key in windows) {
-                const win = windows[key];
-                if (this.globalWindow !== win) {
-                    layout.windows.push({ name: win.name, url: win.location.toString(), bounds: { x: win.screenX, y: win.screenY, width: win.outerWidth, height: win.outerHeight }, options: win[Container.windowOptionsPropertyKey] });
-                }
-            }
-
-            this.saveLayoutToStorage(name, layout);
-            resolve(layout);
+            const promises: Promise<void>[] = [];
+
+            this.getAllWindows().then(windows => {
+                windows.forEach(window => {
+                    promises.push(new Promise<void>(async (innerResolve) => {
+                        const nativeWin = window.nativeWindow;
+                        if (this.globalWindow !== nativeWin) {
+                            layout.windows.push(
+                                {
+                                    name: window.name,
+                                    url: nativeWin.location.toString(),
+                                    id: window.id,
+                                    bounds: { x: nativeWin.screenX, y: nativeWin.screenY, width: nativeWin.outerWidth, height: nativeWin.outerHeight },
+                                    options: nativeWin[Container.windowOptionsPropertyKey],
+                                    state: await window.getState()
+                                }
+                            );
+                        }
+                        innerResolve();
+                    }));
+                });
+
+                Promise.all(promises).then(() => {
+                    this.saveLayoutToStorage(name, layout);
+                    resolve(layout);
+                }).catch(reason => reject(reason));
+            });
         });
     }
 }

src/Electron/electron.ts

@@ -188,6 +188,22 @@ export class ElectronContainerWindow extends ContainerWindow {
         });
     }
 
+    public getState(): Promise<any> {
+        if (this.innerWindow && this.innerWindow.webContents) {
+            return this.innerWindow.webContents.executeJavaScript("window.getState ? window.getState() : undefined");
+        } else {
+            return Promise.resolve(undefined);
+        }
+    }
+
+    public setState(state: any): Promise<void> {
+        if (this.innerWindow && this.innerWindow.webContents) {
+            return this.innerWindow.webContents.executeJavaScript(`if (window.setState) { window.setState(JSON.parse(\`${JSON.stringify(state)}\`)); }`);
+        } else {
+            return Promise.resolve();
+        }
+    }
+
     protected attachListener(eventName: string, listener: (...args: any[]) => void): void {
         if (eventName === "beforeunload") {
             const win = this.window || window;
@@ -482,13 +498,14 @@ export class ElectronContainer extends WebContainerBase {
             this.getAllWindows().then(windows => {
                 windows.forEach(window => {
                     promises.push(new Promise<void>((innerResolve, innerReject) => {
-                        window.getGroup().then(group => {
+                        window.getGroup().then(async group => {
                             layout.windows.push(
                                 {
                                     id: window.id,
                                     name: window.name,
                                     url: window.innerWindow.webContents.getURL(),
                                     main: (mainWindow === window.innerWindow),
+                                    state: await window.getState(),
                                     options: window.innerWindow[Container.windowOptionsPropertyKey],
                                     bounds: window.innerWindow.getBounds(),
                                     group: group.map(win => win.id)

src/OpenFin/openfin.ts

@@ -163,6 +163,22 @@ export class OpenFinContainerWindow extends ContainerWindow {
         });
     }
 
+    public getState(): Promise<any> {
+        return new Promise<any>(resolve => {
+            (this.nativeWindow && (<any>this.nativeWindow).getState) ? resolve((<any>this.nativeWindow).getState()) : resolve(undefined);
+        });
+    }
+
+    public setState(state: any): Promise<void> {
+        return new Promise<void>(resolve => {
+            if (this.nativeWindow && (<any>this.nativeWindow).setState) {
+                (<any>this.nativeWindow).setState(state);
+            }
+
+            resolve();
+        });
+    }
+
     protected attachListener(eventName: string, listener: (...args: any[]) => void): void {
         if (eventName === "beforeunload") {
             this.innerWindow.addEventListener("close-requested", (e) => {
@@ -612,41 +628,42 @@ export class OpenFinContainer extends WebContainerBase {
     public saveLayout(name: string): Promise<PersistedWindowLayout> {
         const layout = new PersistedWindowLayout();
 
-        return new Promise<PersistedWindowLayout>((resolve, reject) => {
-            this.desktop.Application.getCurrent().getChildWindows(windows => {
-                const promises: Promise<void>[] = [];
-                const mainWindow = this.desktop.Application.getCurrent().getWindow();
-
-                windows.concat(mainWindow)
-                    .filter(window => window.name !== "queueCounter" && !window.name.startsWith(OpenFinContainer.notificationGuid))
-                    .forEach(window => {
-                        promises.push(new Promise<void>((innerResolve, innerReject) => {
-                            window.getBounds(bounds => {
-                                window.getOptions(options => {
-                                    delete (<any>options).show; // show is an undocumented option that interferes with the createWindow mapping of show -> autoShow
-                                    window.getGroup(group => {
-                                        layout.windows.push(
-                                            {
-                                                name: window.name,
-                                                id: window.name,
-                                                url: window.getNativeWindow() ? window.getNativeWindow().location.toString() : options.url,
-                                                main: (mainWindow.name === window.name),
-                                                options: options,
-                                                bounds: { x: bounds.left, y: bounds.top, width: bounds.width, height: bounds.height },
-                                                group: group.map(win => win.name)
-                                            });
-                                        innerResolve();
-                                    }, innerReject);
+        return new Promise<PersistedWindowLayout>(async (resolve, reject) => {
+            const windows = await this.getAllWindows();
+            const mainWindow = this.getMainWindow();
+            const promises: Promise<void>[] = [];
+
+            windows.filter(window => window.name !== "queueCounter" && !window.name.startsWith(OpenFinContainer.notificationGuid))
+                .forEach(djsWindow => {
+                    promises.push(new Promise<void>(async (innerResolve, innerReject) => {
+                        const state = await djsWindow.getState();
+                        const window = djsWindow.innerWindow;
+                        window.getBounds(bounds => {
+                            window.getOptions(options => {
+                                delete (<any>options).show; // show is an undocumented option that interferes with the createWindow mapping of show -> autoShow
+                                window.getGroup(group => {
+                                    layout.windows.push(
+                                        {
+                                            name: window.name,
+                                            id: window.name,
+                                            url: window.getNativeWindow() ? window.getNativeWindow().location.toString() : options.url,
+                                            main: (mainWindow && (mainWindow.name === window.name)),
+                                            options: options,
+                                            state: state,
+                                            bounds: { x: bounds.left, y: bounds.top, width: bounds.width, height: bounds.height },
+                                            group: group.map(win => win.name)
+                                        });
+                                    innerResolve();
                                 }, innerReject);
                             }, innerReject);
-                        }));
-                    });
+                        }, innerReject);
+                    }));
+                });
 
-                Promise.all(promises).then(() => {
-                    this.saveLayoutToStorage(name, layout);
-                    resolve(layout);
-                }).catch(reason => reject(reason));
-            });
+            Promise.all(promises).then(() => {
+                this.saveLayoutToStorage(name, layout);
+                resolve(layout);
+            }).catch(reason => reject(reason));
         });
     }
 }

src/container.ts

@@ -193,16 +193,19 @@ export abstract class ContainerBase extends Container {
 
                         // de-dupe window grouping
                         windows.forEach(window => {
-                            let found = false;
+                            const matchingWindow = layout.windows.find(win => win.name === window.name);
+                            if (matchingWindow && matchingWindow.state && window.setState) {
+                                window.setState(matchingWindow.state).catch(e => this.log("error", "Error invoking setState: " + e));
+                            }
 
+                            let found = false;
                             groupMap.forEach((targets, win) => {
                                 if (!found && targets.indexOf(window.id) >= 0) {
                                     found = true;
                                 }
                             });
 
                             if (!found) {
-                                const matchingWindow = layout.windows.find(win => win.name === window.name);
                                 const group = matchingWindow ? matchingWindow.group : undefined;
                                 if (group && group.length > 0) {
                                     groupMap.set(window, group.filter(id => id !== window.id));

src/window.ts

@@ -144,6 +144,16 @@ export abstract class ContainerWindow extends EventEmitter {
 
     public abstract getOptions(): Promise<any>;
 
+    /** Retrieves custom window state from underlying native window by invoking 'window.getState()' if defined. */
+    public getState(): Promise<any> {
+        return Promise.resolve(undefined);
+    }
+
+    /** Provide custom window state to underlying native window by invoking 'window.setState()' if defined */
+    public setState(state: any): Promise<void> {
+        return Promise.resolve();
+    }
+
     /** Gets the underlying native JavaScript window object. As some containers
      * do not support native access, check for undefined.
      */
@@ -265,6 +275,7 @@ export class PersistedWindow {
     public id: string;
     public bounds: any;
     public options?: any;
+    public state?: any;
     public url?: string;
     public main?: boolean;
     public group?: string[];

tests/unit/Default/default.spec.ts

@@ -3,6 +3,7 @@ import { DefaultContainerWindow, DefaultContainer, DefaultMessageBus } from "../
 class MockWindow {
     public listener: any;
 
+    public name: string = "Name";
     public focus(): void { };
     public show(): void { };
     public close(): Promise<void> { return Promise.resolve(); };
@@ -12,6 +13,8 @@ class MockWindow {
     public postMessage(message: string, origin: string): void { };
     public moveTo(x: number, y: number): void { };
     public resizeTo(width: number, height: number): void { }
+    public getState(): Promise<any> { return Promise.resolve(undefined); }
+    public setState(): Promise<void> { return Promise.resolve(); }
     public screenX: any = 0;
     public screenY: any = 1;
     public outerWidth: any = 2;
@@ -68,6 +71,46 @@ describe("DefaultContainerWindow", () => {
         expect(win.isShowing()).toBeDefined();
     });
 
+    describe("getState", () => {
+        it("getState undefined", (done) => {
+            let mockWindow = new MockWindow();
+            delete mockWindow.getState;            
+            let win = new DefaultContainerWindow(mockWindow);
+
+            win.getState().then(state => {
+                expect(state).toBeUndefined();
+            }).then(done);
+        });
+
+        it("getState defined", (done) => {
+            const mockState = { value: "Foo" };
+            spyOn(win.innerWindow, "getState").and.returnValue(Promise.resolve(mockState));
+            win.getState().then(state => {
+                expect(win.innerWindow.getState).toHaveBeenCalled();
+                expect(state).toEqual(mockState);
+            }).then(done);
+        });
+    });        
+
+    describe("setState", () => {
+        it("setState undefined", (done) => {
+            let mockWindow = new MockWindow();
+            delete mockWindow.setState;            
+            let win = new DefaultContainerWindow(mockWindow);
+
+            win.setState({}).then(done);
+        });
+
+        it("setState defined", (done) => {
+            const mockState = { value: "Foo" };
+            spyOn(win.innerWindow, "setState").and.returnValue(Promise.resolve());
+
+            win.setState(mockState).then(() => {
+                expect(win.innerWindow.setState).toHaveBeenCalledWith(mockState);
+            }).then(done);      
+        });
+    });
+
     it("getSnapshot rejects", (done) => {
         let success: boolean = false;
 
@@ -333,6 +376,7 @@ describe("DefaultContainer", () => {
             container.getAllWindows().then(wins => {
                 expect(wins).not.toBeNull();
                 expect(wins.length).toEqual(2);
+                wins.forEach(win => expect(win instanceof DefaultContainerWindow).toBeTruthy("Window is not of type DefaultContainerWindow"));
                 done();
             });
         });