Up TS

src/canvas/view/FrameView.ts

@@ -453,7 +453,9 @@ export default class FrameView extends View<Frame, HTMLIFrameElement> {
     );
 
     this._toggleEffects(true);
-    this.droppable = hasDnd(em) && new Droppable(em, this.wrapper?.el);
+    if (hasDnd(em)) {
+      this.droppable = new Droppable(em, this.wrapper?.el);
+    }
     model.trigger('loaded');
   }
 

src/navigator/view/ItemsView.ts

@@ -1,5 +1,6 @@
 import { View } from '../../common';
 import Component, { eventDrag } from '../../dom_components/model/Component';
+import EditorModel from '../../editor/model/Editor';
 import ItemView from './ItemView';
 
 export default class ItemsView extends View {
@@ -22,10 +23,10 @@ export default class ItemsView extends View {
     this.listenTo(coll, 'reset resetNavigator', this.render);
     this.listenTo(coll, 'remove', this.removeChildren);
     this.className = `${pfx}layers`;
-    const em = config.em;
+    const em = config.em as EditorModel;
 
     if (config.sortable && !this.opt.sorter) {
-      const utils = em.get('Utils');
+      const utils = em.Utils;
       this.opt.sorter = new utils.Sorter({
         container: config.sortContainer || this.el,
         containerSel: `.${this.className}`,

src/pages/model/Page.ts

@@ -3,6 +3,7 @@ import { Model } from '../../common';
 import Frames from '../../canvas/model/Frames';
 import Frame from '../../canvas/model/Frame';
 import EditorModel from '../../editor/model/Editor';
+import { PageManagerConfig } from '..';
 
 export default class Page extends Model {
   defaults() {
@@ -13,18 +14,18 @@ export default class Page extends Model {
   }
   em: EditorModel;
 
-  constructor(props: any, opts: any = {}) {
+  constructor(props: any, opts: { em?: EditorModel; config?: PageManagerConfig } = {}) {
     super(props, opts);
     const { em } = opts;
     const defFrame: any = {};
-    this.em = em;
+    this.em = em!;
     if (!props.frames) {
       defFrame.component = props.component;
       defFrame.styles = props.styles;
       ['component', 'styles'].map(i => this.unset(i));
     }
     const frms: any[] = props.frames || [defFrame];
-    const frames = new Frames(em.get('Canvas'), frms);
+    const frames = new Frames(em!.Canvas, frms);
     frames.page = this;
     this.set('frames', frames);
     !this.getId() && this.set('id', em?.get('PageManager')._createId());

src/rich_text_editor/index.ts

@@ -278,7 +278,7 @@ export default class RichTextEditorModule extends Module<RichTextEditorConfig &
   updatePosition() {
     const { em, toolbar } = this;
     const un = 'px';
-    const canvas = em.get('Canvas');
+    const canvas = em.Canvas;
     const { style } = toolbar;
     const pos = canvas.getTargetToElementFixed(this.lastEl, toolbar, {
       event: 'rteToolbarPosUpdate',

src/selector_manager/view/ClassTagView.ts

@@ -1,6 +1,7 @@
 import { View } from '../../common';
 import State from '../model/State';
 import html from '../../utils/html';
+import EditorModel from '../../editor/model/Editor';
 
 const inputProp = 'contentEditable';
 
@@ -29,7 +30,7 @@ export default class ClassTagView extends View<State> {
   coll: any;
   pfx: any;
   ppfx: any;
-  em: any;
+  em: EditorModel;
   inputEl?: HTMLElement;
 
   constructor(o: any = {}) {
@@ -66,7 +67,7 @@ export default class ClassTagView extends View<State> {
     inputEl;
     inputEl[inputProp] = 'true';
     inputEl.focus();
-    em && em.setEditing(1);
+    em?.setEditing(true);
   }
 
   /**
@@ -77,11 +78,11 @@ export default class ClassTagView extends View<State> {
   endEditTag() {
     const model = this.model;
     const inputEl = this.getInputEl();
-    const label = inputEl.textContent;
+    const label = inputEl.textContent || '';
     const em = this.em;
-    const sm = em && em.get('SelectorManager');
+    const sm = em?.Selectors;
     inputEl[inputProp] = 'false';
-    em && em.setEditing(0);
+    em?.setEditing(false);
 
     if (sm) {
       const name = sm.escapeName(label);

src/selector_manager/view/ClassTagsView.ts

@@ -8,6 +8,7 @@ import State from '../model/State';
 import Component from '../../dom_components/model/Component';
 import Selector from '../model/Selector';
 import Selectors from '../model/Selectors';
+import CssRule from '../../css_composer/model/CssRule';
 
 export default class ClassTagsView extends View<Selector> {
   template({ labelInfo, labelHead, iconSync, iconAdd, pfx, ppfx }: any) {
@@ -74,10 +75,10 @@ export default class ClassTagsView extends View<Selector> {
     this.stateInputId = this.pfx + 'states';
     this.stateInputC = this.pfx + 'input-c';
     this.states = this.config.states || [];
-    const { em } = this.config;
+    const em = this.config.em as EditorModel;
     const coll = this.collection;
     this.target = em;
-    const md = em.get('SelectorManager');
+    const md = em.Selectors;
     this.module = md;
     this.em = em;
     this.componentChanged = debounce(this.componentChanged.bind(this), 0);
@@ -102,12 +103,12 @@ export default class ClassTagsView extends View<Selector> {
   syncStyle() {
     const { em } = this;
     const target = this.getTarget();
-    const cssC = em.get('CssComposer');
+    const cssC = em.Css;
     const opts = { noDisabled: 1 };
     const selectors = this.getCommonSelectors({ opts });
     const state = em.get('state');
     const mediaText = em.getCurrentMedia();
-    const ruleComponents: CSSRule[] = [];
+    const ruleComponents: CssRule[] = [];
     const rule = cssC.get(selectors, state, mediaText) || cssC.add(selectors, state, mediaText);
     let style;
 
@@ -115,7 +116,7 @@ export default class ClassTagsView extends View<Selector> {
       const ruleComponent = cssC.getIdRule(target.getId(), {
         state,
         mediaText,
-      });
+      })!;
       style = ruleComponent.getStyle();
       ruleComponent.setStyle({});
       ruleComponents.push(ruleComponent);

src/style_manager/model/Property.ts

@@ -151,7 +151,7 @@ export default class Property<T extends Record<string, any> = PropertyProps> ext
 
   __upTargets(p: this, opts: any = {}) {
     const { em } = this;
-    const sm = em.get('StyleManager');
+    const sm = em.Styles;
     const name = this.getName();
     const isClear = opts.__clear;
     const value = isClear ? '' : this.__getFullValue(opts);

src/style_manager/model/PropertyStack.ts

@@ -369,7 +369,7 @@ export default class PropertyStack extends PropertyComposite<PropertyStackProps>
   }
 
   __upSelected({ noEvent }: { noEvent?: boolean } = {}, opts: OptionsUpdate = {}) {
-    const sm = this.em.get('StyleManager');
+    const sm = this.em.Styles;
     const selected = this.getSelectedLayer();
     const values = selected?.getValues();
 

src/style_manager/view/LayersView.ts

@@ -1,4 +1,5 @@
 import { View } from '../../common';
+import EditorModel from '../../editor/model/Editor';
 import Layer from '../model/Layer';
 import LayerView from './LayerView';
 import PropertyStackView from './PropertyStackView';
@@ -15,7 +16,7 @@ export default class LayersView extends View<Layer> {
     super(o);
     const coll = this.collection;
     const config = o.config || {};
-    const em = config.em;
+    const em = config.em as EditorModel;
     const pfx = config.stylePrefix || '';
     const ppfx = config.pStylePrefix || '';
     this.config = config;
@@ -28,7 +29,7 @@ export default class LayersView extends View<Layer> {
     this.items = [];
 
     // For the Sorter
-    const utils = em ? em.get('Utils') : '';
+    const utils = em?.Utils;
     this.sorter = utils
       ? new utils.Sorter({
           container: this.el,

src/trait_manager/model/Traits.ts

@@ -39,7 +39,7 @@ export default class Traits extends Collection<Trait> {
 
     // Use TraitFactory if necessary
     if (isString(models) || isArray(models)) {
-      const tm = em && em.get && em.get('TraitManager');
+      const tm = em && em.get! && em.Traits;
       const tmOpts = tm && tm.getConfig();
       const tf = TraitFactory(tmOpts);
 

src/trait_manager/view/TraitButtonView.ts

@@ -16,9 +16,9 @@ export default class TraitButtonView extends TraitView {
 
     if (command) {
       if (isString(command)) {
-        em.get('Commands').run(command);
+        em.Commands.run(command);
       } else {
-        command(em.get('Editor'), model);
+        command(em.Editor, model);
       }
     }
   }

src/utils/Droppable.ts

@@ -29,7 +29,7 @@ export default class Droppable {
 
   constructor(em: EditorModel, rootEl?: HTMLElement) {
     this.em = em;
-    this.canvas = em.get('Canvas');
+    this.canvas = em.Canvas;
     const el = rootEl || this.canvas.getFrames().map(frame => frame.getComponent().getEl()!);
     const els = Array.isArray(el) ? el : [el];
     this.el = els[0];
@@ -105,7 +105,7 @@ export default class Droppable {
     this.updateCounter(1, ev);
     if (this.over) return;
     this.over = true;
-    const utils = em.get('Utils');
+    const utils = em.Utils;
     // For security reason I can't read the drag data on dragenter, but
     // as I need it for the Sorter context I will use `dragContent` or just
     // any not empty element
@@ -116,9 +116,9 @@ export default class Droppable {
 
     // Select the right drag provider
     if (em.inAbsoluteMode()) {
-      const wrapper = em.get('DomComponents').getWrapper();
+      const wrapper = em.Components.getWrapper()!;
       const target = wrapper.append({})[0];
-      const dragger = em.get('Commands').run('core:component-drag', {
+      const dragger = em.Commands.run('core:component-drag', {
         event: ev,
         guidesInfo: 1,
         center: 1,

src/utils/mixins.ts

@@ -138,8 +138,8 @@ const normalizeFloat = (value: any, step = 1, valueDef = 0) => {
   return stepDecimals ? parseFloat(value.toFixed(stepDecimals)) : value;
 };
 
-const hasDnd = (em: any) => {
-  return 'draggable' in document.createElement('i') && (em ? em.get('Config').nativeDnD : 1);
+const hasDnd = (em: EditorModel) => {
+  return 'draggable' in document.createElement('i') && (em ? em.config.nativeDnD! : true);
 };
 
 /**