|
|
|
@ -46,9 +46,11 @@ |
|
|
|
|
|
|
|
import { isString, bindAll, unique, flatten } from 'underscore'; |
|
|
|
import { createId } from '../utils/mixins'; |
|
|
|
import { Model, Module } from '../common'; |
|
|
|
import { Model, Module } from '../abstract'; |
|
|
|
import { ItemManagerModule } from '../abstract/Module'; |
|
|
|
import Pages from './model/Pages'; |
|
|
|
import Page from './model/Page'; |
|
|
|
import EditorModel from '../editor/model/Editor'; |
|
|
|
|
|
|
|
export const evAll = 'page'; |
|
|
|
export const evPfx = `${evAll}:`; |
|
|
|
@ -61,239 +63,226 @@ export const evPageRemove = `${evPfx}remove`; |
|
|
|
export const evPageRemoveBefore = `${evPageRemove}:before`; |
|
|
|
const chnSel = 'change:selected'; |
|
|
|
const typeMain = 'main'; |
|
|
|
const events = { |
|
|
|
all: evAll, |
|
|
|
select: evPageSelect, |
|
|
|
selectBefore: evPageSelectBefore, |
|
|
|
update: evPageUpdate, |
|
|
|
add: evPageAdd, |
|
|
|
addBefore: evPageAddBefore, |
|
|
|
remove: evPageRemove, |
|
|
|
removeBefore: evPageRemoveBefore, |
|
|
|
}; |
|
|
|
export default class PageManager extends ItemManagerModule { |
|
|
|
name = 'PageManager'; |
|
|
|
|
|
|
|
export default () => { |
|
|
|
return { |
|
|
|
...Module, |
|
|
|
|
|
|
|
name: 'PageManager', |
|
|
|
|
|
|
|
storageKey: 'pages', |
|
|
|
|
|
|
|
Page, |
|
|
|
storageKey = 'pages'; |
|
|
|
|
|
|
|
Pages, |
|
|
|
Page; |
|
|
|
|
|
|
|
events: { |
|
|
|
all: evAll, |
|
|
|
select: evPageSelect, |
|
|
|
selectBefore: evPageSelectBefore, |
|
|
|
update: evPageUpdate, |
|
|
|
add: evPageAdd, |
|
|
|
addBefore: evPageAddBefore, |
|
|
|
remove: evPageRemove, |
|
|
|
removeBefore: evPageRemoveBefore, |
|
|
|
}, |
|
|
|
Pages; |
|
|
|
|
|
|
|
/** |
|
|
|
* Initialize module |
|
|
|
* @param {Object} config Configurations |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
init(opts = {}) { |
|
|
|
bindAll(this, '_onPageChange'); |
|
|
|
const { em } = opts; |
|
|
|
const cnf = { ...opts }; |
|
|
|
this.config = cnf; |
|
|
|
this.em = em; |
|
|
|
const pages = new Pages([]); |
|
|
|
this.pages = pages; |
|
|
|
this.all = pages; |
|
|
|
const model = new Model({ _undo: true }); |
|
|
|
this.model = model; |
|
|
|
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) => { |
|
|
|
em.trigger(evPageUpdate, p, p.changedAttributes(), c); |
|
|
|
}); |
|
|
|
pages.on('reset', coll => coll.at(0) && this.select(coll.at(0))); |
|
|
|
pages.on('all', this.__onChange, this); |
|
|
|
model.on(chnSel, this._onPageChange); |
|
|
|
get pages() { |
|
|
|
return this.all; |
|
|
|
} |
|
|
|
/** |
|
|
|
* Initialize module |
|
|
|
* @param {Object} config Configurations |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
constructor(em) { |
|
|
|
const pages = new Pages([]); |
|
|
|
super(em, 'PageManager', pages, events); |
|
|
|
bindAll(this, '_onPageChange'); |
|
|
|
const model = new Model({ _undo: true }); |
|
|
|
this.model = model; |
|
|
|
pages.on('reset', coll => coll.at(0) && this.select(coll.at(0))); |
|
|
|
pages.on('all', this.__onChange, this); |
|
|
|
model.on(chnSel, this._onPageChange); |
|
|
|
|
|
|
|
return this; |
|
|
|
}, |
|
|
|
return this; |
|
|
|
} |
|
|
|
|
|
|
|
__onChange(event, page, coll, opts) { |
|
|
|
const options = opts || coll; |
|
|
|
this.em.trigger(evAll, { event, page, options }); |
|
|
|
}, |
|
|
|
__onChange(event, page, coll, opts) { |
|
|
|
const options = opts || coll; |
|
|
|
this.em.trigger(evAll, { event, page, options }); |
|
|
|
} |
|
|
|
|
|
|
|
onLoad() { |
|
|
|
const { pages } = this; |
|
|
|
const opt = { silent: true }; |
|
|
|
pages.add(this.config.pages?.map(page => new Page(page, { em: this.em, config: this.config })) || [], opt); |
|
|
|
const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this.getMain(); |
|
|
|
this.select(mainPage, opt); |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
const { pages } = this; |
|
|
|
const opt = { silent: true }; |
|
|
|
pages.add(this.config.pages?.map(page => new Page(page, { em: this.em, config: this.config })) || [], opt); |
|
|
|
const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this.getMain(); |
|
|
|
this.select(mainPage, opt); |
|
|
|
} |
|
|
|
|
|
|
|
_onPageChange(m, page, opts) { |
|
|
|
const { em } = this; |
|
|
|
const lm = em.get('LayerManager'); |
|
|
|
const mainComp = page.getMainComponent(); |
|
|
|
lm && mainComp && lm.setRoot(mainComp); |
|
|
|
em.trigger(evPageSelect, page, m.previous('selected')); |
|
|
|
this.__onChange(chnSel, page, opts); |
|
|
|
}, |
|
|
|
_onPageChange(m, page, opts) { |
|
|
|
const { em } = this; |
|
|
|
const lm = em.get('LayerManager'); |
|
|
|
const mainComp = page.getMainComponent(); |
|
|
|
lm && mainComp && lm.setRoot(mainComp); |
|
|
|
em.trigger(evPageSelect, page, m.previous('selected')); |
|
|
|
this.__onChange(chnSel, page, opts); |
|
|
|
} |
|
|
|
|
|
|
|
postLoad() { |
|
|
|
const { em, model } = this; |
|
|
|
const um = em.get('UndoManager'); |
|
|
|
um && um.add(model); |
|
|
|
um && um.add(this.pages); |
|
|
|
}, |
|
|
|
postLoad() { |
|
|
|
const { em, model } = this; |
|
|
|
const um = em.get('UndoManager'); |
|
|
|
um && um.add(model); |
|
|
|
um && um.add(this.pages); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Add new page |
|
|
|
* @param {Object} props Page properties |
|
|
|
* @param {Object} [opts] Options |
|
|
|
* @returns {[Page]} |
|
|
|
* @example |
|
|
|
* const newPage = pageManager.add({ |
|
|
|
* id: 'new-page-id', // without an explicit ID, a random one will be created
|
|
|
|
* styles: `.my-class { color: red }`, // or a JSON of styles
|
|
|
|
* component: '<div class="my-class">My element</div>', // or a JSON of components
|
|
|
|
* }); |
|
|
|
*/ |
|
|
|
add(props, opts = {}) { |
|
|
|
const { em } = this; |
|
|
|
props.id = props.id || this._createId(); |
|
|
|
const add = () => { |
|
|
|
const page = this.pages.add(new Page(props, { em: this.em, config: this.config }), opts); |
|
|
|
opts.select && this.select(page); |
|
|
|
return page; |
|
|
|
}; |
|
|
|
!opts.silent && em.trigger(evPageAddBefore, props, add, opts); |
|
|
|
return !opts.abort && add(); |
|
|
|
}, |
|
|
|
/** |
|
|
|
* Add new page |
|
|
|
* @param {Object} props Page properties |
|
|
|
* @param {Object} [opts] Options |
|
|
|
* @returns {[Page]} |
|
|
|
* @example |
|
|
|
* const newPage = pageManager.add({ |
|
|
|
* id: 'new-page-id', // without an explicit ID, a random one will be created
|
|
|
|
* styles: `.my-class { color: red }`, // or a JSON of styles
|
|
|
|
* component: '<div class="my-class">My element</div>', // or a JSON of components
|
|
|
|
* }); |
|
|
|
*/ |
|
|
|
add(props, opts = {}) { |
|
|
|
const { em } = this; |
|
|
|
props.id = props.id || this._createId(); |
|
|
|
const add = () => { |
|
|
|
const page = this.pages.add(new Page(props, { em: this.em, config: this.config }), opts); |
|
|
|
opts.select && this.select(page); |
|
|
|
return page; |
|
|
|
}; |
|
|
|
!opts.silent && em.trigger(evPageAddBefore, props, add, opts); |
|
|
|
return !opts.abort && add(); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Remove page |
|
|
|
* @param {String|[Page]} page Page or page id |
|
|
|
* @returns {[Page]} Removed Page |
|
|
|
* @example |
|
|
|
* const removedPage = pageManager.remove('page-id'); |
|
|
|
* // or by passing the page
|
|
|
|
* const somePage = pageManager.get('page-id'); |
|
|
|
* pageManager.remove(somePage); |
|
|
|
*/ |
|
|
|
remove(page, opts = {}) { |
|
|
|
const { em } = this; |
|
|
|
const pg = isString(page) ? this.get(page) : page; |
|
|
|
const rm = () => { |
|
|
|
pg && this.pages.remove(pg, opts); |
|
|
|
return pg; |
|
|
|
}; |
|
|
|
!opts.silent && em.trigger(evPageRemoveBefore, pg, rm, opts); |
|
|
|
return !opts.abort && rm(); |
|
|
|
}, |
|
|
|
/** |
|
|
|
* Remove page |
|
|
|
* @param {String|[Page]} page Page or page id |
|
|
|
* @returns {[Page]} Removed Page |
|
|
|
* @example |
|
|
|
* const removedPage = pageManager.remove('page-id'); |
|
|
|
* // or by passing the page
|
|
|
|
* const somePage = pageManager.get('page-id'); |
|
|
|
* pageManager.remove(somePage); |
|
|
|
*/ |
|
|
|
remove(page, opts = {}) { |
|
|
|
const { em } = this; |
|
|
|
const pg = isString(page) ? this.get(page) : page; |
|
|
|
const rm = () => { |
|
|
|
pg && this.pages.remove(pg, opts); |
|
|
|
return pg; |
|
|
|
}; |
|
|
|
!opts.silent && em.trigger(evPageRemoveBefore, pg, rm, opts); |
|
|
|
return !opts.abort && rm(); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Get page by id |
|
|
|
* @param {String} id Page id |
|
|
|
* @returns {[Page]} |
|
|
|
* @example |
|
|
|
* const somePage = pageManager.get('page-id'); |
|
|
|
*/ |
|
|
|
get(id) { |
|
|
|
return this.pages.filter(p => p.get('id') === id)[0]; |
|
|
|
}, |
|
|
|
/** |
|
|
|
* Get page by id |
|
|
|
* @param {String} id Page id |
|
|
|
* @returns {[Page]} |
|
|
|
* @example |
|
|
|
* const somePage = pageManager.get('page-id'); |
|
|
|
*/ |
|
|
|
get(id) { |
|
|
|
return this.pages.filter(p => p.get('id') === id)[0]; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Get main page (the first one available) |
|
|
|
* @returns {[Page]} |
|
|
|
* @example |
|
|
|
* const mainPage = pageManager.getMain(); |
|
|
|
*/ |
|
|
|
getMain() { |
|
|
|
const { pages } = this; |
|
|
|
return pages.filter(p => p.get('type') === typeMain)[0] || pages.at(0); |
|
|
|
}, |
|
|
|
/** |
|
|
|
* Get main page (the first one available) |
|
|
|
* @returns {[Page]} |
|
|
|
* @example |
|
|
|
* const mainPage = pageManager.getMain(); |
|
|
|
*/ |
|
|
|
getMain() { |
|
|
|
const { pages } = this; |
|
|
|
return pages.filter(p => p.get('type') === typeMain)[0] || pages.at(0); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Get all pages |
|
|
|
* @returns {Array<[Page]>} |
|
|
|
* @example |
|
|
|
* const arrayOfPages = pageManager.getAll(); |
|
|
|
*/ |
|
|
|
getAll() { |
|
|
|
return [...this.pages.models]; |
|
|
|
}, |
|
|
|
/** |
|
|
|
* Get all pages |
|
|
|
* @returns {Array<[Page]>} |
|
|
|
* @example |
|
|
|
* const arrayOfPages = pageManager.getAll(); |
|
|
|
*/ |
|
|
|
getAll() { |
|
|
|
return [...this.pages.models]; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Get wrapper components (aka body) from all pages and frames. |
|
|
|
* @returns {Array<[Component]>} |
|
|
|
* @example |
|
|
|
* const wrappers = pageManager.getAllWrappers(); |
|
|
|
* // Get all `image` components from the project
|
|
|
|
* const allImages = wrappers.map(wrp => wrp.findType('image')).flat(); |
|
|
|
*/ |
|
|
|
getAllWrappers() { |
|
|
|
const pages = this.getAll(); |
|
|
|
return unique(flatten(pages.map(page => page.getAllFrames().map(frame => frame.getComponent())))); |
|
|
|
}, |
|
|
|
/** |
|
|
|
* Get wrapper components (aka body) from all pages and frames. |
|
|
|
* @returns {Array<[Component]>} |
|
|
|
* @example |
|
|
|
* const wrappers = pageManager.getAllWrappers(); |
|
|
|
* // Get all `image` components from the project
|
|
|
|
* const allImages = wrappers.map(wrp => wrp.findType('image')).flat(); |
|
|
|
*/ |
|
|
|
getAllWrappers() { |
|
|
|
const pages = this.getAll(); |
|
|
|
return unique(flatten(pages.map(page => page.getAllFrames().map(frame => frame.getComponent())))); |
|
|
|
} |
|
|
|
|
|
|
|
getAllMap() { |
|
|
|
return this.getAll().reduce((acc, i) => { |
|
|
|
acc[i.get('id')] = i; |
|
|
|
return acc; |
|
|
|
}, {}); |
|
|
|
}, |
|
|
|
getAllMap() { |
|
|
|
return this.getAll().reduce((acc, i) => { |
|
|
|
acc[i.get('id')] = i; |
|
|
|
return acc; |
|
|
|
}, {}); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Change the selected page. This will switch the page rendered in canvas |
|
|
|
* @param {String|[Page]} page Page or page id |
|
|
|
* @returns {this} |
|
|
|
* @example |
|
|
|
* pageManager.select('page-id'); |
|
|
|
* // or by passing the page
|
|
|
|
* const somePage = pageManager.get('page-id'); |
|
|
|
* pageManager.select(somePage); |
|
|
|
*/ |
|
|
|
select(page, opts = {}) { |
|
|
|
const pg = isString(page) ? this.get(page) : page; |
|
|
|
if (pg) { |
|
|
|
this.em.trigger(evPageSelectBefore, pg, opts); |
|
|
|
this.model.set('selected', pg, opts); |
|
|
|
} |
|
|
|
return this; |
|
|
|
}, |
|
|
|
/** |
|
|
|
* Change the selected page. This will switch the page rendered in canvas |
|
|
|
* @param {String|[Page]} page Page or page id |
|
|
|
* @returns {this} |
|
|
|
* @example |
|
|
|
* pageManager.select('page-id'); |
|
|
|
* // or by passing the page
|
|
|
|
* const somePage = pageManager.get('page-id'); |
|
|
|
* pageManager.select(somePage); |
|
|
|
*/ |
|
|
|
select(page, opts = {}) { |
|
|
|
const pg = isString(page) ? this.get(page) : page; |
|
|
|
if (pg) { |
|
|
|
this.em.trigger(evPageSelectBefore, pg, opts); |
|
|
|
this.model.set('selected', pg, opts); |
|
|
|
} |
|
|
|
return this; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Get the selected page |
|
|
|
* @returns {[Page]} |
|
|
|
* @example |
|
|
|
* const selectedPage = pageManager.getSelected(); |
|
|
|
*/ |
|
|
|
getSelected() { |
|
|
|
return this.model.get('selected'); |
|
|
|
}, |
|
|
|
/** |
|
|
|
* Get the selected page |
|
|
|
* @returns {[Page]} |
|
|
|
* @example |
|
|
|
* const selectedPage = pageManager.getSelected(); |
|
|
|
*/ |
|
|
|
getSelected() { |
|
|
|
return this.model.get('selected'); |
|
|
|
} |
|
|
|
|
|
|
|
destroy() { |
|
|
|
this.pages.off().reset(); |
|
|
|
this.model.stopListening(); |
|
|
|
this.model.clear({ silent: true }); |
|
|
|
['selected', 'config', 'em', 'pages', 'model'].map(i => (this[i] = 0)); |
|
|
|
}, |
|
|
|
destroy() { |
|
|
|
this.pages.off().reset(); |
|
|
|
this.model.stopListening(); |
|
|
|
this.model.clear({ silent: true }); |
|
|
|
['selected', 'model'].map(i => (this[i] = 0)); |
|
|
|
} |
|
|
|
|
|
|
|
store() { |
|
|
|
return this.getProjectData(); |
|
|
|
}, |
|
|
|
store() { |
|
|
|
return this.getProjectData(); |
|
|
|
} |
|
|
|
|
|
|
|
load(data) { |
|
|
|
return this.loadProjectData(data, { all: this.pages, reset: true }); |
|
|
|
}, |
|
|
|
load(data) { |
|
|
|
return this.loadProjectData(data, { all: this.pages, reset: true }); |
|
|
|
} |
|
|
|
|
|
|
|
_createId() { |
|
|
|
const pages = this.getAll(); |
|
|
|
const len = pages.length + 16; |
|
|
|
const pagesMap = this.getAllMap(); |
|
|
|
let id; |
|
|
|
_createId() { |
|
|
|
const pages = this.getAll(); |
|
|
|
const len = pages.length + 16; |
|
|
|
const pagesMap = this.getAllMap(); |
|
|
|
let id; |
|
|
|
|
|
|
|
do { |
|
|
|
id = createId(len); |
|
|
|
} while (pagesMap[id]); |
|
|
|
do { |
|
|
|
id = createId(len); |
|
|
|
} while (pagesMap[id]); |
|
|
|
|
|
|
|
return id; |
|
|
|
}, |
|
|
|
}; |
|
|
|
}; |
|
|
|
return id; |
|
|
|
} |
|
|
|
} |
|
|
|
|
Alex
4 years ago