tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Convert Pages index to ts

pull/4302/head
Alex 4 years ago
parent
48b33e12bd
commit
57a3a443d3
3 changed files with 83 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      src/abstract/Module.ts
  2. 3
      src/canvas/model/Frame.ts
  3. 125
      src/pages/index.ts

34
src/abstract/Module.ts
View File

@ -19,7 +19,7 @@ export interface IBaseModule<TConfig extends any> {
config: TConfig; config: TConfig;
} }
interface ModuleConfig { export interface ModuleConfig {
name: string; name: string;
stylePrefix?: string; stylePrefix?: string;
} }
@ -86,10 +86,10 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig>
export abstract class ItemManagerModule< export abstract class ItemManagerModule<
TConf extends ModuleConfig = any, TConf extends ModuleConfig = any,
TModel extends Collection = any TCollection extends Collection = Collection
> extends Module<TConf> { > extends Module<TConf> {
cls: any[] = []; cls: any[] = [];
protected all: TModel; protected all: TCollection;
constructor(em: EditorModel, moduleName: string, all: any, events: any) { constructor(em: EditorModel, moduleName: string, all: any, events: any) {
super(em, moduleName); super(em, moduleName);
@ -101,13 +101,11 @@ export abstract class ItemManagerModule<
private: boolean = false; private: boolean = false;
abstract storageKey: string; abstract storageKey: string;
abstract init(cfg: any): void;
abstract destroy(): void; abstract destroy(): void;
postLoad(key: any): void {} postLoad(key: any): void {}
abstract postRender(view: any): void; render() {}
abstract render(): any;
getProjectData(data: any) { getProjectData(data?: any) {
const obj: any = {}; const obj: any = {};
const key = this.storageKey; const key = this.storageKey;
if (key) { if (key) {
@ -118,12 +116,12 @@ export abstract class ItemManagerModule<
loadProjectData( loadProjectData(
data: any = {}, data: any = {},
param: { all?: TModel; onResult?: Function; reset?: boolean } = {} param: { all?: TCollection; onResult?: Function; reset?: boolean } = {}
) { ) {
const { all, onResult, reset } = param; const { all, onResult, reset } = param;
const key = this.storageKey; const key = this.storageKey;
const opts: any = { action: "load" }; const opts: any = { action: "load" };
const coll = all || this.getAll(); const coll = all || this.all;
let result = data[key]; let result = data[key];
if (typeof result == "string") { if (typeof result == "string") {
@ -151,15 +149,17 @@ export abstract class ItemManagerModule<
return this; return this;
} }
getAll() { getAll(): TCollection extends Collection<infer C> ? C[] : unknown[] {
return this.all; return [...this.all.models] as any;
} }
getAllMap() { getAllMap(): {
return this.getAll().reduce((acc: { [id: string]: TModel }, i: any) => { [key: string]: TCollection extends Collection<infer C> ? C : unknown;
} {
return this.getAll().reduce((acc, i) => {
acc[i.get(i.idAttribute)] = i; acc[i.get(i.idAttribute)] = i;
return acc; return acc;
}, {}); }, {} as any);
} }
__initListen(opts: any = {}) { __initListen(opts: any = {}) {
@ -232,15 +232,15 @@ export abstract class ItemManagerModule<
return id; return id;
} }
__listenAdd(model: TModel, event: string) { __listenAdd(model: TCollection, event: string) {
model.on("add", (m, c, o) => this.em.trigger(event, m, o)); model.on("add", (m, c, o) => this.em.trigger(event, m, o));
} }
__listenRemove(model: TModel, event: string) { __listenRemove(model: TCollection, event: string) {
model.on("remove", (m, c, o) => this.em.trigger(event, m, o)); model.on("remove", (m, c, o) => this.em.trigger(event, m, o));
} }
__listenUpdate(model: TModel, event: string) { __listenUpdate(model: TCollection, event: string) {
model.on("change", (p, c) => model.on("change", (p, c) =>
this.em.trigger(event, p, p.changedAttributes(), c) this.em.trigger(event, p, p.changedAttributes(), c)
); );

3
src/canvas/model/Frame.ts
View File

@ -2,6 +2,7 @@ import { result, forEach, isEmpty, isString } from "underscore";
import { Model } from "../../common"; import { Model } from "../../common";
import { Component } from "../../dom_components/model/Component"; import { Component } from "../../dom_components/model/Component";
import Components from "../../dom_components/model/Components"; import Components from "../../dom_components/model/Components";
import ComponentWrapper from "../../dom_components/model/ComponentWrapper";
import EditorModel from "../../editor/model/Editor"; import EditorModel from "../../editor/model/Editor";
import { isComponent, isObject } from "../../utils/mixins"; import { isComponent, isObject } from "../../utils/mixins";
import FrameView from "../view/FrameView"; import FrameView from "../view/FrameView";
@ -97,7 +98,7 @@ export default class Frame extends Model {
this.set("changesCount", this.get("changesCount") + 1); this.set("changesCount", this.get("changesCount") + 1);
} }
getComponent(): typeof Components { getComponent(): ComponentWrapper {
return this.get("component"); return this.get("component");
} }

125
src/pages/index.js → src/pages/index.ts
View File

@ -44,15 +44,15 @@
* @module Pages * @module Pages
*/ */
import { isString, bindAll, unique, flatten } from 'underscore'; import { isString, bindAll, unique, flatten } from "underscore";
import { createId } from '../utils/mixins'; import { createId } from "../utils/mixins";
import { Model, Module } from '../abstract'; import { Model, Module } from "../abstract";
import { ItemManagerModule } from '../abstract/Module'; import { ItemManagerModule, ModuleConfig } from "../abstract/Module";
import Pages from './model/Pages'; import Pages from "./model/Pages";
import Page from './model/Page'; import Page from "./model/Page";
import EditorModel from '../editor/model/Editor'; import EditorModel from "../editor/model/Editor";
export const evAll = 'page'; export const evAll = "page";
export const evPfx = `${evAll}:`; export const evPfx = `${evAll}:`;
export const evPageSelect = `${evPfx}select`; export const evPageSelect = `${evPfx}select`;
export const evPageSelectBefore = `${evPageSelect}:before`; export const evPageSelectBefore = `${evPageSelect}:before`;
@ -61,8 +61,8 @@ export const evPageAdd = `${evPfx}add`;
export const evPageAddBefore = `${evPageAdd}:before`; export const evPageAddBefore = `${evPageAdd}:before`;
export const evPageRemove = `${evPfx}remove`; export const evPageRemove = `${evPfx}remove`;
export const evPageRemoveBefore = `${evPageRemove}:before`; export const evPageRemoveBefore = `${evPageRemove}:before`;
const chnSel = 'change:selected'; const chnSel = "change:selected";
const typeMain = 'main'; const typeMain = "main";
const events = { const events = {
all: evAll, all: evAll,
select: evPageSelect, select: evPageSelect,
@ -73,37 +73,37 @@ const events = {
remove: evPageRemove, remove: evPageRemove,
removeBefore: evPageRemoveBefore, removeBefore: evPageRemoveBefore,
}; };
export default class PageManager extends ItemManagerModule {
name = 'PageManager';
storageKey = 'pages'; interface Config extends ModuleConfig {
pages?: string[];
Page; }
export default class PageManager extends ItemManagerModule<Config, Pages> {
Pages; storageKey = "pages";
get pages() { get pages() {
return this.all; return this.all;
} }
model: Model;
/** /**
* Initialize module * Initialize module
* @param {Object} config Configurations * @param {Object} config Configurations
* @private * @private
*/ */
constructor(em) { constructor(em: EditorModel) {
const pages = new Pages([]); super(em, "PageManager", new Pages([]), events);
super(em, 'PageManager', pages, events); bindAll(this, "_onPageChange");
bindAll(this, '_onPageChange'); this.getAll;
const model = new Model({ _undo: true }); const model = new Model({ _undo: true } as any);
this.model = model; this.model = model;
pages.on('reset', coll => coll.at(0) && this.select(coll.at(0))); this.pages.on("reset", (coll) => coll.at(0) && this.select(coll.at(0)));
pages.on('all', this.__onChange, this); this.pages.on("all", this.__onChange, this);
model.on(chnSel, this._onPageChange); model.on(chnSel, this._onPageChange);
return this; return this;
} }
__onChange(event, page, coll, opts) { __onChange(event: string, page: Page, coll: Pages, opts?: any) {
const options = opts || coll; const options = opts || coll;
this.em.trigger(evAll, { event, page, options }); this.em.trigger(evAll, { event, page, options });
} }
@ -111,23 +111,30 @@ export default class PageManager extends ItemManagerModule {
onLoad() { onLoad() {
const { pages } = this; const { pages } = this;
const opt = { silent: true }; const opt = { silent: true };
pages.add(this.config.pages?.map(page => new Page(page, { em: this.em, config: this.config })) || [], opt); pages.add(
const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this.getMain(); this.config.pages?.map(
this.select(mainPage, opt); (page) => new Page(page, { em: this.em, config: this.config })
) || [],
opt
);
const mainPage = !pages.length
? this.add({ type: typeMain }, opt)
: this.getMain();
mainPage && this.select(mainPage, opt);
} }
_onPageChange(m, page, opts) { _onPageChange(m: any, page: Page, opts: any) {
const { em } = this; const { em } = this;
const lm = em.get('LayerManager'); const lm = em.get("LayerManager");
const mainComp = page.getMainComponent(); const mainComp = page.getMainComponent();
lm && mainComp && lm.setRoot(mainComp); lm && mainComp && lm.setRoot(mainComp);
em.trigger(evPageSelect, page, m.previous('selected')); em.trigger(evPageSelect, page, m.previous("selected"));
this.__onChange(chnSel, page, opts); this.__onChange(chnSel, page, opts);
} }
postLoad() { postLoad() {
const { em, model } = this; const { em, model } = this;
const um = em.get('UndoManager'); const um = em.get("UndoManager");
um && um.add(model); um && um.add(model);
um && um.add(this.pages); um && um.add(this.pages);
} }
@ -144,11 +151,17 @@ export default class PageManager extends ItemManagerModule {
* component: '<div class="my-class">My element</div>', // or a JSON of components * component: '<div class="my-class">My element</div>', // or a JSON of components
* }); * });
*/ */
add(props, opts = {}) { add(
props: any, //{ id?: string; styles: string; component: string },
opts: any = {}
) {
const { em } = this; const { em } = this;
props.id = props.id || this._createId(); props.id = props.id || this._createId();
const add = () => { const add = () => {
const page = this.pages.add(new Page(props, { em: this.em, config: this.config }), opts); const page = this.pages.add(
new Page(props, { em: this.em, config: this.config }),
opts
);
opts.select && this.select(page); opts.select && this.select(page);
return page; return page;
}; };
@ -166,7 +179,7 @@ export default class PageManager extends ItemManagerModule {
* const somePage = pageManager.get('page-id'); * const somePage = pageManager.get('page-id');
* pageManager.remove(somePage); * pageManager.remove(somePage);
*/ */
remove(page, opts = {}) { remove(page: string | Page, opts: any = {}) {
const { em } = this; const { em } = this;
const pg = isString(page) ? this.get(page) : page; const pg = isString(page) ? this.get(page) : page;
const rm = () => { const rm = () => {
@ -184,8 +197,8 @@ export default class PageManager extends ItemManagerModule {
* @example * @example
* const somePage = pageManager.get('page-id'); * const somePage = pageManager.get('page-id');
*/ */
get(id) { get(id: string) {
return this.pages.filter(p => p.get('id') === id)[0]; return this.pages.filter((p) => p.get(p.idAttribute) === id)[0];
} }
/** /**
@ -196,17 +209,7 @@ export default class PageManager extends ItemManagerModule {
*/ */
getMain() { getMain() {
const { pages } = this; const { pages } = this;
return pages.filter(p => p.get('type') === typeMain)[0] || pages.at(0); 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];
} }
/** /**
@ -219,14 +222,13 @@ export default class PageManager extends ItemManagerModule {
*/ */
getAllWrappers() { getAllWrappers() {
const pages = this.getAll(); const pages = this.getAll();
return unique(flatten(pages.map(page => page.getAllFrames().map(frame => frame.getComponent())))); return unique(
} flatten(
pages.map((page) =>
getAllMap() { page.getAllFrames().map((frame) => frame.getComponent())
return this.getAll().reduce((acc, i) => { )
acc[i.get('id')] = i; )
return acc; );
}, {});
} }
/** /**
@ -239,11 +241,11 @@ export default class PageManager extends ItemManagerModule {
* const somePage = pageManager.get('page-id'); * const somePage = pageManager.get('page-id');
* pageManager.select(somePage); * pageManager.select(somePage);
*/ */
select(page, opts = {}) { select(page: string | Page, opts = {}) {
const pg = isString(page) ? this.get(page) : page; const pg = isString(page) ? this.get(page) : page;
if (pg) { if (pg) {
this.em.trigger(evPageSelectBefore, pg, opts); this.em.trigger(evPageSelectBefore, pg, opts);
this.model.set('selected', pg, opts); this.model.set("selected", pg, opts);
} }
return this; return this;
} }
@ -255,21 +257,22 @@ export default class PageManager extends ItemManagerModule {
* const selectedPage = pageManager.getSelected(); * const selectedPage = pageManager.getSelected();
*/ */
getSelected() { getSelected() {
return this.model.get('selected'); return this.model.get("selected");
} }
destroy() { destroy() {
this.pages.off().reset(); this.pages.off().reset();
this.model.stopListening(); this.model.stopListening();
this.model.clear({ silent: true }); this.model.clear({ silent: true });
['selected', 'model'].map(i => (this[i] = 0)); //@ts-ignore
["selected", "model"].map((i) => (this[i] = 0));
} }
store() { store() {
return this.getProjectData(); return this.getProjectData();
} }
load(data) { load(data: any) {
return this.loadProjectData(data, { all: this.pages, reset: true }); return this.loadProjectData(data, { all: this.pages, reset: true });
} }
Write Preview
Loading…
Cancel
Save