[gnome-shell/wip/paging] First attempt of pagination with St.ScrollView work done: -Applications divided into pages -Scroll w

[Carlos Soriano <csoriano src gnome org>]

commit f816237ffb2dbd4595c59cb18cffc6bc15d21d6e
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Wed Jun 19 18:33:33 2013 +0200

    First attempt of pagination with St.ScrollView
    work done:
    -Applications divided into pages
    -Scroll working to change between pages

 js/ui/appDisplay.js |  103 +++++++++++++++++++-------------------------------
 js/ui/iconGrid.js   |   56 ++++++++++++---------------
 2 files changed, 64 insertions(+), 95 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 3a24526..e1eeb4d 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -230,18 +230,33 @@ const AppPage = new Lang.Class({
 });
 const PaginationScrollActor = new Lang.Class({
     Name: 'PaginationScrollActor',
-    Extends: Clutter.ScrollActor,
+    Extends: St.ScrollView,
     
-    setPageController: function(page) {
-        this._page = page;
+    _init: function() {
+        this.parent();
+        this._box = new St.BoxLayout({vertical: true, x_align: St.Align.MIDDLE, y_align: St.Align.MIDDLE});
+        this._page = new AppPage();
+       
+        this._box.add_actor(this._page.actor);
+        this.add_actor(this._box);
+        this.set_reactive(true);
+        this.connect('scroll-event', Lang.bind(this, function(actor, event) {
+            global.log("scroll! "+event.get_scroll_direction());
+            let direction = event.get_scroll_direction();
+            if (direction == Clutter.ScrollDirection.UP)
+                this.goToPreviousPage();
+            if (direction == Clutter.ScrollDirection.DOWN)
+                this.goToNextPage();
+        }));
+        
     },
     
     vfunc_get_preferred_height: function (container, forWidht) {
-        return [0,0];
+        return [0, 0];
     },
 
     vfunc_get_preferred_width: function(container, forHeight) {
-        return [0,0];
+        return [0, 0];
     },
     
     vfunc_allocate: function(box, flags) {
@@ -249,31 +264,35 @@ const PaginationScrollActor = new Lang.Class({
         //Retrieve parent size
         box = this.get_parent().allocation;
         this.set_allocation(box, flags);
+        //this.set_allocation(box, flags);
         
         let availWidth = box.x2 - box.x1;
         let availHeight = box.y2 - box.y1;
         
         let childBox = new Clutter.ActorBox();
-        let child = this.get_children()[0];
+        let child = this.get_children()[2];
         let childWidth = child.get_preferred_width(availHeight)[1];
         let childHeight = child.get_preferred_height(availWidth)[1];
         childBox.x1 = (availWidth - childWidth)/2;
         childBox.y1 = 0;
         childBox.x2 = childBox.x1 + childWidth;
         childBox.y2 = availHeight;   
-
-        child.allocate(childBox, flags);
-        global.log("PAGES!!!" + this._page._grid.nPages());
         
-        //this.scroll_to_point(this._page._grid.goToNextPage());
+        //Put parentSize in grid
+        this._page._grid._parentHeight = availHeight;
+        
+        global.log("PAGES!!!" + this._page._grid.nPages());
+        global.log("ADJUSTMENT before" + this.vscroll.adjustment.get_values());
+        //this.vscroll.adjustment= new St.Adjustment({lower:0, upper:3000, value:1900, step_increment:145, 
page_increment:726, page_size:872});
+        child.allocate(childBox, flags);
+        global.log("ADJUSTMENT " + this.vscroll.adjustment.get_values());
     },
     
     goToNextPage: function() {
-        this.scroll_to_point(this._page._grid.goToNextPage());
-    }, 
-    
+        this.vscroll.adjustment.set_value(this._page._grid.goToNextPage());
+    },
     goToPreviousPage: function() {
-        this.scroll_to_point(this._page._grid.goToPreviousPage());
+        this.vscroll.adjustment.set_value(this._page._grid.goToPreviousPage());
     }
 });
 
