sproutcore 0.9.1 → 0.9.2

data/frameworks/sproutcore/controllers/array.js

@@ -1,10 +1,11 @@
 // ========================================================================
 // SproutCore
-// copyright 2006-2007 Sprout Systems, Inc.
+// copyright 2006-2008 Sprout Systems, Inc.
 // ========================================================================
 
 require('controllers/controller') ;
-require('foundation/array') ;
+require('mixins/array') ;
+require('mixins/selection_support') ;
 require('foundation/binding') ;
 
 /** @class
@@ -18,7 +19,7 @@ until you call commitChanges().
 @extends SC.Array
 
 */
-SC.ArrayController = SC.Controller.extend(SC.Array, 
+SC.ArrayController = SC.Controller.extend(SC.Array, SC.SelectionSupport,
 /** @scope SC.ArrayController.prototype */
 {
   /**
@@ -26,7 +27,7 @@ SC.ArrayController = SC.Controller.extend(SC.Array,
     @property
     @type {SC.ArrayController}
   */
-  arrangedObjects: function() { return this; }.property(),
+  arrangedObjects: function() { return this; }.property('content'),
 
   /**
     The array content that is being managed by the controller.
@@ -52,8 +53,12 @@ SC.ArrayController = SC.Controller.extend(SC.Array,
     @observes content
   */
   _contentObserver: function() {
+    this.beginPropertyChanges();
     this.contentCloneReset();
     this.arrayContentDidChange() ;
+    this.notifyPropertyChange('length') ;
+    this.updateSelectionAfterContentChange();
+    this.endPropertyChanges() ;
   }.observes('content'),
 
   /**
@@ -114,13 +119,14 @@ SC.ArrayController = SC.Controller.extend(SC.Array,
 
     // and record additions
     if (!this._changelog) this._changelog = []; 
-    this._changelog.push({ idx: idx, amt: amt, objects: objects });
+    this._changelog.push({ idx: idx, amt: amt, objects: sourceObjects });
     
     // then actually perform the edit on the contentClone
-    contentClone.replace(idx, amt, objects);
+    contentClone.replace(idx, amt, sourceObjects);
     
     this.editorDidChange() ;
     this.arrayContentDidChange();
+    this.updateSelectionAfterContentChange();
     
     return this;
   },
@@ -132,7 +138,8 @@ SC.ArrayController = SC.Controller.extend(SC.Array,
   *   return null.
   */
   objectAt: function(idx) {
-    var obj = this._getSourceContent().objectAt(idx);
+    var obj = this._getSourceContent() ;
+    obj = (obj && obj.objectAt) ? obj.objectAt(idx) : null;
     return this._objectControllerFor(obj) ;
   },
   /**
@@ -141,7 +148,8 @@ SC.ArrayController = SC.Controller.extend(SC.Array,
   * @type {integer}
   */
   length: function( key, value ) {
-    return this._getSourceContent().get('length');
+    var ret = this._getSourceContent() ;
+    return (ret && ret.get) ? (ret.get('length') || 0) : 0 ;
   }.property(),
 
   /**
@@ -237,7 +245,7 @@ SC.ArrayController = SC.Controller.extend(SC.Array,
     will be returned.
   */
   _sourceObjectFor: function(obj) {
-    return (obj && obj.__isArrayController) ? obj.get('content') : obj ;
+    return (obj && obj.kindOf && obj.kindOf(SC.Controller)) ? obj.get('content') : obj ;
   }
 
 });

data/frameworks/sproutcore/controllers/collection.js

@@ -1,8 +1,9 @@
 // ========================================================================
 // SproutCore
-// copyright 2006-2007 Sprout Systems, Inc.
+// copyright 2006-2008 Sprout Systems, Inc.
 // ========================================================================
 
+require('mixins/selection_support') ;
 require('controllers/object') ;
 
 /** @class
@@ -15,7 +16,7 @@ require('controllers/object') ;
 
   @extends SC.ObjectController
 */
-SC.CollectionController = SC.ObjectController.extend(
+SC.CollectionController = SC.ObjectController.extend(SC.SelectionSupport,
   /** @scope SC.CollectionController.prototype */
   {
 
@@ -30,85 +31,7 @@ SC.CollectionController = SC.ObjectController.extend(
   */
   arrangedObjects: [],
   
-  /**  
-    @property {Array} selection 
-    This is the current selection.  You can make this selection and another
-    controller's selection work in concert by binding them together. You
-    generally have a master selection that relays changes TO all the others.
-  */
-  selection: function(key,value)
-  {
-    if (value !== undefined)
-    {
-      // selection must be an array... force if needed....
-      value = (value) ? ((value instanceof Array) ? value : [value]) : [];
-      
-      var allowsSelection         = this.get('allowsSelection');
-      var allowsEmptySelection    = this.get('allowsEmptySelection');
-      var allowsMultipleSelection = this.get('allowsMultipleSelection');
-      
-      // are we even allowing selection at all?
-      // if not, then bail out.
-      if ( !allowsSelection ) return this._selection;
-      
-      // ok, new decide if the *type* of seleciton is allowed...
-      switch ( value.length )
-      {
-        case 0:
-          // check to see if we're attemting to set an empty array
-          // if that's not allowed, set to the first available item in arrangedObjects
-          this._selection = allowsEmptySelection ? value : (this.get('arrangedObjects') || []).first();
-          break;
-        case 1:
-          // check to see id we've just taken focus away from a new record
-          // if so, queue up the callback to be triggered...
-          if ( this._editingNewRecord && (this._editingNewRecord != value[0]) )
-          {
-            setTimeout(this._newRecordDidLoseFocus.bind(this,this._editingNewRecord),1);
-            this._editingNewRecord = null;
-          }
-          this._selection = value;
-          break;
-        default:
-          // fall through for >= 2 items...
-          // only allow if configured for multi-select
-          this._selection = allowsMultipleSelection ? value : this._selection;
-          break;
-      }
-      
-      if ( this._selection && (this._selection.length > 1) )
-      {
-        var collection = this.get('content');
-        var order = collection ? collection.get('orderBy') : null;
-        if ( !order ) order = ['guid'];
-        this._selection = this._selection.sort(function(a,b) { return a.compareTo(b,order); });
-      }
-    }
-    
-    return this._selection;
-  }.property(),
-  
-  /**
-    If true, selection is allowed.
 
-    @type bool
-  */
-  allowsSelection: true,
-  
-  /**
-    If true, multiple selection is allowed.
-  
-    @type bool
-  */
-  allowsMultipleSelection: true,
-  
-  /**
-    If true, allow empty selection
-  
-    @type bool
-  */
-  allowsEmptySelection: true,
-  
   /**
     If true, new, add, remove will work.
   
@@ -167,11 +90,10 @@ SC.CollectionController = SC.ObjectController.extend(
     try {
       if (content.newRecord) { 
         var rec = content.newRecord(settings) ;
-        var controller = this ;
-        setTimeout(function() {
-          controller.set('selection',(rec) ? [rec] : []) ;
-          controller._editingNewRecord = rec ;
-        },1) ;
+        var t = function() {
+          this.set('selection',(rec) ? [rec] : []) ;
+          this._editingNewRecord = rec ;
+        }.invokeLater(this, 1) ;
         return rec;
       }
     }   
@@ -273,33 +195,10 @@ SC.CollectionController = SC.ObjectController.extend(
     value = Array.asArray(target.get(key)) ;
     
     this.set('arrangedObjects',value.slice()) ;
-    // update selection.
-    var objects = this.get('arrangedObjects') || [] ;
-    if (!(objects instanceof Array)) objects = [objects] ;
     
-    var currentSelection = this.get('selection') || [] ;
-    var sel = [] ;
+    // update selection.
+    this.updateSelectionAfterContentChange() ;
 
-    // the new selection is the current selection that exists in 
-    // arrangedObjects.
-    currentSelection.each(function(obj) {
-      if (objects.include(obj)) sel.push(obj) ;
-    }) ;
-    
-    // make new selection match current selection settings.
-    if (!this.allowsSelection) {
-      sel = [] ;
-    }
-    
-    if ((sel.length>1) && !this.allowsMultipleSelection) {
-      sel = [sel[0]] ;
-    }
-    
-    if ((sel.length == 0) && !this.allowsEmptySelection) {
-      if (objects.length > 0) sel = [objects[0]] ;
-    }
-    
-    this.set('selection',sel) ;
   }.observes('records') 
   
 }) ;

data/frameworks/sproutcore/controllers/controller.js

@@ -1,6 +1,6 @@
 // ========================================================================
 // SproutCore
-// copyright 2006-2007 Sprout Systems, Inc.
+// copyright 2006-2008 Sprout Systems, Inc.
 // ========================================================================
 
 require('foundation/object') ;

data/frameworks/sproutcore/controllers/object.js

@@ -1,6 +1,6 @@
 // ========================================================================
 // SproutCore
-// copyright 2006-2007 Sprout Systems, Inc.
+// copyright 2006-2008 Sprout Systems, Inc.
 // ========================================================================
 
 require('controllers/controller') ;
@@ -134,6 +134,7 @@ SC.ObjectController = SC.Controller.extend(
         var oldValue = content.get ? content.get(key) : content[key];
         var newValue = this._changes[key];
         
+        if (oldValue == null && newValue == '') newValue = null;
         if (newValue != oldValue) 
         {
           (content.set) ? content.set('isDirty', true) : (content['isDirty'] = true);

data/frameworks/sproutcore/drag/drag.js

@@ -1,6 +1,6 @@
 // ========================================================================
 // SproutCore
-// copyright 2006-2007 Sprout Systems, Inc.
+// copyright 2006-2008 Sprout Systems, Inc.
 // ========================================================================
 
 require('Core') ;
@@ -8,6 +8,7 @@ require('views/view') ;
 
 SC.DRAG_LINK = 0x0004; SC.DRAG_COPY = 0x0001; SC.DRAG_MOVE = 0x0002;
 SC.DRAG_NONE = 0x0000; SC.DRAG_ANY = 0x0007 ;
+SC.DRAG_AUTOSCROLL_ZONE_THICKNESS = 20 ;
 
 /**
 
@@ -20,57 +21,49 @@ SC.DRAG_NONE = 0x0000; SC.DRAG_ANY = 0x0007 ;
   To initiate a drag, you should call SC.Drag.start() with the options below
   specified in a hash. Pass the ones you need to get the drag you want:  
    
-  {{{
-   event: (req)
-     The mouse event that triggered the drag.  This will be used to 
-     position the element.
-  
-   source: (req)
-     The drag source object that should be consulted during the drag operations.
-     This is usually the container view that initiated the drag.
-  
-   dragView: (req)
-     This should point to a view that will be used as the source image for 
-     the drag. The drag operation will clone the DOM elements for this 
-     view and add the class name 'drag-image' to the outermost element.
-  
-   ghost:  YES | NO
-     if YES or not passed, then drag view image will show, but the source
-     dragView will not be hidden.  set to NO to make it appear that the
-     dragView itself is being dragged around.
-  
-   slideBack: YES | NO
-     If YES or not specified, then if the drag operation is cancelled, the
-     dragView will slide back to its source origin.
-  
-   origin:
-     If passed, this will be used as the origin point for the ghostView
-     when it slides back.  You normally do not need to pass this unless
-     the ghost view does not appear in the main UI.
-  
-   data:
-     Optional hash of data types and values.  You can use this to pass a
-     static set of data instead of providing a dataSource.  If you provide
+  - *event: (req)* The mouse event that triggered the drag.  This will be used 
+    to position the element.
+  
+   - *source: (req)* The drag source object that should be consulted during 
+     the drag operations. This is usually the container view that initiated 
+     the drag.
+  
+   - *dragView: (req)*  This should point to a view that will be used as the 
+     source image for the drag. The drag operation will clone the DOM elements 
+     for this view and add the class name 'drag-image' to the outermost 
+     element.
+  
+   - *ghost:  YES | NO*  If YES or not passed, then drag view image will show, 
+     but the source dragView will not be hidden.  set to NO to make it appear 
+     that the dragView itself is being dragged around.
+  
+   - *slideBack: YES | NO*  If YES or not specified, then if the drag 
+     operation is cancelled, the dragView will slide back to its source 
+     origin.
+  
+   - *origin:*  If passed, this will be used as the origin point for the 
+     ghostView when it slides back.  You normally do not need to pass this 
+     unless the ghost view does not appear in the main UI.
+  
+   - *data:* Optional hash of data types and values.  You can use this to pass 
+     a static set of data instead of providing a dataSource.  If you provide
      a dataSource, it will override this.
   
-   dataSource:
-     Optional object that will provide the data for the drag to be consumed
-     by the drop target.  If you do not pass this parameter or the data 
-     hash, then the source object will be used if it implements the
+   - *dataSource:*  Optional object that will provide the data for the drag to 
+     be consumed by the drop target.  If you do not pass this parameter or the 
+     data hash, then the source object will be used if it implements the 
      SC.DragDataSource protocol.
   
-   anchorView:
-     if you pass this optional view, then the drag will only be allowed to
-     happen within this view.  The ghostView will actually be added as a
-     child of this view during the drag.  Normally the anchorView is the
+   - *anchorView:* if you pass this optional view, then the drag will only be 
+     allowed to happen within this view.  The ghostView will actually be added 
+     as a child of this view during the drag.  Normally the anchorView is the 
      window.
-   }}}
    
   @extends SC.Object
 */
 SC.Drag = SC.Object.extend(
-/** @scope SC.Drag.prototype */
-{
+/** @scope SC.Drag.prototype */ {
+  
   /** [RO] The source object used to coordinate this drag. */  
   source: null,
 
@@ -120,7 +113,7 @@ SC.Drag = SC.Object.extend(
   //
 
   /**
-    (Property) Data types supported by this drag operation.
+    Data types supported by this drag operation.
     
     Returns an array of data types supported by the drag source.  This may 
     be generated dynamically depending on the data source.
@@ -132,7 +125,7 @@ SC.Drag = SC.Object.extend(
     on your dragEntered() and prepareForDragOperation() methods to determine 
     if you can handle any of the data types offered up by the drag source.
     
-    @returns {Array} available data types
+    @field {Array} available data types
   */
   dataTypes: function() {
     
@@ -220,6 +213,9 @@ SC.Drag = SC.Object.extend(
   */
   data: null,
 
+  // required by autoscroll
+  _dragInProgress: YES,
+  
   // this will actually start the drag process.
   startDrag: function() {
     
@@ -227,8 +223,11 @@ SC.Drag = SC.Object.extend(
     this._createGhostView() ;
     
     // compute the offset from the original mouse location.
-    var origin = this.dragView.convertFrameToView(this.dragView.get('origin'), null);
+    var origin = this.dragView.convertFrameToView(this.dragView.get('frame'), null);
     var pointer = Event.pointerLocation(this.event) ;
+    
+    window.dragEvent = this.event ;
+    
     this.ghostOffset = { x: (pointer.x-origin.x), y: (pointer.y-origin.y) };
 
     // position the ghost view.
@@ -254,10 +253,11 @@ SC.Drag = SC.Object.extend(
   */
   mouseDragged: function(evt) {
     
-    // ignore duplicate calls.
     var loc = Event.pointerLocation(evt) ;
+    var scrolled = this._autoscroll(evt) ;
     
-    if ((loc.x == this._lastLoc.x) && (loc.y == this._lastLoc.y)) return ;
+    // ignore duplicate calls.
+    if (!scrolled && (loc.x == this._lastLoc.x) && (loc.y == this._lastLoc.y)) return ;
     this._lastLoc = loc ;
     this.set('location', loc) ;
 
@@ -372,18 +372,25 @@ SC.Drag = SC.Object.extend(
       this.source.dragDidEnd(this, loc, op) ;
     }
     
+    this._dragInProgress = NO ; // required by autoscroll.
+    
   },
   
   // ..........................................
   // PRIVATE PROPERTIES AND METHODS
   //
   
+  _ghostViewClass: SC.View.extend({ 
+    emptyElement: '<div class="sc-ghost-view"></div>'
+  }),
+  
   // positions the ghost view underneath the mouse with the initial offset
   // recorded by when the drag started.
   _positionGhostView: function(evt) {
-    var loc = { x: Event.pointerX(evt), y: Event.pointerY(evt) } ;
+    var loc = Event.pointerLocation(evt) ;
     loc.x -= this.ghostOffset.x ;
     loc.y -= this.ghostOffset.y ;
+    loc = this._ghostView.convertFrameFromView(loc, null) ;
     this._ghostView.set('origin', loc) ;   
   },
   
@@ -397,8 +404,7 @@ SC.Drag = SC.Object.extend(
     // create the ghost view instance add ghost class name.
     this._ghostView = this._ghostViewClass.viewFor(el) ;
     this._ghostView.owner = this ;
-    this._ghostView.addClassName('ghost') ;
-    this._ghostView.set('isPositioned', true) ; // make absolute position.
+    this._ghostView.addClassName('sc-ghost-view') ;
     
     // add to bottom of main document body and to window.
     SC.window.appendChild(this._ghostView) ;
@@ -451,7 +457,7 @@ SC.Drag = SC.Object.extend(
   // target area.
   _findDropTarget: function(evt) {
     var dt = this._dropTargets() ;
-    var loc = { x: Event.pointerX(evt), y: Event.pointerY(evt) } ;
+    var loc = Event.pointerLocation(evt) ;
 
     var ret = null ;
     for(var idx=0;idx<dt.length;idx++) {
@@ -460,7 +466,7 @@ SC.Drag = SC.Object.extend(
       if(!t.get('isVisibleInWindow')) continue ;
       
       // get frame, converted to view.
-      var f = t.convertFrameToView(t.get('frame'), null) ;
+      var f = t.convertFrameToView(t.get('clippingFrame'), null) ;
       
       // check to see if loc is inside.  If so, then make this the drop
       // target unless there is a drop target and the current one 
@@ -479,13 +485,201 @@ SC.Drag = SC.Object.extend(
     return null ;
   },
   
-  _ghostViewClass: SC.View.extend({})   
+  // ............................................
+  // AUTOSCROLLING
+  //
+  
+  // Performs auto-scrolling for the drag.  This will only do anything if
+  // the user keeps the mouse within a few pixels of one location for a little
+  // while.
+  //
+  // Returns true if a scroll was performed
+  _autoscroll: function(evt) {
+  
+    // If drag has ended, exit
+    if (!this._dragInProgress) return ;
+    
+    // STEP 1: Find the first view that we can actually scroll.  This view 
+    // must be:
+    // - scrollable
+    // - the mouse pointer must be within a scrolling hot zone
+    // - there must be room left to scroll in that direction. 
+    
+    // NOTE: an event is passed only when called from mouseDragged
+    var loc = (evt) ? Event.pointerLocation(evt) : this._lastMouseLocation ;
+    if (!loc) return false ;
+    this._lastMouseLocation = loc ;
+
+    var view = this._findScrollableView(loc) ;
+    
+    // these will become either 1 or -1 to indicate scroll direction or 0 for no scroll.
+    var verticalScroll, horizontalScroll ;
+    var min, max, edge ;
+    var scrollableView = null;
+
+    while(view && !scrollableView) {
+      
+      // quick check...can we scroll this view right now?
+      verticalScroll = view.get('hasVerticalScroller') ? 1 : 0;
+      horizontalScroll = view.get('hasHorizontalScroller') ? 1 : 0;
+      
+      // at least one direction might be scrollable.  Collect some extra
+      // info to investigate further.
+      if ((verticalScroll != 0) || (horizontalScroll != 0)) {
+        var f = view.convertFrameToView(view.get('frame'), null) ;
+        var innerSize = view.get('innerFrame') ;
+        var scrollFrame = view.get('scrollFrame') ;
+      }
+      
+      
+      if (verticalScroll != 0) {
+        
+        // bottom hotzone?
+        max = SC.maxY(f); min = max - SC.DRAG_AUTOSCROLL_ZONE_THICKNESS ; 
+        edge = SC.maxY(scrollFrame) ;
+        
+        if ((edge >= innerSize.height) && (loc.y >= min) && (loc.y <= max)) {
+          verticalScroll = 1 ;
+          
+        // no...how about top hotzone?
+        } else {
+          min = SC.minY(f); max = min + SC.DRAG_AUTOSCROLL_ZONE_THICKNESS ;
+          edge = SC.minY(scrollFrame) ;
+          if ((edge <= innerSize.height) && (loc.y >= min) && (loc.y <= max)) {
+            verticalScroll = -1 ;
+          
+          // no, ok don't scroll vertical
+          } else verticalScroll = 0 ;
+        }
+      }
+
+      if (horizontalScroll != 0) {
+        // right hotzone?
+        max = SC.maxX(f); min = max - SC.DRAG_AUTOSCROLL_ZONE_THICKNESS ; 
+        edge = SC.maxX(scrollFrame) ;
+        if ((edge >= innerSize.width) && (loc.x >= min) && (loc.x <= max)) {
+          horizontalScroll = 1 ;
+          
+        // no...how about left hotzone?
+        } else {
+          min = SC.minY(f); max = min + SC.DRAG_AUTOSCROLL_ZONE_THICKNESS ;
+          edge = SC.minY(scrollFrame) ;
+          if ((edge <= innerSize.width) && (loc.x >= min) && (loc.x <= max)) {
+            horizontalScroll = -1 ;
+          
+          // no, ok don't scroll vertical
+          } else horizontalScroll = 0 ;
+        }
+      }
+
+      // if we can scroll, then set this.
+      if ((verticalScroll != 0) || (horizontalScroll != 0)) {
+        scrollableView = view ;
+      } else view = this._findNextScrollableView(view) ;
+    }
+
+    
+    // STEP 2: Only scroll if the user remains within the hot-zone for a period of
+    // time
+    if (scrollableView && (this._lastScrollableView == scrollableView)) {
+      if ((Date.now() - this._hotzoneStartTime) > 100) {
+        this._horizontalScrollAmount *= 1.05 ;
+        this._verticalScrollAmount *= 1.05 ;
+      }
+      
+    // otherwise, reset everything and disallow scroll
+    } else {
+      this._lastScrollableView = scrollableView ;
+      this._horizontalScrollAmount = 15 ;
+      this._verticalScrollAmount = 15 ;
+      this._hotzoneStartTime = (scrollableView) ? Date.now() : null ;
+      
+      horizontalScroll = verticalScroll = 0 ;
+    }
+    
+    // STEP 3: Scroll!
+    if (scrollableView && ((horizontalScroll != 0) || (verticalScroll != 0))) {
+      var scroll = { 
+        x: horizontalScroll * this._horizontalScrollAmount,
+        y: verticalScroll * this._verticalScrollAmount 
+      } ;
+
+      scrollableView.scrollBy(scroll) ;
+      
+    }
+
+    // If a scrollable view was found, then reschedule
+    if (scrollableView) {
+      this.invokeLater('_autoscroll', 100, null);
+      return true ;
+    } else return false ;
+  },
+
+  // Returns an array of scrollable views, sorted with nested scrollable
+  // views at the top of the array.  The first time this method is called
+  // during a drag, it will reconstrut this array using the current ste of
+  // scrollable views.  Afterwards it uses the cached set until the drop
+  // completes.
+  _scrollableViews: function() {
+    if (this._cachedScrollableView) return this._cachedScrollableView ;
+    var ret = [];
+    
+    // build array of drop targets
+    var dt = SC.Drag._scrollableViews ;
+    for(var key in dt) {
+      if (!dt.hasOwnProperty(key)) continue ;
+      ret.push(dt[key]) ;      
+    }
+    
+    // now resort.  This custom function will sort nested drop targets
+    // at the start of the list.
+    ret = ret.sort(function(a,b) {
+      var view = a;
+      while((view = view.parentNode) && (view != SC.window)) {
+        if (b == view) return -1 ;
+      }
+      return 1; 
+    }) ;
+
+    this._cachedScrollableView = ret ;
+    
+    return ret ;
+  },
+  
+  // This will search through the scrollable views, looking for one in the 
+  // target area.
+  _findScrollableView: function(loc) {
+    var dt = this._scrollableViews() ;
+
+    var ret = null ;
+    for(var idx=0;idx<dt.length;idx++) {
+      var t = dt[idx] ;
+
+      if(!t.get('isVisibleInWindow')) continue ;
+      
+      // get frame, converted to view.
+      var f = t.convertFrameToView(t.get('frame'), null) ;
+      
+      // check to see if loc is inside.  
+      if (SC.pointInRect(loc, f)) return t;
+    } 
+    return null ;
+  },
+  
+  // Search the parent nodes of the target to find another scrollable view.
+  // return null if none is found.
+  _findNextScrollableView: function(view) {
+    while ((view = view.parentNode) && (view != SC.window)) {
+      if (SC.Drag._scrollableViews[view._guid]) return view ;
+    }
+    return null ;
+  }  
+    
   
 }) ;
 
 SC.Drag.mixin(
-/** @scope SC.Drag */
-{
+/** @scope SC.Drag */ {
   
    
   /**  
@@ -502,6 +696,23 @@ SC.Drag.mixin(
   },
   
   _dropTargets: {},
+  _scrollableViews: {},
+  
+  /**
+    Register the view object as a scrollable view.  These views will auto-scroll
+    during a drag.
+  */
+  addScrollableView: function(target) {
+    this._scrollableViews[target._guid] = target ;  
+  },
+
+  /**
+    Remove the view object as a scrollable view.  These views will auto-scroll
+    during a drag.
+  */
+  removeScrollableView: function(target) {
+    delete this._scrollableViews[target._guid] ;  
+  },
   
   /**
     Register the view object as a drop target.