app.js

var Editor = Em.Application.create();





/*
 *
 * Models
 *
 */
Editor.Element = Em.Object.extend({
  type: 'element',
  name: 'something',
  position: {x:0, y:0},
  size: {width:0, height:0},
  content: 'abcdefg'
});

Editor.TextElement = Editor.Element.extend({
  type: 'text'
});






/*
 *
 * Collections
 *
 */
Editor.elements = Em.ArrayController.create({
  // Init with empty array
  content: [],

  selectedElement: null,

  addElement: function(element){
    this.pushObject( element ); 
    this.selectedElement = element;
  },

  load: function(){
    this.addElement( Editor.Element.create({name:'lol'}) );
  }
});





/*
 *
 * Views
 *
 */

/*
 * Layer
 */
Editor.LayerView = Em.CollectionView.extend({
  contentBinding: Em.Binding.oneWay('Editor.elements.content'),

  itemViewClass: Em.View.extend({
    // Callback runs every time an element is added to the controller
    didInsertElement: function(){
      console.log('woo');
    },

    click: function(){
      console.log(this);
    }
  })
});

Editor.SelectedElementAttributesView = Em.CollectionView.extend({
  
});


/*
 * Canvas
 */
Editor.CanvasView = Em.CollectionView.extend({
  contentBinding: Em.Binding.oneWay('Editor.elements.content'),

  itemViewClass: Em.View.extend({
    classNames: ['element'],

    click: function(){
      // Select this layer on click
      Editor.elements.selectedElement = this.content;
    },

    didInsertElement: function(){
      // Add DOM event observers
      var $this = this.$();
    },

    // Observers
    positionChanged: Ember.observer(function(){
      new_position = this.content.get('position');
      this.$().css({
        left: new_position.x,
        top: new_position.y
      });
    }, 'content.position'),

    sizeChanged: Ember.observer(function(){

    }, 'content.size')

  })
});


/*
Editor.LayerView = Em.View.extend({
  click: function(){
    Editor.elements.set('current', this);
  },

  // Delete button
  deleteElementView : Em.View.extend({
    classNames: ['delete-element-view'],

    click: function(){
      element = this.get('content');
      Editor.elements.removeObject(element);
    }
  })
});
*/