sproutcore 1.4.5-java → 1.5.0-java

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,219 @@
+/** @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);
+    }
+  }
+});