[the-board/selection-toolbar: 5/5] more stuff

[Lucas Rocha <lucasr src gnome org>]

commit b251df56f023123ffd3392fe809783b3f2dd7dbb
Author: Lucas Rocha <lucasr gnome org>
Date:   Tue Jan 25 11:06:04 2011 +0000

    more stuff

 src/js/ui/mainWindow.js |   18 +++++++---
 src/js/ui/page.js       |   80 +++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 82 insertions(+), 16 deletions(-)
---
diff --git a/src/js/ui/mainWindow.js b/src/js/ui/mainWindow.js
index 7ebd186..2475d52 100644
--- a/src/js/ui/mainWindow.js
+++ b/src/js/ui/mainWindow.js
@@ -301,13 +301,19 @@ MainWindow.prototype = {
         this._toolBoxDistribute =
             new ToolBox.ToolBox({ title: Gettext.gettext("Distribute") });
 
-        this._toolBoxDistribute.addButton({ label: Gettext.gettext("Vertical"),
-                                            actionName: "distribute",
-                                            actionArgs: { orientation: "vertical" } });
+        let verticalArgs =
+            { label: Gettext.gettext("Vertical"),
+              actionName: "distribute",
+              actionArgs: { orientation: Page.Orientation.VERTICAL } };
 
-        this._toolBoxDistribute.addButton({ label: Gettext.gettext("Horizontal"),
-                                            actionName: "distribute",
-                                            actionArgs: { orientation: "vertical" } });
+        this._toolBoxDistribute.addButton(verticalArgs);
+
+        let horizontalArgs =
+            { label: Gettext.gettext("Horizontal"),
+              actionName: "distribute",
+              actionArgs: { orientation: Page.Orientation.HORIZONTAL } };
+
+        this._toolBoxDistribute.addButton(horizontalArgs);
 
         this._selectionToolbar.addToolBox(this._toolBoxDistribute);
     },
diff --git a/src/js/ui/page.js b/src/js/ui/page.js
index 5958059..df0749a 100644
--- a/src/js/ui/page.js
+++ b/src/js/ui/page.js
@@ -25,6 +25,9 @@ const _LAYER_SELECTION    = 0.4;
 const _ADD_THING_TIME = 0.5;
 const _ADD_THING_TRANSITION = 'easeOutCubic';
 
+const _MOVE_THING_TIME = 0.5;
+const _MOVE_THING_TRANSITION = 'easeOutCubic';
+
 const _SET_BACKGROUND_TIME = 0.3;
 const _SET_BACKGROUND_TRANSITION = 'easeOutCubic';
 
@@ -45,6 +48,11 @@ let Alignment = {
     BOTTOM : 3
 };
 
+let Orientation = {
+    VERTICAL   : 0,
+    HORIZONTAL : 1
+};
+
 function Page(args) {
     this._init(args);
 }
@@ -428,6 +436,19 @@ Page.prototype = {
         }
     },
 
+    _animateMoveThing : function(thing, x, y) {
+        thing.actor.anchorX = x - thing.area.x1;
+        thing.actor.anchorY = y - thing.area.y1;
+
+        thing.setPosition(x, y);
+
+        Tweener.addTween(thing.actor,
+                         { anchorX: 0,
+                           anchorY: 0,
+                           time: _MOVE_THING_TIME,
+                           transition: _MOVE_THING_TRANSITION });
+    },
+
     _alignSelectedThings : function(alignment) {
         let alignmentCoord = -1;
 
@@ -493,19 +514,58 @@ Page.prototype = {
                 y = alignmentCoord - (area.y2 - area.y1);
             }
 
-            thing.actor.anchorX = x - area.x1;
-            thing.actor.anchorY = y - area.y1;
+            this._animateMoveThing(thing, x, y);
+        };
+
+        this._selectedThings.forEach(Lang.bind(this, moveThing));
+    },
+
+    _distributeSelectedThings : function(orientation) {
+        let sortByCoord = function(thingA, thingB) {
+            switch(orientation) {
+            case Orientation.VERTICAL:
+                return thingA.area.x1 - thingB.area.x1;
+                break;
+
+            case Orientation.HORIZONTAL:
+                return thingA.area.y1 - thingB.area.y1;
+                break;
+            }
+
+            return 0;
+        };
+
+        this._selectedThings.sort(sortByCoord);
+
+        let currentCoord = -1;
 
-            thing.setPosition(x, y);
+        let moveThing = function(thing) {
+            let area = thing.area;
+
+            if (currentCoord < 0) {
+                currentCoord = area.x1;
+            }
 
-            Tweener.addTween(thing.actor,
-                             { anchorX: 0,
-                               anchorY: 0,
-                               time: _ADD_THING_TIME,
-                               transition: _ADD_THING_TRANSITION });
+            let x, y;
+
+            switch(orientation) {
+            case Orientation.VERTICAL:
+                x = 100;
+                y = currentCoord;
+                currentCoord += (area.y2 - area.y1) + 10;
+                break;
+
+            case Orientation.HORIZONTAL:
+                x = currentCoord;
+                y = 100;
+                currentCoord += (area.x2 - area.x1) + 20;
+                break;
+            }
+
+            this._animateMoveThing(thing, x, y);
         };
 
-        this._selectedThings.forEach(moveThing);
+        this._selectedThings.forEach(Lang.bind(this, moveThing));
     },
 
     _onMainBoxClicked : function(o, event) {
@@ -781,7 +841,7 @@ Page.prototype = {
             if (actionName == "align") {
                 this._alignSelectedThings(actionArgs.alignment);
             } else if (actionName == "distribute") {
-                print('distribute');
+                this._distributeSelectedThings(actionArgs.orientation);
             }
         }
     },