[gnome-shell/wip/carlosg/osk-emoji-and-keypad: 31/34] keyboard: Separate aspect ratio control to a container actor

[Carlos Garnacho <carlosg src gnome org>]

commit b71a3323645ca982dbf94b84f0f237c421ea837b
Author: Carlos Garnacho <carlosg gnome org>
Date:   Mon Jan 21 21:39:27 2019 +0100

    keyboard: Separate aspect ratio control to a container actor
    
    This will be useful as we want other panels (eg. emoji) to preserve aspect
    ratio with the rest of the OSK. Separate the aspect ratio management logic
    into this container that will be the parent of them all.

 js/ui/keyboard.js | 74 ++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 46 insertions(+), 28 deletions(-)
---
diff --git a/js/ui/keyboard.js b/js/ui/keyboard.js
index e8de11657..f77c67870 100644
--- a/js/ui/keyboard.js
+++ b/js/ui/keyboard.js
@@ -54,6 +54,43 @@ const defaultKeysPost = [
       [{ width: 1.5, action: 'languageMenu', extraClassName: 'layout-key' }, { width: 1.5, action: 'hide', 
extraClassName: 'hide-key' }] ],
 ];
 
+var AspectContainer = GObject.registerClass(
+class AspectContainer extends St.Widget {
+    _init(params) {
+        super._init(params);
+        this._ratio = 1;
+    }
+
+    setRatio(relWidth, relHeight) {
+        this._ratio = relWidth / relHeight;
+        this.queue_relayout();
+    }
+
+    vfunc_allocate(box, flags) {
+        if (box.get_width() > 0 && box.get_height() > 0) {
+            let sizeRatio = box.get_width() / box.get_height();
+
+            if (sizeRatio >= this._ratio) {
+                /* Restrict horizontally */
+                let width = box.get_height() * this._ratio;
+                let diff = box.get_width() - width;
+
+                box.x1 += Math.floor(diff / 2);
+                box.x2 -= Math.ceil(diff / 2);
+            } else {
+                /* Restrict vertically */
+                let height = box.get_width() / this._ratio;
+                let diff = box.get_height() - height;
+
+                box.y1 += Math.floor(diff / 2);
+                box.y2 -= Math.floor(diff / 2);
+            }
+        }
+
+        super.vfunc_allocate(box, flags);
+    }
+});
+
 var KeyContainer = GObject.registerClass(
 class KeyContainer extends St.Widget {
     _init() {
@@ -97,32 +134,7 @@ class KeyContainer extends St.Widget {
         this._maxCols = Math.max(this._currentCol, this._maxCols);
     }
 
-    vfunc_allocate(box, flags) {
-        if (box.get_width() > 0 && box.get_height() > 0 && this._maxCols > 0) {
-            let keyboardRatio = this._maxCols / this._rows.length;
-            let sizeRatio = box.get_width() / box.get_height();
-
-            if (sizeRatio >= keyboardRatio) {
-                /* Restrict horizontally */
-                let width = box.get_height() * keyboardRatio;
-                let diff = box.get_width() - width;
-
-                box.x1 += Math.floor(diff / 2);
-                box.x2 -= Math.ceil(diff / 2);
-            } else {
-                /* Restrict vertically */
-                let height = box.get_width() / keyboardRatio;
-                let diff = box.get_height() - height;
-
-                box.y1 += Math.floor(diff / 2);
-                box.y2 -= Math.floor(diff / 2);
-            }
-        }
-
-        super.vfunc_allocate(box, flags);
-    }
-
-    layoutButtons() {
+    layoutButtons(container) {
         let nCol = 0, nRow = 0;
 
         for (let i = 0; i < this._rows.length; i++) {
@@ -149,6 +161,9 @@ class KeyContainer extends St.Widget {
             nRow += KEY_SIZE;
             nCol = 0;
         }
+
+        if (container)
+            container.setRatio(this._maxCols, this._rows.length);
     }
 });
 
@@ -679,6 +694,9 @@ var Keyboard = class Keyboard {
                        { x_align: St.Align.MIDDLE,
                          x_fill: false });
 
+        this._aspectContainer = new AspectContainer({ layout_manager: new Clutter.BinLayout() });
+        this.actor.add(this._aspectContainer, { expand: true, x_fill: true, y_fill: true });
+
         this._ensureKeysForGroup(this._keyboardController.getCurrentGroup());
         this._setActiveLayer(0);
 
@@ -736,8 +754,8 @@ var Keyboard = class Keyboard {
 
             this._loadRows(currentLevel, level, levels.length, layout);
             layers[level] = layout;
-            this.actor.add(layout, { expand: true });
-            layout.layoutButtons();
+            this._aspectContainer.add_child(layout);
+            layout.layoutButtons(this._aspectContainer);
 
             layout.hide();
         }