Update page to frame configs

src/canvas/model/Canvas.js

@@ -1,6 +1,5 @@
 import Backbone from 'backbone';
-import Frame from './Frame';
-import Frames from './Frames';
+import { evPageSelect } from 'pages';
 
 export default Backbone.Model.extend({
   defaults: {
@@ -18,14 +17,8 @@ export default Backbone.Model.extend({
     const root = em && em.getWrapper();
     const css = em && em.getStyle();
     const mainPage = em.get('Pages').getMain();
-    let frames = mainPage.getFrames();
-    let frame = mainPage.getMainFrame();
-
-    if (!frame) {
-      frame = new Frame({ root, styles: css }, config);
-      frames.add(frame);
-    }
-
+    const frames = mainPage.getFrames();
+    const frame = mainPage.getMainFrame() || frames.add({ root, styles: css });
     styles.forEach(style => frame.addLink(style));
     scripts.forEach(script => frame.addScript(script));
     this.em = em;
@@ -33,7 +26,11 @@ export default Backbone.Model.extend({
     this.set('frames', frames);
     this.listenTo(this, 'change:zoom', this.onZoomChange);
     this.listenTo(em, 'change:device', this.updateDevice);
-    // TODO this.listenTo(em, 'page:select', this.updateFrames);
+    this.listenTo(em, evPageSelect, this._pageUpdated);
+  },
+
+  _pageUpdated(page) {
+    console.log('Page updated', page);
   },
 
   updateDevice() {

src/canvas/model/Frame.js

@@ -17,12 +17,14 @@ export default Backbone.Model.extend({
   },
 
   initialize(props, opts = {}) {
+    const { config } = opts;
+    const { em } = config;
     const { root, styles, components } = this.attributes;
     this.set('head', []);
-    this.em = opts.em;
+    this.em = em;
     const modOpts = {
-      em: opts.em,
-      config: opts.em.get('DomComponents').getConfig(),
+      em,
+      config: em.get('DomComponents').getConfig(),
       frame: this
     };
 

src/canvas/model/Frames.js

@@ -1,12 +1,13 @@
 import { bindAll } from 'underscore';
-import Backbone from 'backbone';
+import { Collection } from 'backbone';
 import model from './Frame';
 
-export default Backbone.Collection.extend({
+export default Collection.extend({
   model,
 
-  initialize() {
+  initialize(models, config = {}) {
     bindAll(this, 'itemLoaded');
+    this.config = config;
   },
 
   itemLoaded() {
@@ -26,5 +27,10 @@ export default Backbone.Collection.extend({
 
   listenToLoadItems(on) {
     this.forEach(item => item[on ? 'on' : 'off']('loaded', this.itemLoaded));
+  },
+
+  add(m, o = {}) {
+    const { config } = this;
+    return Collection.prototype.add.call(this, m, { ...o, config });
   }
 });

src/pages/index.js

@@ -25,7 +25,7 @@ export default () => {
       const cnf = { ...opts };
       this.config = cnf;
       const defPages = cnf.pages || [];
-      const pages = new Pages(defPages);
+      const pages = new Pages(defPages, cnf);
       this.pages = pages;
       const mainPage = !pages.length
         ? this.add({ type: typeMain })
@@ -46,7 +46,9 @@ export default () => {
      */
     add(props, opts = {}) {
       props.id = props.id || this._createId();
-      return this.pages.add(props, opts);
+      const page = this.pages.add(props, opts);
+      opts.select && this.select(page);
+      return page;
     },
 
     /**

src/pages/model/Page.js

@@ -6,8 +6,8 @@ export default Model.extend({
     frames: []
   }),
 
-  initialize(props = {}) {
-    this.set('frames', new Frames(this.get('frames')));
+  initialize(props, opts = {}) {
+    this.set('frames', new Frames(this.get('frames'), opts.config));
   },
 
   getFrames() {

src/pages/model/Pages.js

@@ -2,5 +2,14 @@ import { Collection } from 'backbone';
 import Page from './Page';
 
 export default Collection.extend({
-  model: Page
+  model: Page,
+
+  initialize(models, config = {}) {
+    this.config = config;
+  },
+
+  add(m, o = {}) {
+    const { config } = this;
+    return Collection.prototype.add.call(this, m, { ...o, config });
+  }
 });