From 43f5371ccf716b3d1704edcb7b39978e10516c65 Mon Sep 17 00:00:00 2001
From: Marat Abdullin <marata@microsoft.com>
Date: Thu, 27 Apr 2017 17:49:40 +0200
Subject: [PATCH] Adding the ability to trigger layout change (on web)
 explicitly. (#74)

---
 src/common/Interfaces.ts           |  3 +++
 src/native-common/UserInterface.ts |  4 ++++
 src/web/UserInterface.ts           | 17 ++++++++++++++++-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/common/Interfaces.ts b/src/common/Interfaces.ts
index 48401c92..69fa8e18 100644
--- a/src/common/Interfaces.ts
+++ b/src/common/Interfaces.ts
@@ -140,6 +140,9 @@ export abstract class UserInterface {
 
     // On-screen Keyboard
     abstract dismissKeyboard(): void;
+
+    // Explicit layout change indication
+    abstract layoutChangePending(): void;
 }
 
 export abstract class Modal {
diff --git a/src/native-common/UserInterface.ts b/src/native-common/UserInterface.ts
index 9b689bed..5bf1b81b 100644
--- a/src/native-common/UserInterface.ts
+++ b/src/native-common/UserInterface.ts
@@ -121,6 +121,10 @@ export class UserInterface extends RX.UserInterface {
     renderMainView() {
         // Nothing to do
     }
+
+    layoutChangePending() {
+        // Nothing to do
+    }
 }
 
 export default new UserInterface();
diff --git a/src/web/UserInterface.ts b/src/web/UserInterface.ts
index 1c2b3efa..2e2cff9a 100644
--- a/src/web/UserInterface.ts
+++ b/src/web/UserInterface.ts
@@ -18,6 +18,8 @@ import RX = require('../common/Interfaces');
 import Types = require('../common/Types');
 
 export class UserInterface extends RX.UserInterface {
+    private _layoutChangeAnimationFrame: number;
+
     measureLayoutRelativeToWindow(component: React.Component<any, any>) :
             SyncTasks.Promise<Types.LayoutInfo> {
 
@@ -92,7 +94,7 @@ export class UserInterface extends RX.UserInterface {
         }
 
         return pixelRatio;
-    }    
+    }
 
     setMainView(element: React.ReactElement<any>): void {
         FrontLayerViewManager.setMainView(element);
@@ -105,6 +107,19 @@ export class UserInterface extends RX.UserInterface {
     dismissKeyboard() {
         // Nothing to do
     }
+
+    layoutChangePending() {
+        if (!this._layoutChangeAnimationFrame) {
+            // ViewBase checks for the layout changes once a second or on window resize.
+            // To avoid laggy layout updates we can indicate that there is a change pending.
+            this._layoutChangeAnimationFrame = window.requestAnimationFrame(() => {
+                this._layoutChangeAnimationFrame = undefined;
+                let event = document.createEvent('HTMLEvents');
+                event.initEvent('resize', true, false);
+                window.dispatchEvent(event);
+            });
+        }
+    }
 }
 
 export default new UserInterface();