@@ -282,29 +301,9 @@ const AllView = new Lang.Class({
    
     _init: function() {
        
-        this.actor = new PaginationScrollActor({layout_manager: new Clutter.BinLayout()});
-        this._box = new St.BoxLayout({vertical: true, x_align: St.Align.MIDDLE, y_align: St.Align.MIDDLE});
-        this._page = new AppPage();
-        this._labels = [];
-        /*
-        for(let i = 0; i<100; i++) {
-            this._labels[i] = new St.Label({ text: "TESSSSST "+i});
-            this._box.add_actor(this._labels[i]);
-        }*/
-       
-        this._box.add_actor(this._page.actor);
-        this.actor.add_actor(this._box);
-        this.actor.setPageController(this._page);
-        this.actor.set_reactive(true);
+        this.actor = new PaginationScrollActor();
+        
 
-        this.actor.connect('scroll-event', Lang.bind(this, function(actor, event) {
-            global.log("scroll! "+event.get_scroll_direction());
-            let direction = event.get_scroll_direction();
-            if (direction == Clutter.ScrollDirection.UP)
-                this.actor.goToPreviousPage();
-            if (direction == Clutter.ScrollDirection.DOWN)
-                this.actor.goToNextPage();
-        }));
         
         /*this._actorLayoutManager = new AllViewLayout();
         global.log(" SERAAA?? " + this.actor.scroll_to_point);
@@ -396,30 +395,6 @@ const AllView = new Lang.Class({
         return false;
     },
    
-        _allocate: function(box, flags) {
-        this.set_allocation(box, flags);
-        global.log("ALLOCATIONS!!!!!!");
-        global.log("Allocation width "+ this.clip_rect.size.width);
-        global.log("Allocation heithg "+ this.clip_rect.size.height);
-        global.log("Allocation box "+ [box.x2 - box.x1, box.y2 - box.y1]);
-        let availWidth = box.x2 - box.x1;
-        let availHeight = box.y2 - box.y1;
-        //this._label.allocate(box, flags);
-        this._box.allocate(box, flags);
-        /*
-        this._page._grid.parentSize = [availWidth, availHeight];
-        this._widgetLayoutManager.parentSize = [availWidth, availHeight];
-        this._actorLayoutManager.parentSize = [availWidth, availHeight];
-        this._box.allocate(box, flags);
-        */
-    },
-    
-    _allocate: function(actor, box, flags) {
-        let availWidth = box.x2 - box.x1;
-        let availHeight = box.y2 - box.y1;
-        this._page._grid.parentSize = [availWidth, availHeight];
-    },
-   
     _onPan: function(action) {
         /*
         this._clickAction.release();
@@ -431,14 +406,14 @@ const AllView = new Lang.Class({
     },
 
     addApp: function(app) {
-       let appIcon = this._page.addItem(app);
+       let appIcon = this.actor._page.addItem(app);
         /*if (appIcon)
             appIcon.actor.connect('key-focus-in',
                                   Lang.bind(this, this._ensureIconVisible));*/
     },
 
     addFolder: function(dir) {
-        let folderIcon = this._page.addItem(dir);
+        let folderIcon = this.actor._page.addItem(dir);
         /*if (folderIcon)
             folderIcon.actor.connect('key-focus-in',
                                      Lang.bind(this, this._ensureIconVisible));*/
@@ -475,11 +450,11 @@ const AllView = new Lang.Class({
     },
    
     removeAll: function() {
-        this._page.removeAll();
+        this.actor._page.removeAll();
     },
 
     loadGrid: function() {
-        this._page.loadGrid();
+        this.actor._page.loadGrid();
         //global.log("ZZZ visible items after load grid " + this._page._grid.visibleItemsCount());
     }
 });
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 2353222..ce8eaac 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -182,8 +182,6 @@ const IconGrid = new Lang.Class({
         this._colLimit = params.columnLimit;
         this._xAlign = params.xAlign;
         this._fillParent = params.fillParent;
-        
-        this._fillParentV2 = false;
 
         this.actor = new St.BoxLayout({ style_class: 'icon-grid',
                                         vertical: true });
@@ -235,7 +233,7 @@ const IconGrid = new Lang.Class({
             return;
 
         let children = this._getVisibleChildren();
-        //global.log("Num children visible"  + children.length);
+        global.log("Num children visible"  + children.length);
         let nColumns, spacing;
         if (forWidth < 0) {
             nColumns = children.length;
@@ -251,11 +249,18 @@ const IconGrid = new Lang.Class({
             nRows = 0;
         if (this._rowLimit)
             nRows = Math.min(nRows, this._rowLimit);
-        //global.log("Rows "+nRows);
-        //global.log("Columns "+nColumns);
         let totalSpacing = Math.max(0, nRows - 1) * spacing;
         let height = nRows * this._vItemSize + totalSpacing;
-        global.log("getPreferredHeigth Heigth "+height);
+        if(this._parentHeight) {
+            let rowsPerPage = Math.floor(this._parentHeight / (this._vItemSize + spacing));
+            let spacePerRow = this._vItemSize + spacing;
+            this._nPages = Math.ceil(nRows / rowsPerPage);
+            this._spaceBetweenPages = this._parentHeight - (rowsPerPage * (this._vItemSize + spacing));
+            let spaceBetweenPagesTotal = this._spaceBetweenPages * (this._nPages); 
+            alloc.min_size = rowsPerPage* spacePerRow * this._nPages + spaceBetweenPagesTotal;
+            alloc.natural_size = rowsPerPage* spacePerRow * this._nPages + spaceBetweenPagesTotal;
+            return;
+        }
         alloc.min_size = height;
         alloc.natural_size = height;
     },
@@ -264,7 +269,6 @@ const IconGrid = new Lang.Class({
         
         let firstTime = true;
         let maxChildsPerPage = 0;
-        let spacingBetweenPages = 0;
         if (this._fillParent) {
             // Reset the passed in box to fill the parent
             let parentBox = this.actor.get_parent().allocation;
@@ -301,10 +305,8 @@ const IconGrid = new Lang.Class({
         let rowIndex = 0;
         let count1 = 0;
         let count2 = 0;
-        let parentBox = this.actor.get_parent().allocation;
-        let parentAvailWidth = parentBox.x2 - parentBox.x1;
-        let parentAvailHeight = parentBox.y2 - parentBox.y1;
-        global.log("IconGrid allocation, parent box "+ parentAvailWidth + " " + parentAvailHeight);
+
+        global.log("IconGrid allocation, parent box "+ this._parentHeight);
         if(children.length > 0) {
             this._firstPagesItems = [children[0]];
         }
@@ -312,17 +314,17 @@ const IconGrid = new Lang.Class({
             let childBox = this._calculateChildrenBox(children[i], x, y);
             
             if (this._rowLimit && rowIndex >= this._rowLimit ||
-                 childBox.y2 > availHeight || this._fillParentV2 && (childBox.y2 > parentAvailHeight) ) {
+                 childBox.y2 > availHeight || this._parentHeight && (childBox.y2 > this._parentHeight) ) {
                 if(firstTime) {
                     maxChildsPerPage = count2;
                     global.log("MAx children per page " + maxChildsPerPage);
                     firstTime = false;
-                    spacingBetweenPages = parentAvailHeight - ( children[i-1].y + children[i-1].size.height);
+                    spacingBetweenPages = this._parentHeight - ( children[i-1].y + 
children[i-1].size.height);
                     if(i < children.length) {
                         this._firstPagesItems.push(children[i]);
                     }
-                    y+= spacingBetweenPages;
-                    global.log("Spacing between pages " + spacingBetweenPages);
+                    y+= this._spaceBetweenPages;
+                    global.log("Spacing between pages " + this._spaceBetweenPages);
                     // Recalculate child box
                     childBox = this._calculateChildrenBox(children[i], x, y);
                 }
@@ -345,7 +347,7 @@ const IconGrid = new Lang.Class({
             if (columnIndex == 0) {
                 y += this._vItemSize + spacing;
                 if(!firstTime && count1 % maxChildsPerPage == 0) {
-                    y+= spacingBetweenPages;
+                    y+= this._spaceBetweenPages;
                     if(i < children.length) {
                         this._firstPagesItems.push(children[i+1]);
                     }
@@ -355,10 +357,6 @@ const IconGrid = new Lang.Class({
                 x += this._hItemSize + spacing;
             }
         }
-        /*global.log("Final count 1 " + count1);
-        global.log("Final count 2 " + count2);
-        global.log("Final n children " + this._grid.get_n_children());
-        global.log("Final n skip " + this._grid.get_n_skip_paint());*/
         global.log("WE NEED N PAGES " + this.nPages());
     },
 
@@ -445,34 +443,30 @@ const IconGrid = new Lang.Class({
     },
     
     nPages: function() {
-        return this._firstPagesItems.length;
+        return this._nPages;
     },
     
     goToNextPage: function() {
-        if(this._firstPagesItems.length == 0) {
+        if(this._nPages == 0) {
             return;
         }
         if(this._currentPage + 1 < this._firstPagesItems.length) {
             this._currentPage++;
         }
-        let point = new Clutter.Point();
         let childBox = this._firstPagesItems[this._currentPage].get_allocation_box();
-        point.x = childBox.x1;
-        point.y = childBox.y1;
-        return point;
+        let scrollY = childBox.y1;
+        return scrollY;
     },
     
     goToPreviousPage: function() {
-        if(this._firstPagesItems.length == 0) {
+        if(this._nPages == 0) {
             return;
         }
         if(this._currentPage - 1 > -1) {
             this._currentPage--;
         }
-        let point = new Clutter.Point();
         let childBox = this._firstPagesItems[this._currentPage].get_allocation_box();
-        point.x = childBox.x1;
-        point.y = childBox.y1;
-        return point;
+        let scrollY = childBox.y1;
+        return scrollY;
     }
 });