Fix canvas rendering

src/canvas/view/CanvasView.js

@@ -10,7 +10,10 @@ function(Backbone, FrameView) {
       this.em = this.config.em || {};
 			this.ppfx	= this.config.pStylePrefix || '';
 			this.className	= this.config.stylePrefix + 'canvas';
-			this.frame = new FrameView({ model: this.model.get('frame')});
+			this.frame = new FrameView({
+        model: this.model.get('frame'),
+        config: this.config
+      });
 		},
 
     /**
@@ -100,7 +103,6 @@ function(Backbone, FrameView) {
 
 			if(this.wrapper && typeof this.wrapper.render == 'function'){
 				this.model.get('frame').set('wrapper', this.wrapper);
-				var wrap = this.wrapper.render();
 				this.$el.append(this.frame.render().el);
 				var frame = this.frame;
 				frame.el.onload = this.renderBody.bind(this);

src/canvas/view/FrameView.js

@@ -11,6 +11,11 @@ function(Backbone) {
       src: 'about:blank'
     },
 
+    initialize: function(o) {
+      this.config = o.config || {};
+      this.ppfx = this.config.pStylePrefix || '';
+    },
+
     getBody: function(){
       this.$el.contents().find('body');
     },
@@ -23,6 +28,7 @@ function(Backbone) {
       this.$el.attr({
         style: 'width: 50%; display: block; height: 80%; border: medium none; margin: 0 auto 0; background-color: white',
       });
+      this.$el.attr({class: this.ppfx + 'frame'});
       return this;
     },
 

src/commands/view/CommandAbstract.js

@@ -50,7 +50,6 @@ define(['backbone'],
 			 * @return {HTMLElement}
 			 */
 			getCanvas: function(){
-				//return this.editorModel.get('$editor').find('#'+this.canvasId);
 				return this.canvas.getElement();
 			},
 

src/commands/view/CreateComponent.js

@@ -103,9 +103,9 @@ define(['backbone','./SelectPosition'],
         var trgCollection = $trg.data('collection');
         var droppable = trgModel ? trgModel.get('droppable') : 1;
         opt.at = index;
-        if(trgCollection && droppable)
+        if(trgCollection && droppable){
         	return trgCollection.add(component, opt);
-        else
+        }else
 					console.warn("Invalid target position");
 			},
 

src/dom_components/model/Components.js

@@ -49,7 +49,6 @@ define([ 'backbone', 'require'],
 			},
 
 			add: function(models, opt){
-				console.log(models, opt);
 				if(typeof models === 'string'){
 					var parsed = this.editor.Parser.parseHtml(models);
 					models = parsed.html;

src/editor/main.js

@@ -58,12 +58,11 @@ define(function (require){
 			}
 
 			var em = new EditorModel(c);
-			var obj = {
-					model	: em,
-			    config	: c,
-			};
 
-		  var editorView = new EditorView(obj);
+		  var editorView = new EditorView({
+					model: em,
+			    config: c,
+			});
 
 		  return {
 

src/editor/model/Editor.js

@@ -382,7 +382,6 @@ define([
 					this.UndoManager = this.um;
 					this.set('UndoManager', this.um);
 					key('⌘+z, ctrl+z', function(){
-						console.log('Undo');
 						that.um.undo(true);
 					});
 					key('⌘+shift+z, ctrl+shift+z', function(){

src/editor/view/EditorView.js

@@ -4,17 +4,17 @@ function(Backbone){
 	return Backbone.View.extend({
 
 		initialize: function() {
-			this.cv = this.model.get('Canvas');
 			this.pn = this.model.get('Panels');
-			this.className = this.model.config.stylePrefix + 'editor';
+			this.conf = this.model.config;
+			this.className = this.conf.stylePrefix + 'editor';
 			this.model.on('loaded', function(){
 				this.pn.active();
 			});
 		},
 
 		render: function(){
+			var conf = this.conf;
 			this.$el.empty();
-			var conf = this.model.config;
 			this.$cont	= $(conf.el || ('body ' + conf.container));
 
 			if(conf.width)
@@ -23,20 +23,16 @@ function(Backbone){
 			if(conf.height)
 				this.$cont.css('height', conf.height);
 
-			this.model.set('$editor', this.$el);
-
-			this.$cont.html(this.$el);
-
 			// Canvas
-			if(this.cv)
-				this.$el.append(this.cv.render());
+			this.$el.append(this.model.get('Canvas').render());
 
 			// Panels
-			if(this.pn)
-				this.$el.append(this.pn.render());
+			this.$el.append(this.pn.render());
 
 			this.$el.attr('class', this.className);
 
+			this.$cont.html(this.$el);
+
 			return this;
 		}
 	});

styles/css/main.css

@@ -2678,6 +2678,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .wte-cv-canvas * {
   box-sizing: border-box; }
 
+.wte-frame {
+  transition: width 0.35s linear; }
+
 .btn-cl, .wte-mdl-dialog .wte-mdl-btn-close, .wte-am-assets-cont #wte-am-close {
   font-size: 25px;
   opacity: 0.3;

styles/scss/main.scss

@@ -177,6 +177,10 @@ $imageCompDim:	50px;
 
 .#{$cv-prefix}canvas *{box-sizing: border-box;}
 
+.#{$app-prefix}frame{
+  transition: width 0.35s linear;
+}
+
 .btn-cl {
   font-size: 25px;
   @include opacity(0.3);