Convert EditorModel to ts

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 ||

src/editor/model/Editor.js → 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<CssRule>}
    * @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]) {