From 57a3a443d3bbee14a29f6a6a4c92ed461c0b5757 Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 29 Apr 2022 23:50:31 +0200 Subject: [PATCH] Convert Pages index to ts --- src/abstract/Module.ts | 34 ++++----- src/canvas/model/Frame.ts | 3 +- src/pages/{index.js => index.ts} | 125 ++++++++++++++++--------------- 3 files changed, 83 insertions(+), 79 deletions(-) rename src/pages/{index.js => index.ts} (71%) diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts index e0adb1197..07846f5af 100644 --- a/src/abstract/Module.ts +++ b/src/abstract/Module.ts @@ -19,7 +19,7 @@ export interface IBaseModule { config: TConfig; } -interface ModuleConfig { +export interface ModuleConfig { name: string; stylePrefix?: string; } @@ -86,10 +86,10 @@ export default abstract class Module export abstract class ItemManagerModule< TConf extends ModuleConfig = any, - TModel extends Collection = any + TCollection extends Collection = Collection > extends Module { cls: any[] = []; - protected all: TModel; + protected all: TCollection; constructor(em: EditorModel, moduleName: string, all: any, events: any) { super(em, moduleName); @@ -101,13 +101,11 @@ export abstract class ItemManagerModule< private: boolean = false; abstract storageKey: string; - abstract init(cfg: any): void; abstract destroy(): void; postLoad(key: any): void {} - abstract postRender(view: any): void; - abstract render(): any; + render() {} - getProjectData(data: any) { + getProjectData(data?: any) { const obj: any = {}; const key = this.storageKey; if (key) { @@ -118,12 +116,12 @@ export abstract class ItemManagerModule< loadProjectData( data: any = {}, - param: { all?: TModel; onResult?: Function; reset?: boolean } = {} + param: { all?: TCollection; onResult?: Function; reset?: boolean } = {} ) { const { all, onResult, reset } = param; const key = this.storageKey; const opts: any = { action: "load" }; - const coll = all || this.getAll(); + const coll = all || this.all; let result = data[key]; if (typeof result == "string") { @@ -151,15 +149,17 @@ export abstract class ItemManagerModule< return this; } - getAll() { - return this.all; + getAll(): TCollection extends Collection ? C[] : unknown[] { + return [...this.all.models] as any; } - getAllMap() { - return this.getAll().reduce((acc: { [id: string]: TModel }, i: any) => { + getAllMap(): { + [key: string]: TCollection extends Collection ? C : unknown; + } { + return this.getAll().reduce((acc, i) => { acc[i.get(i.idAttribute)] = i; return acc; - }, {}); + }, {} as any); } __initListen(opts: any = {}) { @@ -232,15 +232,15 @@ export abstract class ItemManagerModule< return id; } - __listenAdd(model: TModel, event: string) { + __listenAdd(model: TCollection, event: string) { 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)); } - __listenUpdate(model: TModel, event: string) { + __listenUpdate(model: TCollection, event: string) { model.on("change", (p, c) => this.em.trigger(event, p, p.changedAttributes(), c) ); diff --git a/src/canvas/model/Frame.ts b/src/canvas/model/Frame.ts index 5ef22ceb3..a83d33728 100644 --- a/src/canvas/model/Frame.ts +++ b/src/canvas/model/Frame.ts @@ -2,6 +2,7 @@ import { result, forEach, isEmpty, isString } from "underscore"; import { Model } from "../../common"; import { Component } from "../../dom_components/model/Component"; import Components from "../../dom_components/model/Components"; +import ComponentWrapper from "../../dom_components/model/ComponentWrapper"; import EditorModel from "../../editor/model/Editor"; import { isComponent, isObject } from "../../utils/mixins"; import FrameView from "../view/FrameView"; @@ -97,7 +98,7 @@ export default class Frame extends Model { this.set("changesCount", this.get("changesCount") + 1); } - getComponent(): typeof Components { + getComponent(): ComponentWrapper { return this.get("component"); } diff --git a/src/pages/index.js b/src/pages/index.ts similarity index 71% rename from src/pages/index.js rename to src/pages/index.ts index 1c486dcf8..36f158bbc 100644 --- a/src/pages/index.js +++ b/src/pages/index.ts @@ -44,15 +44,15 @@ * @module Pages */ -import { isString, bindAll, unique, flatten } from 'underscore'; -import { createId } from '../utils/mixins'; -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'; +import { isString, bindAll, unique, flatten } from "underscore"; +import { createId } from "../utils/mixins"; +import { Model, Module } from "../abstract"; +import { ItemManagerModule, ModuleConfig } 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 evAll = "page"; export const evPfx = `${evAll}:`; export const evPageSelect = `${evPfx}select`; export const evPageSelectBefore = `${evPageSelect}:before`; @@ -61,8 +61,8 @@ export const evPageAdd = `${evPfx}add`; export const evPageAddBefore = `${evPageAdd}:before`; export const evPageRemove = `${evPfx}remove`; export const evPageRemoveBefore = `${evPageRemove}:before`; -const chnSel = 'change:selected'; -const typeMain = 'main'; +const chnSel = "change:selected"; +const typeMain = "main"; const events = { all: evAll, select: evPageSelect, @@ -73,37 +73,37 @@ const events = { remove: evPageRemove, removeBefore: evPageRemoveBefore, }; -export default class PageManager extends ItemManagerModule { - name = 'PageManager'; - storageKey = 'pages'; - - Page; - - Pages; +interface Config extends ModuleConfig { + pages?: string[]; +} +export default class PageManager extends ItemManagerModule { + storageKey = "pages"; get pages() { return this.all; } + + model: Model; /** * 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 }); + constructor(em: EditorModel) { + super(em, "PageManager", new Pages([]), events); + bindAll(this, "_onPageChange"); + this.getAll; + const model = new Model({ _undo: true } as any); this.model = model; - pages.on('reset', coll => coll.at(0) && this.select(coll.at(0))); - pages.on('all', this.__onChange, this); + this.pages.on("reset", (coll) => coll.at(0) && this.select(coll.at(0))); + this.pages.on("all", this.__onChange, this); model.on(chnSel, this._onPageChange); return this; } - __onChange(event, page, coll, opts) { + __onChange(event: string, page: Page, coll: Pages, opts?: any) { const options = opts || coll; this.em.trigger(evAll, { event, page, options }); } @@ -111,23 +111,30 @@ export default class PageManager extends ItemManagerModule { 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); + 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(); + mainPage && this.select(mainPage, opt); } - _onPageChange(m, page, opts) { + _onPageChange(m: any, page: Page, opts: any) { const { em } = this; - const lm = em.get('LayerManager'); + const lm = em.get("LayerManager"); const mainComp = page.getMainComponent(); lm && mainComp && lm.setRoot(mainComp); - em.trigger(evPageSelect, page, m.previous('selected')); + em.trigger(evPageSelect, page, m.previous("selected")); this.__onChange(chnSel, page, opts); } postLoad() { const { em, model } = this; - const um = em.get('UndoManager'); + const um = em.get("UndoManager"); um && um.add(model); um && um.add(this.pages); } @@ -144,11 +151,17 @@ export default class PageManager extends ItemManagerModule { * component: '
My element
', // or a JSON of components * }); */ - add(props, opts = {}) { + add( + props: any, //{ id?: string; styles: string; component: string }, + opts: any = {} + ) { 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); + const page = this.pages.add( + new Page(props, { em: this.em, config: this.config }), + opts + ); opts.select && this.select(page); return page; }; @@ -166,7 +179,7 @@ export default class PageManager extends ItemManagerModule { * const somePage = pageManager.get('page-id'); * pageManager.remove(somePage); */ - remove(page, opts = {}) { + remove(page: string | Page, opts: any = {}) { const { em } = this; const pg = isString(page) ? this.get(page) : page; const rm = () => { @@ -184,8 +197,8 @@ export default class PageManager extends ItemManagerModule { * @example * const somePage = pageManager.get('page-id'); */ - get(id) { - return this.pages.filter(p => p.get('id') === id)[0]; + get(id: string) { + return this.pages.filter((p) => p.get(p.idAttribute) === id)[0]; } /** @@ -196,17 +209,7 @@ export default class PageManager extends ItemManagerModule { */ 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]; + return pages.filter((p) => p.get("type") === typeMain)[0] || pages.at(0); } /** @@ -219,14 +222,13 @@ export default class PageManager extends ItemManagerModule { */ 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; - }, {}); + return unique( + flatten( + pages.map((page) => + page.getAllFrames().map((frame) => frame.getComponent()) + ) + ) + ); } /** @@ -239,11 +241,11 @@ export default class PageManager extends ItemManagerModule { * const somePage = pageManager.get('page-id'); * pageManager.select(somePage); */ - select(page, opts = {}) { + select(page: string | Page, opts = {}) { const pg = isString(page) ? this.get(page) : page; if (pg) { this.em.trigger(evPageSelectBefore, pg, opts); - this.model.set('selected', pg, opts); + this.model.set("selected", pg, opts); } return this; } @@ -255,21 +257,22 @@ export default class PageManager extends ItemManagerModule { * const selectedPage = pageManager.getSelected(); */ getSelected() { - return this.model.get('selected'); + return this.model.get("selected"); } destroy() { this.pages.off().reset(); this.model.stopListening(); this.model.clear({ silent: true }); - ['selected', 'model'].map(i => (this[i] = 0)); + //@ts-ignore + ["selected", "model"].map((i) => (this[i] = 0)); } store() { return this.getProjectData(); } - load(data) { + load(data: any) { return this.loadProjectData(data, { all: this.pages, reset: true }); }