Refactor store and load inside storable modules. Closes #128

index.html

@@ -806,7 +806,7 @@
       clearOnRender: 0,
 
       storageManager:{
-        autoload: 0,
+        autoload: 1,
         storeComponents: 1,
         storeStyles: 1,
       },
@@ -1173,6 +1173,14 @@
     },
   });
 
+    editor.on('storage:store', function(store) {
+      console.log('Stored', store);
+    });
+
+    editor.on('storage:load', function(loaded) {
+      console.log('Loaded', loaded);
+    });
+
     editor.render();
     </script>
   </body>

src/css_composer/index.js

@@ -93,9 +93,6 @@ module.exports = () => {
        * @private
        */
       onLoad() {
-        if(c.stm && c.stm.getConfig().autoload)
-            this.load();
-
         if(c.stm && c.stm.isAutosave())
           c.em.listenRules(this.getAll());
       },

src/dom_components/index.js

@@ -192,9 +192,6 @@ module.exports = () => {
      * @private
      */
     onLoad() {
-      if(c.stm && c.stm.getConfig().autoload)
-          this.load();
-
       if(c.stm && c.stm.isAutosave()){
         c.em.initUndoManager();
         c.em.initChildrenComp(this.getWrapper());
@@ -220,8 +217,15 @@ module.exports = () => {
       }else if(d.html)
         obj = d.html;
 
-      if(obj)
+      console.log(obj);
+
+      if (obj) {
+        console.log('Before', this.getComponents().length);
+        this.clear();
         this.getComponents().reset(obj);
+        console.log('After', this.getComponents().length);
+      }
+
       return obj;
     },
 
@@ -239,8 +243,11 @@ module.exports = () => {
         obj.html = c.em.getHtml();
       if(keys.indexOf('components') >= 0)
         obj.components = JSON.stringify(c.em.getComponents());
-      if(!noStore)
+
+      if (!noStore) {
         c.stm.store(obj);
+      }
+
       return obj;
     },
 

src/editor/index.js

@@ -36,6 +36,8 @@
  * component:update:{propertyName} - Listen any property change
  * component:styleUpdate - Triggered when the style of the component is updated
  * component:styleUpdate:{propertyName} - Listen for a specific style property change
+ * storage:load - Triggered when something was loaded from the storage, loaded object passed as an argumnet
+ * storage:store - Triggered when something is stored to the storage, stored object passed as an argumnet
  * canvasScroll - Triggered when the canvas is scrolled
  * run:{commandName} - Triggered when some command is called to run (eg. editor.runCommand('preview'))
  * stop:{commandName} - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))

src/editor/model/Editor.js

@@ -21,6 +21,7 @@ require('trait_manager'),
 var Backbone = require('backbone');
 var UndoManager = require('backbone-undo');
 var key = require('keymaster');
+var timedInterval;
 
 module.exports = Backbone.Model.extend({
 
@@ -53,12 +54,25 @@ module.exports = Backbone.Model.extend({
       M.onLoad();
     });
 
+    this.loadOnStart();
     this.initUndoManager();
 
     this.on('change:selectedComponent', this.componentSelected, this);
     this.on('change:changesCount', this.updateBeforeUnload, this);
   },
 
+  /**
+   * Load on start if it was requested
+   * @private
+   */
+  loadOnStart() {
+    const sm = this.get('StorageManager');
+
+    if (sm && sm.getConfig().autoload) {
+      this.load();
+    }
+  },
+
   /**
    * Set the alert before unload in case it's requested
    * and there are unsaved changes
@@ -409,9 +423,11 @@ module.exports = Backbone.Model.extend({
         store[el] = obj[el];
     });
 
-    sm.store(store, clb);
+    sm.store(store, () => {
+      clb && clb();
+      this.trigger('storage:store', store);
+    });
     this.set('changesCount', 0);
-    this.trigger('storage:store', store);
 
     return store;
   },

src/editor/view/EditorView.js

@@ -23,8 +23,10 @@ module.exports = Backbone.View.extend({
       if (config.clearOnRender) {
         dComps.clear();
       }
-      dComps.getComponents().add(config.components);
+      dComps.getComponents().reset(config.components);
       um.clear();
+      model.loadOnStart();
+      // This will init loaded components
       dComps.onLoad();
     }