TS updates

src/canvas/view/CanvasView.ts

@@ -137,9 +137,9 @@ export default class CanvasView extends View<Canvas> {
     const { em } = this;
     const key = getKeyChar(ev);
 
-    if (key === ' ' && em.getZoomDecimal() !== 1 && !em.get('Canvas').isInputFocused()) {
+    if (key === ' ' && em.getZoomDecimal() !== 1 && !em.Canvas.isInputFocused()) {
       this.preventDefault(ev);
-      em.get('Editor').runCommand('core:canvas-move');
+      em.Editor.runCommand('core:canvas-move');
     }
   }
 

src/commands/view/SelectComponent.ts

@@ -368,8 +368,8 @@ export default {
    */
   initResize(elem: HTMLElement) {
     const { em, canvas } = this;
-    const editor = em ? em.get('Editor') : '';
-    const config = em ? em.get('Config') : '';
+    const editor = em?.Editor;
+    const config = em?.config;
     const pfx = config.stylePrefix || '';
     const resizeClass = `${pfx}resizing`;
     const model = !isElement(elem) && isTaggableNode(elem) ? elem : em.getSelected();
@@ -395,7 +395,7 @@ export default {
           const { el, config, resizer } = opts;
           const { keyHeight, keyWidth, currentUnit, keepAutoHeight, keepAutoWidth } = config;
           toggleBodyClass('add', e, opts);
-          modelToStyle = em.get('StyleManager').getModelToStyle(model);
+          modelToStyle = em.Styles.getModelToStyle(model);
           canvas.toggleFramesEvents(false);
           const computedStyle = getComputedStyle(el);
           const modelStyle = modelToStyle.getStyle();
@@ -484,7 +484,7 @@ export default {
     const toolbarEl = this.canvas.getToolbarEl()!;
     const toolbarStyle = toolbarEl.style;
     const toolbar = model.get('toolbar');
-    const showToolbar = em.get('Config').showToolbar;
+    const showToolbar = em.config.showToolbar;
 
     if (model && showToolbar && toolbar && toolbar.length) {
       toolbarStyle.display = '';

src/css_composer/model/CssRules.ts

@@ -29,7 +29,7 @@ export default class CssRules extends Collection<CssRule> {
   onRemove(removed: CssRule) {
     const em = this.editor;
     em.stopListening(removed);
-    em.get('UndoManager').remove(removed);
+    em.UndoManager.remove(removed);
   }
 
   // @ts-ignore

src/css_composer/view/CssRulesView.ts

@@ -138,7 +138,7 @@ export default class CssRulesView extends View {
     $el.empty();
 
     // Create devices related DOM structure, ensure also to have a default container
-    const prs = em.get('DeviceManager').getAll().pluck('priority').sort(this.sortRules) as number[];
+    const prs = em.Devices.getAll().pluck('priority').sort(this.sortRules) as number[];
     prs.every(pr => pr) && prs.unshift(0);
     prs.forEach(pr => frag.appendChild(createEl('div', { id: getBlockId(cls, pr) })));
 

src/dom_components/index.ts

@@ -249,8 +249,8 @@ export default class ComponentManager extends ItemManagerModule {
 
     // Load dependencies
     if (em) {
-      this.config.modal = em.get('Modal') || '';
-      this.config.am = em.get('AssetManager') || '';
+      this.config.modal = em.Modal || '';
+      this.config.am = em.Assets || '';
       em.get('Parser').compTypes = this.componentTypes;
       em.on('change:componentHovered', this.componentHovered, this);
 
@@ -265,11 +265,11 @@ export default class ComponentManager extends ItemManagerModule {
   load(data: any) {
     return this.loadProjectData(data, {
       onResult: (result: Component) => {
-        let wrapper = this.getWrapper();
+        let wrapper = this.getWrapper()!;
 
         if (!wrapper) {
-          this.em.get('PageManager').add({}, { select: true });
-          wrapper = this.getWrapper();
+          this.em.Pages.add({}, { select: true });
+          wrapper = this.getWrapper()!;
         }
 
         if (isArray(result)) {
@@ -293,10 +293,10 @@ export default class ComponentManager extends ItemManagerModule {
    * @return {Object}
    * @private
    */
-  getComponent(): Component {
-    const sel = this.em.get('PageManager').getSelected();
-    const frame = sel && sel.getMainFrame();
-    return frame && frame.getComponent();
+  getComponent() {
+    const sel = this.em.Pages.getSelected();
+    const frame = sel?.getMainFrame();
+    return frame?.getComponent();
   }
 
   /**
@@ -574,7 +574,7 @@ export default class ComponentManager extends ItemManagerModule {
     if (!shallow && em) {
       const shallowEm = em.shallow;
       if (!shallowEm) return;
-      const domc = shallowEm.get('DomComponents');
+      const domc = shallowEm.Components;
       domc.componentTypes = this.componentTypes;
       shallow = domc.getWrapper();
       if (shallow) {

src/dom_components/model/Component.ts

@@ -583,7 +583,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
       prop = isString(prop) ? this.parseStyle(prop) : prop;
       prop = { ...prop, ...style };
       const state = em.get('state');
-      const cc = em.get('CssComposer');
+      const cc = em.Css;
       const propOrig = this.getStyle(opts);
       this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });
       const diff = shallowDiff(propOrig, prop);
@@ -605,7 +605,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
     const { em } = this;
     const classes: string[] = [];
     const attributes = { ...this.get('attributes') };
-    const sm = em && em.get('SelectorManager');
+    const sm = em?.Selectors;
     const id = this.getId();
 
     // Add classes
@@ -753,7 +753,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
 
   __getAllById() {
     const { em } = this;
-    return em ? em.get('DomComponents').allById() : {};
+    return em ? em.Components.allById() : {};
   }
 
   __getSymbol(): Component | undefined {
@@ -1900,24 +1900,24 @@ export default class Component extends StyleableModel<ComponentProperties> {
   resetId(opts = {}) {
     const { em } = this;
     const oldId = this.getId();
-    if (!oldId) return;
+    if (!oldId) return this;
     const newId = Component.createId(this);
     this.setId(newId);
-    const rule = em && em.get('CssComposer').getIdRule(oldId);
-    const selector = rule && rule.get('selectors').at(0);
-    selector && selector.set('name', newId);
+    const rule = em?.Css.getIdRule(oldId);
+    const selector = rule?.get('selectors')!.at(0);
+    selector?.set('name', newId);
     return this;
   }
 
   _getStyleRule({ id }: { id?: string } = {}) {
     const { em } = this;
     const idS = id || this.getId();
-    return em && em.get('CssComposer').getIdRule(idS);
+    return em?.Css.getIdRule(idS);
   }
 
   _getStyleSelector(opts?: { id?: string }) {
     const rule = this._getStyleRule(opts);
-    return rule && rule.get('selectors').at(0);
+    return rule?.get('selectors')!.at(0);
   }
 
   _idUpdated(m: any, v: any, opts: { idUpdate?: boolean } = {}) {

src/dom_components/model/Components.ts

@@ -166,7 +166,7 @@ export default class Components extends Collection<Component> {
       sels.remove(rulesRemoved.map(rule => rule.getSelectors().at(0)));
 
       if (!removed.opt.temporary) {
-        em.get('Commands').run('core:component-style-clear', {
+        em.Commands.run('core:component-style-clear', {
           target: removed,
         });
         removed.removed();
@@ -326,7 +326,7 @@ export default class Components extends Collection<Component> {
     // @ts-ignore
     if (!isEmpty(style) && !avoidInline && em && em.get && em.getConfig().forceClass && !opts.temporary) {
       const name = model.cid;
-      const rule = em.get('CssComposer').setClassRule(name, style);
+      em.Css.setClassRule(name, style);
       model.setStyle({});
       model.addClass(name);
     }

src/dom_components/view/ComponentImageView.ts

@@ -38,12 +38,18 @@ export default class ComponentImageView extends ComponentView {
     const file = model.get('file');
 
     if (file && em) {
-      const fu = em.get('AssetManager').FileUploader();
-      fu?.uploadFile({ dataTransfer: { files: [file] } }, (res: any) => {
-        const obj = res && res.data && res.data[0];
-        const src = obj && (isString(obj) ? obj : obj.src);
-        src && model.set({ src });
-      });
+      const fu = em.Assets.FileUploader();
+      fu?.uploadFile(
+        {
+          // @ts-ignore
+          dataTransfer: { files: [file] },
+        },
+        (res: any) => {
+          const obj = res && res.data && res.data[0];
+          const src = obj && (isString(obj) ? obj : obj.src);
+          src && model.set({ src });
+        }
+      );
       model.set('file', '');
     }
   }

src/dom_components/view/ComponentView.ts

@@ -145,7 +145,7 @@ export default class ComponentView extends View<Component> {
     if (!this.__isDraggable()) return false;
     event.stopPropagation();
     event.preventDefault();
-    this.em.get('Commands').run('tlb-move', {
+    this.em.Commands.run('tlb-move', {
       target: this.model,
       event,
     });

src/editor/index.ts

@@ -299,7 +299,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
    * });
    */
   addComponents(components: any, opts?: any): Component[] {
-    return this.getWrapper().append(components, opts);
+    return this.getWrapper()!.append(components, opts);
   }
 
   /**

src/editor/model/Editor.ts

@@ -799,7 +799,7 @@ export default class EditorModel extends Model {
     const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) ? opts.keepUnusedStyles : config.keepUnusedStyles;
     const cssc = this.get('CssComposer');
     const wrp = opts.component || this.Components.getComponent();
-    const protCss = !avoidProt ? config.protectedCss : '';
+    const protCss = !avoidProt ? config.protectedCss! : '';
     const css =
       wrp &&
       this.CodeManager.getCode(wrp, 'css', {

src/keymaps/config.ts

@@ -1,9 +1,9 @@
-import EditorModule from '../editor';
+import { CommandFunction } from '../commands/view/CommandAbstract';
 
 export interface Keymap {
   id: string;
   keys: string;
-  handler: string | ((editor: EditorModule) => any);
+  handler: string | CommandFunction;
 }
 
 export interface KeymapOptions {

src/keymaps/index.ts

@@ -43,7 +43,7 @@
  * @module Keymaps
  */
 
-import { isString } from 'underscore';
+import { isFunction, isString } from 'underscore';
 import { hasWin, isObject } from '../utils/mixins';
 import keymaster from '../utils/keymaster';
 import { Module } from '../abstract';
@@ -100,7 +100,7 @@ export default class KeymapsModule extends Module<KeymapsConfig & { name?: strin
    */
   add(id: Keymap['id'], keys: Keymap['keys'], handler: Keymap['handler'], opts: KeymapOptions = {}) {
     const { em } = this;
-    const cmd = em.get('Commands');
+    const cmd = em.Commands;
     const editor = em.getEditor();
     const canvas = em.Canvas;
     const keymap: Keymap = { id, keys, handler };
@@ -116,7 +116,7 @@ export default class KeymapsModule extends Module<KeymapsConfig & { name?: strin
         const ableTorun = !em.isEditing() && !editor.Canvas.isInputFocused();
         if (ableTorun || opts.force) {
           opts.prevent && canvas.getCanvasView().preventDefault(e);
-          isObject(handlerRes) ? cmd.runCommand(handlerRes, opt) : handlerRes(editor, 0, opt);
+          isFunction(handlerRes) ? handlerRes(editor, 0, opt) : cmd.runCommand(handlerRes, opt);
           const args = [id, h.shortcut, e];
           em.trigger('keymap:emit', ...args);
           em.trigger(`keymap:emit:${id}`, ...args);