diff --git a/src/canvas/view/FrameView.ts b/src/canvas/view/FrameView.ts index 899bb9af4..233512f8b 100644 --- a/src/canvas/view/FrameView.ts +++ b/src/canvas/view/FrameView.ts @@ -453,7 +453,9 @@ export default class FrameView extends View { ); 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'); } diff --git a/src/navigator/view/ItemsView.ts b/src/navigator/view/ItemsView.ts index 68ad43110..a240d7a38 100644 --- a/src/navigator/view/ItemsView.ts +++ b/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}`, diff --git a/src/pages/model/Page.ts b/src/pages/model/Page.ts index a2cddf984..2ecbbd525 100644 --- a/src/pages/model/Page.ts +++ b/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()); diff --git a/src/rich_text_editor/index.ts b/src/rich_text_editor/index.ts index 0c4476b44..907e18767 100644 --- a/src/rich_text_editor/index.ts +++ b/src/rich_text_editor/index.ts @@ -278,7 +278,7 @@ export default class RichTextEditorModule extends Module { 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 { inputEl; inputEl[inputProp] = 'true'; inputEl.focus(); - em && em.setEditing(1); + em?.setEditing(true); } /** @@ -77,11 +78,11 @@ export default class ClassTagView extends View { 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); diff --git a/src/selector_manager/view/ClassTagsView.ts b/src/selector_manager/view/ClassTagsView.ts index a082974ae..bd1f40eaa 100644 --- a/src/selector_manager/view/ClassTagsView.ts +++ b/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 { template({ labelInfo, labelHead, iconSync, iconAdd, pfx, ppfx }: any) { @@ -74,10 +75,10 @@ export default class ClassTagsView extends View { 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 { 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 { const ruleComponent = cssC.getIdRule(target.getId(), { state, mediaText, - }); + })!; style = ruleComponent.getStyle(); ruleComponent.setStyle({}); ruleComponents.push(ruleComponent); diff --git a/src/style_manager/model/Property.ts b/src/style_manager/model/Property.ts index 02038b394..d6d85153b 100644 --- a/src/style_manager/model/Property.ts +++ b/src/style_manager/model/Property.ts @@ -151,7 +151,7 @@ export default class Property = 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); diff --git a/src/style_manager/model/PropertyStack.ts b/src/style_manager/model/PropertyStack.ts index 06ddb0af2..9a301a6b3 100644 --- a/src/style_manager/model/PropertyStack.ts +++ b/src/style_manager/model/PropertyStack.ts @@ -369,7 +369,7 @@ export default class PropertyStack extends PropertyComposite } __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(); diff --git a/src/style_manager/view/LayersView.ts b/src/style_manager/view/LayersView.ts index 06081ae9f..bdca5acbf 100644 --- a/src/style_manager/view/LayersView.ts +++ b/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 { 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 { this.items = []; // For the Sorter - const utils = em ? em.get('Utils') : ''; + const utils = em?.Utils; this.sorter = utils ? new utils.Sorter({ container: this.el, diff --git a/src/trait_manager/model/Traits.ts b/src/trait_manager/model/Traits.ts index 7af932595..58a4ef99a 100644 --- a/src/trait_manager/model/Traits.ts +++ b/src/trait_manager/model/Traits.ts @@ -39,7 +39,7 @@ export default class Traits extends Collection { // 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); diff --git a/src/trait_manager/view/TraitButtonView.ts b/src/trait_manager/view/TraitButtonView.ts index 44b8f95e2..b6fcf0345 100644 --- a/src/trait_manager/view/TraitButtonView.ts +++ b/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); } } } diff --git a/src/utils/Droppable.ts b/src/utils/Droppable.ts index fb8ffa4ab..abaa8a2fc 100644 --- a/src/utils/Droppable.ts +++ b/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, diff --git a/src/utils/mixins.ts b/src/utils/mixins.ts index 4b0621bc4..b521996b2 100644 --- a/src/utils/mixins.ts +++ b/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); }; /**