From cfe6a8a4ad4bc98981603b6df74046f7ab57db4e Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 12 Mar 2021 03:41:13 +0100 Subject: [PATCH] Update canvas and pages init flow --- src/canvas/index.js | 14 +++++++------ src/canvas/model/Canvas.js | 15 +++++++++----- src/canvas/model/Frame.js | 2 +- src/canvas/view/CanvasView.js | 2 +- src/dom_components/model/ComponentWrapper.js | 4 ++-- src/pages/index.js | 21 ++++++++++++-------- test/specs/pages/index.js | 5 ++++- 7 files changed, 39 insertions(+), 24 deletions(-) diff --git a/src/canvas/index.js b/src/canvas/index.js index c60a7ce11..75b69b8c0 100644 --- a/src/canvas/index.js +++ b/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; }, diff --git a/src/canvas/model/Canvas.js b/src/canvas/model/Canvas.js index 771fb038c..df58c820f 100644 --- a/src/canvas/model/Canvas.js +++ b/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()); }, diff --git a/src/canvas/model/Frame.js b/src/canvas/model/Frame.js index ee0a96d28..71288e01b 100644 --- a/src/canvas/model/Frame.js +++ b/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) { diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index aa50cf270..657f35eda 100644 --- a/src/canvas/view/CanvasView.js +++ b/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); }, diff --git a/src/dom_components/model/ComponentWrapper.js b/src/dom_components/model/ComponentWrapper.js index 0882d07cf..fd7270e83 100644 --- a/src/dom_components/model/ComponentWrapper.js +++ b/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() { diff --git a/src/pages/index.js b/src/pages/index.js index 823b6d817..e8f805ed8 100644 --- a/src/pages/index.js +++ b/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(); }, diff --git a/test/specs/pages/index.js b/test/specs/pages/index.js index 3a6752d5b..79bd7e26f 100644 --- a/test/specs/pages/index.js +++ b/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; });