sproutcore 1.6.0.beta.2-x86-mingw32

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/designer/tests/coders/page.js

@@ -0,0 +1,54 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*globals module ok equals same test Sample */
+var basic, baseTypes, bindingPage, testView, design;
+
+
+module('SC.DesignCoder', {
+  setup: function () {
+    basic = SC.Page.design({});
+    testView = SC.View.extend({});
+    testView.Designer = SC.ViewDesigner.extend({
+      designProperties: ['s', 'n', 'b', 'a', 'h', 'valueBinding']
+    });
+    
+    
+    baseTypes = SC.Page.create({
+      needsDesigner: true,
+      mainView: testView.design({s:'string',n:12,b:false,a:[1, 2, 3],h:{a:'b',c:'d'}})
+    });
+      
+    bindingPage = SC.Page.create({
+      number: 12,
+      needsDesigner: true,
+      mainView: testView.design({valueBinding: SC.Binding.from('.page.number')})//.create() //to get it to run on the binding itself...
+    });
+    
+  },
+
+  teardown: function () {
+  }
+});
+
+test('Verify basic page file encoding', function () {
+  design = SC.DesignCoder.encode(basic);
+  equals(design.trim(), 'SC.Page.design({})', 'basic page encoded');
+});
+
+test('Verify view in page encoding', function () {
+  baseTypes.awake();
+  design = SC.DesignCoder.encode(baseTypes);
+  equals(design.trim(),'SC.Page.design({mainView: SC.View.design({s: "string",n: 12,b: false,a: [1,2,3],h: {"a": "b","c": "d"}})})', 'basic types encoded');  
+});
+
+test('Verify binding in page encoding', function () {
+  SC.RunLoop.begin();
+  bindingPage.awake();
+  bindingPage.get('mainView');
+  SC.RunLoop.end();
+
+  design = SC.DesignCoder.encode(bindingPage);
+  equals(design.trim(),'SC.Page.design({mainView: SC.View.design({valueBinding: SC.Binding.from(\'.page.number\')})})', 'binding types encoded');  
+});

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/designer/tests/designers/view_designer.js

@@ -0,0 +1,47 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Mike Ball and contributors.
+//            portions copyright @2011 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*global module test htmlbody ok equals same stop start v*/
+
+(function() {
+  var basic, testView, page;
+  // ..........................................................
+  // TEST VIEWS
+  // 
+  module('SC.ViewDesigner', {
+    setup: function () {
+      testView = SC.View.extend({
+        mouseDown: function(){
+          var page = this.get('page');
+          page.set('mouseDownInView', YES);
+        }
+      });
+      testView.Designer = SC.ViewDesigner.extend({
+        mouseDown: function(){
+          var page = this.get('page');
+          page.set('mouseDownInDesigner', YES);
+        }
+      });
+      basic = SC.Page.design({
+        needsDesigner: true, 
+        mouseDownInView: false, 
+        mouseDownInDesigner: false,
+        view: testView.design({})
+      });
+      
+      
+    },
+    teardown: function () {}
+  });
+
+  test("tryToPerform redirects to designer",function() {
+    var view = basic.get('view');
+    view.tryToPerform('mouseDown', {});
+    ok(basic.get('mouseDownInDesigner'), "designer got mouseDown");
+    ok(!basic.get('mouseDownInView'), "view did not get mouseDown");
+  });
+
+})();

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/designer/views/designer_drop_target.js

