Fix circular issues by moving all non jsonable outside of model attributes

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.3.63",
+  "version": "0.3.65",
   "author": "Artur Arseniev",
   "homepage": "http://grapesjs.com",
   "main": [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.3.63",
+  "version": "0.3.65",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/commands/view/MoveComponent.js

@@ -62,7 +62,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 					return;
 				// Avoid badge showing on move
 				this.cacheEl = null;
-				var el = model.get('view').el;
+				var el = model.view.el;
 				this.startSelectPosition(el, this.frameEl.contentDocument);
 				this.sorter.draggable = drag;
 				this.sorter.onEndMove = this.onEndMoveFromModel.bind(this);

src/commands/view/SelectComponent.js

@@ -273,7 +273,7 @@ define(function(require) {
 
 					this.toolbar.reset(toolbar);
 
-					var view = model.get('view');
+					var view = model.view;
 					if(view) {
 						this.updateToolbarPos(view.el);
 					}
@@ -344,7 +344,7 @@ define(function(require) {
 					var model = this.editorModel.get('selectedComponent');
 
 					if (model) {
-						var view = model.get('view');
+						var view = model.view;
 						this.updateToolbarPos(view.el);
 					}
 				}

src/demo.js

@@ -36,8 +36,8 @@ require(['config/require-config'], function() {
 
 			storageManager:{
 				autoload: 0,
-				//storeComponents: 1,
+				storeComponents: 1,
-				//storeStyles: 1,
+				storeStyles: 1,
 			},
 			commands: 		{
 					defaults		: [{
@@ -331,6 +331,61 @@ require(['config/require-config'], function() {
 
     window.editor = editor;
 
+/*
+	// Test custom blocks
+	var bm = editor.BlockManager;
+  bm.get('b1').set({
+    content: {
+      classes: ['blk-row'],
+      droppable: ['.blk-cell'],
+      components: [{
+        classes: ['blk-cell', 'blk1'],
+      }]
+    }
+  });
+  bm.get('b2').set({
+    content: {
+      classes: ['blk-row'],
+      droppable: ['.blk-cell'],
+      components: [{
+        classes: ['blk-cell', 'blk2'],
+      },{
+        classes: ['blk-cell', 'blk2'],
+      }]
+    }
+  });
+  bm.get('b3').set({
+    content: {
+      classes: ['blk-row'],
+      droppable: ['.blk-cell'],
+      components: [{
+        classes: ['blk-cell', 'blk3'],
+      },{
+        classes: ['blk-cell', 'blk3'],
+      },{
+        classes: ['blk-cell', 'blk3'],
+      }]
+    }
+  });
+  bm.get('b4').set({
+    content: {
+      classes: ['blk-row'],
+      droppable: ['.blk-cell'],
+      components: [{
+        classes: ['blk-cell', 'blk37l'],
+      },{
+        classes: ['blk-cell', 'blk37r'],
+      }]
+    }
+  });
+  bm.get('map').set({
+    content: {
+      type: 'map',
+      draggable: ['*:not(#wrapper)'],
+      style: {height: '350px'}
+    },
+  });
+*/
 		/*
 		// Test toolbar commands
 		var cmd = editor.Commands;

src/dom_components/model/Component.js

@@ -220,16 +220,6 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 				return attr;
 			},
 
-			/**
-			 * Avoid circular structure
-			 * @return {Object}
-			 */
-			toJSON: function(){
-				var obj = this.attributes;
-				delete obj.view;
-				return obj;
-			}
-
 		},{
 
 			/**

src/dom_components/view/ComponentView.js

@@ -26,7 +26,7 @@ define(['backbone', './ComponentsView'],
 				this.listenTo(this.model, 'change:state', this.updateState);
 				this.listenTo(this.model.get('classes'), 'add remove change', this.updateClasses);
 				this.$el.data('model', this.model);
-				this.model.set('view', this);
+				this.model.view = this;
 				this.$el.data("collection", this.components);
 
 				if(this.model.get('classes').length)

src/trait_manager/model/Trait.js

@@ -18,21 +18,11 @@ define(['backbone'],
 			},
 
 			initialize: function(){
-				if(!this.get('target'))
+				if (this.get('target')) {
-          throw new Error('Target not found');
+					this.target = this.get('target');
-      },
+					this.unset('target');
-
+				}
-			/**
+			},
-			 * Need to remove target from it otherwise with toJSON
-			 * creates an infinite loop
-			 * @return {Object}
-			 * @private
-			 */
-			toJSON: function(){
-				var obj = this.attributes;
-				delete obj.target;
-				return obj;
-			}
 
     });
 	});

src/trait_manager/model/Traits.js

@@ -9,20 +9,20 @@ define(['backbone','./Trait', './TraitFactory'],
         this.target = target;
       },
 
-      add: function(models, opt){
+      add: function(models, opt) {
         // Use TraitFactory if necessary
-				if(typeof models === 'string' || models instanceof Array){
+        if(typeof models === 'string' || models instanceof Array){
           if(typeof models === 'string')
             models = [models];
-          for(var i = 0, len = models.length; i < len; i++){
+          for(var i = 0, len = models.length; i < len; i++) {
             var str = models[i];
             var model = typeof str === 'string' ? TraitFactory.build(str)[0] : str;
             model.target = this.target;
             models[i] = model;
           }
-				}
+        }
-				return Backbone.Collection.prototype.add.apply(this, [models, opt]);
+        return Backbone.Collection.prototype.add.apply(this, [models, opt]);
-			},
+      },
 
     });
 });

src/trait_manager/view/TraitView.js

@@ -11,7 +11,7 @@ define(['backbone'], function (Backbone) {
 			this.config = o.config || {};
 			this.pfx = this.config.stylePrefix || '';
 			this.ppfx = this.config.pStylePrefix || '';
-			this.target = md.get('target');
+			this.target = md.target;
 			this.className = this.pfx + 'trait';
 			this.labelClass = this.ppfx + 'label';
 			this.fieldClass = this.ppfx + 'field ' + this.ppfx + 'field-' + md.get('type');