diff --git a/src/abstract/ModuleModel.ts b/src/abstract/ModuleModel.ts index 530a1cea4..b06816bfe 100644 --- a/src/abstract/ModuleModel.ts +++ b/src/abstract/ModuleModel.ts @@ -1,5 +1,4 @@ -import Backbone from 'backbone'; -import { Model, ObjectHash, SetOptions } from '../common'; +import { Model, ObjectHash, SetOptions, CombinedModelConstructorOptions } from '../common'; import EditorModel from '../editor/model/Editor'; import Module, { IBaseModule } from './Module'; @@ -11,7 +10,7 @@ export default class ModuleModel< > extends Model { private _module: TModule; - constructor(module: TModule, attributes?: T, options?: Backbone.CombinedModelConstructorOptions) { + constructor(module: TModule, attributes?: T, options?: CombinedModelConstructorOptions) { super(attributes, options); this._module = module; } diff --git a/src/asset_manager/view/AssetView.ts b/src/asset_manager/view/AssetView.ts index 307c26b02..336fef189 100644 --- a/src/asset_manager/view/AssetView.ts +++ b/src/asset_manager/view/AssetView.ts @@ -1,11 +1,11 @@ -import { View } from '../../common'; +import { View, ViewOptions } from '../../common'; import Asset from '../model/Asset'; import Assets from '../model/Assets'; import { AssetManagerConfig } from '../config/config'; import { clone } from 'underscore'; import EditorModel from '../../editor/model/Editor'; -export type AssetViewProps = Backbone.ViewOptions & { +export type AssetViewProps = ViewOptions & { collection: Assets; config: AssetManagerConfig; }; diff --git a/src/commands/view/DeleteComponent.ts b/src/commands/view/DeleteComponent.ts index 0565107f7..3497fa92b 100644 --- a/src/commands/view/DeleteComponent.ts +++ b/src/commands/view/DeleteComponent.ts @@ -1,10 +1,8 @@ -import { extend, bindAll } from 'underscore'; -import Backbone from 'backbone'; -import SelectComponent from './SelectComponent'; -import { CommandObject } from './CommandAbstract'; +import { bindAll, extend } from 'underscore'; +import { $ } from '../../common'; import Component from '../../dom_components/model/Component'; - -const $ = Backbone.$; +import { CommandObject } from './CommandAbstract'; +import SelectComponent from './SelectComponent'; export default extend({}, SelectComponent, { init() { diff --git a/src/commands/view/ExportTemplate.ts b/src/commands/view/ExportTemplate.ts index 2957552f4..42bf2aad2 100644 --- a/src/commands/view/ExportTemplate.ts +++ b/src/commands/view/ExportTemplate.ts @@ -1,6 +1,5 @@ -import Backbone from 'backbone'; import { CommandObject } from './CommandAbstract'; -const $ = Backbone.$; +import { $ } from '../../common'; export default { run(editor, sender) { diff --git a/src/commands/view/MoveComponent.ts b/src/commands/view/MoveComponent.ts index 7791a77eb..67a4d2b02 100644 --- a/src/commands/view/MoveComponent.ts +++ b/src/commands/view/MoveComponent.ts @@ -1,13 +1,11 @@ import { extend, bindAll } from 'underscore'; -import Backbone from 'backbone'; +import { $ } from '../../common'; import { on, off } from '../../utils/mixins'; import SelectComponent from './SelectComponent'; import SelectPosition from './SelectPosition'; import { CommandObject } from './CommandAbstract'; import Component from '../../dom_components/model/Component'; -const $ = Backbone.$; - export default extend({}, SelectPosition, SelectComponent, { init(o: any) { SelectComponent.init.apply(this, arguments); diff --git a/src/commands/view/OpenStyleManager.ts b/src/commands/view/OpenStyleManager.ts index c09cc2e90..767b653ab 100644 --- a/src/commands/view/OpenStyleManager.ts +++ b/src/commands/view/OpenStyleManager.ts @@ -1,6 +1,5 @@ -import Backbone from 'backbone'; +import { $ } from '../../common'; import { CommandObject } from './CommandAbstract'; -const $ = Backbone.$; export default { run(editor, sender) { diff --git a/src/commands/view/OpenTraitManager.ts b/src/commands/view/OpenTraitManager.ts index 053d5762d..148fada66 100644 --- a/src/commands/view/OpenTraitManager.ts +++ b/src/commands/view/OpenTraitManager.ts @@ -1,7 +1,5 @@ -import Backbone from 'backbone'; import { CommandObject } from './CommandAbstract'; - -const $ = Backbone.$; +import { $ } from '../../common'; export default { run(editor, sender) { diff --git a/src/commands/view/SelectComponent.ts b/src/commands/view/SelectComponent.ts index f8a9cbaa0..5edc75d03 100644 --- a/src/commands/view/SelectComponent.ts +++ b/src/commands/view/SelectComponent.ts @@ -1,13 +1,12 @@ -import Backbone from 'backbone'; -import { bindAll, isElement, debounce } from 'underscore'; -import { on, off, getUnitFromValue, isTaggableNode, getViewEl, hasWin } from '../../utils/mixins'; -import { isVisible, isDoc } from '../../utils/dom'; -import ToolbarView from '../../dom_components/view/ToolbarView'; +import { bindAll, debounce, isElement } from 'underscore'; +import { $ } from '../../common'; +import Component from '../../dom_components/model/Component'; import Toolbar from '../../dom_components/model/Toolbar'; +import ToolbarView from '../../dom_components/view/ToolbarView'; +import { isDoc, isVisible } from '../../utils/dom'; +import { getUnitFromValue, getViewEl, hasWin, isTaggableNode, off, on } from '../../utils/mixins'; import { CommandObject } from './CommandAbstract'; -import Component from '../../dom_components/model/Component'; -const $ = Backbone.$; let showOffsets: boolean; /** * This command is responsible for show selecting components and displaying diff --git a/src/commands/view/SelectPosition.ts b/src/commands/view/SelectPosition.ts index 387c2a799..9c0c68906 100644 --- a/src/commands/view/SelectPosition.ts +++ b/src/commands/view/SelectPosition.ts @@ -1,6 +1,5 @@ -import Backbone from 'backbone'; +import { $ } from '../../common'; import { CommandObject } from './CommandAbstract'; -const $ = Backbone.$; export default { /** diff --git a/src/commands/view/ShowOffset.ts b/src/commands/view/ShowOffset.ts index 79ef7f911..d26089865 100644 --- a/src/commands/view/ShowOffset.ts +++ b/src/commands/view/ShowOffset.ts @@ -1,8 +1,7 @@ -import Backbone from 'backbone'; import { isUndefined } from 'underscore'; +import { $ } from '../../common'; import { isTextNode } from '../../utils/mixins'; import { CommandObject } from './CommandAbstract'; -const $ = Backbone.$; export default { getOffsetMethod(state: string) { diff --git a/src/common/index.ts b/src/common/index.ts index 57467b2de..b5ac979e5 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -1,4 +1,5 @@ import Backbone from 'backbone'; +export { default as $ } from '../utils/cash-dom'; export type Debounced = Function & { cancel(): void }; @@ -21,6 +22,14 @@ export type Position = { y: number; }; +export type CombinedModelConstructorOptions< + E, + M extends Model = Model +> = Backbone.ModelConstructorOptions & E; + +export interface ViewOptions + extends Backbone.ViewOptions {} + export class Model extends Backbone.Model {} export class Collection extends Backbone.Collection {} diff --git a/src/dom_components/model/Components.ts b/src/dom_components/model/Components.ts index 1fd1fd8a4..e35e7a7e8 100644 --- a/src/dom_components/model/Components.ts +++ b/src/dom_components/model/Components.ts @@ -1,12 +1,11 @@ -import Backbone from 'backbone'; -import { isEmpty, isArray, isString, isFunction, each, includes, extend, flatten, debounce, keys } from 'underscore'; +import { isEmpty, isArray, isString, isFunction, each, includes, extend, flatten, keys } from 'underscore'; import Component from './Component'; import { AddOptions, Collection, ObjectAny } from '../../common'; import { DomComponentsConfig } from '../config/config'; import EditorModel from '../../editor/model/Editor'; import ComponentManager from '..'; import CssRule from '../../css_composer/model/CssRule'; -import { ComponentAdd, ComponentDefinitionDefined, ComponentProperties } from './types'; +import { ComponentAdd, ComponentProperties } from './types'; export const getComponentIds = (cmp?: Component | Component[] | Components, res: string[] = []) => { if (!cmp) return []; @@ -258,7 +257,7 @@ Component> { // @ts-ignore models = isMult ? flatten(models as any, 1) : models[0]; - const result = Backbone.Collection.prototype.add.apply(this, [models as any, opt]); + const result = Collection.prototype.add.apply(this, [models as any, opt]); this.__firstAdd = result; return result; } diff --git a/src/domain_abstract/ui/Input.ts b/src/domain_abstract/ui/Input.ts index c53cee395..6afb2b1a9 100644 --- a/src/domain_abstract/ui/Input.ts +++ b/src/domain_abstract/ui/Input.ts @@ -1,9 +1,6 @@ -import Backbone from 'backbone'; -import { View } from '../../common'; +import { View, $ } from '../../common'; import EditorModel from '../../editor/model/Editor'; -const $ = Backbone.$; - export default class Input extends View { ppfx!: string; em!: EditorModel; diff --git a/src/domain_abstract/ui/InputColor.ts b/src/domain_abstract/ui/InputColor.ts index 644108354..75b9ce8fc 100644 --- a/src/domain_abstract/ui/InputColor.ts +++ b/src/domain_abstract/ui/InputColor.ts @@ -1,9 +1,8 @@ -import Backbone from 'backbone'; import { isUndefined } from 'underscore'; import ColorPicker from '../../utils/ColorPicker'; +import $ from '../../utils/cash-dom'; import Input from './Input'; -const { $ } = Backbone; $ && ColorPicker($); const getColor = (color: any) => { diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index 4c12e9f07..f0b89a36e 100644 --- a/src/editor/model/Editor.ts +++ b/src/editor/model/Editor.ts @@ -44,35 +44,33 @@ import Frame from '../../canvas/model/Frame'; Backbone.$ = $; const deps = [ - require('utils'), - require('i18n'), - require('keymaps'), - require('undo_manager'), - require('storage_manager'), - require('device_manager'), - require('parser'), - require('style_manager'), - require('selector_manager'), - require('modal_dialog'), - require('code_manager'), - require('panels'), - require('rich_text_editor'), - require('asset_manager'), - require('css_composer'), - require('pages'), - require('trait_manager'), - require('dom_components'), - require('navigator'), - require('canvas'), - require('commands'), - require('block_manager'), + UtilsModule, + I18nModule, + KeymapsModule, + UndoManagerModule, + StorageManager, + DeviceManager, + ParserModule, + StyleManager, + SelectorManager, + ModalModule, + CodeManagerModule, + PanelManager, + RichTextEditorModule, + AssetManager, + CssComposer, + PageManager, + TraitManager, + ComponentManager, + LayerManager, + CanvasModule, + CommandsModule, + BlockManager, ]; const ts_deps: any[] = []; -Extender({ - $: Backbone.$, -}); +Extender({ $ }); const logs = { debug: console.log, @@ -378,9 +376,8 @@ export default class EditorModel extends Model { * @return {this} * @private */ - loadModule(moduleName: any) { + loadModule(Module: any) { const { config } = this; - const Module = moduleName.default || moduleName; const Mod = new Module(this); const name = (Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1)) as EditorConfigKeys; const cfgParent = !isUndefined(config[name]) ? config[name] : config[Mod.name as EditorConfigKeys]; diff --git a/src/editor/view/EditorView.ts b/src/editor/view/EditorView.ts index b8482a2b5..3d02371d1 100644 --- a/src/editor/view/EditorView.ts +++ b/src/editor/view/EditorView.ts @@ -1,10 +1,7 @@ -import Backbone from 'backbone'; -import { View } from '../../common'; +import { View, $ } from '../../common'; import { appendStyles } from '../../utils/mixins'; import EditorModel from '../model/Editor'; -const $ = Backbone.$; - export default class EditorView extends View { constructor(model: EditorModel) { super({ model }); diff --git a/src/navigator/view/ItemView.ts b/src/navigator/view/ItemView.ts index a90fb0fe6..80d0b9405 100644 --- a/src/navigator/view/ItemView.ts +++ b/src/navigator/view/ItemView.ts @@ -1,5 +1,5 @@ import { isString, bindAll } from 'underscore'; -import { View } from '../../common'; +import { View, ViewOptions } from '../../common'; import { getModel, isEscKey, isEnterKey } from '../../utils/mixins'; import ComponentView from '../../dom_components/view/ComponentView'; import Component, { eventDrag } from '../../dom_components/model/Component'; @@ -7,7 +7,7 @@ import ItemsView from './ItemsView'; import EditorModel from '../../editor/model/Editor'; import LayerManager from '../index'; -export type ItemViewProps = Backbone.ViewOptions & { +export type ItemViewProps = ViewOptions & { ItemView: ItemView; level: number; config: any; diff --git a/src/trait_manager/view/TraitSelectView.ts b/src/trait_manager/view/TraitSelectView.ts index cb90af78a..faf37403b 100644 --- a/src/trait_manager/view/TraitSelectView.ts +++ b/src/trait_manager/view/TraitSelectView.ts @@ -1,9 +1,7 @@ -import Backbone from 'backbone'; import { isString, isUndefined } from 'underscore'; +import { $ } from '../../common'; import TraitView from './TraitView'; -const $ = Backbone.$; - export default class TraitSelectView extends TraitView { constructor(o = {}) { super(o); @@ -55,9 +53,9 @@ export default class TraitSelectView extends TraitView { this.$input = $(input); const val = model.getTargetValue(); const valResult = values.indexOf(val) >= 0 ? val : model.get('default'); - !isUndefined(valResult) && this.$input.val(valResult); + !isUndefined(valResult) && this.$input!.val(valResult); } - return this.$input.get(0); + return this.$input!.get(0); } } diff --git a/src/trait_manager/view/TraitView.ts b/src/trait_manager/view/TraitView.ts index c5528c827..8f7654b45 100644 --- a/src/trait_manager/view/TraitView.ts +++ b/src/trait_manager/view/TraitView.ts @@ -1,12 +1,9 @@ -import Backbone from 'backbone'; -import { isUndefined, isString, isFunction } from 'underscore'; -import { SetOptions, View } from '../../common'; +import { isFunction, isString, isUndefined } from 'underscore'; +import { $, SetOptions, View } from '../../common'; +import Component from '../../dom_components/model/Component'; +import EditorModel from '../../editor/model/Editor'; import { capitalize } from '../../utils/mixins'; import Trait from '../model/Trait'; -import EditorModel from '../../editor/model/Editor'; -import Component from '../../dom_components/model/Component'; - -const $ = Backbone.$; export default class TraitView extends View { pfx: string; diff --git a/src/utils/Sorter.ts b/src/utils/Sorter.ts index f772db91b..103d857be 100644 --- a/src/utils/Sorter.ts +++ b/src/utils/Sorter.ts @@ -1,13 +1,10 @@ -import Backbone from 'backbone'; import { isString, isFunction, isArray, result, each, bindAll } from 'underscore'; import { on, off, matches, getElement, getPointerEvent, isTextNode, getModel } from './mixins'; -import { View, Model } from '../common'; +import { View, Model, Collection, $ } from '../common'; import EditorModel from '../editor/model/Editor'; import { BlockProperties } from '../block_manager/model/Block'; import CanvasModule from '../canvas'; -const $ = Backbone.$; - const noop = () => {}; type DropContent = BlockProperties['content']; @@ -474,7 +471,7 @@ export default class Sorter extends View { * @param {Model|null} model */ selectTargetModel(model?: Model, source?: Model) { - if (model instanceof Backbone.Collection) { + if (model instanceof Collection) { return; } @@ -706,7 +703,7 @@ export default class Sorter extends View { result.dropInfo = res; droppable = res; } else { - droppable = droppable instanceof Backbone.Collection ? 1 : droppable; + droppable = droppable instanceof Collection ? 1 : droppable; droppable = droppable instanceof Array ? droppable.join(', ') : droppable; result.dropInfo = droppable; droppable = isString(droppable) ? this.matches(src, droppable) : droppable; @@ -1242,7 +1239,7 @@ export default class Sorter extends View { const validResult = this.validTarget(dst, srcEl); const targetCollection = $(dst).data('collection'); const { trgModel, srcModel, draggable } = validResult; - const droppable = trgModel instanceof Backbone.Collection ? 1 : validResult.droppable; + const droppable = trgModel instanceof Collection ? 1 : validResult.droppable; let modelToDrop, created; if (targetCollection && droppable && draggable) {