diff --git a/src/canvas/index.js b/src/canvas/index.js index 024804132..935224289 100644 --- a/src/canvas/index.js +++ b/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); }, diff --git a/src/canvas/model/Canvas.js b/src/canvas/model/Canvas.js index 29105ee7a..b1389edad 100644 --- a/src/canvas/model/Canvas.js +++ b/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() { diff --git a/src/canvas/model/Frame.js b/src/canvas/model/Frame.js index 792132073..2bd71df5f 100644 --- a/src/canvas/model/Frame.js +++ b/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: '', diff --git a/src/commands/view/CommandAbstract.js b/src/commands/view/CommandAbstract.js index f9df4c96d..ede7c1d5c 100644 --- a/src/commands/view/CommandAbstract.js +++ b/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} diff --git a/src/pages/index.js b/src/pages/index.js index ee0a113f5..1d48b4d4e 100644 --- a/src/pages/index.js +++ b/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; }, diff --git a/src/pages/model/Page.js b/src/pages/model/Page.js index 1c57b0148..f2d3a4442 100644 --- a/src/pages/model/Page.js +++ b/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); + } });