@@ -0,0 +1,144 @@
+// ==========================================================================
+// Project:   SC - designPage
+// Copyright: ©2010 Mike Ball
+// ==========================================================================
+/*globals SC */
+/*jslint evil: true*/
+/** 
+  @class
+  This View is used by Greenhouse when application is in design mode
+  
+  
+  @extends SC.ContainerView
+*/
+SC.DesignerDropTarget = SC.ContainerView.extend(
+  /** @scope SC.DesignerDropTarget.prototype */ {
+  
+  inGlobalOffset: YES,
+  
+  // ..........................................................
+  // Key Events
+  // 
+  acceptsFirstResponder: YES,
+  
+  keyDown: function(evt) {
+    return this.interpretKeyEvents(evt);
+  },
+  
+  keyUp: function(evt) {
+    return YES; 
+  },
+  
+  deleteForward: function(evt){
+    var c = SC.designsController.getPath('page.designController');
+    if(c) c.deleteSelection();
+    return YES;
+  },
+  
+  deleteBackward: function(evt){
+    var c = SC.designsController.getPath('page.designController');
+    if(c) c.deleteSelection();
+    return YES;
+  },
+
+  moveLeft: function(sender, evt) {
+    return YES;
+  },
+  
+  moveRight: function(sender, evt) {   
+    return YES;
+  },
+  
+  moveUp: function(sender, evt) {
+    return YES;
+  },
+  
+  moveDown: function(sender, evt) {
+    return YES;
+  },
+
+  // ..........................................................
+  // Drag and drop code
+  // 
+  isDropTarget: YES,
+  
+  targetIsInIFrame: YES,
+  
+  dragStarted: function(drag, evt) {
+  },
+  
+  dragEntered: function(drag, evt) {
+  },
+  
+  dragUpdated: function(drag, evt) {},
+  
+  dragExited: function(drag, evt) {},
+  
+  dragEnded: function(drag, evt) {},
+  
+
+  computeDragOperations: function(drag, evt) { 
+    return SC.DRAG_ANY; 
+  },
+  
+
+  acceptDragOperation: function(drag, op) { 
+    var data = drag.dataForType('SC.Object'),
+        scClass = eval(data.get('scClass'));
+    return scClass.kindOf(SC.View);
+  },
+  
+  /**
+    Called to actually perform the drag operation.
+    
+    Overide this method to actually perform the drag operation.  This method
+    is only called if you returned `YES` in `acceptDragOperation()`.
+    
+    Return the operation that was actually performed or `SC.DRAG_NONE` if the
+    operation was aborted.
+    
+    The default implementation returns `SC.DRAG_NONE`
+    
+    @param {SC.Drag} drag The drag instance managing this drag
+    @param {DragOp} op The proposed drag operation. A drag constant.
+    
+    @return {DragOp} Drag Operation actually performed
+  */
+  performDragOperation: function(drag, op) {
+    var data = drag.dataForType('SC.Object'),
+        cv = this.get('contentView'),
+        loc = drag.get('location'),
+        iframeOffset = drag.globalTargetOffset,
+        design, size, newView, defaults, layout;
+    var page = cv.get('page');
+    var designController = page.get('designController'),
+        rootDesigner = designController.get('rootDesigner');
+    var rootDesignerFrame = rootDesigner.get('frame');
+    //TODO: [MB] should we move most of this into the designer's addView?
+    //size and location
+    size = data.get('size');
+    loc.x = loc.x - iframeOffset.x - rootDesignerFrame.x;
+    loc.y = loc.y - iframeOffset.y - rootDesignerFrame.y;
+    //setup design (use eval to make sure code comes from iframe)
+    //TODO use new Function("return "+data.get('scClass))() ?...
+    design = eval(data.get('scClass'));
+    defaults = data.get('defaults') || {};
+    layout = defaults.layout || {};
+    layout = SC.merge(layout, {top: loc.y, left: loc.x});
+    //pull width and height from ghost if none exists form defaults
+    if(!layout.width) layout.width = drag.getPath('ghostView.layout').width;
+    if(!layout.height) layout.height = drag.getPath('ghostView.layout').height;
+    defaults.layout = layout;
+    design = design.design(defaults);
+    //drop it in the root designer
+    newView = design.create({page: page});
+    if(rootDesigner && newView){
+      rootDesigner.addView(newView);
+      //cv.appendChild(newView);
+    }
+    page.get('designController').select(newView.get('designer'));
+    return SC.DRAG_ANY; 
+  }
+  
+  
+});

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/designer/views/drawing.js

