Convert EditorModulue to ts

4 years ago · f112045d15
3 changed files with 193 additions and 106 deletions
--- 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<TModel, TElement> {
  protected get pfx() {
-    return this.model.module.em.config.stylePrefix || "";
+    return (this.model.module.em.config as any).stylePrefix || "";
  }

  protected get ppfx() {
--- a/src/editor/index.ts
+++ 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<CssRule>} 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);
  }

--- 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>|Object|string} style CSS string or style model
   * @returns {Array<CssRule>}
-   * @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);