createGroupOnDrag now snaps with trenches!

browser/base/content/tabcandy/app/drag.js

@@ -82,13 +82,13 @@ var Drag = function(item, event, isResizing) {
     Trenches.activateOthersTrenches(this.el);
     
     // When a tab drag starts, make it the focused tab.
-    if(this.item.isAGroup) {
+    if (this.item.isAGroup) {
       var tab = Page.getActiveTab();
-      if(!tab || tab.parent != this.item) {
-        if(this.item._children.length)
+      if (!tab || tab.parent != this.item) {
+        if (this.item._children.length)
           Page.setActiveTab(this.item._children[0]);
       }
-    } else {
+    } else if (this.item.isATabItem) {
       Page.setActiveTab(this.item);
     }
   } catch(e) {
@@ -108,7 +108,7 @@ Drag.prototype = {
 
     // OH SNAP!
     if ( !Keys.meta                           // if we aren't holding down the meta key...
-        && !this.item.overlapsWithOtherItems() // and we aren't on top of anything else...
+        && !(this.isATabItem && this.item.overlapsWithOtherItems()) // and we aren't a tab on top of something else...
         ) { 
       newRect = Trenches.snap(bounds,assumeConstantSize,keepProportional);
       if (newRect) { // might be false if no changes were made
@@ -116,8 +116,6 @@ Drag.prototype = {
         snappedTrenches = newRect.snappedTrenches || {};
         bounds = newRect;
       }
-    } else {
-      Trenches.hideGuides();
     }
 
     // make sure the bounds are in the window.
@@ -135,7 +133,7 @@ Drag.prototype = {
         trench.showGuide = true;
         trench.show();
       } else if (trench === 'edge') {
-        // show the edge.
+        // show the edge...?
       }
     }
 
@@ -217,10 +215,10 @@ Drag.prototype = {
   drag: function(event, ui) {
     this.snap(event,ui,true);
       
-    if(this.parent && this.parent.expanded) {
+    if (this.parent && this.parent.expanded) {
       var now = Utils.getMilliseconds();
       var distance = this.startPosition.distance(new Point(event.clientX, event.clientY));
-      if(/* now - this.startTime > 500 ||  */distance > 100) {
+      if (/* now - this.startTime > 500 ||  */distance > 100) {
         this.parent.remove(this.item);
         this.parent.collapse();
       }
@@ -231,18 +229,19 @@ Drag.prototype = {
   // Function: stop
   // Called in response to an <Item> draggable "stop" event.
   stop: function() {
-		Trenches.hideGuides();
+    Trenches.hideGuides();
     this.item.isDragging = false;
 
-    if(this.parent && !this.parent.locked.close && this.parent != this.item.parent 
+    // TODO: create a Group.isEmpty instead.
+    if (this.parent && !this.parent.locked.close && this.parent != this.item.parent 
         && this.parent._children.length == 0 && !this.parent.getTitle()) {
       this.parent.close();
     }
      
-    if(this.parent && this.parent.expanded)
+    if (this.parent && this.parent.expanded)
       this.parent.arrange();
       
-    if(this.item && !this.item.parent) {
+    if (this.item && !this.item.parent) {
       this.item.setZ(drag.zIndex);
       drag.zIndex++;
       

browser/base/content/tabcandy/app/ui.js

@@ -410,15 +410,34 @@ window.Page = {
       .addClass('group phantom')
       .css({
         position: "absolute",
-        top: startPos.y,
-        left: startPos.x,
-        width: 0,
-        height: 0,
         opacity: .7,
         zIndex: -1,
         cursor: "default"
       })
       .appendTo("body");
+
+    var item = { // a faux-Item
+      container: phantom,
+      bounds: {},
+      getBounds: function FauxItem_getBounds() {
+        return this.container.bounds();
+      },
+      setBounds: function FauxItem_setBounds( bounds ) {
+        this.container.css( bounds );
+      },
+      setZ: function FauxItem_setZ( z ) {
+        this.container.css( 'z-index', z );
+      },
+      setOpacity: function FauxItem_setOpacity( opacity ) {
+        this.container.css( 'opacity', opacity );
+      },
+      // we don't need to pushAway the phantom item at the end, because 
+      // when we create a new Group, it'll do the actual pushAway.
+      pushAway: function () {},
+    };
+    item.setBounds( new Rect( startPos.y, startPos.x, 0, 0 ) );
+    
+    var dragOutInfo = new Drag(item, e, true); // true = isResizing
     
     function updateSize(e){
       var box = new Rect();
@@ -426,15 +445,17 @@ window.Page = {
       box.right = Math.max(startPos.x, e.clientX);
       box.top = Math.min(startPos.y, e.clientY);
       box.bottom = Math.max(startPos.y, e.clientY);
-
-      var css = box.css();      
-      if(css.width > minMinSize && css.height > minMinSize
-          && (css.width > minSize || css.height > minSize)) 
-        css.opacity = 1;
-      else 
-        css.opacity = .7
+      item.setBounds(box);
+      
+      dragOutInfo.snap(e, null, false, false); // null for ui, which we don't use anyway.
+
+      box = item.getBounds();
+      if (box.width > minMinSize && box.height > minMinSize
+          && (box.width > minSize || box.height > minSize)) 
+        item.setOpacity(1);
+      else 
+        item.setOpacity(0.7);
       
-      phantom.css(css);
       e.preventDefault();     
     }
     
@@ -454,23 +475,25 @@ window.Page = {
     
     function finalize(e){
       iQ(window).unbind("mousemove", updateSize);
-      if( phantom.css("opacity") != 1 ) 
+      dragOutInfo.stop();
+      if ( phantom.css("opacity") != 1 ) 
         collapse();
-      else{
-        var bounds = phantom.bounds();
+      else {
+        var bounds = item.getBounds();
 
         // Add all of the orphaned tabs that are contained inside the new group
         // to that group.
         var tabs = Groups.getOrphanedTabs();
         var insideTabs = [];
         for each( tab in tabs ){
-          if( bounds.contains( tab.bounds ) ){
+          if ( bounds.contains( tab.bounds ) ){
             insideTabs.push(tab);
           }
         }
         
         var group = new Group(insideTabs,{bounds:bounds});
         phantom.remove();
+        dragOutInfo = null;
       }
     }