@@ -0,0 +1,226 @@
+/** @class
+  This View is used by Greenhouse when application is in design mode
+  This is a Drawing View:
+  If you want to draw a new shape you can pass in the information:
+  For a Line:
+
+      {
+        +shape: SC.LINE,
+        +start: {x: 0, y: 0},
+        +end: {x: 100, y: 100},
+        ?style: {
+          ?width: 5,
+          ?color: 'orange' | '#FFA500' | 'rgb(255,165,0)' | 'rgba(255,165,0,1)'
+          ?transparency: 0.2
+        }
+      }
+
+  For a Rectangle:
+
+      {
+        +shape: SC.RECT,
+        +start: {x: 0, y: 0},
+        +size: {width: 100, height: 100},
+        ?type: SC.FILL | SC.STROKE
+        ?style: {
+          ?width: 5,
+          ?color: 'orange' | '#FFA500' | 'rgb(255,165,0)' | 'rgba(255,165,0,1)'
+          ?transparency: 0.2
+        }
+      }
+
+  For a Circle:
+
+      {
+        +shape: SC.CIRCLE,
+        +center: {x: 0, y: 0},
+        +radius: 20,
+        ?type: SC.FILL | SC.STROKE
+        ?style: {
+          ?width: 5,
+          ?color: 'orange' | '#FFA500' | 'rgb(255,165,0)' | 'rgba(255,165,0,1)'
+          ?transparency: 0.2
+        }
+      }
+
+  For a Polygon:
+
+      {
+        +shape: SC.POLY
+        +path: [
+          +{x: 0, y: 0},
+          +{x: 10, y: 10},
+          ?{x: 0, y: 50}
+        ],
+        ?type: SC.FILL | SC.STROKE
+        ?style: {
+          ?width: 5,
+          ?color: 'orange' | '#FFA500' | 'rgb(255,165,0)' | 'rgba(255,165,0,1)'
+          ?transparency: 0.2
+        }
+      }
+  
+  @author Evin Grano 
+  @extends SC.View
+  @since SproutCore 1.0
+*/
+SC.LINE = 'line';
+SC.RECT = 'rect';
+SC.CIRCLE = 'circle';
+SC.POLY = 'poly';
+
+SC.FILL = 'fill';
+SC.STROKE = 'stroke';
+
+
+SC.DrawingView = SC.View.extend({
+  
+  classNames: 'scui-drawing-view',
+  
+  shapes: [],
+  
+  _drawingManager: {},
+  
+  shapesDidChange: function(){
+    this.set('layerNeedsUpdate', YES);
+    this.updateLayerIfNeeded();
+  }.observes('*shapes.[]'),
+  
+  init: function(){
+    sc_super();
+    
+    // Register Basic Shapes
+    
+    // Drawing a Line
+    this.registerShapeDrawing( SC.LINE, function(ctx, params){
+      if (params.style){
+        if (params.style.width) ctx.lineWidth = params.style.width;
+        if (params.style.color) ctx.strokeStyle = params.style.color;
+        if (params.style.transparency) ctx.globalAlpha = params.style.transparency;
+      }
+      ctx.beginPath();
+      ctx.moveTo(params.start.x, params.start.y);
+      ctx.lineTo(params.end.x, params.end.y);
+      ctx.stroke();
+    });
+    
+    // Drawing a Rectangle
+    this.registerShapeDrawing( SC.RECT, function(ctx, params){
+      if (params.style){
+        if (params.style.width) ctx.lineWidth = params.style.width;
+        if (params.style.color) ctx.fillStyle =  ctx.strokeStyle = params.style.color;
+        if (params.style.transparency) ctx.globalAlpha = params.style.transparency;
+      }
+      switch(params.type){
+        case SC.FILL:
+          ctx.fillRect(params.start.x, params.start.y, params.size.width, params.size.height);
+          break;
+        case SC.STROKE:
+          ctx.strokeRect(params.start.x, params.start.y, params.size.width, params.size.height);
+          break;
+        default:
+          ctx.clearRect(params.start.x, params.start.y, params.size.width, params.size.height);
+          break;
+      }
+    });
+    
+    // Drawing a Circle
+    this.registerShapeDrawing( SC.CIRCLE, function(ctx, params){
+      if (params.style){
+        if (params.style.width) ctx.lineWidth = params.style.width;
+        if (params.style.color) ctx.fillStyle =  ctx.strokeStyle = params.style.color;
+        if (params.style.transparency) ctx.globalAlpha = params.style.transparency;
+      }
+      ctx.beginPath();
+      ctx.arc(params.center.x,params.center.y,params.radius,0,Math.PI*2,true);
+      if (params.type === SC.FILL) ctx.fill();
+      else ctx.stroke();
+    });
+    
+    // Drawing a Polygon
+    this.registerShapeDrawing( SC.POLY, function(ctx, params){
+      if (params.style){
+        if (params.style.width) ctx.lineWidth = params.style.width;
+        if (params.style.color) ctx.fillStyle =  ctx.strokeStyle = params.style.color;
+        if (params.style.transparency) ctx.globalAlpha = params.style.transparency;
+      }
+      ctx.beginPath();
+      var len = params.path ? params.path.length : 0;
+      if (len < 2) return;
+      
+      var path = params.path, curr;
+      ctx.moveTo(path[0].x, path[0].y);
+      for(var i = 1; i < len; i++){
+        curr = path[i];
+        ctx.lineTo(curr.x, curr.y);
+      }
+      ctx.lineTo(path[0].x, path[0].y);
+      if (params.type === SC.FILL) ctx.fill();
+      else ctx.stroke();
+    });
+  },
+  
+  render: function(context, firstTime) {
+    //console.log('%@.render()'.fmt(this));
+    var frame = this.get('frame');
+    if (firstTime) {
+      if (!SC.browser.msie) {
+        context.push('<canvas class="base-layer" width="%@" height="%@">You can\'t use canvas tags</canvas>'.fmt(frame.width, frame.height));
+      }
+    }
+    else {
+      var canvasElem = this.$('canvas.base-layer');
+      if (canvasElem) {
+        canvasElem.attr('width', frame.width);
+        canvasElem.attr('height', frame.height);
+        if (canvasElem.length > 0) {
+          var cntx = canvasElem[0].getContext('2d'); // Get the actual canvas object context
+          if (cntx) {
+            cntx.clearRect(0, 0, frame.width, frame.height);
+            this._drawShapes(cntx);
+          }
+          else {
+            SC.Logger.error("SC.DrawingView.render(): Canvas object context is not accessible.");
+          }
+        }
+        else {
+          SC.Logger.error("SC.DrawingView.render(): Canvas element array length is zero.");
+        }
+      }
+      else {
+        SC.Logger.error("SC.DrawingView.render(): Canvas element is not accessible.");
+      }
+    }
+    
+    return sc_super();
+  },
+  
+  registerShapeDrawing: function(name, drawingFunction){
+    if (!name) {
+      SC.Logger.error('Can\'t register this drawing paradigm because name is null');
+      return NO;
+    }
+    
+    // OK, create the drawing paradigm
+    this._drawingManager[name] = drawingFunction;
+    this.set('layerNeedsUpdate', YES);
+    this.updateLayerIfNeeded();
+    return YES;
+  },
+  
+  /**
+    @private 
+    
+    Function for actually drawing the shapes that we have listed
+  */
+  _drawShapes: function(cntx){
+    var curr;
+    var shapes = this.get('shapes');
+    var drawingFunc;
+    for (var i=0,len=shapes.length;i<len;i++){
+      curr = shapes[i];
+      drawingFunc = this._drawingManager[curr.shape];
+      if (drawingFunc) drawingFunc(cntx, curr);
+    }
+  }
+});

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/designer/views/high_light.js

