Make pages storable

src/canvas/model/Frame.js

@@ -28,10 +28,10 @@ export default Model.extend({
     const modOpts = { em, config: conf, frame: this };
 
     if (!isComponent(components)) {
-      this.set(
-        'components',
-        new Component({ type: 'wrapper', components }, modOpts)
-      );
+      const wrp = isObject(components)
+        ? components
+        : { type: 'wrapper', components };
+      this.set('components', new Component(wrp, modOpts));
     }
 
     if (!styles) {

src/canvas/view/CanvasView.js

@@ -30,7 +30,6 @@ export default Backbone.View.extend({
     bindAll(this, 'clearOff', 'onKeyPress', 'onCanvasMove');
     on(window, 'scroll resize', this.clearOff);
     const { model } = this;
-    const frames = model.get('frames');
     this.config = o.config || {};
     this.em = this.config.em || {};
     this.pfx = this.config.stylePrefix || '';
@@ -42,7 +41,6 @@ export default Backbone.View.extend({
     this.listenTo(em, 'component:selected', this.checkSelected);
     this.listenTo(model, 'change:zoom change:x change:y', this.updateFrames);
     this.listenTo(model, 'change:frames', this._onFramesUpdate);
-    frames.once('loaded:all', () => em.trigger('loaded'));
     this.toggleListeners(1);
   },
 
@@ -52,10 +50,12 @@ export default Backbone.View.extend({
   },
 
   _initFrames() {
-    const { frames, model, config } = this;
+    const { frames, model, config, em } = this;
+    const collection = model.get('frames');
+    collection.once('loaded:all', () => em.trigger('loaded'));
     frames && frames.remove();
     this.frames = new FramesView({
-      collection: model.get('frames'),
+      collection,
       config: {
         ...config,
         canvasView: this,
@@ -341,6 +341,7 @@ export default Backbone.View.extend({
   },
 
   _renderFrames() {
+    if (!this.ready) return;
     const { model, frames, em, framesArea } = this;
     const frms = model.get('frames');
     frms.listenToLoad();
@@ -386,7 +387,7 @@ export default Backbone.View.extend({
     this.toolsGlobEl = el.querySelector(`.${ppfx}tools-gl`);
     this.toolsEl = toolsEl;
     this.el.className = this.className;
-
+    this.ready = 1;
     this._renderFrames();
 
     return this;

src/editor/index.js

@@ -187,7 +187,7 @@ export default (config = {}) => {
 
       // Do post render stuff after the iframe is loaded otherwise it'll
       // be empty during tests
-      em.on('loaded', () => {
+      em.once('loaded', () => {
         this.UndoManager.clear();
         em.get('modules').forEach(module => {
           module.postRender && module.postRender(editorView);

src/editor/view/EditorView.js

@@ -10,7 +10,8 @@ export default Backbone.View.extend({
     this.conf = model.config;
     this.pn = model.get('Panels');
     this.cv = model.get('Canvas');
-    model.on('loaded', () => {
+    model.once('loaded', () => {
+      console.log('LOADED EditorView');
       this.pn.active();
       this.pn.disableButtons();
       setTimeout(() => {

src/pages/index.js

@@ -57,6 +57,7 @@ export default () => {
       pages.on('change', (p, c) => {
         em.trigger(evPageUpdate, p, p.changedAttributes(), c);
       });
+      pages.on('reset', coll => coll.at(0) && this.select(coll.at(0)));
       model.on('change:selected', this._onPageChange);
 
       return this;