sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

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

@@ -0,0 +1,17 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// Copyright ©2006-2008, Sprout Systems, Inc. and contributors.
+// Portions copyright ©2008 Apple, Inc.  All rights reserved.
+// ========================================================================
+
+sc_require('views/designer');
+sc_require('views/mixins/button');
+
+SC.ButtonView.Designer = SC.ViewDesigner.extend( SC.Button.Designer,
+/** @scope SC.ButtonView.Designer.prototype */ {
+  
+  encodeChildViews: NO,
+  
+  designProperties: 'theme buttonBehavior href'.w()
+  
+});

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

@@ -0,0 +1,569 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// Copyright ©2006-2008, Sprout Systems, Inc. and contributors.
+// Portions copyright ©2008 Apple, Inc.  All rights reserved.
+// ========================================================================
+
+/*global ViewBuilder */
+
+/** @class
+
+  A Designer class provides the core editing functionality you need to edit
+  a view in the UI.  When your app loads in design.mode, a peer Designer 
+  instance is created for every view using the class method Designer or
+  SC.ViewDesigner if the view class does not define a Designer class.
+  
+  Whenever you put your app into design mode, all events will be routed first
+  to the peer designer for an object, which will have an opportunity to 
+  prosent a design UI.
+
+  Likewise, the designer palettes provided by the view builder will focus on 
+  the designer instead of the view itself.
+  
+  h2. Designer UI
+  
+  The basic ViewDesigner class automatically handles the UI interaction for
+  layout.  You can also double click on the view to perform a default action.
+  
+  For views with isContainerView set to YES, double clicking on the view will
+  automatically "focus" the view.  This allows you to select the view's 
+  children instead of the view itself.
+
+  @extends SC.Object
+  @since SproutCore 1.0
+*/
+SC.ViewDesigner = SC.Object.extend(
+/** @scope SC.ViewDesigner.prototype */ {
+
+  /** The view managed by this designer. */
+  view: null,
+  
+  /** The class for the design.  Set when the view is created. */
+  viewClass: null,
+  
+  /** Set to YES if the view 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 view.
+    
+    @property {SC.Page}
+  */
+  page: function() {
+    var v = this.get('view');
+    return (v) ? v.get('page') : null;
+  }.property('view').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(),
+  
+  /** 
+    If set to NO, the default childView encoding will not run.  You can use
+    this option, for example, if your view creates its own childViews.
+    
+    Alternatively, you can override the encodeChildViewsDesign() and 
+    encodeChildViewsLoc() methods.
+    
+    @property {Boolean}
+  */
+  encodeChildViews: YES,
+  
+  concatenatedProperties: ['designProperties', 'localizedProperties'],
+
+  // ..........................................................
+  // GENERIC PROPERTIES
+  // 
+  // Adds support for adding generic properties to a view.  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 view onto
+    the coder.  This is used by encodeDesignProperties() and 
+    encodeLocalizedProperties().
+  */
+  encodeSimpleProperties: function(props, coder) {
+    console.log('encodeSimple: %@'.fmt(props));
+    
+    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
+      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: 'isVisible isEnabled styleClass'.w(),
+  
+  /** 
+    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('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 ;
+  },
+
+  /**
+    Encodes the design properties for the view.  These properties are simply
+    copied from the view 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);
+  },
+  
+  /**
+    Encodes the design for child views.  The default implementation loops 
+    through child views.  If you store your child views elsewhere in your 
+    config (for example as named properties), then you may want to override
+    this method with your own encoding.
+  */
+  encodeChildViewsDesign: function(coder) {
+    if (!this.get('encodeChildViews')) return;
+    var view = this.view, childViews = view.childViews;
+    if (childViews.length>0) coder.object('childViews', childViews);
+  },
+
+  /** 
+    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: ['layout'],
+  
+  /** 
+    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('viewClass')));
+    this.encodeLocalizedProperties(coder);
+    this.encodeChildViewsLoc(coder);
+    return YES ;
+  },
+
+  /**
+    Encodes the localized properties for the view.  These properties are 
+    simply copied from the view 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);
+  },
+  
+  /**
+    Encodes the design for child views.  The default implementation loops 
+    through child views.  If you store your child views elsewhere in your 
+    config (for example as named properties), then you may want to override
+    this method with your own encoding.
+  */
+  encodeChildViewsLoc: function(coder) {
+    if (!this.get('encodeChildViews')) return;
+    var view = this.view, childViews = view.childViews;
+    if (childViews.length>0) coder.object('childViews', childViews);
+  },
+
+  /**
+    This method is invoked when the designer is instantiated.  You can use 
+    this method to reload any state saved in the view.  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() {},
+  
+  // ..........................................................
+  // VIEW RELAYING
+  // 
+  // View property changes relay automatically...
+  
+  /**
+    Invoked whenever the view changes.  This will observe all property 
+    changes on the new view.
+  */
+  viewDidChange: function() {
+    var view = this.get('view'), old = this._designer_view ;
+    if (view === old) return; // nothing to do
+
+    var func = this.viewPropertyDidChange ;
+    if (old) old.removeObserver('*', this, func);
+    this._designer_view = view ;
+    if (view) view.addObserver('*', this, func);
+    this.viewPropertyDidChange(view, '*', null, null);
+  }.observes('view'),
+  
+  /**
+    Invoked whenever a property on the view has changed.  The passed key will
+    be '*' when the entire view has changed.  The default implementation here
+    will notify the property as changed on the reciever if the 
+    property value is undefined on the reciever.
+    
+    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) ;
+    }
+  },
+  
+  /**
+    The unknownProperty handler will pass through to the view 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.view.set(key, value);
+      return value ;
+    } else return this.view.get(key);
+  },
+  
+  // ......................................
+  // PRIVATE METHODS
+  //
+  
+  init: function() {
+    
+    // setup design from view state...
+    this.awakeDesign();
+    
+    // setup bindings, etc
+    sc_super();
+    
+    // now add observer for property changes on view to relay change out.
+    this.viewDidChange();
+    
+    // and register with designController, if defined...
+    var c= this.get('designController');
+    if (c) c.registerDesigner(this) ;
+    
+  },
+
+  destroy: function() {
+    sc_super();
+    this.set('view', null); // clears the view observer...  
+  },
+  
+  designIsSelectedDidChange: function() {
+    var isSel = this.get('designIsSelected');
+    this.view.$().css('outline', (isSel) ? '2px #721492 dashed' : 'none');  
+  }.observes('designIsSelected'),
+  
+  tryToPerform: function(methodName, arg1, arg2) {
+    // only handle event if we are in design mode
+    var page = this.view ? this.view.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.view, arguments);
+    }
+  },
+    
+  // ..........................................................
+  // MOUSE HANDLING
+  // 
+  
+  HOTZONE_THICKNESS: 5,
+  HEAD_ZONE: 'head', 
+  TAIL_ZONE: 'tail',
+  NO_ZONE: 'center',
+  
+  _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;
+  },
+  
+  /**
+    Select on mouseDown.  If metaKey or shiftKey is pressed, add to
+    selection.
+  */
+  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...
+    
+    i = (this._mouseDownInfo = SC.clone(v.get('layout')));
+    i.pageX = evt.pageX; i.pageY = evt.pageY ;
+    f = v.convertFrameToView(v.get('frame'), null);
+    
+    // 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));
+    
+    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 ;
+    }
+  },
+  
+  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') ;
+    
+    // update the cursor...make sure we stick with the current zone...
+    this.mouseMoved(evt, i.zoneX, i.zoneY);
+    return YES ;
+  },
+  
+  mouseUp: function(evt) {
+    if (!this.get('designIsEnabled')) return NO ;
+    console.log('%@: mouseUp'.fmt(this));
+    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 ;
+    
+    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));
+
+    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 ;
+    }
+    
+    // set cursor value...
+    view.$().css('cursor', cursor) ;
+    
+    return YES ;
+  }
+  
+}) ;
+
+// Set default Designer for view
+if (!SC.View.Designer) SC.View.Designer = SC.ViewDesigner ;
+
+// ..........................................................
+// DESIGN NOTIFICATION METHODS
+//
+// These methods are invoked automatically on the designer class whenever it 
+// is loaded.
+
+SC.ViewDesigner.mixin({
+
+  /**
+    Invoked whenever a designed view is loaded.  This will save the design
+    attributes for later use by a designer.
+  */
+  didLoadDesign: function(designedView, sourceView, attrs) {
+    designedView.isDesign = YES ; // indicates that we need a designer.
+  },
+
+  /**
+    Invoked whenever a location is applied to a designed view.  Saves the 
+    attributes separately for use by the design view.
+  */
+  didLoadLocalization: function(designedView, attrs) {
+    // nothing to do for now.
+  },
+  
+  /**
+    Invoked whenver a view is created.  This will create a peer designer if 
+    needed.
+  */
+  didCreateView: function(view, attrs) {
+    // add designer if page is in design mode
+    var page = view.get('page'), design = view.constructor;
+    
+    if (design.isDesign && page && page.get('needsDesigner')) {
+      
+      // find the designer class
+      var cur = design;
+      while(cur && !cur.Designer) cur = cur.superclass;
+      var DesignerClass = (cur) ? cur.Designer : SC.View.Designer;
+      
+      // next find the first superclass view that is not a design (and a real
+      // class).  This is important to make sure that we can determine the 
+      // real name of a view's class.
+      while (design && design.isDesign) design = design.superclass;
+      if (!design) design = SC.View;
+      
+      view.designer = DesignerClass.create({
+        view: view,
+        viewClass: design
+      });
+    }
+  }
+  
+});
+
+
+// ..........................................................
+// FIXUP SC.View
+// 
+
+SC.View.prototype._orig_respondsTo = SC.View.prototype.respondsTo;
+SC.View.prototype._orig_tryToPerform = SC.View.prototype.tryToPerform;
+
+/**
+  If the view has a designer, then patch respondsTo...
+*/
+/*SC.View.prototype.respondsTo = function( methodName ) {
+  var ret = !!(SC.typeOf(this[methodName]) === SC.T_FUNCTION);
+  if (this.designer) ret = ret || this.designer.respondsTo(methodName);
+  return ret ;
+} ;*/
+SC.View.prototype.respondsTo = function( methodName ) {
+  if (this.designer) {
+    var ret = !!(SC.typeOf(this[methodName]) === SC.T_FUNCTION);
+    ret = ret || this.designer.respondsTo(methodName);
+    return ret;
+  }
+  else {
+    return this._orig_respondsTo(methodName);
+  }
+};
+
+/** 
+  If the view has a designer, give it an opportunity to handle an event 
+  before passing it on to the main view.
+*/
+/*SC.View.prototype.tryToPerform = function(methodName, arg1, arg2) {
+  if (this.designer) {
+    return this.designer.tryToPerform(methodName, arg1, arg2);
+  } else {
+    return this._orig_respondsTo(methodName) && this[methodName](arg1, arg2);
+  }
+} ;*/
+SC.View.prototype.tryToPerform = function(methodName, arg1, arg2) {
+  if (this.designer) {
+    return this.designer.tryToPerform(methodName, arg1, arg2);
+  }
+  else {
+    return this._orig_tryToPerform(methodName, arg1, arg2);
+  }
+};