Up TS

src/asset_manager/view/AssetImageView.ts

@@ -74,7 +74,7 @@ export default class AssetImageView extends AssetView<AssetImage> {
       onDblClick(model);
     } else {
       this.updateTarget(target);
-      em && em.get('Modal').close();
+      em?.Modal.close();
     }
     isFunction(onSelect) && onSelect(model);
   }

src/asset_manager/view/AssetView.ts

@@ -39,8 +39,8 @@ export default class AssetView<TModel extends Asset = Asset> extends View<TModel
 
   __getBhv() {
     const { em } = this;
-    const am = em && em.get('AssetManager');
-    return (am && am.__getBehaviour()) || {};
+    const am = em?.Assets;
+    return am?.__getBehaviour() || {};
   }
 
   template(view: AssetView, asset: Asset) {

src/asset_manager/view/FileUploader.ts

@@ -224,9 +224,8 @@ export default class FileUploaderView extends View {
     const c = this.config;
     const em = ev.model;
     const edEl = ev.el;
-    const editor = em.get('Editor');
-    const container = em.get('Config').el;
-    const frameEl = em.get('Canvas').getBody();
+    const editor = em.Editor;
+    const frameEl = em.Canvas.getBody();
     const ppfx = this.ppfx;
     const updatedCls = `${ppfx}dropzone-active`;
     const dropzoneCls = `${ppfx}dropzone`;

src/block_manager/view/BlocksView.ts

@@ -69,8 +69,8 @@ export default class BlocksView extends View {
     if (!em) return;
 
     if (!this.sorter) {
-      const utils = em.get('Utils');
-      const canvas = em.get('Canvas');
+      const utils = em.Utils;
+      const canvas = em.Canvas;
 
       this.sorter = new utils.Sorter({
         container: canvas.getBody(),

src/canvas/model/Canvas.ts

@@ -37,7 +37,7 @@ export default class Canvas extends Model<CanvasModule> {
 
   init() {
     const { em } = this;
-    const mainPage = em.get('PageManager').getMain();
+    const mainPage = em.Pages.getMain();
     this.set('frames', mainPage.getFrames());
     this.updateDevice({ frame: mainPage.getMainFrame() });
   }

src/canvas/model/Frame.ts

@@ -42,16 +42,16 @@ export default class Frame extends Model<CanvasModule> {
     super(module, attr);
     const { em } = this;
     const { styles, component } = this.attributes;
-    const domc = em.get('DomComponents');
+    const domc = em.Components;
     const conf = domc.getConfig();
-    const allRules = em.get('CssComposer').getAll();
+    const allRules = em.Css.getAll();
     const idMap: any = {};
     const modOpts = { em, config: conf, frame: this, idMap };
 
     if (!isComponent(component)) {
       const wrp = isObject(component) ? component : { components: component };
       !wrp.type && (wrp.type = 'wrapper');
-      const Wrapper = domc.getType('wrapper').model;
+      const Wrapper = domc.getType('wrapper')!.model;
       this.set('component', new Wrapper(wrp, modOpts));
     }
 

src/canvas/view/FrameView.ts

@@ -88,7 +88,7 @@ export default class FrameView extends View<Frame, HTMLIFrameElement> {
   }
 
   getCanvasModel(): Canvas {
-    return this.em.get('Canvas').getModel();
+    return this.em.Canvas.getModel();
   }
 
   getWindow() {
@@ -124,7 +124,7 @@ export default class FrameView extends View<Frame, HTMLIFrameElement> {
   }
 
   getGlobalToolsEl() {
-    return this.em.get('Canvas').getGlobalToolsEl();
+    return this.em.Canvas.getGlobalToolsEl()!;
   }
 
   getHighlighter() {
@@ -202,11 +202,11 @@ export default class FrameView extends View<Frame, HTMLIFrameElement> {
   autoscroll() {
     if (this.dragging) {
       const { lastClientY } = this;
-      const canvas = this.em.get('Canvas');
+      const canvas = this.em.Canvas;
       const win = this.getWindow();
       const actualTop = win.pageYOffset;
       const clientY = lastClientY || 0;
-      const limitTop = canvas.getConfig().autoscrollLimit;
+      const limitTop = canvas.getConfig().autoscrollLimit!;
       const limitBottom = this.getRect().height - limitTop;
       let nextTop = actualTop;
 
@@ -225,7 +225,7 @@ export default class FrameView extends View<Frame, HTMLIFrameElement> {
         nextTop < this.lastMaxHeight
       ) {
         const toolsEl = this.getGlobalToolsEl();
-        toolsEl.style.opacity = 0;
+        toolsEl.style.opacity = '0';
         this.showGlobalTools();
         win.scrollTo(0, nextTop);
       }
@@ -409,7 +409,7 @@ export default class FrameView extends View<Frame, HTMLIFrameElement> {
     </style>`
     );
     const component = model.getComponent();
-    const { view } = em.get('DomComponents').getType('wrapper');
+    const { view } = em.Components.getType('wrapper')!;
     this.wrapper = new view({
       model: component,
       config: {
@@ -425,7 +425,7 @@ export default class FrameView extends View<Frame, HTMLIFrameElement> {
         collection: model.getStyles(),
         //@ts-ignore
         config: {
-          ...em.get('CssComposer').getConfig(),
+          ...em.Css.getConfig(),
           frameView: this,
         },
       }).render().el

src/commands/index.ts

@@ -414,7 +414,7 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
     if (command && command.run) {
       const { em, config } = this;
       const id = command.id as string;
-      const editor = em.get('Editor');
+      const editor = em.Editor;
 
       if (this.isActive(id) || options.force || !config.strict) {
         if (id) delete this.active[id];

src/commands/view/CommandAbstract.ts

@@ -145,7 +145,7 @@ export default class CommandAbstract<O extends AnyObject = any> extends Model {
    * Stop current command
    */
   stopCommand(opts?: any) {
-    this.em.get('Commands').stop(this.id, opts);
+    this.em.Commands.stop(this.id as string, opts);
   }
 
   /**

src/commands/view/Preview.ts

@@ -21,12 +21,12 @@ export default {
     const { em } = this;
     const mthEv = on ? 'on' : 'off';
     if (em) {
-      const canvas = em.get('Canvas');
+      const canvas = em.Canvas;
       const body = canvas.getBody();
       const tlb = canvas.getToolbarEl();
       tlb && (tlb.style.display = on ? 'none' : '');
       const elP = body.querySelectorAll(`.${this.ppfx}no-pointer`);
-      each(elP, item => (item.style.pointerEvents = on ? 'all' : ''));
+      each(elP, item => ((item as HTMLElement).style.pointerEvents = on ? 'all' : ''));
       em[mthEv]('run:tlb-move:before', this.preventDrag);
     }
   },

src/commands/view/SelectPosition.ts

@@ -10,7 +10,7 @@ export default {
    * */
   startSelectPosition(trg: HTMLElement, doc: Document, opts: any = {}) {
     this.isPointed = false;
-    var utils = this.em.get('Utils');
+    const utils = this.em.Utils;
     const container = trg.ownerDocument.body;
 
     if (utils && !this.sorter)

src/css_composer/index.ts

@@ -170,10 +170,10 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
   get(selectors: any, state?: string, width?: string, ruleProps?: Omit<CssRuleProperties, 'selectors'>) {
     let slc = selectors;
     if (isString(selectors)) {
-      const sm = this.em.get('SelectorManager');
+      const sm = this.em.Selectors;
       const singleSel = selectors.split(',')[0].trim();
-      const node = this.em.get('Parser').parserCss.checkNode({ selectors: singleSel })[0];
-      slc = sm.get(node.selectors);
+      const node = this.em.Parser.parserCss.checkNode({ selectors: singleSel } as any)[0];
+      slc = sm.get(node.selectors as string[]);
     }
     return this.rules.find(rule => rule.compare(slc, state, width, ruleProps)) || null;
   }
@@ -273,13 +273,13 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    */
   setRule(selectors: any, style: CssRuleProperties['style'] = {}, opts: RuleOptions = {}) {
     const { atRuleType, atRuleParams } = opts;
-    const node = this.em.get('Parser').parserCss.checkNode({
+    const node = this.em.Parser.parserCss.checkNode({
       selectors,
       style,
     })[0];
     const { state, selectorsAdd } = node;
-    const sm = this.em.get('SelectorManager');
-    const selector = sm.add(node.selectors);
+    const sm = this.em.Selectors;
+    const selector = sm.add(node.selectors as any);
     const rule = this.add(selector, state, atRuleParams, {
       selectorsAdd,
       atRule: atRuleType,
@@ -358,7 +358,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     const { addOpts = {}, mediaText } = opts;
     const state = opts.state || '';
     const media = !isUndefined(mediaText) ? mediaText : this.em.getCurrentMedia();
-    const sm = this.em.get('SelectorManager');
+    const sm = this.em.Selectors;
     const selector = sm.add({ name, type: Selector.TYPE_ID }, addOpts);
     const rule = this.add(selector, state, media, {}, addOpts);
     rule.setStyle(style, { ...opts, ...addOpts });
@@ -420,7 +420,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
   getClassRule(name: string, opts: AnyObject = {}) {
     const state = opts.state || '';
     const media = opts.mediaText || this.em.getCurrentMedia();
-    const selector = this.em.get('SelectorManager').get(name, Selector.TYPE_CLASS);
+    const selector = this.em.Selectors.get(name, Selector.TYPE_CLASS);
     return selector && this.get(selector, state, media);
   }