[the-board] [ui] Add ability to select/unselect things in Page

[Lucas Rocha <lucasr src gnome org>]

commit f14e9bcf88430fe71ef3463ebd2d9f36b36233e3
Author: Lucas Rocha <lucasr gnome org>
Date:   Thu Jan 13 01:28:55 2011 +0000

    [ui] Add ability to select/unselect things in Page
    
    Selection is done buy dragging mouse pointer to suround elements to be
    selected. All elements that in boundaries of selection box are marked as
    selected.

 data/style/style.css |    5 ++
 src/js/ui/page.js    |  109 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 114 insertions(+), 0 deletions(-)
---
diff --git a/data/style/style.css b/data/style/style.css
index bbc6001..13a3555 100644
--- a/data/style/style.css
+++ b/data/style/style.css
@@ -48,6 +48,11 @@ TbBox#page-dim-box {
     background-color: #000000AA;
 }
 
+TbBox#page-selection-box {
+    border-image: url("simple-border.png") 3 3 3 3;
+    background-color: #FFFFFF33;
+}
+
 /* Button */
 
 TbBox#button-main-box {
diff --git a/src/js/ui/page.js b/src/js/ui/page.js
index ba07b3b..de2e9ea 100644
--- a/src/js/ui/page.js
+++ b/src/js/ui/page.js
@@ -17,6 +17,7 @@ const PageModel = imports.model.pageModel;
 const _LAYER_BACKGROUND   = 0.1;
 const _LAYER_THING        = 0.2;
 const _LAYER_DIMMING      = 0.3;
+const _LAYER_SELECTION    = 0.4;
 
 const _ADD_THING_TIME = 0.5;
 const _ADD_THING_TRANSITION = 'easeOutCubic';
@@ -57,10 +58,14 @@ Page.prototype = {
         this._loaded = false;
         this._thingsLoaded = false;
         this._things = [];
+        this._selectedThings = [];
         this._activeThing = null;
 
+        this._cancelSelectionOnClick = true;
+
         this._createMainBox();
         this._createDimBox();
+        this._createSelectionBox();
         this._connectModelSignals();
 
         this._updateFromModel();
@@ -84,6 +89,19 @@ Page.prototype = {
                             Lang.bind(this, this._onMainBoxClicked));
 
         this._mainBox.add_action(clickAction);
+
+        let dragAction = new Clutter.DragAction();
+
+        dragAction.set_drag_threshold(2, 2);
+
+        dragAction.connect("drag-motion",
+                           Lang.bind(this, this._onMainBoxDragMotion));
+        dragAction.connect("drag-begin",
+                           Lang.bind(this, this._onMainBoxDragBegin));
+        dragAction.connect("drag-end",
+                           Lang.bind(this, this._onMainBoxDragEnd));
+
+        this._mainBox.add_action(dragAction);
     },
 
     _createDimBox : function() {
@@ -103,6 +121,19 @@ Page.prototype = {
                                             Tb.BoxAlignment.FILL);
     },
 
+    _createSelectionBox : function() {
+        this._selectionBox =
+            new Tb.Box({ orientation: Tb.BoxOrientation.VERTICAL,
+                         xAlign: Tb.BoxAlignment.FILL,
+                         yAlign: Tb.BoxAlignment.FILL,
+                         depth: _LAYER_SELECTION,
+                         visible: false,
+                         name: "page-selection-box" });
+
+        this._mainBox.append(this._selectionBox,
+                             Tb.BoxPackFlags.FIXED);
+    },
+
     _connectModelSignals : function() {
         this._modelStateChangedId =
             this._model.connect("state-changed",
@@ -321,11 +352,83 @@ Page.prototype = {
                            transition: _ADD_THING_TRANSITION });
     },
 
+    _updateSelectedThings : function() {
+        if (this._selectionBox.visible) {
+            let x1 = this._selectionBox.x - this._selectionBox.anchorX;
+            let y1 = this._selectionBox.y - this._selectionBox.anchorY;
+            let x2 = x1 + this._selectionBox.width;
+            let y2 = y1 + this._selectionBox.height;
+
+            this._selectedThings = this._getThingsInArea(x1, y1, x2, y2);
+        } else {
+            this._selectedThings = [];
+        }
+
+        let updateSelection = function(thing) {
+            thing.selected = this._selectedThings.indexOf(thing) >= 0;
+        };
+
+        this._things.forEach(Lang.bind(this, updateSelection));
+    },
+
+    _unselectAllThings : function() {
+        this._selectionBox.hide();
+        this._updateSelectedThings();
+    },
+
     _onMainBoxClicked : function(o, event) {
+        if (this._cancelSelectionOnClick) {
+            this._unselectAllThings();
+        }
+
+        this._cancelSelectionOnClick = true;
+
         this.setActiveThing(null);
         this.emit("clicked");
     },
 
+    _onMainBoxDragMotion : function(action, actor, deltaX, deltaY) {
+        if (this._activeThing) {
+            return;
+        }
+
+        if (deltaX >= 0 && deltaY >= 0) {
+            this._selectionBox.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_WEST);
+        } else if (deltaX >= 0) {
+            this._selectionBox.set_anchor_point_from_gravity(Clutter.Gravity.SOUTH_WEST);
+        } else if (deltaY >= 0) {
+            this._selectionBox.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST);
+        } else {
+            this._selectionBox.set_anchor_point_from_gravity(Clutter.Gravity.SOUTH_EAST);
+        }
+
+        this._selectionBox.width = Math.abs(deltaX);
+        this._selectionBox.height = Math.abs(deltaY);
+
+        this._updateSelectedThings();
+    },
+
+    _onMainBoxDragBegin : function(action, actor, eventX, eventY, modifiers) {
+        if (this._activeThing) {
+            return;
+        }
+
+        this._cancelSelectionOnClick = false;
+
+        action.dragHandle = actor;
+
+        this._selectionBox.show();
+
+        this._selectionBox.x = eventX;
+        this._selectionBox.y = eventY;
+        this._selectionBox.width = 0;
+        this._selectionBox.height = 0;
+    },
+
+    _onMainBoxDragEnd : function(action, actor, eventX, eventY, modifiers) {
+        this._selectionBox.hide();
+    },
+
     _onModelStateChanged : function() {
         this._updateFromModel();
     },
@@ -376,6 +479,8 @@ Page.prototype = {
         if (this._activeThing) {
             this._activeThing.onActivate();
 
+            this._unselectAllThings();
+
             this._dimBox.raise(null);
             this._activeThing.actor.raise(this._dimBox);
 
@@ -495,6 +600,10 @@ Page.prototype = {
         return this._activeThing;
     },
 
+    get selectedThings() {
+        return this._selectedThings;
+    },
+
     get model() {
         return this._model;
     },