Add first frame to the page

src/canvas/index.js

@@ -20,7 +20,6 @@
  * * [getWindow](#getwindow)
  * * [getDocument](#getdocument)
  * * [getBody](#getbody)
- * * [getWrapperEl](#getwrapperel)
  * * [setCustomBadgeLabel](#setcustombadgelabel)
  * * [hasFocus](#hasfocus)
  * * [scrollTo](#scrollto)
@@ -79,9 +78,6 @@ export default () => {
         config: c
       });
 
-      var cm = c.em.get('DomComponents');
-      if (cm) this.setWrapper(cm);
-
       this.model = canvas;
       this.startAutoscroll = this.startAutoscroll.bind(this);
       this.stopAutoscroll = this.stopAutoscroll.bind(this);
@@ -96,15 +92,6 @@ export default () => {
       return c;
     },
 
-    /**
-     * Add wrapper
-     * @param	{Object}	wrp Wrapper
-     * @private
-     * */
-    setWrapper(wrp) {
-      canvas.set('wrapper', wrp);
-    },
-
     /**
      * Get the canvas element
      * @return {HTMLElement}
@@ -156,15 +143,6 @@ export default () => {
       return doc && doc.body;
     },
 
-    /**
-     * Get the wrapper element containing all the components
-     * @return {HTMLElement}
-     */
-    getWrapperEl() {
-      const body = this.getBody();
-      return body && body.querySelector('#wrapper');
-    },
-
     _getCompFrame(compView) {
       return compView && compView._getFrame();
     },
@@ -626,16 +604,6 @@ export default () => {
       style.pointerEvents = on ? '' : 'none';
     },
 
-    /**
-     * Returns wrapper element
-     * @return {HTMLElement}
-     * ????
-     * @private
-     */
-    getFrameWrapperEl() {
-      return CanvasView.frame.getWrapper();
-    },
-
     getFrames() {
       return canvas.get('frames').map(item => item);
     },

src/canvas/model/Canvas.js

@@ -6,7 +6,6 @@ export default Backbone.Model.extend({
   defaults: {
     frame: '',
     frames: '',
-    wrapper: '',
     rulers: false,
     zoom: 100,
     x: 0,
@@ -18,14 +17,23 @@ export default Backbone.Model.extend({
     const { styles = [], scripts = [] } = config;
     const root = em && em.getWrapper();
     const css = em && em.getStyle();
-    const frame = new Frame({ root, styles: css }, config);
+    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);
+    }
+
     styles.forEach(style => frame.addLink(style));
     scripts.forEach(script => frame.addScript(script));
     this.em = em;
     this.set('frame', frame);
-    this.set('frames', new Frames([frame], config));
+    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);
   },
 
   updateDevice() {

src/canvas/model/Frame.js

@@ -5,7 +5,6 @@ import { isString } from 'underscore';
 
 export default Backbone.Model.extend({
   defaults: {
-    wrapper: '',
     width: null,
     height: null,
     head: '',

src/commands/view/CommandAbstract.js

@@ -23,7 +23,6 @@ export default Backbone.View.extend({
 
     if (this.canvas) {
       this.$canvas = this.$el;
-      // this.$wrapper = $(this.getCanvasWrapper());
       // this.frameEl = this.canvas.getFrameEl();
       this.canvasTool = this.getCanvasTools();
       // this.bodyEl = this.getCanvasBody();
@@ -55,14 +54,6 @@ export default Backbone.View.extend({
     return this.canvas.getBody();
   },
 
-  /**
-   * Get canvas wrapper element
-   * @return {HTMLElement}
-   */
-  getCanvasWrapper() {
-    return this.canvas.getWrapperEl();
-  },
-
   /**
    * Get canvas wrapper element
    * @return {HTMLElement}

src/pages/index.js

@@ -3,7 +3,9 @@ import { createId } from 'utils/mixins';
 import Pages from './model/Pages';
 import Page from './model/Page';
 
-export const evPfx = `page:`;
+export const evPfx = 'page:';
+export const evPageSelect = `${evPfx}select`;
+const typeMain = 'main';
 
 export default () => {
   return {
@@ -25,7 +27,9 @@ export default () => {
       const defPages = cnf.pages || [];
       const pages = new Pages(defPages);
       this.pages = pages;
-      const mainPage = !pages.length ? this.add({ type: 'main' }) : pages.at(0);
+      const mainPage = !pages.length
+        ? this.add({ type: typeMain })
+        : this.getMain();
       this.select(mainPage);
       pages.on('add', (p, c, o) => em.trigger(`${evPfx}add`, p, o));
       pages.on('remove', (p, c, o) => em.trigger(`${evPfx}remove`, p, o));
@@ -65,6 +69,15 @@ export default () => {
       return this.pages.filter(p => p.get('id') === id)[0];
     },
 
+    /**
+     * Get main page
+     * @returns {Page}
+     */
+    getMain() {
+      const pages = this.getAll();
+      return pages.filter(p => p.get('type') === typeMain)[0] || pages.at(0);
+    },
+
     /**
      * Get all pages
      */
@@ -88,7 +101,7 @@ export default () => {
       const { em } = this;
       const page = isString(pg) ? this.get(pg) : pg;
       this.selected = page;
-      em && em.trigger(`${evPfx}:select`, page);
+      em && em.trigger(evPageSelect, page);
       return this;
     },
 

src/pages/model/Page.js

@@ -1,7 +1,20 @@
 import { Model } from 'backbone';
+import Frames from 'canvas/model/Frames';
 
 export default Model.extend({
   defaults: () => ({
     frames: []
-  })
+  }),
+
+  initialize(props = {}) {
+    this.set('frames', new Frames(this.get('frames')));
+  },
+
+  getFrames() {
+    return this.get('frames');
+  },
+
+  getMainFrame() {
+    return this.getFrames().at(0);
+  }
 });