diff --git a/src/canvas/view/CanvasView.ts b/src/canvas/view/CanvasView.ts index 7a5de9b29..b9ec23c86 100644 --- a/src/canvas/view/CanvasView.ts +++ b/src/canvas/view/CanvasView.ts @@ -137,9 +137,9 @@ export default class CanvasView extends View { 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'); } } diff --git a/src/commands/view/SelectComponent.ts b/src/commands/view/SelectComponent.ts index 662b17d5b..f8a9cbaa0 100644 --- a/src/commands/view/SelectComponent.ts +++ b/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 = ''; diff --git a/src/css_composer/model/CssRules.ts b/src/css_composer/model/CssRules.ts index 67ce5f471..21c33fe10 100644 --- a/src/css_composer/model/CssRules.ts +++ b/src/css_composer/model/CssRules.ts @@ -29,7 +29,7 @@ export default class CssRules extends Collection { onRemove(removed: CssRule) { const em = this.editor; em.stopListening(removed); - em.get('UndoManager').remove(removed); + em.UndoManager.remove(removed); } // @ts-ignore diff --git a/src/css_composer/view/CssRulesView.ts b/src/css_composer/view/CssRulesView.ts index 8ffe530b0..48f3749b0 100644 --- a/src/css_composer/view/CssRulesView.ts +++ b/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) }))); diff --git a/src/dom_components/index.ts b/src/dom_components/index.ts index dc8751e27..2eb0a905c 100644 --- a/src/dom_components/index.ts +++ b/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) { diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index 125772811..714b1b7c8 100644 --- a/src/dom_components/model/Component.ts +++ b/src/dom_components/model/Component.ts @@ -583,7 +583,7 @@ export default class Component extends StyleableModel { 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 { 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 { __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 { 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 } = {}) { diff --git a/src/dom_components/model/Components.ts b/src/dom_components/model/Components.ts index 54501db44..765b35b00 100644 --- a/src/dom_components/model/Components.ts +++ b/src/dom_components/model/Components.ts @@ -166,7 +166,7 @@ export default class Components extends Collection { 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 { // @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); } diff --git a/src/dom_components/view/ComponentImageView.ts b/src/dom_components/view/ComponentImageView.ts index 4a37246e7..b7a03c904 100644 --- a/src/dom_components/view/ComponentImageView.ts +++ b/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', ''); } } diff --git a/src/dom_components/view/ComponentView.ts b/src/dom_components/view/ComponentView.ts index de776962b..a585cedc0 100644 --- a/src/dom_components/view/ComponentView.ts +++ b/src/dom_components/view/ComponentView.ts @@ -145,7 +145,7 @@ export default class ComponentView extends View { 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, }); diff --git a/src/editor/index.ts b/src/editor/index.ts index ecc62f089..192787584 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -299,7 +299,7 @@ export default class EditorModule implements IBaseModule { * }); */ addComponents(components: any, opts?: any): Component[] { - return this.getWrapper().append(components, opts); + return this.getWrapper()!.append(components, opts); } /** diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index 9375d4ef6..6150afe61 100644 --- a/src/editor/model/Editor.ts +++ b/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', { diff --git a/src/keymaps/config.ts b/src/keymaps/config.ts index 402df4b3e..c9bcc77ca 100644 --- a/src/keymaps/config.ts +++ b/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 { diff --git a/src/keymaps/index.ts b/src/keymaps/index.ts index e541811a7..db03f096b 100644 --- a/src/keymaps/index.ts +++ b/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