[gnome-shell/gbsneto/pagination: 58/70] iconGrid: Adapt grid layout according to available size

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 76804de806fc33cbfe7e3e6558788d6c7ce2483a
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Tue May 19 14:19:05 2020 -0300

    iconGrid: Adapt grid layout according to available size
    
    The new icon grid layout operates based on rows and columns, and
    doesn't try to dynamically adapt it to fit to the container. In
    this case, it is better to have a pre-defined set of well-known,
    well-tested rows and columns, and switch between them based on
    the aspect ratio of the screen.
    
    Introduce a set of modes to the icon grid, and select the mode
    that is closest to the aspect ratio.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1271

 js/ui/iconGrid.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
---
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 5ef4a50338..a0935d5950 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -33,6 +33,25 @@ var APPICON_ANIMATION_OUT_TIME = 250;
 
 const ICON_POSITION_DELAY = 25;
 
+const defaultGridModes = [
+    {
+        rows: 8,
+        columns: 3,
+    },
+    {
+        rows: 6,
+        columns: 4,
+    },
+    {
+        rows: 4,
+        columns: 6,
+    },
+    {
+        rows: 3,
+        columns: 8,
+    },
+];
+
 var BaseIcon = GObject.registerClass(
 class BaseIcon extends St.Bin {
     _init(label, params) {
@@ -1150,7 +1169,9 @@ var IconGrid = GObject.registerClass({
             y_expand: true,
         });
 
+        this._gridModes = defaultGridModes;
         this._currentPage = 0;
+        this._currentMode = -1;
         this._clonesAnimating = [];
 
         this.connect('actor-added', this._childAdded.bind(this));
@@ -1190,6 +1211,38 @@ var IconGrid = GObject.registerClass({
         });
     }
 
+    _setGridMode(modeIndex) {
+        if (this._currentMode === modeIndex)
+            return;
+
+        this._currentMode = modeIndex;
+
+        if (modeIndex !== -1) {
+            const newMode = this._gridModes[modeIndex];
+
+            this.layout_manager.rows_per_page = newMode.rows;
+            this.layout_manager.columns_per_page = newMode.columns;
+        }
+    }
+
+    _findBestModeForSize(width, height) {
+        const sizeRatio = width / height;
+        let closestRatio = Infinity;
+        let bestMode = -1;
+
+        for (let modeIndex in this._gridModes) {
+            const mode = this._gridModes[modeIndex];
+            const modeRatio = mode.columns / mode.rows;
+
+            if (Math.abs(sizeRatio - modeRatio) < Math.abs(sizeRatio - closestRatio)) {
+                closestRatio = modeRatio;
+                bestMode = modeIndex;
+            }
+        }
+
+        this._setGridMode(bestMode);
+    }
+
     _childRemoved(grid, child) {
         child.disconnect(child._iconGridKeyFocusInId);
         delete child._iconGridKeyFocusInId;
@@ -1374,6 +1427,7 @@ var IconGrid = GObject.registerClass({
     }
 
     adaptToSize(width, height) {
+        this._findBestModeForSize(width, height);
         this.layout_manager.adaptToSize(width, height);
     }
 
@@ -1494,6 +1548,11 @@ var IconGrid = GObject.registerClass({
         });
     }
 
+    setGridModes(modes) {
+        this._gridModes = modes ? modes : defaultGridModes;
+        this.queue_relayout();
+    }
+
     get itemsPerPage() {
         const layoutManager = this.layout_manager;
         return layoutManager.rows_per_page * layoutManager.columns_per_page;