Update canvas and pages init flow

src/canvas/index.js

@@ -70,19 +70,21 @@ export default () => {
       this.em = c.em;
       const ppfx = c.pStylePrefix;
       if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;
-
       canvas = new Canvas(config);
-      CanvasView = new canvasView({
-        model: canvas,
-        config: c
-      });
-
       this.model = canvas;
       this.startAutoscroll = this.startAutoscroll.bind(this);
       this.stopAutoscroll = this.stopAutoscroll.bind(this);
       return this;
     },
 
+    onLoad() {
+      this.model.init();
+      CanvasView = new canvasView({
+        model: canvas,
+        config: c
+      });
+    },
+
     getModel() {
       return canvas;
     },

src/canvas/model/Canvas.js

@@ -13,6 +13,15 @@ export default Backbone.Model.extend({
 
   initialize(config = {}) {
     const { em } = config;
+    this.config = config;
+    this.em = em;
+    this.listenTo(this, 'change:zoom', this.onZoomChange);
+    this.listenTo(em, 'change:device', this.updateDevice);
+    this.listenTo(em, evPageSelect, this._pageUpdated);
+  },
+
+  init() {
+    const { em, config } = this;
     const { styles = [], scripts = [] } = config;
     const mainPage = em.get('PageManager').getMain();
     const frames = mainPage.getFrames();
@@ -24,18 +33,14 @@ export default Backbone.Model.extend({
       });
     styles.forEach(style => frame.addLink(style));
     scripts.forEach(script => frame.addScript(script));
-    this.em = em;
     this.set('frame', frame);
     this.set('frames', frames);
-    this.listenTo(this, 'change:zoom', this.onZoomChange);
-    this.listenTo(em, 'change:device', this.updateDevice);
-    this.listenTo(em, evPageSelect, this._pageUpdated);
   },
 
   _pageUpdated(page, prev) {
     const { em } = this;
     em.setSelected();
-    em.stopDefault(); // We have to stop before changing current frames
+    em.get('readyCanvas') && em.stopDefault(); // We have to stop before changing current frames
     prev && prev.getFrames().map(frame => frame.disable());
     this.set('frames', page.getFrames());
   },

src/canvas/model/Frame.js

@@ -31,7 +31,7 @@ export default Model.extend({
       const wrp = isObject(components) ? components : { components };
       wrp.type = 'wrapper';
       const Wrapper = domc.getType('wrapper').model;
-      this.set('components', new Wrapper({ ...conf.wrapper, ...wrp }, modOpts));
+      this.set('components', new Wrapper(wrp, modOpts));
     }
 
     if (!styles) {

src/canvas/view/CanvasView.js

@@ -28,7 +28,6 @@ export default Backbone.View.extend({
 
   initialize(o) {
     bindAll(this, 'clearOff', 'onKeyPress', 'onCanvasMove');
-    on(window, 'scroll resize', this.clearOff);
     const { model } = this;
     this.config = o.config || {};
     this.em = this.config.em || {};
@@ -102,6 +101,7 @@ export default Backbone.View.extend({
     const { el } = this;
     const fn = enable ? on : off;
     fn(document, 'keypress', this.onKeyPress);
+    fn(window, 'scroll resize', this.clearOff);
     // fn(el, 'mousemove dragover', this.onCanvasMove);
   },
 

src/dom_components/model/ComponentWrapper.js

@@ -3,7 +3,7 @@ import Component from './Component';
 
 export default Component.extend(
   {
-    defaults: () => ({
+    defaults: {
       ...Component.prototype.defaults,
       removable: false,
       copyable: false,
@@ -19,7 +19,7 @@ export default Component.extend(
         'background-position',
         'background-size'
       ]
-    })
+    }
   },
   {
     isComponent() {

src/pages/index.js

@@ -43,15 +43,10 @@ export default () => {
       const cnf = { ...opts };
       this.config = cnf;
       this.em = em;
-      const defPages = cnf.pages || [];
-      const pages = new Pages(defPages, cnf);
+      const pages = new Pages([], cnf);
       this.pages = pages;
       const model = new Model({ _undo: true });
-      const mainPage = !pages.length
-        ? this.add({ type: typeMain })
-        : this.getMain();
       this.model = model;
-      this.select(mainPage, { silent: 1, main: 1 });
       pages.on('add', (p, c, o) => em.trigger(evPageAdd, p, o));
       pages.on('remove', (p, c, o) => em.trigger(evPageRemove, p, o));
       pages.on('change', (p, c) => {
@@ -63,6 +58,16 @@ export default () => {
       return this;
     },
 
+    onLoad() {
+      const pages = this.getAll();
+      const opt = { silent: true };
+      pages.add(this.config.pages || [], opt);
+      const mainPage = !pages.length
+        ? this.add({ type: typeMain }, opt)
+        : this.getMain();
+      this.select(mainPage, opt);
+    },
+
     _onPageChange(m, page) {
       const { em } = this;
       const lm = em.get('LayerManager');
@@ -94,7 +99,7 @@ export default () => {
         opts.select && this.select(page);
         return page;
       };
-      em.trigger(evPageAddBefore, props, add, opts);
+      !opts.silent && em.trigger(evPageAddBefore, props, add, opts);
       return !opts.abort && add();
     },
 
@@ -110,7 +115,7 @@ export default () => {
         page && this.pages.remove(page, opts);
         return page;
       };
-      em.trigger(evPageRemoveBefore, page, rm, opts);
+      !opts.silent && em.trigger(evPageRemoveBefore, page, rm, opts);
       return !opts.abort && rm();
     },
 

test/specs/pages/index.js

@@ -12,6 +12,7 @@ describe('Pages', () => {
     em = editor.getModel();
     domc = em.get('DomComponents');
     pm = em.get('PageManager');
+    pm.onLoad();
     initCmpLen = Object.keys(domc.allById()).length;
   });
 
@@ -73,7 +74,7 @@ describe('Pages', () => {
     expect(pageComp.components().length).toBe(0);
   });
 
-  describe.skip('Init with pages', () => {
+  describe('Init with pages', () => {
     let idPage1, idComp1, idComp2, comp1, comp2, initPages, allbyId;
     const createCompDef = id => ({
       attributes: {
@@ -126,6 +127,7 @@ describe('Pages', () => {
       em = editor.getModel();
       domc = em.get('DomComponents');
       pm = em.get('PageManager');
+      pm.onLoad();
       allbyId = domc.allById();
       initCmpLen = Object.keys(allbyId).length;
     });
@@ -177,6 +179,7 @@ describe('Managing pages', () => {
     em = editor.getModel();
     domc = em.get('DomComponents');
     pm = em.get('PageManager');
+    editor.getModel().loadOnStart();
     initCmpLen = Object.keys(domc.allById()).length;
   });