@@ -0,0 +1,66 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// ========================================================================
+
+/**
+  This View is used by Greenhouse when application is in design mode
+  It darkens the area around the `rootDesigner`
+*/
+SC.RootDesignerHighLightView = SC.View.extend(
+/** @scope SC.RootDesignerHighLight.prototype */ {
+
+  /**
+    The designer that owns this highlight
+  */
+  designer: null,
+  
+  classNames: 'high-light',
+  
+  render: function(context, firstTime) {
+    var targetFrame = this.get('targetFrame');
+    // render shadows
+    context
+    .begin('div').classNames(['top', 'cover']).addStyle({top: 0, height: targetFrame.y, left:0, right: 0}).end()
+    .begin('div').classNames(['bottom', 'cover']).addStyle({top: targetFrame.y + targetFrame.height, bottom:0, left: 0, right:0}).end()
+    .begin('div').classNames(['left', 'cover']).addStyle({left: 0, width: targetFrame.x, top: targetFrame.y, height: targetFrame.height}).end()
+    .begin('div').classNames(['right', 'cover']).addStyle({left: targetFrame.x + targetFrame.width, right:0, top: targetFrame.y, height: targetFrame.height}).end();
+    
+  }
+
+  // ..........................................................
+  // EVENT HANDLING
+  // 
+  
+  // mouseDown: function(evt){
+  //   return this._handle_click_event(evt);
+  // },
+  // 
+  // mouseUp: function(evt) {
+  //   return this._handle_click_event(evt);
+  // },
+  // 
+  // mouseMoved: function(evt) {
+  //   return this._handle_click_event(evt);
+  // },
+  // 
+  // mouseDragged: function(evt) {
+  //   return this._handle_click_event(evt);
+  // },
+  // 
+  // 
+  // _handle_click_event: function(evt) {
+  //   var d = this.designer,
+  //       targetFrame = this.get('targetFrame');    
+  //   if(this.clickInside(targetFrame, evt) && d){
+  //     return (d && d.mouseDown) ? d.mouseDown(evt) : null;
+  //   }
+  //   else if(d){
+  //     d.resignRootDesigner();
+  //     return YES;
+  //   }
+  //   else{
+  //     return NO;
+  //   }
+  // }
+  
+});

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/designer/views/page_item_view.js

