[the-board/selection-toolbar: 3/3] initial work on selection toolbar

[Lucas Rocha <lucasr src gnome org>]

commit 2b1ba7d4e8205eb9b5725bc788660f6439f08009
Author: Lucas Rocha <lucasr gnome org>
Date:   Mon Jan 24 00:49:41 2011 +0000

    initial work on selection toolbar

 src/js/ui/mainWindow.js |   97 ++++++++++++++++++++++++++++++++++++++++++++--
 src/js/ui/page.js       |   92 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 184 insertions(+), 5 deletions(-)
---
diff --git a/src/js/ui/mainWindow.js b/src/js/ui/mainWindow.js
index 8a73377..7ebd186 100644
--- a/src/js/ui/mainWindow.js
+++ b/src/js/ui/mainWindow.js
@@ -69,7 +69,8 @@ MainWindow.prototype = {
         this._createContentBox();
 
         this._createContext();
-        this._createToolbar();
+        this._createMainToolbar();
+        this._createSelectionToolbar();
         this._createSpinner();
 
         // show loading screen as soon as possible
@@ -205,7 +206,7 @@ MainWindow.prototype = {
                                                       this._onStartupBoxTimeout))
     },
 
-    _createToolbar : function() {
+    _createMainToolbar : function() {
         this._mainToolbar = new Toolbar.Toolbar();
 
         this._mainToolbar.actor.depth = _LAYER_TOOLBOX;
@@ -224,6 +225,25 @@ MainWindow.prototype = {
         this._updateActiveToolbar();
     },
 
+    _createSelectionToolbar : function() {
+        this._selectionToolbar =
+            new Toolbar.Toolbar({ title: Gettext.gettext("Selection"),
+                                  visible: false });
+
+        this._selectionToolbar.actor.depth = _LAYER_TOOLBOX;
+
+        this._createToolBoxAlign();
+        this._createToolBoxDistribute();
+        this._createToolBoxRemove();
+
+        this._contentBox.append(this._selectionToolbar.actor,
+                                Tb.BoxPackFlags.FIXED);
+
+        this._contentBox.set_fixed_child_align(this._selectionToolbar.actor,
+                                               Tb.BoxAlignment.CENTER,
+                                               Tb.BoxAlignment.START);
+    },
+
     _createSpinner : function() {
         this._spinnerBox =
             new Tb.Box({ orientation: Tb.BoxOrientation.VERTICAL,
@@ -254,6 +274,53 @@ MainWindow.prototype = {
         this._mainToolbar.addToolBox(this._toolBoxPages);
     },
 
+    _createToolBoxAlign : function() {
+        this._toolBoxAlign =
+            new ToolBox.ToolBox({ title: Gettext.gettext("Align") });
+
+        this._toolBoxAlign.addButton({ label: Gettext.gettext("Left"),
+                                       actionName: "align",
+                                       actionArgs: { alignment: Page.Alignment.LEFT } });
+
+        this._toolBoxAlign.addButton({ label: Gettext.gettext("Right"),
+                                       actionName: "align",
+                                       actionArgs: { alignment: Page.Alignment.RIGHT } });
+
+        this._toolBoxAlign.addButton({ label: Gettext.gettext("Top"),
+                                       actionName: "align",
+                                       actionArgs: { alignment: Page.Alignment.TOP } });
+
+        this._toolBoxAlign.addButton({ label: Gettext.gettext("Bottom"),
+                                       actionName: "align",
+                                       actionArgs: { alignment: Page.Alignment.BOTTOM } });
+
+        this._selectionToolbar.addToolBox(this._toolBoxAlign);
+    },
+
+    _createToolBoxDistribute : function() {
+        this._toolBoxDistribute =
+            new ToolBox.ToolBox({ title: Gettext.gettext("Distribute") });
+
+        this._toolBoxDistribute.addButton({ label: Gettext.gettext("Vertical"),
+                                            actionName: "distribute",
+                                            actionArgs: { orientation: "vertical" } });
+
+        this._toolBoxDistribute.addButton({ label: Gettext.gettext("Horizontal"),
+                                            actionName: "distribute",
+                                            actionArgs: { orientation: "vertical" } });
+
+        this._selectionToolbar.addToolBox(this._toolBoxDistribute);
+    },
+
+    _createToolBoxRemove : function() {
+        this._toolBoxRemove = new ToolBox.ToolBox();
+
+        this._toolBoxRemove.addButton({ label: Gettext.gettext("Remove"),
+                                        actionName: "remove" });
+
+        this._selectionToolbar.addToolBox(this._toolBoxRemove);
+    },
+
     _createToolBoxThings : function() {
         this._toolBoxThings =
             new ToolBoxThings.ToolBoxThings({ mainWindow: this });
@@ -365,6 +432,9 @@ MainWindow.prototype = {
         if (this._currentPage &&
             this._currentPage.activeThing) {
             activeToolbar = this._thingToolbar;
+        } else if (this._currentPage &&
+                   this._currentPage.selectedThings.length > 1) {
+            activeToolbar = this._selectionToolbar;
         } else {
             activeToolbar = this._mainToolbar;
         }
@@ -677,10 +747,11 @@ MainWindow.prototype = {
             return;
         }
 
-        if (this._currentPage &&
-            this._currentPage.activeThing) {
-            this._currentPage.activeThing.doAction(actionName, actionArgs);
+        if (!this._currentPage) {
+            return;
         }
+
+        this._currentPage.doAction(actionName, actionArgs);
     },
 
     _onClipboardTextReceived : function(clipboard, text, data) {
@@ -804,6 +875,10 @@ MainWindow.prototype = {
         }
     },
 
+    _onPageSelectedThingsChanged : function() {
+        this._updateActiveToolbar();
+    },
+
     setCurrentPage : function(pageModel) {
         if (this._currentPage &&
             this._currentPage.model.id == pageModel.id) {
@@ -821,6 +896,9 @@ MainWindow.prototype = {
 
             oldCurrentPage.disconnect(this._pageLoadedChangedId);
             delete this._pageLoadedChangedId;
+
+            oldCurrentPage.disconnect(this._pageSelectedThingsChangedId);
+            delete this._pageSelectedThingsChangedId;
         }
 
         this._currentPage = new Page.Page({ context: this._context,
@@ -842,6 +920,10 @@ MainWindow.prototype = {
             this._currentPage.connect("loaded-changed",
                                       Lang.bind(this, this._onPageLoadedChanged));
 
+        this._pageSelectedThingsChangedId =
+            this._currentPage.connect("selected-things-changed",
+                                      Lang.bind(this, this._onPageSelectedThingsChanged));
+
         if (oldCurrentPage) {
             let onModelSaved = function() {
                 this._setSavingOldCurrentPage(false);
@@ -900,6 +982,11 @@ MainWindow.prototype = {
             delete this._pageLoadedChangedId;
         }
 
+        if (this._pageSelectedThingsChangedId) {
+            this._currentPage.disconnect(this._pageSelectedThingsChangedId);
+            delete this._pageSelectedThingsChangedId;
+        }
+
         if (this._mainBox) {
             this._mainBox.destroy();
             delete this._mainBox;
diff --git a/src/js/ui/page.js b/src/js/ui/page.js
index a2430da..c1323d4 100644
--- a/src/js/ui/page.js
+++ b/src/js/ui/page.js
@@ -38,6 +38,13 @@ const _NEW_THING_ROWS_INC = 10;
 const _N_COLS_SLIDE_IN = 3;
 const _N_ROWS_SLIDE_IN = 3;
 
+let Alignment = {
+    LEFT   : 0,
+    RIGHT  : 1,
+    TOP    : 2,
+    BOTTOM : 3
+};
+
 function Page(args) {
     this._init(args);
 }
@@ -421,6 +428,77 @@ Page.prototype = {
         }
     },
 
+    _alignSelectedThings : function(alignment) {
+        let alignmentCoord = -1;
+
+        let updateAlignmentCoord = function(thing) {
+            let area = thing.area;
+
+            switch(alignment) {
+            case Alignment.LEFT:
+                if (alignmentCoord < 0 ||
+                    alignmentCoord > area.x1) {
+                    alignmentCoord = area.x1;
+                }
+                break;
+
+            case Alignment.RIGHT:
+                if (alignmentCoord < 0 ||
+                    alignmentCoord < area.x2) {
+                    alignmentCoord = area.x2;
+                }
+                break;
+
+            case Alignment.TOP:
+                if (alignmentCoord < 0 ||
+                    alignmentCoord > area.y1) {
+                    alignmentCoord = area.y1;
+                }
+                break;
+
+            case Alignment.BOTTOM:
+                if (alignmentCoord < 0 ||
+                    alignmentCoord < area.y2) {
+                    alignmentCoord = area.y2;
+                }
+                break;
+            }
+        };
+
+        this._selectedThings.forEach(updateAlignmentCoord);
+
+        let moveThing = function(thing) {
+            let area = thing.area;
+
+            let x, y;
+
+            switch(alignment) {
+            case Alignment.LEFT:
+                x = alignmentCoord;
+                y = area.y1;
+                break;
+
+            case Alignment.RIGHT:
+                x = alignmentCoord - (area.x2 - area.x1);
+                y = area.y1;
+                break;
+
+            case Alignment.TOP:
+                x = area.x1;
+                y = alignmentCoord;
+                break;
+
+            case Alignment.BOTTOM:
+                x = area.x1;
+                y = alignmentCoord - (area.y2 - area.y1);
+            }
+
+            thing.setPosition(x, y);
+        };
+
+        this._selectedThings.forEach(moveThing);
+    },
+
     _onMainBoxClicked : function(o, event) {
         if (this._cancelSelectionOnClick) {
             this.unselectAllThings();
@@ -554,6 +632,8 @@ Page.prototype = {
         }
 
         this._updateDragArea();
+
+        this.emit("selected-things-changed");
     },
 
     setActiveThing : function(activeThing) {
@@ -685,6 +765,18 @@ Page.prototype = {
         this._things.forEach(unselectThing);
     },
 
+    doAction : function(actionName, actionArgs) {
+        if (this._activeThing) {
+            this._activeThing.doAction(actionName, actionArgs);
+        } else if (this._selectedThings.length > 1) {
+            if (actionName == "align") {
+                this._alignSelectedThings(actionArgs.alignment);
+            } else if (actionName == "distribute") {
+                print('distribute');
+            }
+        }
+    },
+
     destroy : function() {
         this._destroyAllThings();