From f112045d156fd3f1dcebeb86a2bfa5fce0f04f8d Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sat, 16 Apr 2022 14:03:53 +0200 Subject: [PATCH 01/10] Convert EditorModulue to ts --- src/abstract/View.ts | 2 +- src/editor/{index.js => index.ts} | 261 ++++++++++++++++++++---------- src/editor/model/Editor.js | 36 ++--- 3 files changed, 193 insertions(+), 106 deletions(-) rename src/editor/{index.js => index.ts} (79%) diff --git a/src/abstract/View.ts b/src/abstract/View.ts index c0c158b7c..4047bcaf6 100644 --- a/src/abstract/View.ts +++ b/src/abstract/View.ts @@ -6,7 +6,7 @@ export default class View< TElement extends Element = HTMLElement > extends Backbone.View { protected get pfx() { - return this.model.module.em.config.stylePrefix || ""; + return (this.model.module.em.config as any).stylePrefix || ""; } protected get ppfx() { diff --git a/src/editor/index.js b/src/editor/index.ts similarity index 79% rename from src/editor/index.js rename to src/editor/index.ts index cb0d21340..db4c71be5 100644 --- a/src/editor/index.js +++ b/src/editor/index.ts @@ -54,13 +54,15 @@ * ## Methods * @module Editor */ +import { EventHandler } from 'backbone'; +import cash from '../utils/cash-dom'; import html from '../utils/html'; import defaults from './config/config'; import EditorModel from './model/Editor'; import EditorView from './view/EditorView'; export default class EditorModule { - constructor(config = {}, opts = {}) { + constructor(config = {}, opts: any = {}) { this.$ = opts.$; this.c = { ...defaults, ...config }; this.c.pStylePrefix = this.c.stylePrefix; @@ -68,51 +70,13 @@ export default class EditorModule { this.em.init(this); this.editor = this.em; - this.modules = [ - 'I18n', - 'Utils', - 'Config', - 'Commands', - 'Keymaps', - 'Modal', - 'Panels', - 'Canvas', - 'Parser', - 'CodeManager', - 'UndoManager', - 'RichTextEditor', - ['Pages', 'PageManager'], - 'DomComponents', - ['Components', 'DomComponents'], - 'LayerManager', - ['Layers', 'LayerManager'], - 'CssComposer', - ['Css', 'CssComposer'], - 'StorageManager', - ['Storage', 'StorageManager'], - 'AssetManager', - ['Assets', 'AssetManager'], - 'BlockManager', - ['Blocks', 'BlockManager'], - 'TraitManager', - ['Traits', 'TraitManager'], - 'SelectorManager', - ['Selectors', 'SelectorManager'], - 'StyleManager', - ['Styles', 'StyleManager'], - 'DeviceManager', - ['Devices', 'DeviceManager'], - ]; - - this.modules.forEach(prop => { - if (Array.isArray(prop)) { - this[prop[0]] = this.em.get(prop[1]); - } else { - this[prop] = this.em.get(prop); - } - }); + } - editorView; + editorView?: EditorView; + em: EditorModel; + editor: EditorModel; + c: any; + $: cash; /** * @property {EditorModel} @@ -122,13 +86,145 @@ export default class EditorModule { modules = []; + //@ts-ignore + get I18n(): I18nModule { + return this.em.get("I18n"); + } + //@ts-ignore + get Utils(): UtilsModule { + return this.em.get("Utils"); + } + get Config(): any { + return this.em.config; + } + //@ts-ignore + get Commands(): CommandsModule { + return this.em.get("Commands"); + } + //@ts-ignore + get Keymaps(): KeymapsModule { + return this.em.get("Keymaps"); + } + //@ts-ignore + get Modal(): ModalModule { + return this.em.get("Modal"); + } + //@ts-ignore + get Panels(): PanelsModule { + return this.em.get("Panels"); + } + //@ts-ignore + get Canvas(): CanvasModule { + return this.em.get("Canvas"); + } + //@ts-ignore + get Parser(): ParserModule { + return this.em.get("Parser"); + } + //@ts-ignore + get CodeManager(): CodeManagerModule { + return this.em.get("CodeManager"); + } + //@ts-ignore + get UndoManager(): UndoManagerModule { + return this.em.get("UndoManager"); + } + //@ts-ignore + get RichTextEditor(): RichTextEditorModule { + return this.em.get("RichTextEditor"); + } + //@ts-ignore + get Pages(): PageManagerModule { + return this.em.get("PageManager"); + } + //@ts-ignore + get Components(): DomComponentsModule { + return this.em.get("DomComponents"); + } + //@ts-ignore + get DomComponents(): DomComponentsModule { + return this.em.get("DomComponents"); + } + //@ts-ignore + get Layers(): LayerManagerModule { + return this.em.get("LayerManager"); + } + //@ts-ignore + get LayerManager(): LayerManagerModule { + return this.em.get("LayerManager"); + } + //@ts-ignore + get Css(): CssComposerModule { + return this.em.get("CssComposer"); + } + //@ts-ignore + get CssComposer(): CssComposerModule { + return this.em.get("CssComposer"); + } + //@ts-ignore + get Storage(): StorageManagerModule { + return this.em.get("StorageManager"); + } + //@ts-ignore + get StorageManager(): StorageManagerModule { + return this.em.get("StorageManager"); + } + //@ts-ignore + get Assets(): AssetManagerModule { + return this.em.get("AssetManager"); + } + //@ts-ignore + get AssetManager(): AssetManagerModule { + return this.em.get("AssetManager"); + } + //@ts-ignore + get Blocks(): BlockManagerModule { + return this.em.get("BlockManager"); + } + //@ts-ignore + get BlockManager(): BlockManagerModule { + return this.em.get("BlockManager"); + } + //@ts-ignore + get Traits(): TraitManagerModule { + return this.em.get("TraitManager"); + } + //@ts-ignore + get TraitManager(): TraitManagerModule { + return this.em.get("TraitManager"); + } + //@ts-ignore + get Selectors(): SelectorManagerCollectionModule { + return this.em.get("SelectorManager"); + } + //@ts-ignore + get SelectorManager(): SelectorManagerCollectionModule { + return this.em.get("SelectorManager"); + } + //@ts-ignore + get Styles(): StyleManagerModule { + return this.em.get("StyleManager"); + } + //@ts-ignore + get StyleManager(): StyleManagerModule { + return this.em.get("StyleManager"); + } + //@ts-ignore + get Devices(): DeviceManagerModule { + return this.em.get("DeviceManager"); + } + //@ts-ignore + get DeviceManager(): DeviceManagerModule { + return this.em.get("DeviceManager"); + } + /** * Returns configuration object * @param {string} [prop] Property name * @returns {any} Returns the configuration object or * the value of the specified property */ - getConfig(prop) { + getConfig(prop: string) { return this.em.getConfig(prop); } @@ -139,7 +235,7 @@ export default class EditorModule { * @param {Boolean} [opts.cleanId=false] Remove unnecessary IDs (eg. those created automatically) * @returns {string} HTML string */ - getHtml(opts) { + getHtml(opts: any) { return this.em.getHtml(opts); } @@ -153,7 +249,7 @@ export default class EditorModule { * @param {Boolean} [opts.keepUnusedStyles=false] Force keep all defined rules. Toggle on in case output looks different inside/outside of the editor. * @returns {String|Array} CSS string or array of CssRules */ - getCss(opts) { + getCss(opts: any) { return this.em.getCss(opts); } @@ -163,7 +259,7 @@ export default class EditorModule { * @param {Component} [opts.component] Get the JS of a specific component * @returns {String} JS string */ - getJs(opts) { + getJs(opts: any) { return this.em.getJs(opts); } @@ -197,7 +293,7 @@ export default class EditorModule { * content: 'New component' * }); */ - setComponents(components, opt = {}) { + setComponents(components: any, opt = {}) { this.em.setComponents(components, opt); return this; } @@ -219,7 +315,7 @@ export default class EditorModule { * content: 'New component' * }); */ - addComponents(components, opts) { + addComponents(components: any, opts: any) { return this.getWrapper().append(components, opts); } @@ -243,7 +339,7 @@ export default class EditorModule { * style: { color: 'red' } * }); */ - setStyle(style, opt = {}) { + setStyle(style: any, opt = {}) { this.em.setStyle(style, opt); return this; } @@ -255,7 +351,7 @@ export default class EditorModule { * @example * editor.addStyle('.cls{color: red}'); */ - addStyle(style, opts = {}) { + addStyle(style: any, opts = {}) { return this.em.addStyle(style, opts); } @@ -303,7 +399,7 @@ export default class EditorModule { * editor.select(model); * }); */ - select(el, opts) { + select(el: any, opts: any) { this.em.setSelected(el, opts); return this; } @@ -315,7 +411,7 @@ export default class EditorModule { * @example * editor.selectAdd(model); */ - selectAdd(el) { + selectAdd(el: any) { this.em.addSelected(el); return this; } @@ -327,7 +423,7 @@ export default class EditorModule { * @example * editor.selectRemove(model); */ - selectRemove(el) { + selectRemove(el: any) { this.em.removeSelected(el); return this; } @@ -339,7 +435,7 @@ export default class EditorModule { * @example * editor.selectToggle(model); */ - selectToggle(el) { + selectToggle(el: any) { this.em.toggleSelected(el); return this; } @@ -365,7 +461,7 @@ export default class EditorModule { * @example * editor.setDevice('Tablet'); */ - setDevice(name) { + setDevice(name: string) { this.em.set('device', name); return this; } @@ -390,7 +486,7 @@ export default class EditorModule { * @example * editor.runCommand('myCommand', {someValue: 1}); */ - runCommand(id, options = {}) { + runCommand(id: string, options = {}) { return this.em.get('Commands').run(id, options); } @@ -402,7 +498,7 @@ export default class EditorModule { * @example * editor.stopCommand('myCommand', {someValue: 1}); */ - stopCommand(id, options = {}) { + stopCommand(id: string, options = {}) { return this.em.get('Commands').stop(id, options); } @@ -414,7 +510,7 @@ export default class EditorModule { * @example * const storedData = await editor.store(); */ - async store(options) { + async store(options: any) { return await this.em.store(options); } @@ -425,7 +521,7 @@ export default class EditorModule { * @example * const data = await editor.load(); */ - async load(options) { + async load(options: any) { return await this.em.load(options); } @@ -446,7 +542,7 @@ export default class EditorModule { * @example * editor.loadProjectData({ pages: [...], styles: [...], ... }) */ - loadProjectData(data) { + loadProjectData(data: any) { return this.em.loadData(data); } @@ -454,7 +550,7 @@ export default class EditorModule { return this.em.storeData(); } - loadData(data) { + loadData(data: any) { return this.em.loadData(data); } @@ -492,7 +588,7 @@ export default class EditorModule { * @param {Object} [options] Options * @param {Boolean} [options.tools=false] Update the position of tools (eg. rich text editor, component highlighter, etc.) */ - refresh(opts) { + refresh(opts?: any) { this.em.refreshCanvas(opts); } @@ -525,7 +621,7 @@ export default class EditorModule { * } * }); */ - setCustomRte(obj) { + setCustomRte(obj: any) { this.RichTextEditor.customRte = obj; } @@ -548,7 +644,7 @@ export default class EditorModule { * return result; * }); */ - setCustomParserCss(parser) { + setCustomParserCss(parser: any) { this.Parser.getConfig().parserCss = parser; return this; } @@ -559,7 +655,7 @@ export default class EditorModule { * @param {String} value Drag mode, options: 'absolute' | 'translate' * @returns {this} */ - setDragMode(value) { + setDragMode(value: string) { this.em.setDragMode(value); return this; } @@ -579,7 +675,7 @@ export default class EditorModule { * // options, as arguments, eg: * // editor.on('log:info', (msg, opts) => console.info(msg, opts)) */ - log(msg, opts = {}) { + log(msg: string, opts = {}) { this.em.log(msg, opts); return this; } @@ -598,7 +694,7 @@ export default class EditorModule { * // custom local * editor.t('msg2', { params: { test: 'hello' } l: 'it' }); */ - t(...args) { + t(...args: any[]) { return this.em.t(...args); } @@ -608,7 +704,7 @@ export default class EditorModule { * @param {Function} callback Callback function * @return {this} */ - on(event, callback) { + on(event: string, callback: EventHandler) { this.em.on(event, callback); return this; } @@ -619,7 +715,7 @@ export default class EditorModule { * @param {Function} callback Callback function * @return {this} */ - once(event, callback) { + once(event: string, callback: EventHandler) { this.em.once(event, callback); return this; } @@ -630,7 +726,7 @@ export default class EditorModule { * @param {Function} callback Callback function * @return {this} */ - off(event, callback) { + off(event: string, callback: EventHandler) { this.em.off(event, callback); return this; } @@ -640,8 +736,8 @@ export default class EditorModule { * @param {string} event Event to trigger * @return {this} */ - trigger(event) { - this.em.trigger.apply(this.em, arguments); + trigger(eventName: string, ...args: any[]) { + this.em.trigger.apply(this.em, [eventName, ...args]); return this; } @@ -651,17 +747,7 @@ export default class EditorModule { destroy() { if (!this.em) return; this.em.destroyAll(); - this.modules.forEach(prop => { - if (Array.isArray(prop)) { - this[prop[0]] = 0; - } else { - this[prop] = 0; - } - }); - this.modules = 0; - this.editorView = 0; - this.em = 0; - this.c = 0; + this.editorView = undefined; } /** @@ -690,6 +776,7 @@ export default class EditorModule { this.editorView?.remove(); this.editorView = new EditorView({ model: this.em, + //@ts-ignore config: this.c, }); return this.editorView.render().el; @@ -704,7 +791,7 @@ export default class EditorModule { * // perform actions * }); */ - onReady(clb) { + onReady(clb: EventHandler) { this.em.get('ready') ? clb(this) : this.em.on('load', clb); } diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 6eef37b07..5100ef33a 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -69,7 +69,7 @@ export default class EditorModel extends Model { initialize(conf = {}) { this._config = conf; const { config } = this; - this.set('Config', config); + this.set('Config', conf); this.set('modules', []); this.set('toLoad', []); this.set('storables', []); @@ -159,7 +159,7 @@ export default class EditorModel extends Model { // Defer for storage load events. setTimeout(async () => { - const projectData = this.getConfig('projectData'); + const projectData = this.getConfig().projectData; if (projectData) { this.loadData(projectData); @@ -242,7 +242,7 @@ export default class EditorModel extends Model { * Initialize editor model and set editor instance * @param {Editor} editor Editor instance * @return {this} - * @private + * @public */ init(editor, opts = {}) { if (this.destroyed) { @@ -298,7 +298,7 @@ export default class EditorModel extends Model { /** * Returns model of the selected component * @return {Component|null} - * @private + * @public */ getSelected() { return this.get('selected').lastComponent(); @@ -307,7 +307,7 @@ export default class EditorModel extends Model { /** * Returns an array of all selected components * @return {Array} - * @private + * @public */ getSelectedAll() { return this.get('selected').allComponents(); @@ -317,7 +317,7 @@ export default class EditorModel extends Model { * Select a component * @param {Component|HTMLElement} el Component to select * @param {Object} [opts={}] Options, optional - * @private + * @public */ setSelected(el, opts = {}) { const { event } = opts; @@ -402,7 +402,7 @@ export default class EditorModel extends Model { * Add component to selection * @param {Component|HTMLElement} el Component to select * @param {Object} [opts={}] Options, optional - * @private + * @public */ addSelected(el, opts = {}) { const model = getModel(el, $); @@ -421,7 +421,7 @@ export default class EditorModel extends Model { * Remove component from selection * @param {Component|HTMLElement} el Component to select * @param {Object} [opts={}] Options, optional - * @private + * @public */ removeSelected(el, opts = {}) { this.get('selected').removeComponent(getModel(el, $), opts); @@ -431,7 +431,7 @@ export default class EditorModel extends Model { * Toggle component selection * @param {Component|HTMLElement} el Component to select * @param {Object} [opts={}] Options, optional - * @private + * @public */ toggleSelected(el, opts = {}) { const model = getModel(el, $); @@ -489,7 +489,7 @@ export default class EditorModel extends Model { * @param {Object|string} components HTML string or components model * @param {Object} opt the options object to be used by the [setComponents]{@link setComponents} method * @return {this} - * @private + * @public */ setComponents(components, opt = {}) { return this.get('DomComponents').setComponents(components, opt); @@ -515,7 +515,7 @@ export default class EditorModel extends Model { * @param {Object|string} style CSS string or style model * @param {Object} opt the options object to be used by the `CssRules.add` method * @return {this} - * @private + * @public */ setStyle(style, opt = {}) { const cssc = this.get('CssComposer'); @@ -528,7 +528,7 @@ export default class EditorModel extends Model { * Add styles to the editor * @param {Array|Object|string} style CSS string or style model * @returns {Array} - * @private + * @public */ addStyle(style, opts = {}) { const res = this.getStyle().add(style, opts); @@ -566,7 +566,7 @@ export default class EditorModel extends Model { * Returns HTML built inside canvas * @param {Object} [opts={}] Options * @returns {string} HTML string - * @private + * @public */ getHtml(opts = {}) { const { config } = this; @@ -587,7 +587,7 @@ export default class EditorModel extends Model { * Returns CSS built inside canvas * @param {Object} [opts={}] Options * @returns {string} CSS string - * @private + * @public */ getCss(opts = {}) { const config = this.config; @@ -611,7 +611,7 @@ export default class EditorModel extends Model { /** * Returns JS of all components * @return {string} JS string - * @private + * @public */ getJs(opts = {}) { var wrp = opts.component || this.get('DomComponents').getWrapper(); @@ -620,7 +620,7 @@ export default class EditorModel extends Model { /** * Store data to the current storage. - * @private + * @public */ async store(options) { const data = this.storeData(); @@ -631,7 +631,7 @@ export default class EditorModel extends Model { /** * Load data from the current storage. - * @private + * @public */ async load(options) { const result = await this.get('StorageManager').load(options); @@ -696,7 +696,7 @@ export default class EditorModel extends Model { /** * Update canvas dimensions and refresh data useful for tools positioning - * @private + * @public */ refreshCanvas(opts = {}) { this.set('canvasOffset', null); From b209e2995e06642e772e99872d8b772a32a6c74c Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sat, 16 Apr 2022 14:22:42 +0200 Subject: [PATCH 02/10] Use abstract base class --- src/editor/config/config.js | 1 + src/editor/index.ts | 26 ++++++-------------------- 2 files changed, 7 insertions(+), 20 deletions(-) diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 926df187c..158bb6cc3 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -1,4 +1,5 @@ export default { + name: 'Editor', // Style prefix stylePrefix: 'gjs-', diff --git a/src/editor/index.ts b/src/editor/index.ts index db4c71be5..b38065c4a 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -55,27 +55,23 @@ * @module Editor */ import { EventHandler } from 'backbone'; +import Module from '../abstract/Module'; import cash from '../utils/cash-dom'; import html from '../utils/html'; import defaults from './config/config'; import EditorModel from './model/Editor'; import EditorView from './view/EditorView'; -export default class EditorModule { +export default class EditorModule extends Module { constructor(config = {}, opts: any = {}) { + var c = { ...defaults, ...config, pStylePrefix: defaults.stylePrefix }; + super(new EditorModel(c), c) this.$ = opts.$; - this.c = { ...defaults, ...config }; - this.c.pStylePrefix = this.c.stylePrefix; - this.em = new EditorModel(this.c); this.em.init(this); this.editor = this.em; - - } editorView?: EditorView; - em: EditorModel; editor: EditorModel; - c: any; $: cash; /** @@ -218,16 +214,6 @@ export default class EditorModule { return this.em.get("DeviceManager"); } - /** - * Returns configuration object - * @param {string} [prop] Property name - * @returns {any} Returns the configuration object or - * the value of the specified property - */ - getConfig(prop: string) { - return this.em.getConfig(prop); - } - /** * Returns HTML built inside canvas * @param {Object} [opts={}] Options @@ -560,7 +546,7 @@ export default class EditorModule { * @return {HTMLElement} */ getContainer() { - return this.c.el; + return this.config.el; } /** @@ -777,7 +763,7 @@ export default class EditorModule { this.editorView = new EditorView({ model: this.em, //@ts-ignore - config: this.c, + config: this.config, }); return this.editorView.render().el; } From f4b1fc7b6c3e41d402d1dfedd85ee1ea794f7f77 Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sat, 16 Apr 2022 14:32:43 +0200 Subject: [PATCH 03/10] Replace getConfig(string) to getConfig() --- src/asset_manager/index.js | 4 ++-- src/canvas/view/CanvasView.js | 2 +- src/canvas/view/FramesView.js | 2 +- src/code_manager/model/CssGenerator.js | 4 ++-- src/commands/view/ComponentDrag.js | 2 +- src/commands/view/SelectComponent.js | 2 +- src/css_composer/model/CssRule.js | 2 +- src/css_composer/view/CssRulesView.js | 2 +- src/dom_components/model/Component.js | 10 +++++----- src/dom_components/model/Components.js | 4 ++-- src/dom_components/view/ComponentView.js | 2 +- src/dom_components/view/ToolbarButtonView.js | 8 ++++---- src/domain_abstract/ui/InputColor.js | 2 +- src/editor/model/Editor.js | 4 ++-- src/selector_manager/model/Selector.js | 2 +- src/selector_manager/view/ClassTagsView.js | 2 +- src/style_manager/view/LayerView.js | 2 +- src/style_manager/view/PropertyFileView.js | 2 +- src/style_manager/view/PropertyStackView.js | 2 +- src/style_manager/view/PropertyView.js | 2 +- src/style_manager/view/SectorView.js | 2 +- 21 files changed, 32 insertions(+), 32 deletions(-) diff --git a/src/asset_manager/index.js b/src/asset_manager/index.js index 3b1a4e39a..be8c8b737 100644 --- a/src/asset_manager/index.js +++ b/src/asset_manager/index.js @@ -136,7 +136,7 @@ export default () => { __trgCustom() { const bhv = this.__getBehaviour(); - if (!bhv.container && !this.getConfig('custom').open) { + if (!bhv.container && !this.getConfig().custom.open) { return; } this.em.trigger(this.events.custom, this.__customData()); @@ -321,7 +321,7 @@ export default () => { * )); */ render(assts) { - if (this.getConfig('custom')) return; + if (this.getConfig().custom) return; const toRender = assts || this.getAll().models; if (!am) { diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 2801ced35..6d8051ca8 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -108,7 +108,7 @@ export default class CanvasView extends View { } onWheel(ev) { - if ((ev.ctrlKey || ev.metaKey) && this.em.getConfig('multiFrames')) { + if ((ev.ctrlKey || ev.metaKey) && this.em.getConfig().multiFrames) { this.preventDefault(ev); const { model } = this; const delta = Math.max(-1, Math.min(1, ev.wheelDelta || -ev.detail)); diff --git a/src/canvas/view/FramesView.js b/src/canvas/view/FramesView.js index 88ad9f743..01ae1ef1b 100644 --- a/src/canvas/view/FramesView.js +++ b/src/canvas/view/FramesView.js @@ -14,7 +14,7 @@ export default class FramesView extends DomainViews { onRender() { const { config, $el } = this; const { em } = config; - em && $el.attr({ class: `${em.getConfig('stylePrefix')}frames` }); + em && $el.attr({ class: `${em.getConfig().stylePrefix}frames` }); } } diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js index 82ddc03d2..53a0327b9 100644 --- a/src/code_manager/model/CssGenerator.js +++ b/src/code_manager/model/CssGenerator.js @@ -24,7 +24,7 @@ export default class CssGenerator extends Model { buildFromModel(model, opts = {}) { let code = ''; const em = this.em; - const avoidInline = em && em.getConfig('avoidInlineStyle'); + const avoidInline = em && em.getConfig().avoidInlineStyle; const style = model.styleToString(); const classes = model.get('classes'); this.ids.push(`#${model.getId()}`); @@ -51,7 +51,7 @@ export default class CssGenerator extends Model { this.model = model; const codeJson = []; let code = model ? this.buildFromModel(model, opts) : ''; - const clearStyles = isUndefined(opts.clearStyles) && em ? em.getConfig('clearStyles') : opts.clearStyles; + const clearStyles = isUndefined(opts.clearStyles) && em ? em.getConfig().clearStyles : opts.clearStyles; if (cssc) { let rules = opts.rules || cssc.getAll(); diff --git a/src/commands/view/ComponentDrag.js b/src/commands/view/ComponentDrag.js index bb0075833..2bb590c06 100644 --- a/src/commands/view/ComponentDrag.js +++ b/src/commands/view/ComponentDrag.js @@ -80,7 +80,7 @@ export default { if (!guidesEl) { const { editor, em, opts } = this; - const pfx = editor.getConfig('stylePrefix'); + const pfx = editor.getConfig().stylePrefix; const elInfoX = document.createElement('div'); const elInfoY = document.createElement('div'); const guideContent = `
diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 2e0eeac1b..edc795f16 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -61,7 +61,7 @@ export default { * */ toggleSelectComponent(enable) { const { em } = this; - const listenToEl = em.getConfig('listenToEl'); + const listenToEl = em.getConfig().listenToEl; const { parentNode } = em.getContainer(); const method = enable ? 'on' : 'off'; const methods = { on, off }; diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js index 2beb24c40..17029f73c 100644 --- a/src/css_composer/model/CssRule.js +++ b/src/css_composer/model/CssRule.js @@ -228,7 +228,7 @@ export default class CssRule extends Model.extend(Styleable) { toJSON(...args) { const obj = Model.prototype.toJSON.apply(this, args); - if (this.em.getConfig('avoidDefaults')) { + if (this.em.getConfig().avoidDefaults) { const defaults = this.defaults(); forEach(defaults, (value, key) => { diff --git a/src/css_composer/view/CssRulesView.js b/src/css_composer/view/CssRulesView.js index ecf9a44c5..987577b7c 100644 --- a/src/css_composer/view/CssRulesView.js +++ b/src/css_composer/view/CssRulesView.js @@ -101,7 +101,7 @@ export default class CssRulesView extends View { } getMediaWidth(mediaText) { - return mediaText && mediaText.replace(`(${this.em.getConfig('mediaCondition')}: `, '').replace(')', ''); + return mediaText && mediaText.replace(`(${this.em.getConfig().mediaCondition}: `, '').replace(')', ''); } render() { diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 316f81648..c1cb51399 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -23,7 +23,7 @@ const escapeRegExp = str => { return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'); }; -const avoidInline = em => em && em.getConfig('avoidInlineStyle'); +const avoidInline = em => em && em.getConfig().avoidInlineStyle; export const eventDrag = 'component:drag'; export const keySymbols = '__symbols'; @@ -465,7 +465,7 @@ export default class Component extends Model.extend(Styleable) { const prop = isString(options) ? options : ''; const opts = prop ? optsAdd : options; - if (em && em.getConfig('avoidInlineStyle') && !opts.inline) { + if (em && em.getConfig().avoidInlineStyle && !opts.inline) { const state = em.get('state'); const cc = em.get('CssComposer'); const rule = cc.getIdRule(this.getId(), { state, ...opts }); @@ -490,7 +490,7 @@ export default class Component extends Model.extend(Styleable) { const em = this.em; const { opt } = this; - if (em && em.getConfig('avoidInlineStyle') && !opt.temporary && !opts.inline) { + if (em && em.getConfig().avoidInlineStyle && !opt.temporary && !opts.inline) { const style = this.get('style') || {}; prop = isString(prop) ? this.parseStyle(prop) : prop; prop = { ...prop, ...style }; @@ -1062,7 +1062,7 @@ export default class Component extends Model.extend(Styleable) { initToolbar() { const { em } = this; const model = this; - const ppfx = (em && em.getConfig('stylePrefix')) || ''; + const ppfx = (em && em.getConfig().stylePrefix) || ''; if (!model.get('toolbar') && em) { const tb = []; @@ -1495,7 +1495,7 @@ export default class Component extends Model.extend(Styleable) { } } - if (this.em.getConfig('avoidDefaults')) { + if (this.em.getConfig().avoidDefaults) { this.getChangedProps(obj); } diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js index 5202f5ecc..bbf039546 100644 --- a/src/dom_components/model/Components.js +++ b/src/dom_components/model/Components.js @@ -255,10 +255,10 @@ export default Backbone.Collection.extend({ onAdd(model, c, opts = {}) { const { domc, em } = this; const style = model.getStyle(); - const avoidInline = em && em.getConfig('avoidInlineStyle'); + const avoidInline = em && em.getConfig().avoidInlineStyle; domc && domc.Component.ensureInList(model); - if (!isEmpty(style) && !avoidInline && em && em.get && em.getConfig('forceClass') && !opts.temporary) { + if (!isEmpty(style) && !avoidInline && em && em.get && em.getConfig().forceClass && !opts.temporary) { const name = model.cid; const rule = em.get('CssComposer').setClassRule(name, style); model.setStyle({}); diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 340d449a4..3c1e3d43e 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -232,7 +232,7 @@ export default Backbone.View.extend({ updateStyle(m, v, opts = {}) { const { model, em } = this; - if (em && em.getConfig('avoidInlineStyle') && !opts.inline) { + if (em && em.getConfig().avoidInlineStyle && !opts.inline) { const style = model.getStyle(); !isEmpty(style) && model.setStyle(style); } else { diff --git a/src/dom_components/view/ToolbarButtonView.js b/src/dom_components/view/ToolbarButtonView.js index 6714d1468..fa1c89d4e 100644 --- a/src/dom_components/view/ToolbarButtonView.js +++ b/src/dom_components/view/ToolbarButtonView.js @@ -4,7 +4,7 @@ export default Backbone.View.extend({ events() { return ( this.model.get('events') || { - mousedown: 'handleClick' + mousedown: 'handleClick', } ); }, @@ -43,7 +43,7 @@ export default Backbone.View.extend({ const calibrated = { ...event, clientX: event.clientX - left, - clientY: event.clientY - top + clientY: event.clientY - top, }; em.trigger('toolbar:run:before'); @@ -68,10 +68,10 @@ export default Backbone.View.extend({ const { editor, $el, model } = this; const id = model.get('id'); const label = model.get('label'); - const pfx = editor.getConfig('stylePrefix'); + const pfx = editor.getConfig().stylePrefix; $el.addClass(`${pfx}toolbar-item`); id && $el.addClass(`${pfx}toolbar-item__${id}`); label && $el.append(label); return this; - } + }, }); diff --git a/src/domain_abstract/ui/InputColor.js b/src/domain_abstract/ui/InputColor.js index 244a3760c..fb1aeaa32 100644 --- a/src/domain_abstract/ui/InputColor.js +++ b/src/domain_abstract/ui/InputColor.js @@ -99,7 +99,7 @@ export default class InputColor extends Input { var colorEl = $(`
`); var cpStyle = colorEl.get(0).style; var elToAppend = em && em.config ? em.config.el : ''; - var colorPickerConfig = (em && em.getConfig && em.getConfig('colorPicker')) || {}; + var colorPickerConfig = (em && em.getConfig && em.getConfig().colorPicker) || {}; let changed = 0; let previousColor; diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 5100ef33a..09b666c5e 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -326,7 +326,7 @@ export default class EditorModel extends Model { const multiple = isArray(el); const els = (multiple ? el : [el]).map(el => getModel(el, $)); const selected = this.getSelectedAll(); - const mltSel = this.getConfig('multipleSelection'); + const mltSel = this.getConfig().multipleSelection; let added; // If an array is passed remove all selected @@ -749,7 +749,7 @@ export default class EditorModel extends Model { } getIcon(icon) { - const icons = this.getConfig('icons') || {}; + const icons = this.getConfig().icons || {}; return icons[icon] || ''; } diff --git a/src/selector_manager/model/Selector.js b/src/selector_manager/model/Selector.js index b4e44b757..1a6dd6d00 100644 --- a/src/selector_manager/model/Selector.js +++ b/src/selector_manager/model/Selector.js @@ -127,7 +127,7 @@ export default class Selector extends Model { let obj = Model.prototype.toJSON.call(this, [opts]); const defaults = result(this, 'defaults'); - if (em && em.getConfig('avoidDefaults')) { + if (em && em.getConfig().avoidDefaults) { forEach(defaults, (value, key) => { if (obj[key] === value) { delete obj[key]; diff --git a/src/selector_manager/view/ClassTagsView.js b/src/selector_manager/view/ClassTagsView.js index f3e7596b1..e1cc65450 100644 --- a/src/selector_manager/view/ClassTagsView.js +++ b/src/selector_manager/view/ClassTagsView.js @@ -234,7 +234,7 @@ export default class ClassTagsView extends View { */ updateStateVis(target) { const em = this.em; - const avoidInline = em && em.getConfig('avoidInlineStyle'); + const avoidInline = em && em.getConfig().avoidInlineStyle; const display = this.collection.length || avoidInline ? '' : 'none'; this.getStatesC().css('display', display); this.updateSelector(target); diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js index f3aca438e..62354d16d 100644 --- a/src/style_manager/view/LayerView.js +++ b/src/style_manager/view/LayerView.js @@ -13,7 +13,7 @@ export default class LayerView extends View { template() { const { pfx, ppfx, em } = this; - const icons = em?.getConfig('icons'); + const icons = em?.getConfig().icons; const iconClose = icons?.close || ''; const iconMove = icons?.move || ''; diff --git a/src/style_manager/view/PropertyFileView.js b/src/style_manager/view/PropertyFileView.js index e070cffe5..470e5ae5f 100644 --- a/src/style_manager/view/PropertyFileView.js +++ b/src/style_manager/view/PropertyFileView.js @@ -12,7 +12,7 @@ export default class PropertyFileView extends PropertyView { templateInput() { const { pfx, em } = this; - const icons = this.em?.getConfig('icons'); + const icons = this.em?.getConfig().icons; const iconClose = icons?.close; return ` diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index c156eeaea..724386148 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -13,7 +13,7 @@ export default class PropertyStackView extends PropertyCompositeView { templateInput() { const { pfx, em } = this; - const icons = em?.getConfig('icons'); + const icons = em?.getConfig().icons; const iconPlus = icons?.plus || '+'; return `
diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 99058357c..9236134af 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -17,7 +17,7 @@ export default class Property extends View { const { pfx, em } = this; const { parent } = model; const { icon = '', info = '' } = model.attributes; - const icons = em?.getConfig('icons'); + const icons = em?.getConfig().icons; const iconClose = icons?.close || ''; return ` diff --git a/src/style_manager/view/SectorView.js b/src/style_manager/view/SectorView.js index 7afc7f512..1c777bb65 100644 --- a/src/style_manager/view/SectorView.js +++ b/src/style_manager/view/SectorView.js @@ -4,7 +4,7 @@ import PropertiesView from './PropertiesView'; export default class SectorView extends View { template({ pfx, label }) { - const icons = this.em?.getConfig('icons'); + const icons = this.em?.getConfig().icons; const iconCaret = icons?.caret || ''; const clsPfx = `${pfx}sector-`; From dbaec11391d692f600d5d0a81816b3dd29bdf628 Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sun, 17 Apr 2022 00:07:26 +0200 Subject: [PATCH 04/10] Fix EditorModule interface --- src/abstract/Model.ts | 8 ++++++-- src/abstract/Module.ts | 9 +++++++-- src/editor/index.ts | 21 +++++++++++---------- 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/abstract/Model.ts b/src/abstract/Model.ts index f1d9cc83d..a3cde8fd1 100644 --- a/src/abstract/Model.ts +++ b/src/abstract/Model.ts @@ -1,8 +1,8 @@ import Backbone from "backbone"; -import Module from "./Module"; +import Module, { IBaseModule } from "./Module"; export default class Model< - TModule extends Module = Module, + TModule extends IBaseModule = Module, T extends Backbone.ObjectHash = any, S = Backbone.ModelSetOptions, E = any @@ -21,4 +21,8 @@ export default class Model< public get module() { return this._module; } + + public get config(): TModule extends IBaseModule? C: unknown{ + return this._module.config + } } diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts index 3aa05d605..04cd8354e 100644 --- a/src/abstract/Module.ts +++ b/src/abstract/Module.ts @@ -1,6 +1,6 @@ import EditorModel from "../editor/model/Editor"; -export interface IModule { +export interface IModule extends IBaseModule { init(cfg: any): void; destroy(): void; postLoad(key: any): any; @@ -10,13 +10,18 @@ export interface IModule { postRender?(view: any): void; } +export interface IBaseModule { + em: EditorModel; + config: TConfig; +} + interface ModuleConfig{ name: string; stylePrefix?: string; } export default abstract class Module - implements IModule + implements IModule { //conf: CollectionCollectionModuleConfig; private _em: EditorModel; diff --git a/src/editor/index.ts b/src/editor/index.ts index b38065c4a..4350fcc28 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -55,17 +55,18 @@ * @module Editor */ import { EventHandler } from 'backbone'; -import Module from '../abstract/Module'; +import { IBaseModule } from '../abstract/Module'; import cash from '../utils/cash-dom'; import html from '../utils/html'; import defaults from './config/config'; import EditorModel from './model/Editor'; import EditorView from './view/EditorView'; -export default class EditorModule extends Module { +export default class EditorModule implements IBaseModule { constructor(config = {}, opts: any = {}) { - var c = { ...defaults, ...config, pStylePrefix: defaults.stylePrefix }; - super(new EditorModel(c), c) + //@ts-ignore + this.config = { ...defaults, ...config, pStylePrefix: defaults.stylePrefix }; + this.em = new EditorModel(this.config); this.$ = opts.$; this.em.init(this); this.editor = this.em; @@ -73,12 +74,8 @@ export default class EditorModule extends Module { editorView?: EditorView; editor: EditorModel; $: cash; - - /** - * @property {EditorModel} - * @private - */ - //editor = em + em: EditorModel; + config: typeof defaults; modules = []; @@ -214,6 +211,10 @@ export default class EditorModule extends Module { return this.em.get("DeviceManager"); } + getConfig(){ + return this.config + } + /** * Returns HTML built inside canvas * @param {Object} [opts={}] Options From 234c51f819c6c890e495a8c1e6c7cfffd7bee911 Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sun, 17 Apr 2022 12:13:19 +0200 Subject: [PATCH 05/10] Convert EditorModel to ts --- src/dom_components/model/Component.js | 2 +- src/editor/model/{Editor.js => Editor.ts} | 184 ++++++++++++++-------- 2 files changed, 119 insertions(+), 67 deletions(-) rename src/editor/model/{Editor.js => Editor.ts} (85%) diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index c1cb51399..302454597 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -703,7 +703,7 @@ export default class Component extends Model.extend(Styleable) { let result = []; const { em } = this; const { changed } = opts; - const symbEnabled = em && em.get('symbols'); + const symbEnabled = em && em.config.symbols; if ( opts.fromInstance || diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.ts similarity index 85% rename from src/editor/model/Editor.js rename to src/editor/model/Editor.ts index 09b666c5e..dca5055c6 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.ts @@ -5,7 +5,12 @@ import Extender from '../../utils/extender'; import { getModel, hasWin } from '../../utils/mixins'; import { Model } from '../../common'; import Selected from './Selected'; +import FrameView from '../../canvas/view/FrameView'; +import EditorModule from '..'; +import EditorView from '../view/EditorView'; +import { IModule } from '../../abstract/Module'; +//@ts-ignore Backbone.$ = $; const deps = [ @@ -33,10 +38,11 @@ const deps = [ require('block_manager'), ]; -let timedInterval; -let updateItr; +const ts_deps: any[] = [ +]; Extender({ + //@ts-ignore Backbone: Backbone, $: Backbone.$, }); @@ -66,7 +72,30 @@ export default class EditorModel extends Model { }; } - initialize(conf = {}) { + __skip = false; + defaultRunning = false; + destroyed = false; + _config: any; + attrsOrig: any; + timedInterval?: NodeJS.Timeout; + updateItr?: NodeJS.Timeout; + view?: EditorView + + + get storables(): any[]{ + return this.get("storables") + } + + get modules(): IModule[]{ + return this.get("modules") + } + + get toLoad(): any[]{ + return this.get("toLoad") + } + + constructor(conf = {}) { + super() this._config = conf; const { config } = this; this.set('Config', conf); @@ -97,6 +126,7 @@ export default class EditorModel extends Model { // Load modules deps.forEach(name => this.loadModule(name)); + ts_deps.forEach(name => this.tsLoadModule(name)); this.on('change:componentHovered', this.componentHovered, this); this.on('change:changesCount', this.updateChanges, this); this.on('change:readyLoad change:readyCanvas', this._checkReady, this); @@ -123,7 +153,8 @@ export default class EditorModel extends Model { return this.config.el; } - listenLog(event) { + listenLog(event: string) { + //@ts-ignore this.listenTo(this, `log:${event}`, logs[event]); } @@ -137,7 +168,7 @@ export default class EditorModel extends Model { * @return {any} Returns the configuration object or * the value of the specified property */ - getConfig(prop) { + getConfig(prop?: string) { const config = this.config; return isUndefined(prop) ? config : config[prop]; } @@ -148,12 +179,11 @@ export default class EditorModel extends Model { */ loadOnStart() { // In `onLoad`, the module will try to load the data from its configurations. - this.get('toLoad').forEach(mdl => mdl.onLoad()); + this.toLoad.forEach(mdl => mdl.onLoad()); // Stuff to do post load const postLoad = () => { - const modules = this.get('modules'); - modules.forEach(mdl => mdl.postLoad && mdl.postLoad(this)); + this.modules.forEach(mdl => mdl.postLoad && mdl.postLoad(this)); this.set('readyLoad', 1); }; @@ -167,7 +197,7 @@ export default class EditorModel extends Model { try { await this.load(); } catch (error) { - this.logError(error); + this.logError(error as string); } } postLoad(); @@ -193,8 +223,8 @@ export default class EditorModel extends Model { updateChanges() { const stm = this.get('StorageManager'); const changes = this.getDirtyCount(); - updateItr && clearTimeout(updateItr); - updateItr = setTimeout(() => this.trigger('update')); + this.updateItr && clearTimeout(this.updateItr); + this.updateItr = setTimeout(() => this.trigger('update')); if (this.config.noticeOnUnload) { window.onbeforeunload = changes ? e => 1 : null; @@ -211,7 +241,7 @@ export default class EditorModel extends Model { * @return {this} * @private */ - loadModule(moduleName) { + loadModule(moduleName: any) { const { config } = this; const Module = moduleName.default || moduleName; const Mod = new Module(); @@ -225,7 +255,7 @@ export default class EditorModel extends Model { } if (Mod.storageKey && Mod.store && Mod.load) { - this.get('storables').push(Mod); + this.storables.push(Mod); } cfg.em = this; @@ -233,21 +263,41 @@ export default class EditorModel extends Model { // Bind the module to the editor model if public !Mod.private && this.set(Mod.name, Mod); - Mod.onLoad && this.get('toLoad').push(Mod); - this.get('modules').push(Mod); + Mod.onLoad && this.toLoad.push(Mod); + this.modules.push(Mod); return this; } + /** + * Load generic module + * @param {String} moduleName Module name + * @return {this} + * @private + */ + tsLoadModule(moduleName: any) { + const Module = moduleName.default || moduleName; + const Mod = new Module(this); + + if (Mod.storageKey && Mod.store && Mod.load) { + this.storables.push(Mod); + } + + // Bind the module to the editor model if public + !Mod.private && this.set(Mod.name, Mod); + Mod.onLoad && this.toLoad.push(Mod); + this.modules.push(Mod); + return this; + } /** * Initialize editor model and set editor instance * @param {Editor} editor Editor instance * @return {this} * @public */ - init(editor, opts = {}) { + init(editor: EditorModule, opts = {}) { if (this.destroyed) { this.initialize(opts); - this.destroyed = 0; + this.destroyed = false; } this.set('Editor', editor); } @@ -264,21 +314,21 @@ export default class EditorModel extends Model { * @param {Object} opt Options * @private * */ - handleUpdates(model, val, opt = {}) { + handleUpdates(model: any, val: any, opt: any = {}) { // Component has been added temporarily - do not update storage or record changes if (this.__skip || opt.temporary || opt.noCount || opt.avoidStore || !this.get('ready')) { return; } - timedInterval && clearTimeout(timedInterval); - timedInterval = setTimeout(() => { + this.timedInterval && clearTimeout(this.timedInterval); + this.timedInterval = setTimeout(() => { const curr = this.getDirtyCount() || 0; const { unset, ...opts } = opt; this.set('changesCount', curr + 1, opts); }, 0); } - changesUp(opts) { + changesUp(opts: any) { this.handleUpdates(0, 0, opts); } @@ -289,7 +339,7 @@ export default class EditorModel extends Model { * @param {Object} Options * @private * */ - componentHovered(editor, component, options) { + componentHovered(editor: any, component: any, options: any) { const prev = this.previous('componentHovered'); prev && this.trigger('component:unhovered', prev, options); component && this.trigger('component:hovered', component, options); @@ -309,7 +359,7 @@ export default class EditorModel extends Model { * @return {Array} * @public */ - getSelectedAll() { + getSelectedAll(): any[] { return this.get('selected').allComponents(); } @@ -319,7 +369,7 @@ export default class EditorModel extends Model { * @param {Object} [opts={}] Options, optional * @public */ - setSelected(el, opts = {}) { + setSelected(el: any, opts: any = {}) { const { event } = opts; const ctrlKey = event && (event.ctrlKey || event.metaKey); const { shiftKey } = event || {}; @@ -334,7 +384,7 @@ export default class EditorModel extends Model { multiple && this.removeSelected(selected.filter(s => !contains(els, s))); els.forEach(el => { - let model = getModel(el); + let model = getModel(el, undefined); if (model) { this.trigger('component:select:before', model, opts); @@ -358,7 +408,7 @@ export default class EditorModel extends Model { this.clearSelection(this.get('Canvas').getWindow()); const coll = model.collection; const index = model.index(); - let min, max; + let min: number|undefined, max: number|undefined; // Fin min and max siblings this.getSelectedAll().forEach(sel => { @@ -404,7 +454,7 @@ export default class EditorModel extends Model { * @param {Object} [opts={}] Options, optional * @public */ - addSelected(el, opts = {}) { + addSelected(el: any, opts: any = {}) { const model = getModel(el, $); const models = isArray(model) ? model : [model]; @@ -423,7 +473,7 @@ export default class EditorModel extends Model { * @param {Object} [opts={}] Options, optional * @public */ - removeSelected(el, opts = {}) { + removeSelected(el: any, opts = {}) { this.get('selected').removeComponent(getModel(el, $), opts); } @@ -433,7 +483,7 @@ export default class EditorModel extends Model { * @param {Object} [opts={}] Options, optional * @public */ - toggleSelected(el, opts = {}) { + toggleSelected(el: any, opts = {}) { const model = getModel(el, $); const models = isArray(model) ? model : [model]; @@ -452,11 +502,11 @@ export default class EditorModel extends Model { * @param {Object} [opts={}] Options, optional * @private */ - setHovered(el, opts = {}) { + setHovered(el: any, opts: any = {}) { if (!el) return this.set('componentHovered', ''); const ev = 'component:hover'; - let model = getModel(el); + let model = getModel(el, undefined); if (!model) return; @@ -491,7 +541,7 @@ export default class EditorModel extends Model { * @return {this} * @public */ - setComponents(components, opt = {}) { + setComponents(components: any, opt = {}) { return this.get('DomComponents').setComponents(components, opt); } @@ -517,7 +567,7 @@ export default class EditorModel extends Model { * @return {this} * @public */ - setStyle(style, opt = {}) { + setStyle(style: any, opt = {}) { const cssc = this.get('CssComposer'); cssc.clear(opt); cssc.getAll().add(style, opt); @@ -530,7 +580,7 @@ export default class EditorModel extends Model { * @returns {Array} * @public */ - addStyle(style, opts = {}) { + addStyle(style: any, opts = {}) { const res = this.getStyle().add(style, opts); return isArray(res) ? res : [res]; } @@ -549,7 +599,7 @@ export default class EditorModel extends Model { * @param {String} value State value * @returns {this} */ - setState(value) { + setState(value: string) { this.set('state', value); return this; } @@ -568,7 +618,7 @@ export default class EditorModel extends Model { * @returns {string} HTML string * @public */ - getHtml(opts = {}) { + getHtml(opts: any = {}) { const { config } = this; const { optsHtml } = config; const js = config.jsInHtml ? this.getJs(opts) : ''; @@ -589,7 +639,7 @@ export default class EditorModel extends Model { * @returns {string} CSS string * @public */ - getCss(opts = {}) { + getCss(opts: any = {}) { const config = this.config; const { optsCss } = config; const avoidProt = opts.avoidProtected; @@ -613,7 +663,7 @@ export default class EditorModel extends Model { * @return {string} JS string * @public */ - getJs(opts = {}) { + getJs(opts: any = {}) { var wrp = opts.component || this.get('DomComponents').getWrapper(); return wrp ? this.get('CodeManager').getCode(wrp, 'js').trim() : ''; } @@ -622,7 +672,7 @@ export default class EditorModel extends Model { * Store data to the current storage. * @public */ - async store(options) { + async store(options?: any) { const data = this.storeData(); await this.get('StorageManager').store(data, options); this.clearDirtyCount(); @@ -633,7 +683,7 @@ export default class EditorModel extends Model { * Load data from the current storage. * @public */ - async load(options) { + async load(options?: any) { const result = await this.get('StorageManager').load(options); this.loadData(result); return result; @@ -645,16 +695,15 @@ export default class EditorModel extends Model { const editingCmp = this.getEditing(); editingCmp && editingCmp.trigger('sync:content', { noCount: true }); - this.get('storables').forEach(m => { + this.storables.forEach(m => { result = { ...result, ...m.store(1) }; }); return JSON.parse(JSON.stringify(result)); } loadData(data = {}) { - const storableModules = this.get('storables'); - storableModules.forEach(module => module.clear()); - storableModules.forEach(module => module.load(data)); + this.storables.forEach(module => module.clear()); + this.storables.forEach(module => module.load(data)); return data; } @@ -678,7 +727,7 @@ export default class EditorModel extends Model { if (!command || this.defaultRunning) return; command.stop(this, this, opts); command.run(this, this, opts); - this.defaultRunning = 1; + this.defaultRunning = true; } /** @@ -691,14 +740,14 @@ export default class EditorModel extends Model { const command = commands.get(this.config.defaultCommand); if (!command || !this.defaultRunning) return; command.stop(this, this, opts); - this.defaultRunning = 0; + this.defaultRunning = false; } /** * Update canvas dimensions and refresh data useful for tools positioning * @public */ - refreshCanvas(opts = {}) { + refreshCanvas(opts: any = {}) { this.set('canvasOffset', null); this.set('canvasOffset', this.get('Canvas').getOffset()); opts.tools && this.trigger('canvas:updateTools'); @@ -710,9 +759,9 @@ export default class EditorModel extends Model { * @param {Window} win If not passed the current one will be used * @private */ - clearSelection(win) { + clearSelection(win?: Window) { var w = win || window; - w.getSelection().removeAllRanges(); + w.getSelection()?.removeAllRanges(); } /** @@ -736,11 +785,11 @@ export default class EditorModel extends Model { return this.get('DomComponents').getWrapper(); } - setCurrentFrame(frameView) { + setCurrentFrame(frameView: FrameView) { return this.set('currentFrame', frameView); } - getCurrentFrame() { + getCurrentFrame(): FrameView { return this.get('currentFrame'); } @@ -748,8 +797,8 @@ export default class EditorModel extends Model { return (this.getCurrentFrame() || {}).model; } - getIcon(icon) { - const icons = this.getConfig().icons || {}; + getIcon(icon: string) { + const icons = this.config.icons || {}; return icons[icon] || ''; } @@ -774,11 +823,11 @@ export default class EditorModel extends Model { return this.get('Canvas').getZoomMultiplier(); } - setDragMode(value) { + setDragMode(value: string) { return this.set('dmode', value); } - t(...args) { + t(...args: any[]) { const i18n = this.get('I18n'); return i18n?.t(...args); } @@ -802,15 +851,17 @@ export default class EditorModel extends Model { shallow?.destroyAll(); this.stopListening(); this.stopDefault(); - this.get('modules') + this.modules .slice() .reverse() .forEach(mod => mod.destroy()); view && view.remove(); this.clear({ silent: true }); - this.destroyed = 1; + this.destroyed = true; + //@ts-ignore ['_config', 'view', '_previousAttributes', '_events', '_listeners'].forEach(i => (this[i] = {})); editors.splice(editors.indexOf(editor), 1); + //@ts-ignore hasWin() && $(config.el).empty().attr(this.attrsOrig); } @@ -819,7 +870,7 @@ export default class EditorModel extends Model { return (res && res.model) || null; } - setEditing(value) { + setEditing(value: boolean) { this.set('editing', value); return this; } @@ -828,7 +879,7 @@ export default class EditorModel extends Model { return !!this.get('editing'); } - log(msg, opts = {}) { + log(msg: string, opts: any = {}) { const { ns, level = 'debug' } = opts; this.trigger('log', msg, opts); level && this.trigger(`log:${level}`, msg, opts); @@ -840,24 +891,25 @@ export default class EditorModel extends Model { } } - logInfo(msg, opts) { + logInfo(msg: string, opts?: any) { this.log(msg, { ...opts, level: 'info' }); } - logWarning(msg, opts) { + logWarning(msg:string, opts?: any) { this.log(msg, { ...opts, level: 'warning' }); } - logError(msg, opts) { + logError(msg: string, opts?: any) { this.log(msg, { ...opts, level: 'error' }); } - initBaseColorPicker(el, opts = {}) { - const config = this.getConfig(); + initBaseColorPicker(el: any, opts = {}) { + const { config } = this; const { colorPicker = {} } = config; const elToAppend = config.el; const ppfx = config.stylePrefix; + //@ts-ignore return $(el).spectrum({ containerClassName: `${ppfx}one-bg ${ppfx}two-color`, appendTo: elToAppend || 'body', @@ -877,7 +929,7 @@ export default class EditorModel extends Model { * @param {Function} clb * @private */ - skip(clb) { + skip(clb: Function) { this.__skip = true; const um = this.get('UndoManager'); um ? um.skip(clb) : clb(); @@ -892,7 +944,7 @@ export default class EditorModel extends Model { * @return {any} * @private */ - data(el, name, value) { + data(el: any, name: string, value: any) { const varName = '_gjs-data'; if (!el[varName]) { From 34178f918de42d19aba3a64160033c07e4594d2f Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sun, 17 Apr 2022 12:26:50 +0200 Subject: [PATCH 06/10] Convert EditorView to ts --- src/editor/index.ts | 6 +---- .../view/{EditorView.js => EditorView.ts} | 22 ++++++++++--------- 2 files changed, 13 insertions(+), 15 deletions(-) rename src/editor/view/{EditorView.js => EditorView.ts} (65%) diff --git a/src/editor/index.ts b/src/editor/index.ts index 4350fcc28..f82a71dc3 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -761,11 +761,7 @@ export default class EditorModule implements IBaseModule { */ render() { this.editorView?.remove(); - this.editorView = new EditorView({ - model: this.em, - //@ts-ignore - config: this.config, - }); + this.editorView = new EditorView(this.em); return this.editorView.render().el; } diff --git a/src/editor/view/EditorView.js b/src/editor/view/EditorView.ts similarity index 65% rename from src/editor/view/EditorView.js rename to src/editor/view/EditorView.ts index 409e5147d..ff617f076 100644 --- a/src/editor/view/EditorView.js +++ b/src/editor/view/EditorView.ts @@ -1,12 +1,14 @@ import Backbone from 'backbone'; import { View } from '../../common'; import { appendStyles } from '../../utils/mixins'; +import EditorModel from '../model/Editor'; const $ = Backbone.$; -export default class EditorView extends View { - initialize() { - const { model } = this; +export default class EditorView extends View { + constructor(model: EditorModel) { + super({model}) + //const { model } = this; const { Panels, UndoManager } = model.attributes; model.view = this; model.once('change:ready', () => { @@ -22,15 +24,15 @@ export default class EditorView extends View { render() { const { $el, model } = this; - const { Panels, Canvas, modules } = model.attributes; - const conf = model.getConfig(); - const pfx = conf.stylePrefix; - const contEl = $(conf.el || `body ${conf.container}`); - appendStyles(conf.cssIcons, { unique: 1, prepand: 1 }); + const { Panels, Canvas } = model.attributes; + const { config, modules } = model; + const pfx = config.stylePrefix; + const contEl = $(config.el || `body ${config.container}`); + appendStyles(config.cssIcons, { unique: 1, prepand: 1 }); $el.empty(); - if (conf.width) contEl.css('width', conf.width); - if (conf.height) contEl.css('height', conf.height); + if (config.width) contEl.css('width', config.width); + if (config.height) contEl.css('height', config.height); $el.append(Canvas.render()); $el.append(Panels.render()); From 1e4ec0d542c4d07bc78dff44e27141c159611db0 Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sun, 17 Apr 2022 12:45:43 +0200 Subject: [PATCH 07/10] Convert Selected to ts --- src/editor/model/{Selected.js => Selected.ts} | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) rename src/editor/model/{Selected.js => Selected.ts} (66%) diff --git a/src/editor/model/Selected.js b/src/editor/model/Selected.ts similarity index 66% rename from src/editor/model/Selected.js rename to src/editor/model/Selected.ts index b229df14b..e05e4ef77 100644 --- a/src/editor/model/Selected.js +++ b/src/editor/model/Selected.ts @@ -1,25 +1,26 @@ import { isArray } from 'underscore'; import { Collection, Model } from '../../common'; +import { Component } from '../../dom_components/model/Component'; export class Selectable extends Model {} -export default class Selected extends Collection { - getByComponent(component) { +export default class Selected extends Collection { + getByComponent(component: Component) { return this.filter(s => this.getComponent(s) === component)[0]; } - addComponent(component, opts) { + addComponent(component: Component, opts: any) { const toAdd = (isArray(component) ? component : [component]) .filter(c => !this.hasComponent(c)) - .map(component => ({ component })); + .map(component => new Selectable({ component }))[0]; return this.push(toAdd, opts); } - getComponent(model) { + getComponent(model: Selectable) { return model.get('component'); } - hasComponent(component) { + hasComponent(component: Component) { const model = this.getByComponent(component); return model && this.contains(model); } @@ -33,10 +34,8 @@ export default class Selected extends Collection { return this.map(s => this.getComponent(s)).filter(i => i); } - removeComponent(component, opts) { + removeComponent(component: Component, opts: any) { const toRemove = (isArray(component) ? component : [component]).map(c => this.getByComponent(c)); return this.remove(toRemove, opts); } } - -Selected.prototype.model = Selectable; From 4d0796eefdc01582eb03b810e819d0dd10318d8e Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sun, 17 Apr 2022 13:11:40 +0200 Subject: [PATCH 08/10] Convert Editor Config to ts --- src/editor/config/{config.js => config.ts} | 24 +++++++++++----------- src/editor/index.ts | 1 + src/editor/model/Editor.ts | 6 ++++-- 3 files changed, 17 insertions(+), 14 deletions(-) rename src/editor/config/{config.js => config.ts} (96%) diff --git a/src/editor/config/config.js b/src/editor/config/config.ts similarity index 96% rename from src/editor/config/config.js rename to src/editor/config/config.ts index 158bb6cc3..823b4d863 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.ts @@ -19,7 +19,7 @@ export default { * If true, will fetch HTML and CSS from selected container * @deprecated */ - fromElement: 0, + fromElement: false, /** * Initial project data @@ -95,17 +95,17 @@ export default { defaultCommand: 'select-comp', // Show a toolbar when the component is selected - showToolbar: 1, + showToolbar: true, // Allow script tag importing // @deprecated in favor of `config.parser.optionsHtml.allowScripts` // allowScripts: 0, // If true render a select of available devices - showDevices: 1, + showDevices: true, // When enabled, on device change media rules won't be created - devicePreviewMode: 0, + devicePreviewMode: false, // THe condition to use for media queries, eg. 'max-width' // Comes handy for mobile-first cases @@ -118,16 +118,16 @@ export default { tagVarEnd: ' ]}', // When false, removes empty text nodes when parsed, unless they contain a space - keepEmptyTextNodes: 0, + keepEmptyTextNodes: false, // Return JS of components inside HTML from 'editor.getHtml()' jsInHtml: true, // Enable native HTML5 drag and drop - nativeDnD: 1, + nativeDnD: true, // Enable multiple selection - multipleSelection: 1, + multipleSelection: true, // Pass default available options wherever `editor.getHtml()` is called optsHtml: {}, @@ -140,12 +140,12 @@ export default { // use of media queries (@media) or even pseudo selectors (eg. :hover). // When `avoidInlineStyle` is true all styles are inserted inside the css rule // @deprecated Don't use this option, we don't support inline styling anymore - avoidInlineStyle: 1, + avoidInlineStyle: true, // Avoid default properties from storable JSON data, like `components` and `styles`. // With this option enabled your data will be smaller (usefull if need to // save some storage space) - avoidDefaults: 1, + avoidDefaults: true, // (experimental) // The structure of components is always on the screen but it's not the same @@ -155,7 +155,7 @@ export default { // any case where `CssGenerator.build` is used) will be removed automatically. // But be careful, not always leaving the style not used mean you wouldn't // use it later, but this option comes really handy when deal with big templates. - clearStyles: 0, + clearStyles: false, // Specify the global drag mode of components. By default, components are moved // following the HTML flow. Two other options are available: @@ -250,10 +250,10 @@ export default { textViewCode: 'Code', // Keep unused styles within the editor - keepUnusedStyles: 0, + keepUnusedStyles: false, // TODO - multiFrames: 0, + multiFrames: false, // Experimental: don't use. // Avoid default UI styles diff --git a/src/editor/index.ts b/src/editor/index.ts index f82a71dc3..a99694139 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -211,6 +211,7 @@ export default class EditorModule implements IBaseModule { return this.em.get("DeviceManager"); } + //@deprecated getConfig(){ return this.config } diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index dca5055c6..fb1cdd700 100644 --- a/src/editor/model/Editor.ts +++ b/src/editor/model/Editor.ts @@ -77,8 +77,8 @@ export default class EditorModel extends Model { destroyed = false; _config: any; attrsOrig: any; - timedInterval?: NodeJS.Timeout; - updateItr?: NodeJS.Timeout; +timedInterval?: number; + updateItr?: number; view?: EditorView @@ -224,6 +224,7 @@ 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) { @@ -321,6 +322,7 @@ 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; From d841e312812bb1859d412ce7111ea8533167109a Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sun, 17 Apr 2022 13:15:26 +0200 Subject: [PATCH 09/10] Small change --- src/abstract/Module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts index 04cd8354e..3a1fb20d7 100644 --- a/src/abstract/Module.ts +++ b/src/abstract/Module.ts @@ -1,6 +1,6 @@ import EditorModel from "../editor/model/Editor"; -export interface IModule extends IBaseModule { +export interface IModule extends IBaseModule { init(cfg: any): void; destroy(): void; postLoad(key: any): any; From 2d0653de9f669fdff7a3f16d59bcdc3c0dc2e0dc Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Wed, 20 Apr 2022 23:54:39 +0200 Subject: [PATCH 10/10] Fix requested changes --- src/editor/config/config.ts | 2 +- src/editor/index.ts | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/editor/config/config.ts b/src/editor/config/config.ts index 823b4d863..10dca0b49 100644 --- a/src/editor/config/config.ts +++ b/src/editor/config/config.ts @@ -1,5 +1,5 @@ export default { - name: 'Editor', + // Style prefix stylePrefix: 'gjs-', diff --git a/src/editor/index.ts b/src/editor/index.ts index a99694139..0c04e4041 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -55,6 +55,7 @@ * @module Editor */ import { EventHandler } from 'backbone'; +import { isUndefined } from 'underscore'; import { IBaseModule } from '../abstract/Module'; import cash from '../utils/cash-dom'; import html from '../utils/html'; @@ -212,8 +213,10 @@ export default class EditorModule implements IBaseModule { } //@deprecated - getConfig(){ - return this.config + getConfig(prop?: string) { + const config = this.config; + //@ts-ignore + return isUndefined(prop) ? config : config[prop]; } /**