@@ -0,0 +1,130 @@
+// ==========================================================================
+// SC.pageItemView
+// ==========================================================================
+/*globals SC */
+
+/** @class
+  This View is used by Greenhouse when application is in design mode
+  Used for displaying page items
+
+  @extends SC.ListItemVIew
+  @author Mike Ball
+  
+*/
+
+SC.pageItemView = SC.ListItemView.extend(
+/** @scope SC.ListItemView.prototype */ { 
+  isDropTarget: YES,
+
+  dragEntered: function(drag, evt) {
+    this.$().addClass('highlight');
+  },
+
+  dragExited: function(drag, evt) {
+    this.$().removeClass('highlight');
+ 
+  },
+
+  dragEnded: function(drag, evt) {
+    this.$().removeClass('highlight');
+ 
+  },
+
+  /**
+   Called when the drag needs to determine which drag operations are
+   valid in a given area.
+
+   Override this method to return an OR'd mask of the allowed drag 
+   operations.  If the user drags over a droppable area within another 
+   droppable area, the drag will latch onto the deepest view that returns one 
+   or more available operations.
+
+   The default implementation returns `SC.DRAG_NONE`
+
+   @param {SC.Drag} drag The current drag object
+   @param {SC.Event} evt The most recent mouse move event.  Use to get 
+     location 
+   @returns {DragOps} A mask of all the drag operations allowed or 
+     SC.DRAG_NONE
+  */
+  computeDragOperations: function(drag, evt) { 
+    if(drag.hasDataType('SC.Binding')){
+      return SC.DRAG_LINK;
+    }
+    return SC.DRAG_NONE; 
+  },
+
+  /**
+   Called when the user releases the mouse.
+
+   This method gives your drop target one last opportunity to choose to 
+   accept the proposed drop operation.  You might use this method to
+   perform fine-grained checks on the drop location, for example.
+   Return true to accept the drop operation.
+
+   The default implementation returns `YES`.
+
+   @param {SC.Drag} drag The drag instance managing this drag
+   @param {DragOp} op The proposed drag operation. A drag constant
+
+   @return {Boolean} YES if operation is OK, NO to cancel.
+  */  
+  acceptDragOperation: function(drag, op) { return YES; },
+
+  /**
+   Called to actually perform the drag operation.
+
+   Overide this method to actually perform the drag operation.  This method
+   is only called if you returned `YES` in `acceptDragOperation()`.
+
+   Return the operation that was actually performed or `SC.DRAG_NONE` if the
+   operation was aborted.
+
+   The default implementation returns `SC.DRAG_NONE`
+
+   @param {SC.Drag} drag The drag instance managing this drag
+   @param {DragOp} op The proposed drag operation. A drag constant.
+
+   @return {DragOp} Drag Operation actually performed
+  */
+  performDragOperation: function(drag, op) { 
+    var data = drag.dataForType('SC.Binding'), that = this;
+    if(data && SC._Greenhouse){
+      var actionObj = SC.Object.create({
+        type: 'Binding', 
+        source: data,
+        target: that.get('content'),
+        addItem: function(from, to, designAttrs){
+          var view = this.getPath('source');
+          var value = that._propertyPathForProp(this.getPath('target.view.page'),this.getPath('target.view'));
+          view[from+"Binding"] = designAttrs[from+"Binding"] = value+"."+to;
+          view.propertyDidChange(from+"Binding");
+          
+          var designer = view.get('designer');
+          if(designer){
+            designer.designProperties.pushObject(from+"Binding");
+            designer.propertyDidChange('editableProperties');
+          }
+          if(view.displayDidChange) view.displayDidChange();
+        }
+      });
+
+      SC._Greenhouse.sendAction('newBindingPopup', actionObj);
+
+      return SC.DRAG_LINK;
+    }
+    else{
+      return SC.DRAG_NONE; 
+    }
+  },
+  
+  _propertyPathForProp: function(page, prop){
+    for(var key in page){
+      if(page.hasOwnProperty(key)){
+        if(page[key] === prop) return page.get('pageName')+"."+key.toString();
+      }
+    }
+  }
+   
+});
+