Render frames on page update

src/canvas/model/Canvas.js

@@ -29,8 +29,9 @@ export default Backbone.Model.extend({
     this.listenTo(em, evPageSelect, this._pageUpdated);
   },
 
-  _pageUpdated(page) {
-    console.log('Page updated', page);
+  _pageUpdated(page, prev) {
+    prev && prev.getFrames().map(frame => frame.disable());
+    this.set('frames', page.getFrames());
   },
 
   updateDevice() {

src/canvas/model/Frame.js

@@ -40,10 +40,28 @@ export default Backbone.Model.extend({
       this.set('styles', new CssRules(styles, modOpts));
   },
 
+  /*
+  frames: [
+    {
+        components: '<div id="wrapper">...</div>',
+        styles: '#wrapper{...}, .class{...}',
+    }, {
+        component: 'i123', // get reference on render
+        style: 'rules-id' // get reference on render
+    }, {
+        components: '<div id="wrapper2">...</div>',
+        style: 'rules-id', // get reference on render
+    }
+]
+  */
   getComponent() {},
 
   getStyle() {},
 
+  disable() {
+    this.trigger('disable');
+  },
+
   remove() {
     this.view = 0;
     const coll = this.collection;

src/canvas/view/CanvasView.js

@@ -37,19 +37,26 @@ export default Backbone.View.extend({
     this.ppfx = this.config.pStylePrefix || '';
     this.className = this.config.stylePrefix + 'canvas';
     const { em, config } = this;
+    this.initFrames();
+    this.listenTo(em, 'change:canvasOffset', this.clearOff);
+    this.listenTo(em, 'component:selected', this.checkSelected);
+    this.listenTo(model, 'change:zoom change:x change:y', this.updateFrames);
+    this.listenTo(model, 'change:frames', this._renderFrames);
+    this.listenTo(frames, 'loaded:all', () => em.trigger('loaded'));
+    this.toggleListeners(1);
+  },
+
+  initFrames() {
+    const { frames, model, config } = this;
+    frames && frames.remove();
     this.frames = new FramesView({
-      collection: frames,
+      collection: model.get('frames'),
       config: {
         ...config,
         canvasView: this,
         renderContent: 1
       }
     });
-    this.listenTo(em, 'change:canvasOffset', this.clearOff);
-    this.listenTo(em, 'component:selected', this.checkSelected);
-    this.listenTo(model, 'change:zoom change:x change:y', this.updateFrames);
-    this.listenTo(frames, 'loaded:all', () => em.trigger('loaded'));
-    this.toggleListeners(1);
   },
 
   checkSelected(component, opts = {}) {
@@ -328,6 +335,16 @@ export default Backbone.View.extend({
     return (view && view._getFrame()) || this.em.get('currentFrame');
   },
 
+  _renderFrames() {
+    this.initFrames();
+    const { model, frames, em, framesArea } = this;
+    const frms = model.get('frames');
+    frames.render();
+    em.setCurrentFrame(frms.at(0).view);
+    framesArea.appendChild(frames.el);
+    this.frame = frms.at(0).view;
+  },
+
   render() {
     const { el, $el, ppfx, model, em, frames } = this;
     $el.html(this.template());

src/pages/index.js

@@ -100,10 +100,10 @@ export default () => {
      * @returns {this}
      */
     select(pg) {
-      const { em } = this;
+      const { em, selected } = this;
       const page = isString(pg) ? this.get(pg) : pg;
       this.selected = page;
-      em && em.trigger(evPageSelect, page);
+      em && em.trigger(evPageSelect, page, selected);
       return this;
     },