sproutcore 1.0.1046 → 1.0.1049.pre.1

data/frameworks/sproutcore/frameworks/designer/css/css_style.js

@@ -2,7 +2,7 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2009 Apple Inc. All rights reserved.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /**

data/frameworks/sproutcore/frameworks/designer/css/css_style_sheet.js

@@ -2,7 +2,7 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2009 Apple Inc. All rights reserved.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('css/css_rule') ;

data/frameworks/sproutcore/frameworks/designer/{views → designers}/button.js

@@ -4,7 +4,7 @@
 // Portions copyright ©2008 Apple Inc.  All rights reserved.
 // ========================================================================
 
-sc_require('views/designer');
+sc_require('designers/view_designer');
 sc_require('mixins/button');
 
 SC.ButtonView.Designer = SC.ViewDesigner.extend( SC.Button.Designer,
@@ -12,7 +12,7 @@ SC.ButtonView.Designer = SC.ViewDesigner.extend( SC.Button.Designer,
   
   encodeChildViews: NO,
   
-  designProperties: 'theme buttonBehavior href'.w(),
+  designProperties: 'theme buttonBehavior href isDefault'.w(),
   
   canResizeVertical: NO,
   

data/frameworks/sproutcore/frameworks/designer/{views → designers}/label.js

@@ -4,7 +4,7 @@
 // Portions copyright ©2008 Apple Inc.  All rights reserved.
 // ========================================================================
 
-sc_require('views/designer');
+sc_require('designers/view_designer');
 
 SC.LabelView.Designer = SC.ViewDesigner.extend(
 /** @scope SC.LabelView.Designer.prototype */ {

data/frameworks/sproutcore/frameworks/designer/designers/object_designer.js

@@ -0,0 +1,296 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// Copyright ©2006-2008, Sprout Systems, Inc. and contributors.
+// Portions copyright ©2008 Apple Inc.  All rights reserved.
+// ========================================================================
+/*global SC */
+
+/** @class
+  This is a basic designer used for all SC.Objects that are created in design
+  mode.
+  
+  FIXME: have SC.ViewDesigner subclass this designer.....
+
+  @extends SC.Object
+  @since SproutCore 1.0
+*/
+SC.ObjectDesigner = SC.Object.extend(
+/** @scope SC.ViewDesigner.prototype */ {
+
+  /** The object managed by this designer. */
+  object: null,
+  
+  /** The class for the design.  Set when the object is created. */
+  objectClass: null,
+  
+  /** Set to YES if the object is currently selected for editing. */
+  designIsSelected: NO,
+
+  /** Set to YES if this particular designer should not be enabled. */
+  designIsEnabled: YES,
+  
+  /**
+    The current page.  Comes from the object.
+    
+    @property {SC.Page}
+  */
+  page: function() {
+    var v = this.get('object');
+    return (v) ? v.get('page') : null;
+  }.property('object').cacheable(),
+  
+  /**
+    The design controller from the page.  Comes from page
+    
+    @property {SC.PageDesignController}
+  */
+  designController: function() {
+    var p = this.get('page');
+    return (p) ? p.get('designController') : null ;  
+  }.property('page').cacheable(),
+  
+  
+  concatenatedProperties: ['designProperties', 'localizedProperties', 'excludeProperties'],
+
+  // ..........................................................
+  // GENERIC PROPERTIES
+  // 
+  // Adds support for adding generic properties to a object.  These will
+  // overwrite whatever you write out using specifically supported props.
+    
+  // ..........................................................
+  // HANDLE ENCODING OF VIEW DESIGN
+  // 
+
+  /**
+    Encodes any simple properties that can just be copied from the object onto
+    the coder.  This is used by encodeDesignProperties() and 
+    encodeLocalizedProperties().
+  */
+  encodeSimpleProperties: function(props, coder) {
+    var object = this.get('object'), proto = this.get('objectClass').prototype ;
+    props.forEach(function(prop) {
+      var val = object[prop] ; // avoid get() since we don't want to exec props
+      if (val !== undefined && (val !== proto[prop])) {
+        coder.encode(prop, val) ;
+      }
+    }, this);
+  },
+  
+
+  /** 
+    Array of properties that can be encoded directly.  This is an easy way to
+    add support for simple properties that need to be written to the design
+    without added code.  These properties will be encoded by 
+    encodeDesignProperties().
+    
+    You can add to this array in your subclasses.
+  */
+  designProperties: [],
+  
+  /*
+    Array of properties specifically not displayed in the editable properties
+    list
+  */
+  
+  excludeProperties: [],
+  
+  
+  /*
+    Array of properties avaliaible to edit in greenhouse
+    
+  */
+  editableProperties: function(){
+
+    var con = this.get('designAttrs'), 
+        obj = this.get('object'),
+        ret = [],
+        designProperties = this.get('designProperties'),
+        excludeProperties = this.get('excludeProperties');
+    if(con) con = con[0];
+    for(var i in con){
+      if(con.hasOwnProperty(i) && excludeProperties.indexOf(i) < 0){
+        if(!SC.none(obj[i])) ret.pushObject(SC.Object.create({value: obj[i], key: i, view: obj}));
+      }
+    }
+    designProperties.forEach(function(k){
+      if(excludeProperties.indexOf(k) < 0){
+        ret.pushObject(SC.Object.create({value: obj[k], key: k, view: obj}));
+      }
+    });
+    
+    return ret; 
+  }.property('designProperties').cacheable(),
+  
+  /** 
+    Invoked by a design coder to encode design properties.  The default 
+    implementation invoked encodeDesignProperties() and 
+    encodeChildViewsDesign().  You can override this method with your own 
+    additional encoding if you like.
+  */
+  encodeDesign: function(coder) {
+    coder.set('className', SC._object_className(this.get('objectClass')));
+    this.encodeDesignProperties(coder);
+    return YES ;
+  },
+
+  /**
+    Encodes the design properties for the object.  These properties are simply
+    copied from the object onto the coder.  As an optimization, the value of 
+    each property will be checked against the default value in the class. If
+    they match, the property will not be emitted.
+  */
+  encodeDesignProperties: function(coder) {
+    return this.encodeSimpleProperties(this.get('designProperties'), coder);
+  },
+  
+  /** 
+    Array of localized that can be encoded directly.  This is an easy way to
+    add support for simple properties that need to be written to the 
+    localization without added code.  These properties will be encoded by 
+    encodeLocalizedProperties().
+    
+    You can add to this array in your subclasses.
+  */
+  localizedProperties: [],
+  
+  /** 
+    Invoked by a localization coder to encode design properties.  The default 
+    implementation invoked encodeLocalizedProperties() and 
+    encodeChildViewsLoc().  You can override this method with your own 
+    additional encoding if you like.
+  */
+  encodeLoc: function(coder) {
+    coder.set('className', SC._object_className(this.get('objectClass')));
+    this.encodeLocalizedProperties(coder);
+    return YES ;
+  },
+
+  /**
+    Encodes the localized properties for the object.  These properties are 
+    simply copied from the object onto the coder.  As an optimization, the value 
+    of  each property will be checked against the default value in the class. 
+    If they match, the property will not be emitted.
+  */
+  encodeLocalizedProperties: function(coder) {
+    return this.encodeSimpleProperties(this.get('localizedProperties'),coder);
+  },
+
+  /**
+    This method is invoked when the designer is instantiated.  You can use 
+    this method to reload any state saved in the object.  This method is called
+    before any observers or bindings are setup to give you a chance to 
+    configure the initial state of the designer.
+  */
+  awakeDesign: function() {},
+  
+  /**
+    The unknownProperty handler will pass through to the object by default. 
+    This will often provide you the support you need without needing to 
+    customize the Designer.  Just make sure you don't define a conflicting
+    property name on the designer itself!
+  */
+  unknownProperty: function(key, value) {
+    if (value !== undefined) {
+      this.object.set(key, value);
+      return value ;
+    } else return this.object.get(key);
+  },
+  
+  // ......................................
+  // PRIVATE METHODS
+  //
+  
+  init: function() {
+    
+    // setup design from object state...
+    this.awakeDesign();
+    
+    // setup bindings, etc
+    sc_super();
+        
+    // and register with designController, if defined...
+    var c= this.get('designController');
+    if (c) c.registerDesigner(this) ;
+    
+  },
+
+  destroy: function() {
+    sc_super();
+    this.set('object', null); // clears the object observer...  
+  },
+    
+  tryToPerform: function(methodName, arg1, arg2) {
+    // only handle event if we are in design mode
+    var page = this.object ? this.object.get('page') : null ;
+    var isDesignMode = page ? page.get('needsDesigner') || page.get('isDesignMode') : NO ;
+
+    // if we are in design mode, route event handling to the designer
+    // otherwise, invoke default method.
+    if (isDesignMode) {
+      return sc_super();
+    } else {
+      return SC.Object.prototype.tryToPerform.apply(this.object, arguments);
+    }
+  }
+}) ;
+
+// Set default Designer for object
+if (!SC.Object.Designer) SC.Object.Designer = SC.ObjectDesigner ;
+
+// ..........................................................
+// DESIGN NOTIFICATION METHODS
+//
+// These methods are invoked automatically on the designer class whenever it 
+// is loaded.
+
+SC.ObjectDesigner.mixin({
+  /**
+    Invoked whenever a designed object is loaded.  This will save the design
+    attributes for later use by a designer.
+  */
+  didLoadDesign: function(designedObject, sourceObject, attrs) {
+    designedObject.isDesign = YES ; // indicates that we need a designer.
+    designedObject.designAttrs = attrs;
+    designedObject.sourceObject = sourceObject;
+  },
+
+  /**
+    Invoked whenever a location is applied to a designed object.  Saves the 
+    attributes separately for use by the design object.
+  */
+  didLoadLocalization: function(designedObject, attrs) {
+    // nothing to do for now.
+  },
+  
+  /**
+    Invoked whenver a object is created.  This will create a peer designer if 
+    needed.
+  */
+  didCreateObject: function(object, attrs) {
+    // add designer if page is in design mode
+    var page = object.get('page'), design = object.constructor;
+    
+    if (design.isDesign && page && page.get('needsDesigner')) {
+      
+      // find the designer class
+      var cur = design, origDesign = design;
+      while(cur && !cur.Designer) cur = cur.superclass;
+      var DesignerClass = (cur) ? cur.Designer : SC.Object.Designer;
+      
+      // next find the first superclass object that is not a design (and a real
+      // class).  This is important to make sure that we can determine the 
+      // real name of a object's class.
+      while (design && design.isDesign) design = design.superclass;
+      if (!design) design = SC.Object;
+      
+      object.designer = DesignerClass.create({
+        object: object,
+        objectClass: design,
+        designAttrs: origDesign.designAttrs,
+        sourceObject: origDesign.sourceObject
+      });
+    }
+  }
+  
+});

data/frameworks/sproutcore/frameworks/designer/{views → designers}/tab.js

@@ -4,13 +4,15 @@
 // Portions copyright ©2008 Apple Inc.  All rights reserved.
 // ========================================================================
 
-sc_require('views/designer');
+sc_require('designers/view_designer');
 
 SC.TabView.Designer = SC.ViewDesigner.extend(
 /** @scope SC.TabView.Designer.prototype */ {
   
   encodeChildViews: NO,
   
+  acceptRootDesigner: YES,
+  
   designProperties: 'nowShowing items itemTitleKey itemValueKey itemIsEnabledKey itemIconKey itemWidthKey tabLocation userDefaultKey'.w()
   
 });

data/frameworks/sproutcore/frameworks/designer/designers/text_field.js

@@ -0,0 +1,15 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// Copyright ©2006-2008, Sprout Systems, Inc. and contributors.
+// Portions copyright ©2008 Apple Inc.  All rights reserved.
+// ========================================================================
+
+sc_require('designers/view_designer');
+
+SC.TextFieldView.Designer = SC.ViewDesigner.extend(
+/** @scope SC.TabView.Designer.prototype */ {
+  
+  encodeChildViews: NO,
+  
+  designProperties: 'isPassword isTextArea hint'.w()
+});

data/frameworks/sproutcore/frameworks/designer/{views/designer.js → designers/view_designer.js}

@@ -5,7 +5,7 @@
 // ========================================================================
 
 /*global ViewBuilder */
-
+sc_require('views/high_light');
 /** @class
 
   A Designer class provides the core editing functionality you need to edit
@@ -78,7 +78,7 @@ SC.ViewDesigner = SC.Object.extend(
   */
   encodeChildViews: YES,
   
-  concatenatedProperties: ['designProperties', 'localizedProperties'],
+  concatenatedProperties: ['designProperties', 'localizedProperties', 'excludeProperties'],
 
 
   // ..........................................................
@@ -333,6 +333,42 @@ SC.ViewDesigner = SC.Object.extend(
   */
   designProperties: 'layout isVisible isEnabled styleClass'.w(),
   
+  
+  /*
+    Array of properties specifically not displayed in the editable properties
+    list
+  */
+  
+  excludeProperties: 'layout childViews'.w(),
+  
+  
+  /*
+    Array of properties avaliaible to edit in greenhouse
+    
+  */
+  editableProperties: function(){
+
+    var con = this.get('designAttrs'), 
+        view = this.get('view'),
+        ret = [],
+        designProperties = this.get('designProperties'),
+        excludeProperties = this.get('excludeProperties');
+    if(con) con = con[0];
+    for(var i in con){
+      if(con.hasOwnProperty(i) && excludeProperties.indexOf(i) < 0){
+        if(!SC.none(view[i])) ret.pushObject(SC.Object.create({value: view[i], key: i, view: view}));
+      }
+    }
+    designProperties.forEach(function(k){
+      if(excludeProperties.indexOf(k) < 0){
+        ret.pushObject(SC.Object.create({value: view[k], key: k, view: view}));
+      }
+    });
+    
+    return ret; 
+  }.property('designProperties').cacheable(),
+  
+  
   /** 
     Invoked by a design coder to encode design properties.  The default 
     implementation invoked encodeDesignProperties() and 
@@ -341,7 +377,7 @@ SC.ViewDesigner = SC.Object.extend(
   */
   encodeDesign: function(coder) {
     coder.set('className', SC._object_className(this.get('viewClass')));
-    this.encodeDesignProperties(coder);
+    this.encodeDesignProperties(coder);    
     this.encodeChildViewsDesign(coder);
     return YES ;
   },
@@ -356,6 +392,22 @@ SC.ViewDesigner = SC.Object.extend(
     return this.encodeSimpleProperties(this.get('designProperties'), coder);
   },
   
+  
+  encodeDesignAttributeProperties: function(coder){
+    var designProps = this.get('designProperties'),
+        designAttrs = this.get('designAttrs'),
+        simpleProps = [];
+        
+    if(designAttrs) designAttrs = designAttrs[0];
+    
+    for(var attr in designAttrs){
+      if(designAttrs.hasOwnProperty(attr) && designProps.indexOf(attr) < 0 && attr !== 'childViews'){
+        simpleProps.push(attr);
+      }
+    }
+    return this.encodeSimpleProperties(simpleProps, coder);
+  },
+  
   /**
     Encodes the design for child views.  The default implementation loops 
     through child views.  If you store your child views elsewhere in your 
@@ -364,7 +416,7 @@ SC.ViewDesigner = SC.Object.extend(
   */
   encodeChildViewsDesign: function(coder) {
     if (!this.get('encodeChildViews')) return;
-    var view = this.view, childViews = view.childViews;
+    var view = this.view, childViews = view.get('childViews');
     if (childViews.length>0) coder.object('childViews', childViews);
   },
 
@@ -421,6 +473,17 @@ SC.ViewDesigner = SC.Object.extend(
   */
   awakeDesign: function() {},
   
+  
+  /**
+    over-ride this method in your designers to customies drop operations
+    default just calls appendChild
+    
+    TODO: Come up with a better name for this method.
+  */
+  addView: function(view){
+    this.view.appendChild(view);
+  },
+  
   // ..........................................................
   // VIEW RELAYING
   // 
@@ -555,18 +618,75 @@ SC.ViewDesigner = SC.Object.extend(
   */
   willDestroyLayer: function() {},
   
+  // ..........................................................
+  // ROOT DESIGNER SUPPORT
+  // 
+  
+  parentDesignerIsRoot: function(){
+    var dc = this.get('designController'), view = this.get('view');
+    return dc.get('rootDesigner') === view.getPath('parentView.designer');
+  }.property(),
+  
+  /**
+    set this property to YES if you want your designer to become Root
+  */
+  acceptRootDesigner: NO,
+  
+  isRootDesigner: NO,
+  
+  isRootDesignerDidChange: function() {
+    
+    var isRoot = this.get('isRootDesigner'),
+        highLight = this._highLight;
+    
+    if (isRoot && this.get('designIsEnabled')) {
+      
+      if (!highLight) {
+        highLight = this._highLight = SC.RootDesignerHighLightView.create({ 
+          designer: this 
+        });
+      }
+      
+      var parent = this.view.get('parentView');
+      highLight.set('targetFrame', this.view.get('frame'));
+  
+      if (!highLight.get('parentView') !== parent) parent.insertBefore(highLight,this.view);
+    } 
+    else if (highLight) {
+      if (highLight.get('parentView')) highLight.removeFromParent();
+    }
+  }.observes('isRootDesigner'),
+  
+  resignRootDesigner: function(){
+    var prevRoot = this.get('prevRootDesigner');
+    if(this.get('isRootDesigner') && prevRoot){
+      var dc = this.get('designController');
+      if(dc) dc.makeRootDesigner(prevRoot);
+    }
+  },
+  
+  shouldReleaseRootDesigner: function(evt){
+    var frame = this.view.get('frame');
+    if(this.get('isRootDesigner') && !SC.pointInRect({ x: evt.pageX, y: evt.pageY }, frame)){
+      this.resignRootDesigner();
+      return YES;
+    }
+    return NO;
+  },
+  
   // ..........................................................
   // MOUSE HANDLING
   // 
   
-  HANDLE_MARGIN: 5,
+  HANDLE_MARGIN: 10,
   
   /**
     Select on mouseDown.  If metaKey or shiftKey is pressed, add to
     selection.  Otherwise just save starting info for dragging
   */
   mouseDown: function(evt) {
-    if (!this.get('designIsEnabled')) return NO ;
+    this.shouldReleaseRootDesigner(evt);
+    if (!this.get('designIsEnabled') || !this.get('parentDesignerIsRoot')) return NO ;
     
     // save mouse down info
     var view = this.get('view'), 
@@ -660,28 +780,80 @@ SC.ViewDesigner = SC.Object.extend(
     mousedown.
   */
   mouseDragged: function(evt) {
-    if (!this.get('designIsEnabled')) return NO ;
+    if (!this.get('designIsEnabled') || !this.get('parentDesignerIsRoot')) return NO ;
     var info = this._mouseDownInfo, 
         view = this.get('view'),
-        layout;
-    
-    if (view && (info.hanchor || info.vanchor)) {
-      layout = SC.copy(this.get('layout'));
-      if (info.hanchor) this._mouseResize(evt, info, this.HKEYS, layout);
-      if (info.vanchor) this._mouseResize(evt, info, this.VKEYS, layout);
-      this.set('layout', layout);
+        layout, startX, startY;
+    //do some binding!!!
+    if(evt.altKey && SC._Greenhouse){
+      startX = evt.pageX;
+      startY = evt.pageY;
+
+      var dragLink = SC.DrawingView.create({
+        layout: {left: 0, top: 0, right: 0, bottom: 0},
+        startPoint: {x: startX, y: startY},
+        endPoint: {x: startX, y: startY},
+        // private update
+        _pointsDidChange: function(){
+          var sp = this.get('startPoint'),
+              ep = this.get('endPoint'),
+              xDiff, yDiff, newLink;
+
+          xDiff = Math.abs(sp.x - ep.x);
+          yDiff = Math.abs(sp.y - ep.y);
+          if (xDiff > 5 || yDiff > 5){
+            newLink = {};
+            newLink.shape = SC.LINE;
+            newLink.start = {x: sp.x, y: sp.y};
+            newLink.end = {x: ep.x, y: ep.y};
+            newLink.style = { color: 'green', width: 3 };
+            this.setIfChanged('shapes', [newLink]);
+          }    
+        }.observes('startPoint', 'endPoint')
+      });
+      SC.designPage.get('designMainPane').appendChild(dragLink);
       
-    } else if (info.reposition) {
-      this.get('designController').repositionSelection(evt, info);
+      SC.Drag.start({
+        event: evt,
+        source: this,
+        dragLink: dragLink,
+        dragView: SC.View.create({ layout: {left: 0, top: 0, width: 0, height: 0}}),
+        ghost: NO,
+        slideBack: YES,
+        dataSource: this,
+        anchorView: view
+      });
+    }
+    //normal drag
+    else{
+      if (view && (info.hanchor || info.vanchor)) {
+        layout = SC.copy(this.get('layout'));
+        if (info.hanchor) this._mouseResize(evt, info, this.HKEYS, layout);
+        if (info.vanchor) this._mouseResize(evt, info, this.VKEYS, layout);
+        this.set('layout', layout);
+
+      } else if (info.reposition) {
+        this.get('designController').repositionSelection(evt, info);
+      }
     }
+
+  },
+  
+  // ..........................................................
+  // Drag source and drag data source
+  //   
+  dragDataTypes: ['SC.Binding'],
+
+  dragDataForType: function(drag, dataType) { 
+    return dataType === 'SC.Binding' ? this.get('view') : null; 
   },
   
   /**
     On mouseUp potentially change selection and cleanup.
   */
   mouseUp: function(evt) {
-    if (!this.get('designIsEnabled')) return NO ;
-    
+    if (!this.get('designIsEnabled') || !this.get('parentDesignerIsRoot')) return NO ;
+
     var info = this._mouseDownInfo;
         
     // if selected on mouse down and we didn't do any dragging, then deselect.
@@ -694,13 +866,23 @@ SC.ViewDesigner = SC.Object.extend(
           
       if (frame && pview) frame = pview.convertFrameToView(frame, null);
 
-      //debugger;
       if (!frame || SC.pointInRect({ x: evt.pageX, y: evt.pageY }, frame)) {
         var controller = this.get('designController');
         if (info.metaKey) controller.deselect(this);
         else controller.select(this, NO);
       }
     }
+    //double click
+    if(SC._Greenhouse && evt.clickCount === 2){
+      var dc = this.get('designController');
+      if(this.acceptRootDesigner && dc) {
+        dc.makeRootDesigner(this); 
+      }
+      else{
+        //TODO: [MB] decide if this is the functionality I want...
+        SC._Greenhouse.sendAction('openInspector', view);
+      }
+    }
     
     this._mouseDownInfo = null;
     
@@ -847,8 +1029,82 @@ SC.ViewDesigner = SC.Object.extend(
     } else ret[headKey] = (layout[headKey]||0)+delta;
     
     return YES ;
+  },
+  
+  // ..........................................................
+  // Drag data source (for binding lines)
+  //   
+  /**
+    This method must be overridden for drag operations to be allowed. 
+    Return a bitwise OR'd mask of the drag operations allowed on the
+    specified target.  If you don't care about the target, just return a
+    constant value.
+  
+    @param {SC.View} dropTarget The proposed target of the drop.
+    @param {SC.Drag} drag The SC.Drag instance managing this drag.
+  
+  */
+  dragSourceOperationMaskFor: function(drag, dropTarget) {
+    return SC.DRAG_LINK;
+  },
+
+  /**  
+    This method is called when the drag begins. You can use this to do any
+    visual highlighting to indicate that the receiver is the source of the 
+    drag.
+  
+    @param {SC.Drag} drag The Drag instance managing this drag.
+  
+    @param {Point} loc The point in *window* coordinates where the drag 
+      began.  You can use convertOffsetFromView() to convert this to local 
+      coordinates.
+  */
+  dragDidBegin: function(drag, loc) {
+  },
+  
+  /**
+    This method is called whenever the drag image is moved.  This is
+    similar to the dragUpdated() method called on drop targets.
+
+    @param {SC.Drag} drag The Drag instance managing this drag.
+
+    @param {Point} loc  The point in *window* coordinates where the drag 
+      mouse is.  You can use convertOffsetFromView() to convert this to local 
+      coordinates.
+  */
+  dragDidMove: function(drag, loc) {
+    var dragLink = drag.dragLink;
+    var endX, endY, pv, frame, globalFrame;
+    if (dragLink) {
+      // if using latest SproutCore 1.0, loc is expressed in browser window coordinates
+      pv = dragLink.get('parentView');
+      frame = dragLink.get('frame');
+      globalFrame = pv ? pv.convertFrameToView(frame, null) : frame;
+      if (globalFrame) {
+        endX = loc.x - globalFrame.x;
+        endY = loc.y - globalFrame.y;
+        dragLink.set('endPoint', {x: endX , y: endY});
+      }
+    }
+  },
+  
+  /**  
+    This method is called when the drag ended. You can use this to do any
+    cleanup.  The operation is the actual operation performed on the drag.
+  
+    @param {SC.Drag} drag The drag instance managing the drag.
+  
+    @param {Point} loc The point in WINDOW coordinates where the drag 
+      ended. 
+  
+    @param {DragOp} op The drag operation that was performed. One of 
+      SC.DRAG_COPY, SC.DRAG_MOVE, SC.DRAG_LINK, or SC.DRAG_NONE.
+  
+  */
+  dragDidEnd: function(drag, loc, op) {
+    var dragLink = drag.dragLink;
+    if (dragLink) dragLink.destroy();
   }
-    
 }) ;
 
 // Set default Designer for view
@@ -878,6 +1134,8 @@ SC.ViewDesigner.mixin({
   */
   didLoadDesign: function(designedView, sourceView, attrs) {
     designedView.isDesign = YES ; // indicates that we need a designer.
+    designedView.designAttrs = attrs;
+    designedView.sourceView = sourceView;
   },
 
   /**
@@ -899,7 +1157,7 @@ SC.ViewDesigner.mixin({
     if (design.isDesign && page && page.get('needsDesigner')) {
       
       // find the designer class
-      var cur = design;
+      var cur = design, origDesign = design;
       while(cur && !cur.Designer) cur = cur.superclass;
       var DesignerClass = (cur) ? cur.Designer : SC.View.Designer;
       
@@ -911,7 +1169,9 @@ SC.ViewDesigner.mixin({
       
       view.designer = DesignerClass.create({
         view: view,
-        viewClass: design
+        viewClass: design,
+        designAttrs: origDesign.designAttrs,
+        sourceView: origDesign.sourceView
       });
     }
   }