sproutcore 1.0.1003 → 1.0.1008

data/frameworks/sproutcore/frameworks/designer/views/designer.js

@@ -80,6 +80,223 @@ SC.ViewDesigner = SC.Object.extend(
   
   concatenatedProperties: ['designProperties', 'localizedProperties'],
 
+
+  // ..........................................................
+  // SIZE AND POSITIONING SUPPORT
+  // 
+  
+  /**
+    Set to NO to hide horizontal resize handles
+  */
+  canResizeHorizontal: YES,
+  
+  /**
+    Set to NO to resize vertical handles
+  */
+  canResizeVertical: YES,
+  
+  /**
+    Allows moving.
+  */
+  canReposition: YES,
+  
+  /**
+    Determines the minimum allowed width
+  */
+  minWidth: 10,
+  
+  /**
+    Determines the minimum allowed height
+  */
+  minHeight: 10,
+  
+  /**
+    Determines maximum allowed width.  null means no limit
+  */
+  maxWidth: 100000000,
+  
+  /**
+    Determines maximum allowed height.  null means no limit
+  */
+  maxHeight: 100000000,
+  
+  /**
+    Returns the current layout for the view.  Set this property to update
+    the layout.  Direct properties are exposed a well. You will usually want
+    to work with those instead.
+    
+    @property
+    @type {Hash}
+  */
+  layout: function(key, value) {
+    var view = this.get('view');
+    if (!view) return null; 
+    
+    if (value !== undefined) view.set('layout', value);
+    return view.get('layout');
+  }.property('view').cacheable(),
+  
+  /**
+    The current anchor location.  This determines which of the other dimension 
+    metrics are actually used to compute the layout.  The value may be one of:
+    
+     TOP_LEFT, TOP_CENTER, TOP_RIGHT, TOP_HEIGHT,
+     CENTER_LEFT, CENTER_CENTER, CENTER_RIGHT, CENTER_HEIGHT
+     BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT, BOTTOM_HEIGHT,
+     WIDTH_LEFT, WIDTH_CENTER, WIDTH_RIGHT, WIDTH_HEIGHT,
+     null
+  
+    @property
+    @type {Number}
+  */
+  anchorLocation: function(key, value) {
+    var layout = this.get('layout'), 
+        K      = SC.ViewDesigner,
+        h, v, frame, view, pview, pframe, ret;
+        
+    if (!layout) return null;
+
+    // update to refelct new anchor locations...
+    if (value !== undefined) {
+      
+      ret    = {}; 
+      view   = this.get('view');
+      frame  = view.get('frame');
+      pview  = view.get('parentView');
+      pframe = pview ? pview.get('frame') : null;
+      if (!pframe) pframe = SC.RootResponder.responder.computeWindowSize();
+      
+      // compute new layout in each direction
+      if (value & K.ANCHOR_LEFT) {
+        ret.left = frame.x;
+        ret.width = frame.width;
+        
+      } else if (value & K.ANCHOR_RIGHT) {
+        ret.right = (pframe.width - SC.maxX(frame));
+        ret.width = frame.width;
+        
+      } else if (value & K.ANCHOR_CENTERX) {
+        ret.centerX = Math.round(SC.midX(frame) - (pframe.width/2)) ;
+        ret.width = frame.width;
+        
+      } else if (value & K.ANCHOR_WIDTH) {
+        ret.left = frame.x;
+        ret.right = (pframe.width - SC.maxX(frame));
+      }
+
+      // vertical
+      if (value & K.ANCHOR_TOP) {
+        ret.top = frame.y;
+        ret.height = frame.height;
+        
+      } else if (value & K.ANCHOR_BOTTOM) {
+        ret.bottom = (pframe.height - SC.maxY(frame));
+        ret.height = frame.height;
+        
+      } else if (value & K.ANCHOR_CENTERY) {
+        ret.centerY = Math.round(SC.midY(frame) - (pframe.height/2)) ;
+        ret.height = frame.height;
+        
+      } else if (value & K.ANCHOR_HEIGHT) {
+        ret.top = frame.y;
+        ret.bottom = (pframe.height - SC.maxY(frame));
+      }
+
+      this.set('layout', ret);
+      layout = ret ;
+    }
+    
+    if (!SC.none(layout.left)) {
+      h = SC.none(layout.width) ? K.ANCHOR_WIDTH : K.ANCHOR_LEFT;
+    } else if (!SC.none(layout.right)) h = K.ANCHOR_RIGHT;
+    else if (!SC.none(layout.centerX)) h = K.ANCHOR_CENTERX;
+    else h = 0;
+     
+    if (!SC.none(layout.top)) {
+      v = SC.none(layout.height) ? K.ANCHOR_HEIGHT : K.ANCHOR_TOP;
+    } else if (!SC.none(layout.bottom)) v = K.ANCHOR_BOTTOM ;
+    else if (!SC.none(layout.centerY)) v = K.ANCHOR_CENTERY ;
+    else v = 0;
+
+    return v | h;
+  }.property('layout').cacheable(),
+
+  _layoutProperty: function(key, value) {  
+    var layout = this.get('layout');
+    if (!layout) return null;
+    
+    if (!SC.none(layout) && (value !== undefined)) {
+      layout = SC.copy(layout);
+      layout[key] = value;
+      this.set('layout', layout);
+    }
+    
+    return layout[key];
+  },
+  
+  /**
+    Returns the top offset of the current layout or null if not defined
+  */
+  layoutTop: function(key, value) {
+    return this._layoutProperty('top', value);
+  }.property('layout').cacheable(),
+
+  /**
+    Returns the bottom offset of the current layout or null if not defined
+  */
+  layoutBottom: function(key, value) {
+    return this._layoutProperty('bottom', value);
+  }.property('layout').cacheable(),
+
+  /**
+    Returns the centerY offset of the current layout or null if not defined
+  */
+  layoutCenterY: function(key, value) {
+    return this._layoutProperty('centerY', value);
+  }.property('layout').cacheable(),
+
+  /**
+    Returns the height offset of the current layout or null if not defined
+  */
+  layoutHeight: function(key, value) {
+    return this._layoutProperty('height', value);
+  }.property('layout').cacheable(),
+
+  /**
+    Returns the top offset of the current layout or null if not defined
+  */
+  layoutTop: function(key, value) {
+    return this._layoutProperty('top', value);
+  }.property('layout').cacheable(),
+
+  /**
+    Returns the left offset of the current layout or null if not defined
+  */
+  layoutLeft: function(key, value) {
+    return this._layoutProperty('left', value);
+  }.property('layout').cacheable(),
+  
+  /**
+    Returns the right offset of the current layout or null if not defined
+  */
+  layoutRight: function(key, value) {
+    return this._layoutProperty('right', value);
+  }.property('layout').cacheable(),
+  
+  /**
+    Returns the centerX offset of the current layout or null if not defined
+  */
+  layoutCenterX: function(key, value) {
+    return this._layoutProperty('centerX', value);
+  }.property('layout').cacheable(),
+  
+  /**
+    Returns the width offset of the current layout or null if not defined
+  */
+  layoutWidth: function(key, value) {
+    return this._layoutProperty('width', value);
+  }.property('layout').cacheable(),
+  
   // ..........................................................
   // GENERIC PROPERTIES
   // 
@@ -95,9 +312,7 @@ SC.ViewDesigner = SC.Object.extend(
     the coder.  This is used by encodeDesignProperties() and 
     encodeLocalizedProperties().
   */
-  encodeSimpleProperties: function(props, coder) {
-    console.log('encodeSimple: %@'.fmt(props));
-    
+  encodeSimpleProperties: function(props, coder) {    
     var view = this.get('view'), proto = this.get('viewClass').prototype ;
     props.forEach(function(prop) {
       var val = view[prop] ; // avoid get() since we don't want to exec props
@@ -116,7 +331,7 @@ SC.ViewDesigner = SC.Object.extend(
     
     You can add to this array in your subclasses.
   */
-  designProperties: 'isVisible isEnabled styleClass'.w(),
+  designProperties: 'layout isVisible isEnabled styleClass'.w(),
   
   /** 
     Invoked by a design coder to encode design properties.  The default 
@@ -128,27 +343,6 @@ SC.ViewDesigner = SC.Object.extend(
     coder.set('className', SC._object_className(this.get('viewClass')));
     this.encodeDesignProperties(coder);
     this.encodeChildViewsDesign(coder);
-
-    // finally, emit the rootElementPath.
-    var view = this.get('view'), parentView = view.get('parentView');
-    console.log('parentView = %@'.fmt(parentView));
-    if (parentView) {
-      var el = view.rootElement, parentRoot = parentView.rootElement;
-      var path = [], nodes ;
-      
-      while(el && el !== parentRoot) {
-        // find the index of the parentNode
-        nodes = SC.$A(el.parentNode.childNodes);
-        path.unshift(nodes.indexOf(el)); // get the index...
-        
-        // go up a level...
-        el = el.parentNode ;
-      }
-      
-      coder.array('rootElementPath', path);
-      nodes = el = parentRoot = path = null; // avoid memory leaks
-    }
-
     return YES ;
   },
 
@@ -182,7 +376,7 @@ SC.ViewDesigner = SC.Object.extend(
     
     You can add to this array in your subclasses.
   */
-  localizedProperties: ['layout'],
+  localizedProperties: [],
   
   /** 
     Invoked by a localization coder to encode design properties.  The default 
@@ -256,11 +450,14 @@ SC.ViewDesigner = SC.Object.extend(
     It will notify all properties changed for '*'.  You may override this 
     method with your own behavior if you like.
   */
-  viewPropertyDidChange: function(view, key) {
-    if (key === '*') {
-      this.allPropertiesDidChange();
-    } else if (this[key] === undefined) {
-      this.notifyPropertyChange(key) ;
+  viewPropertyDidChange: function(view, key) {    
+    if (key === '*') this.allPropertiesDidChange();
+    else if (this[key] === undefined) this.notifyPropertyChange(key) ;
+    
+    if ((key === '*') || (key === 'layout')) {
+      if (this.get('designIsSelected') && this._handles) {
+        this._handles.set('layout', SC.clone(view.get('layout')));
+      }
     }
   },
   
@@ -304,8 +501,25 @@ SC.ViewDesigner = SC.Object.extend(
   },
   
   designIsSelectedDidChange: function() {
+    if (SC.kindOf(this.view, SC.Pane)) return this ; 
+    
     var isSel = this.get('designIsSelected');
-    this.view.$().css('outline', (isSel) ? '2px #721492 dashed' : 'none');  
+    var handles = this._handles;
+    
+    if (isSel) {
+      
+      if (!handles) {
+        handles = this._handles = SC.SelectionHandlesView.create({ 
+          designer: this 
+        });
+      }
+      
+      var parent = this.view.get('parentView');
+      if (!handles.get('parentView') !== parent) parent.appendChild(handles);
+      handles.set('layout', this.view.get('layout'));
+    } else if (handles) {
+      if (handles.get('parentView')) handles.removeFromParent();
+    }
   }.observes('designIsSelected'),
   
   tryToPerform: function(methodName, arg1, arg2) {
@@ -323,145 +537,318 @@ SC.ViewDesigner = SC.Object.extend(
   },
     
   // ..........................................................
-  // MOUSE HANDLING
+  // DRAWING SUPPORT
   // 
+
+  /**
+    Update the layer to add any design-specific marking 
+  */
+  didCreateLayer: function() {},
+
+  /**
+    Update the layer to add any design-specific marking
+  */
+  didUpdateLayer: function() {},
+
+  /**
+    Update the layer to add any design-specific marking
+  */
+  willDestroyLayer: function() {},
   
-  HOTZONE_THICKNESS: 5,
-  HEAD_ZONE: 'head', 
-  TAIL_ZONE: 'tail',
-  NO_ZONE: 'center',
+  // ..........................................................
+  // MOUSE HANDLING
+  // 
   
-  _zoneForOffset: function(offset, min, max) {
-    var thick = this.HOTZONE_THICKNESS ;
-    
-    return (offset<=(min+thick)) ? this.HEAD_ZONE : (offset>(max-thick)) ? this.TAIL_ZONE : this.NO_ZONE;
-  },
+  HANDLE_MARGIN: 5,
   
   /**
     Select on mouseDown.  If metaKey or shiftKey is pressed, add to
-    selection.
+    selection.  Otherwise just save starting info for dragging
   */
   mouseDown: function(evt) {
     if (!this.get('designIsEnabled')) return NO ;
-    this.get('designController').select(this, evt.metaKey || evt.shiftKey);
     
-    var v, i, f, offset; 
-    
-    // save mouseDown information...
-    v = this.get('view');
-    if (!v) return YES; // nothing to do...
+    // save mouse down info
+    var view = this.get('view'), 
+        info, vert, horiz, repos, frame, pview, margin, canH, canV;
+        
+    if (!view) return NO; // nothing to do
     
-    i = (this._mouseDownInfo = SC.clone(v.get('layout')));
-    i.pageX = evt.pageX; i.pageY = evt.pageY ;
-    f = v.convertFrameToView(v.get('frame'), null);
+    // save mouse down state for later use
+    this._mouseDownInfo = info = {
+      layout:   SC.copy(view.get('layout')),
+      selected: this.get('designIsSelected'),
+      dragged:  NO,
+      metaKey:  evt.metaKey || evt.shiftKey,
+      source:   this,
+      x: evt.pageX, y: evt.pageY
+    };    
+    info.hanchor = info.vanchor = info.reposition = NO; 
+
+    // detect what operations are available.
+    repos = this.get('canReposition');
+    horiz = vert = NO ;
+    if (info.selected) {
+      frame = view.get('frame');
+      pview = view.get('parentView');
+      if (frame && pview) frame = pview.convertFrameToView(frame, null);
+
+      margin = this.HANDLE_MARGIN;
+
+      // detect if we are in any hotzones
+      if (frame) {
+        if (Math.abs(info.x - SC.minX(frame)) <= margin) {
+          horiz = "left";
+        } else if (Math.abs(info.x - SC.maxX(frame)) <= margin) {
+          horiz = "right";
+        }
+
+        if (Math.abs(info.y - SC.minY(frame)) <= margin) {
+          vert = "top";
+        } else if (Math.abs(info.y - SC.maxY(frame)) <= margin) {
+          vert = "bottom";
+        } 
+      }
+
+      canH = this.get('canResizeHorizontal');
+      canV = this.get('canResizeVertical');
+
+      // look for corners if can resize in both directions...
+      if (canH && canV) {
+        if (!vert || !horiz) vert = horiz = NO ; 
+
+      // if can only resize horizonal - must be in middle vertical
+      } else if (canH) {
+        vert = NO ;
+        if (Math.abs(info.y - SC.midY(frame)) > margin) horiz = NO;
+
+      // if can only resize vertical - must be in middle horizontal
+      } else if (canV) {
+        horiz = NO ;
+        if (Math.abs(info.x - SC.midX(frame)) > margin) vert = NO ;
+
+      // otherwise, do not allow resizing
+      } else horiz = vert = NO ;
+    }
+
+    // now save settings...
+    if (horiz) info.hanchor = horiz ;
+    if (vert) info.vanchor = vert ;
+    if (!horiz && !vert && repos) info.reposition = YES ; 
     
-    // handle X hotzone
-    i.zoneX = this._zoneForOffset(i.pageX, SC.minX(f), SC.maxX(f));
-    i.zoneY = this._zoneForOffset(i.pageY, SC.minY(f), SC.maxY(f));
+    // if not yet selected, select item immediately.  This way future events
+    // will be handled properly
+    if (!info.selected) {
+      this.get('designController').select(this, info.metaKey);
+    }
+
+    // save initial info on all selected items
+    if (info.reposition) this.get('designController').prepareReposition(info);    
     
     return YES ;
   },
-  
-  _adjustViewLayoutOnDrag: function(view, curZone, altZone, delta, i, headKey, tailKey, centerKey, sizeKey) {
-    
-    // collect some useful values...
-    var HEAD_ZONE = this.HEAD_ZONE, TAIL_ZONE = this.TAIL_ZONE ;
-    var inAltZone = (altZone === HEAD_ZONE) || (altZone === TAIL_ZONE);
-    var head = i[headKey], tail = i[tailKey], center = i[centerKey], 
-        size = i[sizeKey];
-        
-    switch(curZone) {
-    case HEAD_ZONE:
-      // if head aligned, shift head origin...
-      if (!SC.none(head)) {
-        view.adjust(headKey, head - delta) ;
-
-      // if we have a SIZE but no HEAD, assume centered or TAIL aligned
-      } else if (!SC.none(size)) {
-
-        // if centered, adjust by 2x so edge will track properly...
-        if (!SC.none(center)) delta = delta * 2 ;
-        view.adjust(sizeKey, size - delta);
-      }
-      break;
 
-    case TAIL_ZONE:
-      // if tail aligned, this tail origin...
-      if (!SC.none(tail)) {
-        view.adjust(tailKey, tail + delta) ;
-        
-      // if we have a SIZE but not TAIL, assume centered or HEAD aligned
-      } else if (!SC.none(size)) {
-        if (!SC.none(center)) delta = delta * 2 ;
-        view.adjust(sizeKey, size + delta) ;
-      }
-      break;
-
-    // if we are not in an X hotzone, move in X dir unless we are in a 
-    // Y hotzone or if the view is anchored to the left/right edges (in which
-    // case you can't move around...you have to resize edges)
-    default:
-      if (!inAltZone && !SC.none(size)) {
-        if (!SC.none(head)) {
-          view.adjust(headKey, head + delta);
-        } else if (!SC.none(tail)) {
-          view.adjust(tailKey, tail - delta) ;
-        } else if (!SC.none(center)) {
-          view.adjust(centerKey, center + delta);
-        }
-      }
-      break ;
-    }
+  prepareReposition: function(info) {
+    var view = this.get('view'),
+        layout = view ? SC.copy(view.get('layout')) : {};
+    info[SC.keyFor('layout', SC.guidFor(this))] = layout;
+    return this ;
   },
   
+  /**
+    mouse dragged will resize or reposition depending on the settings from
+    mousedown.
+  */
   mouseDragged: function(evt) {
     if (!this.get('designIsEnabled')) return NO ;
-
-    // adjust the layout...
-    var i = this._mouseDownInfo ;
-    var deltaX = evt.pageX - i.pageX, deltaY = evt.pageY - i.pageY;
-
-    var view = this.get('view');
-    this._adjustViewLayoutOnDrag(view, i.zoneX, i.zoneY, deltaX, i, 'left', 'right', 'centerX', 'width') ;
-    this._adjustViewLayoutOnDrag(view, i.zoneY, i.zoneX, deltaY, i, 'top', 'bottom', 'centerY', 'height') ;
+    var info = this._mouseDownInfo, 
+        view = this.get('view'),
+        layout;
     
-    // update the cursor...make sure we stick with the current zone...
-    this.mouseMoved(evt, i.zoneX, i.zoneY);
-    return YES ;
+    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);
+    }
   },
   
+  /**
+    On mouseUp potentially change selection and cleanup.
+  */
   mouseUp: function(evt) {
     if (!this.get('designIsEnabled')) return NO ;
-    console.log('%@: mouseUp'.fmt(this));
+    
+    var info = this._mouseDownInfo;
+        
+    // if selected on mouse down and we didn't do any dragging, then deselect.
+    if (info.selected && !info.dragged) {
+      
+      // is the mouse still inside the view?  If not, don't do anything...
+      var view = this.get('view'),
+          frame = view ? view.get('frame') : null, 
+          pview = view.get('parentView');
+          
+      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);
+      }
+    }
+    
+    this._mouseDownInfo = null;
+    
     return YES ;
   },
   
-  // Change the CURSOR for the view...
-  mouseMoved: function(evt, zoneX, zoneY) {
-    if (!this.get('designIsSelected')) return NO ;
-    
-    var HEAD_ZONE = this.HEAD_ZONE, TAIL_ZONE =this.TAIL_ZONE ;
-    var view, f, zoneX, zoneY, cursor ;
+  /**
+    Called by designerController to reposition the view
+  */
+  mouseReposition: function(evt, info) {
+    var layout = SC.copy(this.get('layout'));
+    this._mouseReposition(evt, info, this.HKEYS, layout);
+    this._mouseReposition(evt, info, this.VKEYS, layout);
+    this.set('layout', layout);
+    return this; 
+  },
+  
+  HKEYS: {
+    evtPoint: "pageX",
+    point:    "x",
+    min:      "minWidth",
+    max:      "maxWidth",
+    head:     "left",
+    tail:     "right",
+    center:   "centerX",
+    size:     "width",
+    anchor:   "hanchor"
+  },
+
+  VKEYS: {
+    evtPoint: "pageY",
+    point:    "y",
+    min:      "minHeight",
+    max:      "maxHeight",
+    head:     "top",
+    tail:     "bottom",
+    center:   "centerY",
+    size:     "height",
+    anchor:   "vanchor"
+  },
+  
+  /**
+    Generic resizer.  Must pass one set of keys: VKEYS, HKEYS
+  */
+  _mouseResize: function(evt, info, keys, ret) {
     
-    view = this.get('view');
-    f = view.convertFrameToView(view.get('frame'), null);
-    if (!zoneX) zoneX = this._zoneForOffset(evt.pageX, SC.minX(f), SC.maxX(f));
-    if (!zoneY) zoneY = this._zoneForOffset(evt.pageY, SC.minY(f), SC.maxY(f));
+    var delta  = evt[keys.evtPoint] - info[keys.point],
+        layout = info.layout,
+        view   = this.get('view'),
+        min    = this.get(keys.min),
+        max    = this.get(keys.max),
+        
+        headKey   = keys.head,
+        tailKey   = keys.tail,
+        centerKey = keys.center,
+        sizeKey   = keys.size,
+        
+        hasHead   = !SC.none(layout[keys.head]),
+        hasTail   = !SC.none(layout[keys.tail]),
+        hasCenter = !SC.none(layout[keys.center]),
+        hasSize   = !SC.none(layout[keys.size]), 
+        w;
 
-    if (zoneX === HEAD_ZONE) {
-      cursor = (zoneY === HEAD_ZONE) ? 'nw-resize' : (zoneY === TAIL_ZONE) ? 'sw-resize' : 'w-resize' ;
-    } else if (zoneX === TAIL_ZONE) {
-      cursor = (zoneY === HEAD_ZONE) ? 'ne-resize' : (zoneY === TAIL_ZONE) ? 'se-resize' : 'e-resize' ;
-    } else {
-      cursor = (zoneY === HEAD_ZONE) ? 'n-resize' : (zoneY === TAIL_ZONE) ? 's-resize' : null ;
+    if (info[keys.anchor] === headKey) {
+      
+      // if left aligned, adjust left size and width if set.
+      if (hasHead) {
+        if (hasSize) {
+          w = layout[sizeKey];
+          ret[sizeKey] = Math.min(max, Math.max(min, Math.floor(layout[sizeKey] - delta)));
+          min = (layout[headKey]+w) - min;
+          max = (layout[headKey]+w) - max;
+          
+          ret[headKey] = Math.max(max, Math.min(min, Math.floor(layout[headKey]+delta)));
+          
+        } else {
+          ret[headKey] = Math.floor(layout[headKey]+delta);
+        }
+      
+      // if right aligned or centered, adjust the width...
+      } else if (hasTail || hasCenter) {
+        if (hasCenter) delta *= 2;
+        ret[sizeKey] = Math.max(min, Math.min(max, Math.floor((layout[sizeKey]||0)-delta)));
+
+      // otherwise, adjust left
+      } else ret[headKey] = Math.floor((layout[headKey]||0)+delta);
+
+    } else if (info[keys.anchor] === tailKey) {
+      
+      // reverse above
+      if (hasTail) {
+
+        if (hasSize) {
+          w = layout[sizeKey];
+          ret[sizeKey] = Math.min(max, Math.max(min, Math.floor(layout[sizeKey] + delta)));
+          min = (layout[tailKey]+w)-min;
+          max = (layout[tailKey]+w)-max;
+          
+          ret[tailKey] = Math.max(max, Math.min(min, Math.floor(layout[tailKey]-delta)));
+
+        } else {
+          ret[tailKey] = Math.floor(layout[tailKey]-delta);
+        }
+        
+      } else {
+        if (hasCenter) delta *= 2;
+        ret[sizeKey] = Math.max(min, Math.min(max, Math.floor((layout[sizeKey]||0)+delta)));
+      }
     }
+
+    return this;
+  },
+  
+  _mouseReposition: function(evt, info, keys, ret) {
+    var delta  = evt[keys.evtPoint] - info[keys.point],
+        layout = info[SC.keyFor('layout', SC.guidFor(this))],
+        view   = this.get('view'),
+        
+        headKey   = keys.head,
+        tailKey   = keys.tail,
+        centerKey = keys.center,
+        sizeKey   = keys.size,
+        
+        hasHead   = !SC.none(layout[headKey]),
+        hasTail   = !SC.none(layout[tailKey]),
+        hasCenter = !SC.none(layout[centerKey]),
+        hasSize   = !SC.none(layout[sizeKey]), 
+        w;
+
+    // auto-widths can't be repositioned
+    if (hasHead && hasTail && !hasSize) return NO ;
     
-    // set cursor value...
-    view.$().css('cursor', cursor) ;
+    // left/top aligned, just adjust top/left location
+    if (hasHead) {
+      ret[headKey] = layout[headKey]+delta;
+      
+    // right/bottom aligned, adjust bottom/right location
+    } else if (hasTail) {
+      ret[tailKey] = layout[tailKey]-delta;
+
+    } else if (hasCenter) {
+      ret[centerKey] = layout[centerKey]+delta;
+      
+    } else ret[headKey] = (layout[headKey]||0)+delta;
     
     return YES ;
   }
-  
+    
 }) ;
 
 // Set default Designer for view
@@ -475,6 +862,16 @@ if (!SC.View.Designer) SC.View.Designer = SC.ViewDesigner ;
 
 SC.ViewDesigner.mixin({
 
+  ANCHOR_LEFT:    0x0001,
+  ANCHOR_RIGHT:   0x0002,
+  ANCHOR_CENTERX: 0x0004,
+  ANCHOR_WIDTH:   0x0010,
+  
+  ANCHOR_TOP:     0x0100,
+  ANCHOR_BOTTOM:  0x0200,
+  ANCHOR_CENTERY: 0x0400,
+  ANCHOR_HEIGHT:  0x1000,
+  
   /**
     Invoked whenever a designed view is loaded.  This will save the design
     attributes for later use by a designer.
@@ -528,6 +925,9 @@ SC.ViewDesigner.mixin({
 
 SC.View.prototype._orig_respondsTo = SC.View.prototype.respondsTo;
 SC.View.prototype._orig_tryToPerform = SC.View.prototype.tryToPerform;
+SC.View.prototype._orig_createLayer = SC.View.prototype.createLayer;
+SC.View.prototype._orig_updateLayer = SC.View.prototype.updateLayer;
+SC.View.prototype._orig_destroyLayer = SC.View.prototype.destroyLayer;
 
 /**
   If the view has a designer, then patch respondsTo...
@@ -567,3 +967,33 @@ SC.View.prototype.tryToPerform = function(methodName, arg1, arg2) {
     return this._orig_tryToPerform(methodName, arg1, arg2);
   }
 };
+
+
+/*
+  If the view has a designer, also call designers didCreateLayer method to 
+  allow drawing.
+*/
+SC.View.prototype.createLayer = function() {
+  var ret = this._orig_createLayer.apply(this, arguments);
+  if (this.designer) this.designer.didCreateLayer();
+  return ret ;
+};
+
+/*
+  If the view has a designer, also call the designer's didUpdateLayer method 
+  to allow drawing.
+*/
+SC.View.prototype.updateLayer = function() {
+  var ret = this._orig_updateLayer.apply(this, arguments);
+  if (this.designer) this.designer.didUpdateLayer();
+  return ret ;
+};
+
+/**
+  If the view has a designer, also call the designers willDestroyLayer
+  method.
+*/
+SC.View.prototype.destroyLayer = function() {
+  if (this.designer) this.designer.willDestroyLayer();
+  return this._orig_destroyLayer.apply(this, arguments);
+};