sproutit-sproutcore 1.0.0.20090416161445 → 1.0.0.20090720093355

data/frameworks/sproutcore/frameworks/desktop/panes/palette.js

@@ -47,7 +47,7 @@ SC.PalettePane = SC.PanelPane.extend({
 
   /** @private - drag&drop palette to new position. */
   mouseDown: function(evt) {
-    var f=this.get("frame");
+    var f=this.get('frame');
     this._mouseOffsetX = f ? (f.x - evt.pageX) : 0;
     this._mouseOffsetY = f ? (f.y - evt.pageY) : 0;
   },

data/frameworks/sproutcore/frameworks/desktop/panes/panel.js

@@ -17,8 +17,8 @@ sc_require('panes/modal');
   
   {{{
     SC.PanelPane.create({
+      layout: { width: 400, height: 200, centerX: 0, centerY: 0 },
       contentView: SC.View.extend({
-        layout: { width: 400, height: 200, centerX: 0, centerY: 0 }
       })
     }).append();
   }}}

data/frameworks/sproutcore/frameworks/desktop/panes/picker.js

@@ -35,8 +35,8 @@ SC.POINTER_LAYOUT = ["perfectRight", "perfectLeft", "perfectTop", "perfectBottom
   
   {{{
     SC.PickerPane.create({
+      layout: { width: 400, height: 200 },
       contentView: SC.View.extend({
-        layout: { width: 400, height: 200 }
       })
     }).popup(anchor);
   }}}
@@ -52,37 +52,37 @@ SC.POINTER_LAYOUT = ["perfectRight", "perfectLeft", "perfectTop", "perfectBottom
   
   1. default:   
   {{{
-    SC.PickerPane.create({contentView: SC.View.extend({layout: { width: 400, height: 200 }})
+    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
     }).popup(anchor);
   }}}
 
   2. menu below the anchor with default offset matrix [1,4,3]:   
   {{{
-    SC.PickerPane.create({contentView: SC.View.extend({layout: { width: 400, height: 200 }})
+    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_MENU);
   }}}
 
   3. menu on the right side of anchor with custom offset matrix [2,6,0]:   
   {{{
-    SC.PickerPane.create({contentView: SC.View.extend({layout: { width: 400, height: 200 }})
+    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_MENU, [2,6,0]);
   }}}
 
   4. fixed below the anchor with default offset matrix [1,4,3]:   
   {{{
-    SC.PickerPane.create({contentView: SC.View.extend({layout: { width: 400, height: 200 }})
+    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_FIXED);
   }}}
 
   5. fixed on the right side of anchor with custom offset matrix [-22,-17,0]:   
   {{{
-    SC.PickerPane.create({contentView: SC.View.extend({layout: { width: 400, height: 200 }})
+    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_FIXED, [-22,-17,0]);
   }}}
 
   6. pointer with default position pref matrix [0,1,2,3,2]:   
   {{{
-    SC.PickerPane.create({contentView: SC.View.extend({layout: { width: 400, height: 200 }})
+    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_POINTER);
   }}}
   perfect right (0) > perfect left (1) > perfect top (2) > perfect bottom (3)
@@ -90,7 +90,7 @@ SC.POINTER_LAYOUT = ["perfectRight", "perfectLeft", "perfectTop", "perfectBottom
 
   7. pointer with custom position pref matrix [3,0,1,2,2]:   
   {{{
-    SC.PickerPane.create({contentView: SC.View.extend({layout: { width: 400, height: 200 }})
+    SC.PickerPane.create({layout: { width: 400, height: 200 },contentView: SC.View.extend({})
     }).popup(anchor, SC.PICKER_POINTER, [3,0,1,2,2]);
   }}}
 
@@ -133,9 +133,9 @@ SC.PickerPane = SC.PalettePane.extend({
   preferMatrix: null,
 
   /**
-    Displays a new picker pane according to the passed parameters.  
-    Every parameter except for the anchorViewOrElement is optional.  
-
+    Displays a new picker pane according to the passed parameters.
+    Every parameter except for the anchorViewOrElement is optional.
+  
     @param {Object} anchorViewOrElement view or element to anchor to
     @param {String} preferType optional apply picker position rule
     @param {Array} preferMatrix optional apply custom offset or position pref matrix for specific preferType
@@ -143,15 +143,13 @@ SC.PickerPane = SC.PalettePane.extend({
   */
   popup: function(anchorViewOrElement, preferType, preferMatrix) {
     var anchor = anchorViewOrElement.isView ? anchorViewOrElement.get('layer') : anchorViewOrElement;
-     
     this.beginPropertyChanges();
     this.set('anchorElement',anchor) ;
     if (preferType) this.set('preferType',preferType) ;
     if (preferMatrix) this.set('preferMatrix',preferMatrix) ;
-    this.positionPane();
     this.endPropertyChanges();
-    
     this.append();
+    this.positionPane();
   },
 
   /** @private
@@ -223,7 +221,8 @@ SC.PickerPane = SC.PalettePane.extend({
   */  
   fitPositionToScreen: function(preferredPosition, picker, anchor) {
     // get window rect.
-    var wret = { x: 0, y: 0, width: SC.$().width(), height: SC.$().height() } ;
+    var wsize = this.get('currentWindowSize') || SC.RootResponder.responder.computeWindowSize() ;
+    var wret = { x: 0, y: 0, width: wsize.width, height: wsize.height } ;
     picker.x = preferredPosition.x ; picker.y = preferredPosition.y ;
 
     if(this.preferType) {
@@ -297,7 +296,7 @@ SC.PickerPane = SC.PalettePane.extend({
   */
   fitPositionToScreenMenu: function(w, f) {
     // min left/right padding to the window
-    if( (f.x + f.width) > (w.width-8) ) f.x = w.width - f.width - 8;
+    if( (f.x + f.width) > (w.width-20) ) f.x = w.width - f.width - 20;
     if( f.x < 7 ) f.x = 7;
     return f ;    
   },
@@ -359,12 +358,11 @@ SC.PickerPane = SC.PalettePane.extend({
     var ret = sc_super();
     if (context.needsContent) {
       if (this.get('preferType') == SC.PICKER_POINTER) {
-        context.push('<div class="%@"></div>'.fmt(this.get('pointerPos')));
+        context.push('<div class="sc-pointer %@"></div>'.fmt(this.get('pointerPos')));
       }
     } else {
-      // var divs = this.$('div'),
-      //     el   = SC.$(divs[10]);
-      // el.attr('class', this.get('pointerPos'));
+      var el = this.$('.sc-pointer');
+      el.attr('class', "sc-pointer %@".fmt(this.get('pointerPos')));
     }
     return ret ;
   },

data/frameworks/sproutcore/frameworks/desktop/panes/sheet.js

@@ -14,8 +14,8 @@ sc_require('panes/panel');
   
   {{{
     SC.SheetPane.create({
+      layout: { width: 400, height: 200, centerX: 0 },
       contentView: SC.View.extend({
-        layout: { width: 400, height: 200, centerX: 0 }
       })
     }).append();
   }}}
@@ -34,7 +34,7 @@ SC.SheetPane = SC.PanelPane.extend({
   init: function() {
     sc_super() ;
 
-/** TODO: Implement Anition   
+/** TODO: Implement Animation   
     this.visibleAnimation = {
       visible: 'top: 0px',
       hidden: 'top: -500px',

data/frameworks/sproutcore/frameworks/desktop/protocols/drop_target.js

@@ -91,7 +91,7 @@ SC.DropTarget = {
   dragUpdated: function(drag, evt) {},
   
   /**
-    Called when the user exists your droppable area or the drag ends
+    Called when the user exits your droppable area or the drag ends
     and you were the last targeted droppable area.
     
     Override this method to perform any clean up on your UI such as hiding 
@@ -107,9 +107,9 @@ SC.DropTarget = {
   /**
     Called on all drop targets when the drag ends.  
     
-    For example, the user might have dragged the view off the screen and let go
-    or they might have hit escape.  Override this method to perform any final
-    cleanup.  This will be called instead of dragExited.
+    For example, the user might have dragged the view off the screen and let 
+    go or they might have hit escape.  Override this method to perform any 
+    final cleanup.  This will be called instead of dragExited.
     
     The default implementation does nothing.
     

data/frameworks/sproutcore/frameworks/desktop/system/drag.js

@@ -5,117 +5,146 @@
 // ========================================================================
 
 SC.DRAG_LINK = 0x0004; SC.DRAG_COPY = 0x0001; SC.DRAG_MOVE = 0x0002;
-SC.DRAG_NONE = 0x0000; SC.DRAG_ANY = 0x0007 ; // includes SC.DRAG_REORDER as well
-SC.DRAG_AUTOSCROLL_ZONE_THICKNESS = 20 ;
+SC.DRAG_NONE = 0x0000; SC.DRAG_ANY = 0x0007; // includes SC.DRAG_REORDER
+SC.DRAG_AUTOSCROLL_ZONE_THICKNESS = 20;
 
 /**
-
   @class
   
   An instance of this object is created whenever a drag occurs.  The instance
   manages the mouse events and coordinating with droppable targets until the
   user releases the mouse button. 
-
+  
   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 
+  
+  - *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.
+  - *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 parent them under the drag pane, which has the class 
-     name 'sc-ghost-view'.
+  - *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 parent them under the drag pane, which has the class 
+    name 'sc-ghost-view'.
   
-   - *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.
+  - *ghost:  YES | NO*  If NO, the drag view image will show, but the source 
+    dragView will not be hidden.  Set to YES 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.
+  - *slideBack: YES | NO*  If YES and 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.
+  - *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.
+  - *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 be used instead.
   
-   - *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.
+  - *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 
+    window.
   
-   - *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 */ {
   
-  /** [RO] The source object used to coordinate this drag. */  
+  /**
+    The source object used to coordinate this drag.
+    
+    @readOnly
+    @type SC.DragSource
+  */
   source: null,
-
-  /**  The actual image being dragged around the screen.  
   
-    This is created automatically from the dragView.
+  /**
+    The view actually dragged around the screen. This is created automatically
+    from the dragView.
+    
+    @readOnly
+    @type SC.View
   */
   ghostView: null,
-
+  
   /**  
     The view that was used as the source of the ghostView.  
     
     The drag view is not moved from its original location during a drag.
     Instead, the DOM content of the view is cloned and managed by the 
     ghostView.  If you want to visually indicate that the view is being 
-    movied, you may want to temporarily hide it during the drag.
+    moved, you may want to temporarily hide it during the drag.
+    
+    @readOnly
+    @type SC.View
   */
   dragView: null,
   
-  /**  
-    If YES, the dragView is automatically hidden while dragging around the ghost.
+  /**
+    If YES, the dragView is automatically hidden while dragging around the 
+    ghost.
+    
+    @readOnly
+    @type Boolean
   */
   ghost: YES,
   
   /**
-    If YES, then the ghostView will slide back to its original location if drag is cancelled.
+    If YES, then the ghostView will slide back to its original location if 
+    drag is cancelled.
+    
+    @type Boolean
   */
   slideBack: YES,
   
-  /**  The original mouse down event. */
+  /**
+    The original mouse down event.
+    
+    @readOnly
+    @type SC.Event
+  */
   mouseDownEvent: null,
-
-  /**  
-    The origin to slide back to in the coordinate of the dragView's offsetParent.
+  
+  /**
+    The origin to slide back to in the coordinate of the dragView's 
+    containerView.
+    
+    @type Point
   */
   ghostOffset: { x: 0, y: 0 },
   
   /**
-    The current location of the mouse pointer in window coordinates.  
-  
-    This is updated as long as the mouse button is pressed.
+    The current location of the mouse pointer in window coordinates. This is 
+    updated as long as the mouse button is pressed. Drop targets are 
+    encouraged to update this property in their dragUpdated() method 
+    implementations.
+    
+    The ghostView will be positioned at this location.
+    
+    @type Point
   */
   location: {},
-
+  
   // ..........................................
   // DRAG DATA
   //
-
+  
   /**
     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.
-
+    Returns an array of data types supported by the drag source.  This may be 
+    generated dynamically depending on the data source.
+    
     If you are implementing a drag source, you will need to provide these data
     types so that drop targets can detect if they can accept your drag data.
     
@@ -123,7 +152,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.
     
-    @field {Array} available data types
+    @property {Array} available data types
   */
   dataTypes: function() {
     // first try to use the data source.
@@ -154,18 +183,18 @@ SC.Drag = SC.Object.extend(
     @returns {Boolean} YES if data type is present in dataTypes array.
   */
   hasDataType: function(dataType) {
-    return (this.get('dataTypes').indexOf(dataType) >= 0) ;  
+    return (this.get('dataTypes').indexOf(dataType) >= 0) ;
   },
   
   /**
     Retrieve the data for the specified dataType from the drag source.
-  
-    Drop targets can use this method during their performDragOperation() method
-    to retrieve the actual data provided by the drag data source.  This data
-    may be generated dynamically depending on the data source.
     
-    @param {Object} dataType data type you want to retrieve.  Should be one of the values returned in the dataTypes property
+    Drop targets can use this method during their performDragOperation() 
+    method to retrieve the actual data provided by the drag data source.  This
+    data may be generated dynamically depending on the data source.
     
+    @param {Object} dataType data type you want to retrieve.  Should be one of
+      the values returned in the dataTypes property
     @returns {Object} The generated data.
   */
   dataForType: function(dataType) {
@@ -190,69 +219,110 @@ SC.Drag = SC.Object.extend(
   
   /**
     Optional object used to provide the data for the drag.
-
+    
     Drag source can designate a dataSource object to generate the data for 
     a drag dynamically.  The data source can and often is the drag source 
     object itself.  
-
+    
     Data Source objects must comply with the SC.DragDataSource interface.  If
     you do not want to implement this interface, you can provide the data 
     directly with the data property.
-
+    
     If you are implementing a drop target, use the dataTypes property and 
-    dataForTypes() method to access data instead of working directly with these
-    properties.
+    dataForTypes() method to access data instead of working directly with 
+    these properties.
     
-    @type {Object}
+    @readOnly
+    @type SC.DragDataSource
   */
   dataSource: null,
-
+  
   /**
     Optional hash of data.  Used if no dataSource was provided.
     
     Drag sources can provide a hash of data when the drag begins instead of 
     specifying an actual dataSource.  The data is stored in this property.
     If you are implementing a drop target, use the dataTypes property and 
-    dataForTypes() method to access data instead of working directly with these
-    properties.
+    dataForTypes() method to access data instead of working directly with 
+    these properties.
     
-    @type {Object}
+    @readOnly
+    @type Hash
   */
   data: null,
-
-  // required by autoscroll
+  
+  /**
+    Returns the currently allowed dragOperations for the drag.  This will be 
+    set just before any callbacks are invoked on a drop target.  The drag 
+    source is given an opportunity to set these operations.
+    
+    @readOnly
+    @type Number
+  */
+  allowedDragOperations: SC.DRAG_ANY,
+  
+  /** @private required by autoscroll */
   _dragInProgress: YES,
   
-  // this will actually start the drag process.
+  /** @private
+    This will actually start the drag process. Called by SC.Drag.start().
+  */
   startDrag: function() {
     // create the ghost view
     this._createGhostView() ;
     
+    var evt = this.event ;
+    
     // compute the ghost offset from the original mouse location
-    var dragView = this.dragView ;
-    var origin = dragView.convertFrameToView(dragView.get('frame'), null) ;
-    var pointer = { x: this.event.pageX, y: this.event.pageY } ;
-    this.ghostOffset = { x: (pointer.x-origin.x), y: (pointer.y-origin.y) } ;
-
+    
+    var loc = { x: evt.pageX, y: evt.pageY } ;
+    this.set('location', loc) ;
+    
+    var dv = this.dragView ;
+    var pane = dv.get('pane') ;
+    var pv = dv.get('parentView') ;
+    var clippingFrame = dv.get('clippingFrame') ;
+    // convert to global cooridinates
+    //var f = pv ? pv.convertFrameToView(clippingFrame, null) : clippingFrame ;
+    var f = pv ? pv.convertFrameToView(dv.get('frame'), null) : dv.get('frame') ;
+    var pf = pane ? pane.get('frame') : {x:0, y: 0};
+    
+    dv.adjust({
+      top: f.y + pf.y,
+      left: f.x + pf.x,
+      width: f.width,
+      height: f.height
+    });
+    //get frame in global cords after pane adjustment
+    var dvf = dv.get('frame');
+    
+    var origin = f;//pv.convertFrameToView(dv.get('frame'), null) ;
+    
+    this.ghostOffset = { x: (loc.x-origin.x), y: (loc.y-origin.y) } ;
+    
+    this.mouseGhostOffset = {x: (loc.x - dvf.x), y: (loc.y - dvf.y)};
+    
     // position the ghost view
-    this._positionGhostView(this.event) ;
+    this._positionGhostView(evt) ;
     
     // notify root responder that a drag is in process
-    this._ghostView.rootResponder.dragDidStart(this);
+    this.ghostView.rootResponder.dragDidStart(this) ;
     
     var source = this.source ;
-    if (source && source.dragDidBegin) source.dragDidBegin(this, pointer) ;
+    if (source && source.dragDidBegin) source.dragDidBegin(this, loc) ;
     
     // let all drop targets know that a drag has started
     var ary = this._dropTargets() ;
     for (var idx=0, len=ary.length; idx<len; idx++) {
-      ary[idx].tryToPerform('dragStarted', this.event) ;
+      ary[idx].tryToPerform('dragStarted', this, evt) ;
     }
   },
   
-  /**  
-    @private
-    
+  // ..........................................
+  // PRIVATE PROPERTIES AND METHODS
+  //
+  
+  /** @private
     This method is called repeatedly during a mouse drag.  It updates the
     position of the ghost image, then it looks for a current drop target and
     notifies it.
@@ -264,35 +334,32 @@ SC.Drag = SC.Object.extend(
       return ; // quickly ignore duplicate calls
     } 
     
-    // cache the current location to avoid processing duplicate mouseDragged calls
+    // cache the current location to avoid processing duplicate mouseDragged 
+    // calls
     this.set('location', { x: evt.pageX, y: evt.pageY }) ;
     
-    // reposition the ghostView
-    this._positionGhostView(evt) ;
-    
     // STEP 1: Determine the deepest drop target that allows an operation.
-    // if the drop target selected the last time this method was called differs
-    // from the deepest target found, then go up the chain until we either hit the
-    // last one or find one that will allow a drag operation
+    // if the drop target selected the last time this method was called 
+    // differs from the deepest target found, then go up the chain until we 
+    // either hit the last one or find one that will allow a drag operation
     var source = this.source ;
     var last = this._lastTarget ;
     var target = this._findDropTarget(evt) ; // deepest drop target
     var op = SC.DRAG_NONE ;
     
     while (target && (target != last) && (op == SC.DRAG_NONE)) {
-      // make sure the drag source will permit a drop operation on the named target
+      // make sure the drag source will permit a drop operation on the named 
+      // target
       if (target && source && source.dragSourceOperationMaskFor) {
         op = source.dragSourceOperationMaskFor(this, target) ;
       } else op = SC.DRAG_ANY ; // assume drops are allowed
       
-      this.sourceDropOperations = op ;
-      
       // now, let's see if the target will accept the drag
       if ((op != SC.DRAG_NONE) && target && target.computeDragOperations) {
-        op = op & target.computeDragOperations(this, evt) ;
+        op = op & target.computeDragOperations(this, evt, op) ;
       } else op = SC.DRAG_NONE ; // assume drops AREN'T allowed
       
-      this.dropOperations = op ;
+      this.allowedDragOperations = op ;
       
       // if DRAG_NONE, then look for the next parent that is a drop zone
       if (op == SC.DRAG_NONE) target = this._findNextDropTarget(target) ;
@@ -314,6 +381,9 @@ SC.Drag = SC.Object.extend(
      
     // notify source that the drag moved
     if (source && source.dragDidMove) source.dragDidMove(this, loc) ;
+    
+    // reposition the ghostView
+    this._positionGhostView(evt) ;
   },
   
   /**
@@ -323,34 +393,37 @@ SC.Drag = SC.Object.extend(
     executes the drop target protocol to try to complete the drag operation.
   */
   mouseUp: function(evt) {
-    var loc = { x: evt.pageX, y: evt.pageY } ;
-    var target = this._lastTarget, op = this.dropOperations;
+    var loc    = { x: evt.pageX, y: evt.pageY },
+        target = this._lastTarget, 
+        op     = this.allowedDragOperations;
+    
+    this.set('location', loc);
     
     // try to have the drop target perform the drop...
     try {
       if (target && target.acceptDragOperation && target.acceptDragOperation(this, op)) {
-        op = (target.performDragOperation) ? target.performDragOperation(this, op) : SC.DRAG_NONE ;  
+        op = target.performDragOperation ? target.performDragOperation(this, op) : SC.DRAG_NONE ;  
       } else {
         op = SC.DRAG_NONE;
       }
     } catch (e) {
-      console.log('Exception in SC.Drag.mouseUp(acceptDragOperation|performDragOperation): %@'.fmt(e)) ;
+      console.error('Exception in SC.Drag.mouseUp(acceptDragOperation|performDragOperation): %@'.fmt(e)) ;
     }
     
     try {
       // notify last drop target that the drag exited, to allow it to cleanup
       if (target && target.dragExited) target.dragExited(this, evt) ;
-    } catch (e) {
-      onsole.log('Exception in SC.Drag.mouseUp(target.dragExited): %@'.fmt(e)) ;
+    } catch (ex) {
+      console.error('Exception in SC.Drag.mouseUp(target.dragExited): %@'.fmt(ex)) ;
     }
     
     // notify all drop targets that the drag ended
     var ary = this._dropTargets() ;
     for (var idx=0, len=ary.length; idx<len; idx++) {
       try {
-        ary[idx].tryToPerform('dragEnded', evt) ;
-      } catch (e) {
-        console.log('Exception in SC.Drag.mouseUp(dragEnded on %@): %@'.fmt(ary[idx], e)) ;
+        ary[idx].tryToPerform('dragEnded', this, evt) ;
+      } catch (ex2) {
+        console.error('Exception in SC.Drag.mouseUp(dragEnded on %@): %@'.fmt(ary[idx], ex2)) ;
       }
     }
     
@@ -362,49 +435,62 @@ SC.Drag = SC.Object.extend(
     if (source && source.dragDidEnd) source.dragDidEnd(this, loc, op) ;
     
     this._lastTarget = null ;
-    this._dragInProgress = NO ; // required by autoscroll, which is invoked by a timer
+    this._dragInProgress = NO ; // required by autoscroll (invoked by a timer)
   },
   
-  // ..........................................
-  // PRIVATE PROPERTIES AND METHODS
-  //
-  
-  _ghostView: null,
-  
-  // this will create the ghostView and add it to the document.
+  /** @private
+    This will create the ghostView and add it to the document.
+  */
   _createGhostView: function() {
-    var view = this._ghostView = SC.Pane.create({ owner: this }) ;
-    view.$().addClass('sc-ghost-view').append(this.dragView.rootElement.cloneNode(true)) ;
-    // var f = this.dragView.get('frame') ;
-    // console.log('dragView %@ frame is { top: %@, left: %@, width: %@, height: %@ }'.fmt(this.dragView, f.y, f.x, f.width, f.height)) ;
-    view.adjust(this.dragView.get('frame')) ;
+    var that  = this,
+        frame = this.dragView.get('frame'),
+        view;
+        
+    view = this.ghostView = SC.Pane.create({
+      classNames:['sc-ghost-view'],
+      layout: { top: frame.y, left: frame.x, width: frame.width, height: frame.height },
+      owner: this,
+      didCreateLayer: function() {
+        if (that.dragView) {
+          var layer = that.dragView.get('layer') ;
+          if (layer) this.get('layer').appendChild(layer.cloneNode(true)) ;
+        }
+      }
+    });
+    
     view.append() ;  // add to window
   },
   
-  // positions the ghost view underneath the mouse with the initial offset
-  // recorded by when the drag started.
+  /** @private
+    Positions the ghost view underneath the mouse with the initial offset
+    recorded by when the drag started.
+  */
   _positionGhostView: function(evt) {
-    var loc = { x: evt.pageX, y: evt.pageY } ;
+    var loc = this.get('location') ;
     loc.x -= this.ghostOffset.x ;
     loc.y -= this.ghostOffset.y ;
-    this._ghostView.adjust({ top: loc.y, left: loc.x }) ;   
+    this.ghostView.adjust({ top: loc.y, left: loc.x }) ;   
+    this.ghostView.invokeOnce('updateLayout') ;
   },
   
+  /** @private */
   _destroyGhostView: function() {
-    if (this._ghostView) {
-      this._ghostView.remove() ;
-      this._ghostView = null ; // this will allow the GC to collect it.
+    if (this.ghostView) {
+      this.ghostView.remove() ;
+      this.ghostView = null ; // this will allow the GC to collect it.
     }
   },
   
-  // Return an array of drop targets, sorted with any nested drop targets
-  // at the top of the array.  The first time this method is called during
-  // a drag, it will reconstruct this array using the current set of 
-  // drop targets.  Afterwards it uses the cached set until the drop
-  // completes.
-  //
-  // This means that if you change the view hierarchy of your drop targets
-  // during a drag, it will probably be wrong.
+  /** @private
+    Return an array of drop targets, sorted with any nested drop targets
+    at the top of the array.  The first time this method is called during
+    a drag, it will reconstruct this array using the current set of 
+    drop targets.  Afterwards it uses the cached set until the drop
+    completes.
+    
+    This means that if you change the view hierarchy of your drop targets
+    during a drag, it will probably be wrong.
+  */
   _dropTargets: function() {
     if (this._cachedDropTargets) return this._cachedDropTargets ;
     
@@ -445,7 +531,10 @@ SC.Drag = SC.Object.extend(
     return ret ;
   },
   
-  // This will search through the drop targets, looking for one in the target area.
+  /** @private
+    This will search through the drop targets, looking for one in the target 
+    area.
+  */
   _findDropTarget: function(evt) {
     var loc = { x: evt.pageX, y: evt.pageY } ;
     
@@ -459,15 +548,17 @@ SC.Drag = SC.Object.extend(
       // get clippingFrame, converted to the pane.
       frame = target.convertFrameToView(target.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 is not deeper.
+      // 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 is not deeper.
       if (SC.pointInRect(loc, frame)) return target;
     } 
     return null ;
   },
   
-  // Search the parent nodes of the target to find another view matching the 
-  // drop target.  Returns null if no matching target is found.
+  /** @private
+    Search the parent nodes of the target to find another view matching the 
+    drop target.  Returns null if no matching target is found.
+  */
   _findNextDropTarget: function(target) {
     var dropTargets = SC.Drag._dropTargets ;
     while (target = target.get('parentView')) {
@@ -480,13 +571,15 @@ SC.Drag = SC.Object.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
+  /** @private
+    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 YES if a scroll was performed.
+  */
   _autoscroll: function(evt) {
-    return NO ; // TODO FIXME
+    if (!evt) evt = this._lastAutoscrollEvent ;
     
     // If drag has ended, exit
     if (!this._dragInProgress) return NO;
@@ -498,80 +591,73 @@ SC.Drag = SC.Object.extend(
     // - there must be room left to scroll in that direction. 
     
     // NOTE: an event is passed only when called from mouseDragged
-    var loc = (evt) ? { x: evt.pageX, y: evt.pageY } : this.get('location') ;
-    var view = this._findScrollableView(loc) ;
+    var loc  = evt ? { x: evt.pageX, y: evt.pageY } : this.get('location'),
+        view = this._findScrollableView(loc),
+        scrollableView = null, // become final view when found
+        vscroll, hscroll, min, max, edge, container, f;
     
-    // 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;
+    // hscroll and vscroll will become either 1 or -1 to indicate scroll 
+    // direction or 0 for no scroll.
     
     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') ;
+      vscroll = view.get('canScrollVertical') ? 1 : 0;
+      hscroll = view.get('canScrollHorizontal') ? 1 : 0;
+
+      // at least one direction might be scrollable.  Collect frame info
+      if (vscroll || hscroll) {
+        container = view.get('containerView');
+        if (container) {
+          f = view.convertFrameToView(container.get('frame'),null);
+        } else {
+          vscroll = hscroll = 0 ; // can't autoscroll this mother
+        }
       }
-      
-      if (verticalScroll != 0) {
+
+      // handle vertical direction
+      if (vscroll) {
         
         // 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 ;
+        max = SC.maxY(f); 
+        min = max - SC.DRAG_AUTOSCROLL_ZONE_THICKNESS ; 
+        if (loc.y >= min && loc.y <= max) vscroll = 1 ;
+        else {
+          // how about top
+          min = SC.minY(f); 
+          max = min + SC.DRAG_AUTOSCROLL_ZONE_THICKNESS ;
+          if (loc.y >= min && loc.y <= max) vscroll = -1 ;
+          else vscroll = 0 ; // can't scroll vertical
         }
       }
-      
-      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 ;
+
+      // handle horizontal direction
+      if (hscroll) {
+        
+        // bottom hotzone?
+        max = SC.maxX(f); 
+        min = max - SC.DRAG_AUTOSCROLL_ZONE_THICKNESS ; 
+        if (loc.x >= min && loc.x <= max) hscroll = 1 ;
+        else {
+          // how about top
+          min = SC.minX(f); 
+          max = min + SC.DRAG_AUTOSCROLL_ZONE_THICKNESS ;
+          if (loc.x >= min && loc.x <= max) hscroll = -1 ;
+          else hscroll = 0 ; // can't scroll vertical
         }
       }
       
       // if we can scroll, then set this.
-      if ((verticalScroll != 0) || (horizontalScroll != 0)) {
-        scrollableView = view ;
-      } else view = this._findNextScrollableView(view) ;
+      if (vscroll || hscroll) 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)) {
+    // 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 ;
+        this._verticalScrollAmount *= 1.05 ; // accelerate scroll
       }
       
     // otherwise, reset everything and disallow scroll
@@ -580,32 +666,37 @@ SC.Drag = SC.Object.extend(
       this._horizontalScrollAmount = 15 ;
       this._verticalScrollAmount = 15 ;
       this._hotzoneStartTime = (scrollableView) ? Date.now() : null ;
-      
-      horizontalScroll = verticalScroll = 0 ;
+      hscroll = vscroll = 0 ;
     }
     
     // STEP 3: Scroll!
-    if (scrollableView && ((horizontalScroll != 0) || (verticalScroll != 0))) {
+    if (scrollableView && (hscroll || vscroll)) {
       var scroll = { 
-        x: horizontalScroll * this._horizontalScrollAmount,
-        y: verticalScroll * this._verticalScrollAmount 
+        x: hscroll * this._horizontalScrollAmount,
+        y: vscroll * this._verticalScrollAmount 
       } ;
-      
       scrollableView.scrollBy(scroll) ;
     }
     
-    // If a scrollable view was found, then reschedule
+    // If a scrollable view was found, then check later
     if (scrollableView) {
-      this.invokeLater('_autoscroll', 100, null);
+      if (evt) {
+        this._lastAutoscrollEvent = { pageX: evt.pageX, pageY: evt.pageY };
+      }
+      this.invokeLater(this._autoscroll, 100, null);
       return YES ;
-    } else return NO ;
+    } else {
+      this._lastAutoscrollEvent = null;
+      return NO ;
+    }
   },
   
-  // 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 state of
-  // scrollable views.  Afterwards it uses the cached set until the drop
-  // completes.
+  /** @private
+    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 state of scrollable 
+    views.  Afterwards it uses the cached set until the drop completes.
+  */
   _scrollableViews: function() {
     if (this._cachedScrollableView) return this._cachedScrollableView ;
     
@@ -630,15 +721,19 @@ SC.Drag = SC.Object.extend(
     return ret ;
   },
   
-  // This will search through the scrollable views, looking for one in the 
-  // target area.
+  /** @private
+    This will search through the scrollable views, looking for one in the 
+    target area.
+  */
   _findScrollableView: function(loc) {
-    var target, frame ;
-    var ary = this._scrollableViews() ;
-    for (var idx=0, len=ary.length; idx<len; idx++) {
+    var ary = this._scrollableViews(),
+        len = ary ? ary.length : 0,
+        target, frame, idx;
+        
+    for (idx=0; idx<len; idx++) {
       target = ary[idx] ;
       
-      // FIXME if (!target.get('isVisibleInWindow')) continue ;
+      if (!target.get('isVisibleInWindow')) continue ;
       
       // get clippingFrame, converted to the pane
       frame = target.convertFrameToView(target.get('clippingFrame'), null) ;
@@ -649,8 +744,10 @@ SC.Drag = SC.Object.extend(
     return null ;
   },
   
-  // Search the parent nodes of the target to find another scrollable view.
-  // return null if none is found.
+  /** @private
+    Search the parent nodes of the target to find another scrollable view.
+    return null if none is found.
+  */
   _findNextScrollableView: function(view) {
     var scrollableViews = SC.Drag._scrollableViews ;
     while (view = view.get('parentView')) {
@@ -665,7 +762,7 @@ SC.Drag.mixin(
 /** @scope SC.Drag */ {
    
   /**  
-   This is the method you use to initiate a new drag.  See class documentation 
+   This is the method you use to initiate a new drag.  See class documentation
    for more info on the options taken by this method.
    
    @params {Hash} ops a hash of options.  See documentation above.
@@ -676,7 +773,10 @@ SC.Drag.mixin(
     return ret ;
   },
   
+  /** @private */
   _dropTargets: {},
+  
+  /** @private */
   _scrollableViews: {},
   
   /**
@@ -685,9 +785,10 @@ SC.Drag.mixin(
     This method is called automatically whenever a view is created with the
     isDropTarget property set to YES.  You generally will not need to call it
     yourself.
+    
+    @param {SC.View} target a view implementing the SC.DropTarget protocol
   */
   addDropTarget: function(target) {
-    // console.log('addDropTarget called on %@ with %@'.fmt(this, target));
     this._dropTargets[SC.guidFor(target)] = target ;
   },
   
@@ -696,15 +797,18 @@ SC.Drag.mixin(
     
     This method is called automatically whenever a view is removed from the 
     hierarchy.  You generally will not need to call it yourself.
+    
+    @param {SC.View} target A previously registered drop target
   */
   removeDropTarget: function(target) {
-    // console.log('removeDropTarget called on %@ with %@'.fmt(this, target));
     delete this._dropTargets[SC.guidFor(target)] ;
   },
   
   /**
-    Register the view object as a scrollable view.  These views will auto-scroll
-    during a drag.
+    Register the view object as a scrollable view.  These views will 
+    auto-scroll during a drag.
+    
+    @param {SC.View} target The view that should be auto-scrolled
   */
   addScrollableView: function(target) {
     this._scrollableViews[SC.guidFor(target)] = target ;  
@@ -713,9 +817,11 @@ SC.Drag.mixin(
   /**
     Remove the view object as a scrollable view.  These views will auto-scroll
     during a drag.
+    
+    @param {SC.View} target A previously registered scrollable view
   */
   removeScrollableView: function(target) {
     delete this._scrollableViews[SC.guidFor(target)] ;  
   }
-
+  
 });