From 95633b40ba020237b66090933d9696538c90bb57 Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sun, 26 Mar 2023 14:27:52 +0200 Subject: [PATCH] Module cleanup (#4985) * module cleanup * Fix ?? --------- Co-authored-by: Artur Arseniev --- src/abstract/Module.ts | 22 +++--- src/block_manager/index.ts | 8 ++- src/canvas/index.ts | 1 - src/dom_components/index.ts | 7 +- src/editor/index.ts | 2 - src/editor/model/Editor.ts | 72 ++++++++------------ src/pages/index.ts | 3 - test/specs/asset_manager/index.js | 1 - test/specs/dom_components/model/Component.js | 2 - 9 files changed, 50 insertions(+), 68 deletions(-) diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts index fbdc81bcf9..e42a9d7514 100644 --- a/src/abstract/Module.ts +++ b/src/abstract/Module.ts @@ -2,13 +2,12 @@ import { isElement, isUndefined, isString } from 'underscore'; import { Collection, View } from '../common'; import { EditorConfigKeys } from '../editor/config/config'; import EditorModel from '../editor/model/Editor'; +import { ProjectData } from '../storage_manager/model/IStorage'; import { createId, isDef, deepMerge } from '../utils/mixins'; -export interface IModule extends IBaseModule { - init(cfg: any): void; +export interface IModule extends IBaseModule { destroy(): void; postLoad(key: any): any; - config: TConfig; onLoad?(): void; name: string; postRender?(view: any): void; @@ -25,11 +24,15 @@ export interface ModuleConfig { appendTo?: string | HTMLElement; } -export interface IStorableModule extends IModule { +export interface IStorableModule { storageKey: string[] | string; store(result: any): any; - load(keys: string[]): void; - postLoad(key: any): any; + load(keys: ProjectData): void; + clear(): void; +} + +export interface ILoadableModule { + onLoad(): void; } export default abstract class Module implements IModule { @@ -63,10 +66,7 @@ export default abstract class Module impl public get config() { return this._config; } - //abstract name: string; - isPrivate: boolean = false; - onLoad?(): void; - init(cfg: T) {} + abstract destroy(): void; render(opts?: any): HTMLElement | JQuery | void {} postLoad(key: any): void {} @@ -104,7 +104,7 @@ export default abstract class Module impl } export abstract class ItemManagerModule< - TConf extends ModuleConfig = any, + TConf extends ModuleConfig = ModuleConfig, TCollection extends Collection = Collection > extends Module { cls: any[] = []; diff --git a/src/block_manager/index.ts b/src/block_manager/index.ts index f4450a8c1e..3d00f612c8 100644 --- a/src/block_manager/index.ts +++ b/src/block_manager/index.ts @@ -55,7 +55,13 @@ import { ItemManagerModule } from '../abstract/Module'; import EditorModel from '../editor/model/Editor'; import Component from '../dom_components/model/Component'; -export type BlockEvent = 'block:add' | 'block:remove' | 'block:drag:start' | 'block:drag' | 'block:drag:stop' | 'block:custom'; +export type BlockEvent = + | 'block:add' + | 'block:remove' + | 'block:drag:start' + | 'block:drag' + | 'block:drag:stop' + | 'block:custom'; export const evAll = 'block'; export const evPfx = `${evAll}:`; diff --git a/src/canvas/index.ts b/src/canvas/index.ts index 3dbbb28acb..5a60d533ac 100644 --- a/src/canvas/index.ts +++ b/src/canvas/index.ts @@ -94,7 +94,6 @@ export default class CanvasModule extends Module { this.stopAutoscroll = this.stopAutoscroll.bind(this); return this; } - init() {} onLoad() { this.model.init(); diff --git a/src/dom_components/index.ts b/src/dom_components/index.ts index 0d31c73c94..0aa642878e 100644 --- a/src/dom_components/index.ts +++ b/src/dom_components/index.ts @@ -53,7 +53,7 @@ * @module Components */ import { isEmpty, isObject, isArray, isFunction, isString, result, debounce } from 'underscore'; -import defaults from './config/config'; +import defaults, { DomComponentsConfig } from './config/config'; import Component, { keyUpdate, keyUpdateInside } from './model/Component'; import Components from './model/Components'; import ComponentView from './view/ComponentView'; @@ -117,7 +117,7 @@ export type ComponentEvent = | 'component:drag' | 'component:drag:end'; -export default class ComponentManager extends ItemManagerModule { +export default class ComponentManager extends ItemManagerModule { componentTypes = [ { id: 'cell', @@ -251,6 +251,7 @@ export default class ComponentManager extends ItemManagerModule { super(em, 'DomComponents', new Components(undefined, { em })); if (em) { + //@ts-ignore this.config.components = em.config.components || this.config.components; } @@ -264,8 +265,6 @@ export default class ComponentManager extends ItemManagerModule { // Load dependencies if (em) { - this.config.modal = em.Modal || ''; - this.config.am = em.Assets || ''; em.get('Parser').compTypes = this.componentTypes; em.on('change:componentHovered', this.componentHovered, this); diff --git a/src/editor/index.ts b/src/editor/index.ts index ba16c7f0c4..65f38ca7fc 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -125,8 +125,6 @@ export default class Editor implements IBaseModule { em: EditorModel; config: EditorConfigType; - modules = []; - constructor(config: EditorConfig = {}, opts: any = {}) { this.config = { ...defaults, diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index d77f2d6800..658f444847 100644 --- a/src/editor/model/Editor.ts +++ b/src/editor/model/Editor.ts @@ -8,7 +8,7 @@ import Selected from './Selected'; import FrameView from '../../canvas/view/FrameView'; import Editor from '..'; import EditorView from '../view/EditorView'; -import Module from '../../abstract/Module'; +import { ILoadableModule, IModule, IStorableModule } from '../../abstract/Module'; import CanvasModule from '../../canvas'; import ComponentManager from '../../dom_components'; import CssComposer from '../../css_composer'; @@ -43,7 +43,7 @@ import Frame from '../../canvas/model/Frame'; Backbone.$ = $; -const deps: (new (em: EditorModel) => Module)[] = [ +const deps: (new (em: EditorModel) => IModule)[] = [ UtilsModule, I18nModule, KeymapsModule, @@ -57,16 +57,18 @@ const deps: (new (em: EditorModel) => Module)[] = [ CodeManagerModule, PanelManager, RichTextEditorModule, - AssetManager, - CssComposer, - PageManager, TraitManager, - ComponentManager, LayerManager, CanvasModule, CommandsModule, BlockManager, ]; +const storableDeps: (new (em: EditorModel) => IModule & IStorableModule)[] = [ + AssetManager, + CssComposer, + PageManager, + ComponentManager, +]; Extender({ $ }); @@ -99,21 +101,21 @@ export default class EditorModel extends Model { defaultRunning = false; destroyed = false; _config: EditorConfig; - _storageTimeout?: NodeJS.Timeout; + _storageTimeout?: ReturnType; attrsOrig: any; - timedInterval?: number; - updateItr?: number; + timedInterval?: ReturnType; + updateItr?: ReturnType; view?: EditorView; - get storables(): any[] { + get storables(): IStorableModule[] { return this.get('storables'); } - get modules(): Module[] { + get modules(): IModule[] { return this.get('modules'); } - get toLoad(): any[] { + get toLoad(): ILoadableModule[] { return this.get('toLoad'); } @@ -248,7 +250,8 @@ export default class EditorModel extends Model { } // Load modules - deps.forEach(name => this.loadModule(name)); + deps.forEach(constr => this.loadModule(constr)); + storableDeps.forEach(constr => this.loadStorableModule(constr)); this.on('change:componentHovered', this.componentHovered, this); this.on('change:changesCount', this.updateChanges, this); this.on('change:readyLoad change:readyCanvas', this._checkReady, this); @@ -308,7 +311,7 @@ export default class EditorModel extends Model { const sm = this.get('StorageManager'); // In `onLoad`, the module will try to load the data from its configurations. - this.toLoad.forEach(mdl => mdl.onLoad()); + this.toLoad.reverse().forEach(mdl => mdl.onLoad()); // Stuff to do post load const postLoad = () => { @@ -356,7 +359,6 @@ export default class EditorModel extends Model { const stm = this.get('StorageManager'); const changes = this.getDirtyCount(); this.updateItr && clearTimeout(this.updateItr); - //@ts-ignore this.updateItr = setTimeout(() => this.trigger('update')); if (this.config.noticeOnUnload) { @@ -370,34 +372,19 @@ export default class EditorModel extends Model { /** * Load generic module - * @param {String} moduleName Module name - * @return {this} - * @private */ - loadModule(Module: any) { - const { config } = this; - const Mod = new Module(this); - const name = (Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1)) as EditorConfigKeys; - const cfgParent = !isUndefined(config[name]) ? config[name] : config[Mod.name as EditorConfigKeys]; - const cfg = (cfgParent === true ? {} : cfgParent || {}) as Record; - cfg.pStylePrefix = config.pStylePrefix || ''; - - if (!isUndefined(cfgParent) && !cfgParent) { - cfg._disable = 1; - } - - if (Mod.storageKey && Mod.store && Mod.load) { - this.storables.push(Mod); - } - - cfg.em = this; - Mod.init({ ...cfg }); - - // Bind the module to the editor model if public - !Mod.private && this.set(Mod.name, Mod); - Mod.onLoad && this.toLoad.push(Mod); + private loadModule(InitModule: new (em: EditorModel) => IModule) { + const Mod = new InitModule(this); + this.set(Mod.name, Mod); + Mod.onLoad && this.toLoad.push(Mod as ILoadableModule); this.modules.push(Mod); - return this; + return Mod; + } + + private loadStorableModule(InitModule: new (em: EditorModel) => IModule & IStorableModule) { + const Mod = this.loadModule(InitModule) as IModule & IStorableModule; + this.storables.push(Mod); + return Mod; } /** @@ -433,7 +420,6 @@ export default class EditorModel extends Model { } this.timedInterval && clearTimeout(this.timedInterval); - //@ts-ignore this.timedInterval = setTimeout(() => { const curr = this.getDirtyCount() || 0; const { unset, ...opts } = opt; @@ -975,7 +961,7 @@ export default class EditorModel extends Model { // @ts-ignore const { editors = [] } = config.grapesjs || {}; const shallow = this.get('shallow'); - clearTimeout(this._storageTimeout); + this._storageTimeout && clearTimeout(this._storageTimeout); shallow?.destroyAll(); this.stopListening(); this.stopDefault(); diff --git a/src/pages/index.ts b/src/pages/index.ts index e2ab0afd73..dd5d6d3482 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -105,7 +105,6 @@ export default class PageManager extends ItemManagerModule coll.at(0) && this.select(coll.at(0))); this.pages.on('all', this.__onChange, this); model.on(chnSel, this._onPageChange); - - return this; } __onChange(event: string, page: Page, coll: Pages, opts?: any) { diff --git a/test/specs/asset_manager/index.js b/test/specs/asset_manager/index.js index d240bce9ce..a690937bb0 100644 --- a/test/specs/asset_manager/index.js +++ b/test/specs/asset_manager/index.js @@ -15,7 +15,6 @@ describe('Asset Manager', () => { height: 102, }; obj = new AssetManager(new Editor()); - obj.init(); document.body.querySelector('#asset-c').appendChild(obj.render()); }); diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js index 62959a3745..3e054203b1 100644 --- a/test/specs/dom_components/model/Component.js +++ b/test/specs/dom_components/model/Component.js @@ -28,7 +28,6 @@ describe('Component', () => { domc: dcomp, }; obj = new Component({}, compOpts); - dcomp.init({ em }); }); afterEach(() => { @@ -651,7 +650,6 @@ describe('Components', () => { const em = new Editor({}); dcomp = em.get('DomComponents'); em.get('PageManager').onLoad(); - dcomp.init({ em }); const id = 'myid'; const idB = 'myid2'; const block = `