Refactor all other modules

src/asset_manager/main.js

@@ -41,7 +41,7 @@ define(function(require) {
 	  	public: true,
 
 	  	/**
-	  	 * Manda
+	  	 * Mandatory for the storage manager
 	  	 * @type {String}
 	  	 * @private
 	  	 */

src/canvas/main.js

@@ -1,31 +1,65 @@
 define(function(require) {
 	/**
-	 * @class 	Canvas
-	 * @param 	{Object} Configurations
-	 *
-	 * @return	{Object}
+	 * @class 	Canvas}
  	 * */
-	var Canvas	= function(config) {
-		var c			= config || {},
-			defaults	= require('./config/config'),
-			Canvas		= require('./model/Canvas'),
-			CanvasView	= require('./view/CanvasView');
-
-		for (var name in defaults) {
-			if (!(name in c))
-				c[name] = defaults[name];
-		}
-
-		this.canvas		= new Canvas(config);
-		var obj			= {
-				model	: this.canvas,
-		    config	: c,
-		};
+	return function() {
+		var c = {},
+		defaults = require('./config/config'),
+		Canvas = require('./model/Canvas'),
+		CanvasView = require('./view/CanvasView');
+		var canvas;
 
-		this.CanvasView	= new CanvasView(obj);
-	};
+		return {
+
+      /**
+       * Used inside RTE
+       * @private
+       */
+      getCanvasView: function() {
+        return CanvasView;
+      },
+
+			/**
+       * Name of the module
+       * @type {String}
+       * @private
+       */
+      name: 'Canvas',
+
+      /**
+       * Indicates if module is public
+       * @type {Boolean}
+       * @private
+       */
+      public: true,
 
-	Canvas.prototype	= {
+      /**
+       * Initialize module. Automatically called with a new instance of the editor
+       * @param {Object} config Configurations
+       */
+      init: function(config) {
+        c = config || {};
+        for (var name in defaults) {
+					if (!(name in c))
+						c[name] = defaults[name];
+				}
+
+				var ppfx = c.pStylePrefix;
+				if(ppfx)
+					c.stylePrefix = ppfx + c.stylePrefix;
+
+				canvas = new Canvas(config);
+				CanvasView	= new CanvasView({
+					model: canvas,
+				  config: c,
+				});
+
+				var cm = c.em.get('DomComponents');
+				if(cm)
+					this.setWrapper(cm);
+
+        return this;
+      },
 
 			/**
 			 * Add wrapper
@@ -33,7 +67,7 @@ define(function(require) {
 			 *
 			 * */
 			setWrapper: function(wrp) {
-				this.canvas.set('wrapper', wrp);
+				canvas.set('wrapper', wrp);
 			},
 
 			/**
@@ -41,7 +75,7 @@ define(function(require) {
 			 * @return {HTMLElement}
 			 */
 			getElement: function(){
-				return this.CanvasView.el;
+				return CanvasView.el;
 			},
 
 			/**
@@ -49,7 +83,7 @@ define(function(require) {
 			 * @return {HTMLElement}
 			 */
 			getFrameEl: function(){
-				return this.CanvasView.frame.el;
+				return CanvasView.frame.el;
 			},
 
 			/**
@@ -57,7 +91,7 @@ define(function(require) {
 			 * @return {HTMLElement}
 			 */
 			getBody: function(){
-				return this.CanvasView.frame.el.contentDocument.body;
+				return CanvasView.frame.el.contentDocument.body;
 			},
 
 			/**
@@ -73,7 +107,7 @@ define(function(require) {
 			 * @return {HTMLElement}
 			 */
 			getToolsEl: function(){
-				return this.CanvasView.toolsEl;
+				return CanvasView.toolsEl;
 			},
 
 			/**
@@ -81,7 +115,7 @@ define(function(require) {
 			 * @return {HTMLElement}
 			 */
 			getHighlighter: function(){
-				return this.CanvasView.hlEl;
+				return CanvasView.hlEl;
 			},
 
 			/**
@@ -89,7 +123,7 @@ define(function(require) {
 			 * @return {HTMLElement}
 			 */
 			getBadgeEl: function(){
-				return this.CanvasView.badgeEl;
+				return CanvasView.badgeEl;
 			},
 
 			/**
@@ -97,7 +131,7 @@ define(function(require) {
 			 * @return {HTMLElement}
 			 */
 			getPlacerEl: function(){
-				return this.CanvasView.placerEl;
+				return CanvasView.placerEl;
 			},
 
 			/**
@@ -106,14 +140,14 @@ define(function(require) {
 			 * @private
 			 */
 			getGhostEl: function(){
-				return this.CanvasView.ghostEl;
+				return CanvasView.ghostEl;
 			},
 
 			/**
 			 * Render canvas
 			 * */
 			render: function() {
-				return	this.CanvasView.render().el;
+				return CanvasView.render().el;
 			},
 
 			/**
@@ -150,9 +184,9 @@ define(function(require) {
 			 * ????
 			 */
 			getFrameWrapperEl: function(){
-				return this.CanvasView.frame.getWrapper();
+				return CanvasView.frame.getWrapper();
 			},
+		};
 	};
 
-	return Canvas;
 });

src/canvas/view/CanvasView.js

@@ -126,7 +126,7 @@ function(Backbone, FrameView) {
       if(rte)
         this.toolsEl.appendChild(rte.render());
 
-			this.$el.attr({class: this.className, id: this.config.canvasId});
+			this.$el.attr({class: this.className});
 			return this;
 		},
 

src/commands/main.js

@@ -39,58 +39,90 @@
  */
 define(function(require) {
 
-	var Commands = function(conf){
-
-		var c = conf || {},
+	return function() {
+		var c = {},
+			commands = {},
+			defaultCommands = {},
 			defaults = require('./config/config'),
 			AbsCommands = require('./view/CommandAbstract');
 
-		for (var name in defaults) {
-			if (!(name in c))
-				c[name] = defaults[name];
-		}
-
 		// Need it here as it would be used below
 		var add = function(id, obj){
 			delete obj.initialize;
-			commands[id] = Abstract.extend(obj);
+			commands[id] = AbsCommands.extend(obj);
 			return this;
 		};
 
-		var commands = {};
-		var config = c;
-		var Abstract = AbsCommands;
-
-		// Load commands passed via configuration
-		for( var k in c.defaults){
-			var obj = c.defaults[k];
-			if(obj.id)
-				add(obj.id, obj);
-		}
-
-		var defaultCommands = {};
-		defaultCommands['select-comp'] = require('./view/SelectComponent');
-		defaultCommands['create-comp'] = require('./view/CreateComponent');
-		defaultCommands['delete-comp'] = require('./view/DeleteComponent');
-		defaultCommands['image-comp'] = require('./view/ImageComponent');
-		defaultCommands['move-comp'] = require('./view/MoveComponent');
-		defaultCommands['text-comp'] = require('./view/TextComponent');
-		defaultCommands['insert-custom'] = require('./view/InsertCustom');
-		defaultCommands['export-template'] = require('./view/ExportTemplate');
-		defaultCommands['sw-visibility'] = require('./view/SwitchVisibility');
-		defaultCommands['open-layers'] = require('./view/OpenLayers');
-		defaultCommands['open-sm'] = require('./view/OpenStyleManager');
-		defaultCommands['open-blocks'] = require('./view/OpenBlocks');
-		defaultCommands.fullscreen = require('./view/Fullscreen');
-		defaultCommands.preview = require('./view/Preview');
-		//this.defaultCommands['resize-comp'] 	= require('./view/ResizeComponent');
-
-		if(config.em)
-			config.model = config.em.get('Canvas');
-
 		return {
 
 			/**
+       * Name of the module
+       * @type {String}
+       * @private
+       */
+      name: 'Commands',
+
+      /**
+       * Indicates if module is public
+       * @type {Boolean}
+       * @private
+       */
+      public: true,
+
+      /**
+       * Initialize module. Automatically called with a new instance of the editor
+       * @param {Object} config Configurations
+       * @private
+       */
+      init: function(config) {
+        c = config || {};
+        for (var name in defaults) {
+					if (!(name in c))
+						c[name] = defaults[name];
+				}
+
+				var ppfx = c.pStylePrefix;
+				if(ppfx)
+					c.stylePrefix = ppfx + c.stylePrefix;
+
+				// Load commands passed via configuration
+				for( var k in c.defaults){
+					var obj = c.defaults[k];
+					if(obj.id)
+						this.add(obj.id, obj);
+				}
+
+				defaultCommands['select-comp'] = require('./view/SelectComponent');
+				defaultCommands['create-comp'] = require('./view/CreateComponent');
+				defaultCommands['delete-comp'] = require('./view/DeleteComponent');
+				defaultCommands['image-comp'] = require('./view/ImageComponent');
+				defaultCommands['move-comp'] = require('./view/MoveComponent');
+				defaultCommands['text-comp'] = require('./view/TextComponent');
+				defaultCommands['insert-custom'] = require('./view/InsertCustom');
+				defaultCommands['export-template'] = require('./view/ExportTemplate');
+				defaultCommands['sw-visibility'] = require('./view/SwitchVisibility');
+				defaultCommands['open-layers'] = require('./view/OpenLayers');
+				defaultCommands['open-sm'] = require('./view/OpenStyleManager');
+				defaultCommands['open-blocks'] = require('./view/OpenBlocks');
+				defaultCommands.fullscreen = require('./view/Fullscreen');
+				defaultCommands.preview = require('./view/Preview');
+				//this.defaultCommands['resize-comp'] 	= require('./view/ResizeComponent');
+
+				if(c.em)
+					c.model = c.em.get('Canvas');
+
+        return this;
+      },
+
+      /**
+       * On load callback
+       * @private
+       */
+      onLoad: function() {
+      	this.loadDefaultCommands();
+      },
+
+			/**
 			 * Add new command to the collection
 			 * @param	{string} id Command's ID
 			 * @param	{Object} command Object representing you command. Methods `run` and `stop` are required
@@ -118,7 +150,7 @@ define(function(require) {
 				var el = commands[id];
 
 				if(typeof el == 'function'){
-					el = new el(config);
+					el = new el(c);
 					commands[id]	= el;
 				}
 
@@ -140,6 +172,4 @@ define(function(require) {
 		};
 
 	};
-
-	return Commands;
 });

src/commands/view/CommandAbstract.js

@@ -14,8 +14,6 @@ define(['backbone'],
 			initialize: function(o) {
 				this.config				= o || {};
 				this.editorModel 	= this.em = this.config.em || {};
-				this.canvasId			= this.config.canvasId 	|| '';
-				this.wrapperId		= this.config.wrapperId 	|| 'wrapper';
 				this.pfx					= this.config.stylePrefix;
 				this.ppfx					= this.config.pStylePrefix;
 				this.hoverClass		= this.pfx + 'hover';
@@ -23,7 +21,7 @@ define(['backbone'],
 				this.plhClass			= this.pfx + 'placeholder';
 				this.freezClass		= this.ppfx + 'freezed';
 
-				this.canvas = this.editorModel.Canvas;
+				this.canvas = this.editorModel.get('Canvas');
 
 				if(this.editorModel.get)
 					this.setElement(this.getCanvas());

src/css_composer/main.js

@@ -4,32 +4,121 @@ define(function(require) {
    * @param   {Object} config Configurations
    *
    * */
-  var CssComposer  = function(config)
-  {
-    var c = config || {},
-      def = require('./config/config'),
-      CssRule = require('./model/CssRule'),
-      CssRules = require('./model/CssRules'),
-      Selectors = require('./model/Selectors'),
-      CssRulesView = require('./view/CssRulesView');
-
-    for (var name in def) {
-      if (!(name in c))
-        c[name] = def[name];
-    }
-
-    var rules = new CssRules([], c);
-    rules.add(c.defaults);
-
-    var rulesView = new CssRulesView({
-      collection: rules,
-      config: c,
-    });
+  return function() {
+    var c = {},
+    defaults = require('./config/config'),
+    CssRule = require('./model/CssRule'),
+    CssRules = require('./model/CssRules'),
+    Selectors = require('./model/Selectors'),
+    CssRulesView = require('./view/CssRulesView');
+
+    var rules, rulesView;
 
     return {
 
         Selectors: Selectors,
 
+        /**
+         * Name of the module
+         * @type {String}
+         * @private
+         */
+        name: 'CssComposer',
+
+        /**
+         * Indicates if module is public
+         * @type {Boolean}
+         * @private
+         */
+        public: true,
+
+        /**
+         * Mandatory for the storage manager
+         * @type {String}
+         * @private
+         */
+        storageKey: 'css', // [css, style] ??
+
+        /**
+         * Initialize module. Automatically called with a new instance of the editor
+         * @param {Object} config Configurations
+         */
+        init: function(config) {
+          c = config || {};
+          for (var name in defaults) {
+            if (!(name in c))
+              c[name] = defaults[name];
+          }
+
+          var ppfx = c.pStylePrefix;
+          if(ppfx)
+            c.stylePrefix = ppfx + c.stylePrefix;
+
+          var elStyle = c.em.config.style || '';
+          c.defaults = elStyle || c.defaults;
+
+          c.sm = c.em; // TODO Refactor
+          rules = new CssRules([], c);
+          rules.add(c.defaults);
+
+          // Load if requested
+          if(c.stm && c.stm.getConfig().autoload)
+            this.load();
+
+          rulesView = new CssRulesView({
+            collection: rules,
+            config: c,
+          });
+
+          if(c.stm && c.stm.isAutosave())
+            c.em.listenRules(this.getRules());
+          return this;
+        },
+
+        /**
+         * Load data from the passed object, if the object is empty will try to fetch them
+         * autonomously from the storage manager.
+         * The fetched data will be added to the collection
+         * @param {Object} data Object of data to load
+         * @return {Object} Loaded rules
+         */
+        load: function(data){
+          var d = data || '';
+          if(!d && c.stm)
+            d = c.em.getCacheLoad();
+          var obj = '';
+          if(d.style){
+            try{
+              obj =  JSON.parse(d.style);
+            }catch(err){}
+          }else if(d.css)
+            obj = c.em.get('Parser').parseCss(d.css);
+
+          rules.reset(obj);
+          return obj;
+        },
+
+        /**
+         * Store data to the selected storage
+         * @param {Boolean} noStore If true, won't store
+         * @return {Object} Data to store
+         * @example
+         * var rules = cssComposer.store();
+         */
+        store: function(noStore){
+          if(!c.stm)
+            return;
+          var obj = {};
+          var smc = c.stm.getConfig();
+          if(smc.storeCss)
+            obj.css = c.em.getCss();
+          if(smc.storeStyles)
+            obj.styles = JSON.stringify(rules);
+          if(!noStore)
+            c.stm.store(obj);
+          return obj;
+        },
+
         /**
          * Create new rule and return it. Don't add it to the collection
          * @param   {Array} selectors Array of selectors
@@ -103,6 +192,4 @@ define(function(require) {
       };
   };
 
-  return CssComposer;
-
 });

src/demo.js

@@ -10,7 +10,7 @@ require(['config/require-config'], function() {
 			container	: '#gjs',
 			height: '100%',
 			fromElement: true,
-			storageManager:{ autoload: 0 },
+			storageManager:{ autoload: 1},
 
 			commands: 		{
 					defaults		: [{

src/dom_components/main.js

@@ -36,9 +36,8 @@
  */
 define(function(require) {
 
-	var Components = function (config){
-
-		var c = config || {},
+	return function (){
+		var c = {},
 			defaults = require('./config/config'),
 			Component = require('./model/Component'),
 			ComponentText = require('./model/ComponentText'),
@@ -46,29 +45,115 @@ define(function(require) {
 			ComponentView = require('./view/ComponentView'),
 			ComponentImageView = require('./view/ComponentImageView'),
 			ComponentTextView	= require('./view/ComponentTextView');
+		var component, componentView;
+		this.c = c;
 
-	  // Set default options
-		for (var name in defaults) {
-			if (!(name in c))
-				c[name] = defaults[name];
-		}
+	  return {
 
-		var component		= new Component(c.wrapper, { sm: c.em, config: c });
+	  	/**
+       * Name of the module
+       * @type {String}
+       * @private
+       */
+      name: 'DomComponents',
 
-		component.set({
-			attributes: {id: 'wrapper'}
-		});
+      /**
+       * Indicates if module is public
+       * @type {Boolean}
+       * @private
+       */
+      public: true,
 
-		component.get('components').add(c.components);
+      /**
+       * Mandatory for the storage manager
+       * @type {String}
+       * @private
+       */
+      storageKey: 'html', // [css, style] ??
 
-		this.c = c;
+      /**
+       * Initialize module. Automatically called with a new instance of the editor
+       * @param {Object} config Configurations
+       */
+      init: function(config) {
+        c = config || {};
+        c.components = c.em.config.components || c.components;
 
-	  var componentView = new ComponentView({
-			model: component,
-			config: c,
-		});
+        for (var name in defaults) {
+          if (!(name in c))
+            c[name] = defaults[name];
+        }
 
-	  return {
+        var ppfx = c.pStylePrefix;
+        if(ppfx)
+          c.stylePrefix = ppfx + c.stylePrefix;
+
+        // Load dependencies
+        c.rte = c.em.get('rte') || '';
+				c.modal = c.em.get('Modal') || '';
+				c.am = c.em.get('AssetManager') || '';
+
+        component = new Component(c.wrapper, { sm: c.em, config: c });
+				component.set({ attributes: {id: 'wrapper'}});
+				component.get('components').add(c.components);
+			  componentView = new ComponentView({
+					model: component,
+					config: c,
+				});
+
+        if(c.stm && c.stm.getConfig().autoload)
+            this.load();
+
+        if(c.stm && c.stm.isAutosave()){
+					c.em.initUndoManager();
+          c.em.initChildrenComp(this.getWrapper());
+        }
+        return this;
+      },
+
+      /**
+         * Load data from the passed object, if the object is empty will try to fetch them
+         * autonomously from the storage manager.
+         * The fetched data will be added to the collection
+         * @param {Object} data Object of data to load
+         * @return {Object} Loaded data
+         */
+        load: function(data){
+          var d = data || '';
+          if(!d && c.stm)
+            d = c.em.getCacheLoad();
+          var obj = '';
+          if(d.components){
+            try{
+              obj =  JSON.parse(d.components);
+            }catch(err){}
+          }else if(d.html)
+            obj = d.html;
+
+          this.getComponents().reset(obj);
+          return obj;
+        },
+
+        /**
+         * Store data to the selected storage
+         * @param {Boolean} noStore If true, won't store
+         * @return {Object} Data to store
+         * @example
+         * var rules = cssComposer.store();
+         */
+        store: function(noStore){
+          if(!c.stm)
+            return;
+          var obj = {};
+          var smc = c.stm.getConfig();
+          if(smc.storeHtml)
+            obj.html = c.em.getHtml();
+          if(smc.storeComponents)
+            obj.components = JSON.stringify(c.em.getComponents());
+          if(!noStore)
+            c.stm.store(obj);
+          return obj;
+        },
 
 			/**
 			 * Returns privately the main wrapper
@@ -190,6 +275,4 @@ define(function(require) {
 
 		};
 	};
-
-	return Components;
 });

src/dom_components/model/Components.js

@@ -53,8 +53,9 @@ define([ 'backbone', 'require'],
 					var parsed = this.editor.get('Parser').parseHtml(models);
 					models = parsed.html;
 
-					if(parsed.css)
-						this.editor.CssComposer.getRules().add(parsed.css);
+					var cssc = this.editor.get('CssComposer');
+					if(parsed.css && cssc)
+						cssc.getRules().add(parsed.css);
 				}
 
 				return Backbone.Collection.prototype.add.apply(this, [models, opt]);

src/editor/main.js

@@ -85,7 +85,7 @@ define(function (require){
 		  	/**
 				 * @property {DomComponents}
 				 */
-				DomComponents: em.get('Components'),
+				DomComponents: em.get('DomComponents'),
 
 				/**
 				 * @property {CssComposer}
@@ -201,7 +201,7 @@ define(function (require){
 				 * @return {Object}
 				 */
 				getComponents: function(){
-					return em.get('Components').getComponents();
+					return em.get('DomComponents').getComponents();
 				},
 
 				/**

src/editor/model/Editor.js

@@ -1,10 +1,6 @@
 var deps = ['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'DeviceManager', 'Parser', 'SelectorManager',
-					'ModalDialog', 'AssetManager', 'CodeManager', 'Panels', 'RichTextEditor', 'StyleManager',
-        'BlockManager',
-        'CssComposer',
-        'Commands',
-        'Canvas',
-        'DomComponents'];
+					'ModalDialog', 'AssetManager', 'CodeManager', 'Panels', 'RichTextEditor', 'StyleManager', 'Commands', 'CssComposer',
+					'DomComponents', 'Canvas', 'BlockManager'];
 define([
         'backbone',
         'backboneUndo',
@@ -78,12 +74,12 @@ define([
 				this.loadModule('Panels'); // no deps
 				this.loadModule('RichTextEditor'); // no deps
 				this.loadModule('StyleManager'); // no deps
-				this.initCommands();
-				this.initCssComposer();
-				this.initComponents(); // Requires AssetManager and Dialog for images components
-				this.initCanvas(); // Requires RTE and Components
-				this.initUndoManager();
+				this.loadModule('Commands'); // dep Canvas
+				this.loadModule('CssComposer'); // dep Canvas
+				this.loadModule('DomComponents'); // Requires AssetManager and Dialog for images components
+				this.loadModule('Canvas'); // Requires RTE and Components
 				this.loadModule('BlockManager'); // Requires utils, canvas
+				this.initUndoManager(); // Is already called (components and css composer)
 
 				this.on('change:selectedComponent', this.componentSelected, this);
 			},
@@ -120,43 +116,6 @@ define([
 				return this;
 			},
 
-			/**
-			 * Initialize Commands
-			 * @private
-			 * */
-			initCommands: function() {
-				var cfg = this.config.commands,
-					pfx = cfg.stylePrefix || 'com-';
-				cfg.pStylePrefix = this.config.stylePrefix;
-				cfg.stylePrefix = this.config.stylePrefix + pfx;
-				cfg.em = this;
-				cfg.canvasId = this.config.idCanvas;
-				cfg.wrapperId = this.config.idWrapper;
-				this.com = new Commands(cfg);
-				this.Commands = this.com;
-				this.com.loadDefaultCommands();
-				this.set('Commands', this.com);
-			},
-
-			/**
-			 * Initialize canvas
-			 * @private
-			 * */
-			initCanvas: function() {
-				var cfg = this.config.canvas,
-				pfx = cfg.stylePrefix || 'cv-';
-				cfg.pStylePrefix	= this.config.stylePrefix;
-				cfg.stylePrefix	= this.config.stylePrefix + pfx;
-				cfg.canvasId	= this.config.idCanvas;
-				cfg.em = this;
-				this.cv = new Canvas(cfg);
-
-				if(this.cmp)
-					this.cv.setWrapper(this.cmp);
-				this.Canvas = this.cv;
-				this.set('Canvas', this.cv);
-			},
-
 			/**
 			 * Initialize editor model and set editor instance
 			 * @param {Editor} editor Editor instance
@@ -167,34 +126,6 @@ define([
 				this.set('Editor', editor);
 			},
 
-			/**
-			 * Initialize Css Composer
-			 * @private
-			 * */
-			initCssComposer: function() {
-				var elStyle = this.config.style || '';
-				var cfg = _.clone(this.config.cssComposer),
-				df = '';
-				pfx	= cfg.stylePrefix || 'css-';
-				cfg.stylePrefix	= this.config.stylePrefix + pfx;
-
-				if(this.get('StorageManager').getConfig().autoload)
-					df = this.loadRules();
-
-				if(elStyle)
-					cfg.defaults = elStyle;
-
-				if(df)
-					cfg.defaults = df;
-
-				cfg.sm = this;
-				this.cssc = new CssComposer(cfg);
-				this.CssComposer = this.cssc;
-				this.set('CssComposer', this.cssc);
-				if(this.get('StorageManager').isAutosave())
-					this.listenRules(this.cssc.getRules());
-			},
-
 			/**
 			 * Listen for new rules
 			 * @param {Object} collection
@@ -234,50 +165,11 @@ define([
 					return;
 
 				if(!avSt){
-					this.storeRules();
+					this.store();
 					this.set('changesCount', 0);
 				}
 			},
 
-			/**
-			 * Initialize components
-			 * @private
-			 * */
-			initComponents: function() {
-				this.config.domComponents.components = this.config.components;
-				var cfg = this.config.domComponents,
-				comp = '',
-				cmpStylePfx	= cfg.stylePrefix || 'comp-';
-
-				if(this.get('StorageManager').getConfig().autoload)
-					comp = this.loadComponents();
-
-				cfg.pStylePrefix	= this.config.stylePrefix;
-				cfg.stylePrefix	= this.config.stylePrefix + cmpStylePfx;
-
-				if(comp)
-					cfg.components = comp;
-
-				cfg.rte = this.get('rte') || '';
-
-				cfg.modal = this.get('Modal') || '';
-
-				cfg.am = this.get('AssetManager') || '';
-
-				cfg.em = this;
-
-				this.cmp = new DomComponents(cfg);
-				this.Components = this.cmp;
-
-				if(this.get('StorageManager').isAutosave()){
-					// Call UndoManager here so it's possible to call it also for children inside
-					this.initUndoManager();
-					this.initChildrenComp(this.cmp.getWrapper());
-				}
-
-				this.set('Components', this.cmp);
-			},
-
 			/**
 			 * Initialize Undo manager
 			 * @private
@@ -288,7 +180,7 @@ define([
 				if(this.cmp && this.config.undoManager){
 					var that = this;
 					this.um = new Backbone.UndoManager({
-					    register: [this.cmp.getComponents(), this.cssc.getRules()],
+					    register: [this.cmp.getComponents(), this.get('CssComposer').getRules()],
 					    track: true
 					});
 					this.UndoManager = this.um;
@@ -345,7 +237,7 @@ define([
 				}
 
 				if(!avSt){
-					this.storeComponents();
+					this.store();
 					this.set('changesCount', 0);
 				}
 			},
@@ -368,7 +260,7 @@ define([
 			 * Load components from storage
 			 * @return	{Object}
 			 * @private
-			 * */
+			 * *
 			loadComponents: function() {
 				var comps = '';
 				var result = this.getCacheLoad();
@@ -381,21 +273,13 @@ define([
 					comps = result.html;
 
 				return comps;
-			},
-
-			/**
-			 * Save components to storage
-			 * @private
-			 * */
-			storeComponents: function() {
-				this.store();
-			},
+			},*/
 
 			/**
 			 * Load rules from storage
 			 * @return {Array<Object>}
 			 * @private
-			 * */
+			 * *
 			loadRules: function() {
 				var comps = '';
 				var result = this.getCacheLoad();
@@ -408,15 +292,7 @@ define([
 					comps = this.get('Parser').parseCss(result.css);
 
 				return comps;
-			},
-
-			/**
-			 * Save rules to storage
-			 * @private
-			 * */
-			storeRules: function() {
-				this.store();
-			},
+			},*/
 
 			/**
 			 * Triggered when components are updated
@@ -505,7 +381,7 @@ define([
 			 * @private
 			 */
 			getComponents: function(){
-				var cmp = this.get('Components');
+				var cmp = this.get('DomComponents');
 				var cm = this.get('CodeManager');
 
 				if(!cmp || !cm)
@@ -522,7 +398,7 @@ define([
 			 * @private
 			 */
 			setStyle: function(style){
-				var rules = this.CssComposer.getRules();
+				var rules = this.get('CssComposer').getRules();
 				for(var i = 0, len = rules.length; i < len; i++)
 					rules.pop();
 				rules.add(style);
@@ -535,7 +411,7 @@ define([
 			 * @private
 			 */
 			getStyle: function(){
-				return this.CssComposer.getRules();
+				return this.get('CssComposer').getRules();
 			},
 
 			/**
@@ -544,7 +420,7 @@ define([
 			 * @private
 			 */
 			getHtml: function(){
-				var cmp = this.get('Components');
+				var cmp = this.get('DomComponents');
 				var cm = this.get('CodeManager');
 
 				if(!cmp || !cm)
@@ -560,7 +436,7 @@ define([
 			 * @private
 			 */
 			getCss: function(){
-				var cmp = this.get('Components');
+				var cmp = this.get('DomComponents');
 				var cm = this.get('CodeManager');
 				var cssc = this.get('CssComposer');
 
@@ -584,7 +460,7 @@ define([
 
 				var smc = sm.getConfig();
 				var store = {};
-
+				/*
 				if(smc.storeHtml)
 					store.html = this.getHtml();
 
@@ -596,13 +472,13 @@ define([
 
 				if(smc.storeStyles)
 					store.styles = JSON.stringify(this.getStyle());
-
+				*/
 				this.get('storables').forEach(function(m){
 					var obj = m.store(1);
 					for(var el in obj)
 						store[el] = obj[el];
 				});
-
+				console.log('TO STORE', store);
 				sm.store(store);
 				return store;
 			},

src/rich_text_editor/main.js

@@ -56,7 +56,7 @@ define(function(require) {
       		return;
       	var u = 'px';
         var eOffset = c.em.get('canvasOffset');
-        var cvsView = c.em.get('Canvas').CanvasView;
+        var cvsView = c.em.get('Canvas').getCanvasView();
         var dims = cvsView.getElementPos(this.lastEl);
         var toolS = toolbar.el.style;
         var toolH = toolbar.$el.outerHeight();