From 094c1ca0be13af4ba6e9b7f48e98661d60eddaf4 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 23 Jan 2023 13:56:59 +0400 Subject: [PATCH] Refactor TS --- src/abstract/Module.ts | 7 +-- .../{Collection.ts => ModuleCollection.ts} | 14 +++--- .../{DomainViews.ts => ModuleDomainViews.ts} | 27 ++++++----- src/abstract/{Model.ts => ModuleModel.ts} | 8 +--- src/abstract/ModuleView.ts | 46 +++++++++++++++++++ src/abstract/View.ts | 46 ------------------- src/abstract/index.ts | 6 +-- src/asset_manager/index.ts | 11 ++--- src/block_manager/config/config.ts | 4 +- src/block_manager/index.ts | 3 +- src/block_manager/model/Block.ts | 4 +- src/canvas/model/Canvas.ts | 4 +- src/canvas/model/Frame.ts | 6 +-- src/canvas/model/Frames.ts | 4 +- src/canvas/view/CanvasView.ts | 11 +++-- src/canvas/view/FrameView.ts | 7 ++- src/canvas/view/FrameWrapView.ts | 6 +-- src/canvas/view/FramesView.ts | 12 +++-- src/code_manager/index.ts | 4 +- src/code_manager/view/EditorView.ts | 2 +- src/commands/index.ts | 11 ++--- src/commands/view/CommandAbstract.ts | 14 +++--- src/common/index.ts | 5 ++ src/css_composer/index.ts | 15 +++--- src/css_composer/model/CssRule.ts | 10 ++-- src/device_manager/index.ts | 1 - src/dom_components/index.ts | 7 +-- src/dom_components/model/Component.ts | 4 +- src/dom_components/model/ComponentSvgIn.ts | 2 +- src/dom_components/model/Components.ts | 2 +- src/domain_abstract/model/StyleableModel.ts | 18 ++++---- .../model/TypeableCollection.ts | 4 +- src/editor/config/config.ts | 9 ++-- src/editor/index.ts | 7 +-- src/editor/model/Editor.ts | 13 ++---- src/keymaps/index.ts | 2 +- src/modal_dialog/index.ts | 4 +- src/modal_dialog/model/Modal.ts | 6 +-- src/modal_dialog/view/ModalView.ts | 4 +- src/navigator/index.ts | 6 +-- src/pages/index.ts | 11 +++-- src/panels/model/Button.ts | 5 +- src/panels/model/Buttons.ts | 4 +- src/panels/model/Panel.ts | 4 +- src/panels/model/Panels.ts | 4 +- src/panels/view/ButtonView.ts | 4 +- src/panels/view/ButtonsView.ts | 4 +- src/panels/view/PanelView.ts | 7 ++- src/panels/view/PanelsView.ts | 4 +- src/parser/config/config.ts | 4 +- src/parser/index.ts | 12 ++--- src/parser/model/ParserCss.ts | 6 ++- src/parser/model/ParserHtml.ts | 19 ++++---- src/storage_manager/model/RemoteStorage.ts | 7 ++- src/style_manager/model/Properties.ts | 4 +- src/style_manager/model/Property.ts | 2 +- src/style_manager/model/PropertyComposite.ts | 8 ++-- src/style_manager/model/PropertyFactory.ts | 20 ++++---- src/style_manager/model/PropertySelect.ts | 2 + src/style_manager/model/PropertyStack.ts | 3 +- src/style_manager/view/PropertyView.ts | 3 +- src/trait_manager/model/Trait.ts | 4 +- src/undo_manager/index.ts | 2 +- src/utils/Dragger.ts | 35 +++++++------- src/utils/Resizer.ts | 6 +-- src/utils/dom.ts | 9 ++-- src/utils/fetch.ts | 2 + 67 files changed, 281 insertions(+), 290 deletions(-) rename src/abstract/{Collection.ts => ModuleCollection.ts} (68%) rename src/abstract/{DomainViews.ts => ModuleDomainViews.ts} (78%) rename src/abstract/{Model.ts => ModuleModel.ts} (79%) create mode 100644 src/abstract/ModuleView.ts delete mode 100644 src/abstract/View.ts diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts index c00776384..2153cc23c 100644 --- a/src/abstract/Module.ts +++ b/src/abstract/Module.ts @@ -174,14 +174,15 @@ export abstract class ItemManagerModule< return this; } - getAll(): TCollection extends Collection ? C[] : unknown[] { - return [...this.all.models] as any; + // getAll(): TCollection extends Collection ? C[] : TCollection { + getAll() { + return [...this.all.models] as TCollection | any; } getAllMap(): { [key: string]: TCollection extends Collection ? C : unknown; } { - return this.getAll().reduce((acc, i) => { + return this.getAll().reduce((acc: any, i: any) => { acc[i.get(i.idAttribute)] = i; return acc; }, {} as any); diff --git a/src/abstract/Collection.ts b/src/abstract/ModuleCollection.ts similarity index 68% rename from src/abstract/Collection.ts rename to src/abstract/ModuleCollection.ts index 5832c7d1f..d0f1f2c3e 100644 --- a/src/abstract/Collection.ts +++ b/src/abstract/ModuleCollection.ts @@ -1,12 +1,12 @@ import Backbone, { AddOptions } from 'backbone'; -import { isArray, isObject, isUndefined } from 'underscore'; -import Model from './Model'; +import { isArray, isUndefined } from 'underscore'; +import ModuleModel from './ModuleModel'; -type Module = TModel extends Model ? M : unknown; -type ModelConstructor = { new (mod: Module, attr: any): TModel }; +type ModuleExt = TModel extends ModuleModel ? M : unknown; +type ModelConstructor = { new (mod: ModuleExt, attr: any): TModel }; -export default class Collection extends Backbone.Collection { - module!: Module; +export default class ModuleCollection extends Backbone.Collection { + module!: ModuleExt; private newModel!: ModelConstructor; add(model: Array> | TModel, options?: AddOptions): TModel; @@ -21,7 +21,7 @@ export default class Collection extends Backbone.C } constructor( - module: Module, + module: ModuleExt, models: TModel[] | Array>, modelConstructor: ModelConstructor ) { diff --git a/src/abstract/DomainViews.ts b/src/abstract/ModuleDomainViews.ts similarity index 78% rename from src/abstract/DomainViews.ts rename to src/abstract/ModuleDomainViews.ts index 3a68eb294..2711ca281 100644 --- a/src/abstract/DomainViews.ts +++ b/src/abstract/ModuleDomainViews.ts @@ -1,13 +1,12 @@ -import { includes } from 'underscore'; import Backbone from 'backbone'; -import View from './View'; -import Collection from './Collection'; -import Model from './Model'; - -export default abstract class DomainViews< - TCollection extends Collection, - TItemView extends View -> extends View { +import ModuleView from './ModuleView'; +import ModuleCollection from './ModuleCollection'; +import ModuleModel from './ModuleModel'; + +export default abstract class ModuleDomainViews< + TCollection extends ModuleCollection, + TItemView extends ModuleView +> extends ModuleView { // Defines the View per type itemsView = ''; @@ -23,10 +22,10 @@ export default abstract class DomainViews< /** * Add new model to the collection - * @param {Model} model + * @param {ModuleModel} model * @private * */ - private addTo(model: Model) { + private addTo(model: ModuleModel) { this.add(model); } @@ -35,15 +34,15 @@ export default abstract class DomainViews< const warn = `${ns ? `[${ns}]: ` : ''}'${type}' type not found`; em?.logWarning(warn);*/ } - protected abstract renderView(model: Model, itemType: string): TItemView; + protected abstract renderView(model: ModuleModel, itemType: string): TItemView; /** * Render new model inside the view - * @param {Model} model + * @param {ModuleModel} model * @param {Object} fragment Fragment collection * @private * */ - private add(model: Model, fragment?: DocumentFragment) { + private add(model: ModuleModel, fragment?: DocumentFragment) { const { reuseView, viewCollection, itemsView = {} } = this; var frag = fragment || null; var typeField = model.get(this.itemType); diff --git a/src/abstract/Model.ts b/src/abstract/ModuleModel.ts similarity index 79% rename from src/abstract/Model.ts rename to src/abstract/ModuleModel.ts index 324e27036..c409e0740 100644 --- a/src/abstract/Model.ts +++ b/src/abstract/ModuleModel.ts @@ -1,7 +1,7 @@ import Backbone from 'backbone'; import Module, { IBaseModule } from './Module'; -export default class Model< +export default class ModuleModel< TModule extends IBaseModule = Module, T extends Backbone.ObjectHash = any, S = Backbone.ModelSetOptions, @@ -9,11 +9,7 @@ export default class Model< > extends Backbone.Model { private _module: TModule; - constructor( - module: TModule, - attributes?: T, - options?: Backbone.CombinedModelConstructorOptions - ) { + constructor(module: TModule, attributes?: T, options?: Backbone.CombinedModelConstructorOptions) { super(attributes, options); this._module = module; } diff --git a/src/abstract/ModuleView.ts b/src/abstract/ModuleView.ts new file mode 100644 index 000000000..4a6d1ad03 --- /dev/null +++ b/src/abstract/ModuleView.ts @@ -0,0 +1,46 @@ +import Backbone from 'backbone'; +import ModuleCollection from './ModuleCollection'; +import ModuleModel from './ModuleModel'; +import { IBaseModule } from './Module'; + +type ModuleFromModel = TModel extends ModuleModel ? M : unknown; +type ModuleModelExt = TItem extends ModuleCollection + ? ModuleFromModel + : TItem extends ModuleModel + ? M + : unknown; + +// type TCollection = TItem extends ModuleCollection ? TItem : unknown; + +export default class ModuleView< + TModel extends ModuleModel | ModuleCollection = ModuleModel, + TElement extends Element = HTMLElement +> extends Backbone.View { + protected get pfx() { + return this.ppfx + (this.config as any).stylePrefix || ''; + } + + protected get ppfx() { + return this.em.config.stylePrefix || ''; + } + + collection!: TModel extends ModuleModel ? ModuleCollection : TModel; + + protected get module(): ModuleModelExt { + return (this.model as any)?.module ?? this.collection.module; + } + + protected get em() { + return this.module.em; + } + + protected get config(): ModuleModelExt extends IBaseModule ? C : unknown { + return this.module.config as any; + } + + public className!: string; + + preinitialize(options?: any) { + this.className = ''; + } +} diff --git a/src/abstract/View.ts b/src/abstract/View.ts deleted file mode 100644 index 074955996..000000000 --- a/src/abstract/View.ts +++ /dev/null @@ -1,46 +0,0 @@ -import Backbone from 'backbone'; -import Collection from './Collection'; -import Model from './Model'; -import { IBaseModule } from './Module'; - -type ModuleFromModel = TModel extends Model ? M : unknown; -type Module = TItem extends Collection - ? ModuleFromModel - : TItem extends Model - ? M - : unknown; - -type TCollection = TItem extends Collection ? TItem : unknown; - -export default class View< - TModel extends Model | Collection = Model, - TElement extends Element = HTMLElement -> extends Backbone.View { - protected get pfx() { - return this.ppfx + (this.config as any).stylePrefix || ''; - } - - protected get ppfx() { - return this.em.config.stylePrefix || ''; - } - - collection!: TModel extends Model ? Collection : TModel; - - protected get module(): Module { - return (this.model as any)?.module ?? this.collection.module; - } - - protected get em() { - return this.module.em; - } - - protected get config(): Module extends IBaseModule ? C : unknown { - return this.module.config as any; - } - - public className!: string; - - preinitialize(options?: any) { - this.className = ''; - } -} diff --git a/src/abstract/index.ts b/src/abstract/index.ts index 5469287af..668bc16cd 100644 --- a/src/abstract/index.ts +++ b/src/abstract/index.ts @@ -1,4 +1,4 @@ -export { default as Model } from './Model'; -export { default as Collection } from './Collection'; -export { default as View } from './View'; +export { default as ModuleModel } from './ModuleModel'; +export { default as ModuleCollection } from './ModuleCollection'; +export { default as ModuleView } from './ModuleView'; export { default as Module } from './Module'; diff --git a/src/asset_manager/index.ts b/src/asset_manager/index.ts index 444e43739..e87026089 100644 --- a/src/asset_manager/index.ts +++ b/src/asset_manager/index.ts @@ -50,7 +50,7 @@ import defaults, { AssetManagerConfig } from './config/config'; import Asset from './model/Asset'; import Assets from './model/Assets'; import AssetsView from './view/AssetsView'; -import FileUpload from './view/FileUploader'; +import FileUploaderView from './view/FileUploader'; export const evAll = 'asset'; export const evPfx = `${evAll}:`; @@ -100,7 +100,7 @@ export default class AssetManager extends ItemManagerModule} */ - // @ts-ignore getAll() { return this.all; } @@ -344,7 +343,7 @@ export default class AssetManager extends ItemManagerModule void); + appendOnClick?: boolean | ((block: Block, editor: Editor, opts: { event: Event }) => void); /** * Avoid rendering the default block manager UI. * More about it here: https://grapesjs.com/docs/modules/Blocks.html#customization diff --git a/src/block_manager/index.ts b/src/block_manager/index.ts index b4485fea7..26bdb36d6 100644 --- a/src/block_manager/index.ts +++ b/src/block_manager/index.ts @@ -126,7 +126,7 @@ export default class BlockManager extends ItemManagerModule this.startDrag(block, ev), @@ -261,7 +261,6 @@ export default class BlockManager extends ItemManagerModulePut your ...'}, ...] */ - // @ts-ignore getAll() { return this.blocks; } diff --git a/src/block_manager/model/Block.ts b/src/block_manager/model/Block.ts index cc0378e56..d7600f908 100644 --- a/src/block_manager/model/Block.ts +++ b/src/block_manager/model/Block.ts @@ -1,6 +1,6 @@ import { Model } from '../../common'; import { isFunction } from 'underscore'; -import EditorModule from '../../editor'; +import Editor from '../../editor'; import { BlockCategoryProperties } from './Category'; import { ComponentDefinition } from '../../dom_components/model/types'; @@ -49,7 +49,7 @@ export interface BlockProperties { * @example * onClick: (block, editor) => editor.getWrapper().append(block.get('content')) */ - onClick?: (block: Block, editor: EditorModule) => void; + onClick?: (block: Block, editor: Editor) => void; /** * Block attributes */ diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts index d3d01ed0f..cd8e0353c 100644 --- a/src/canvas/model/Canvas.ts +++ b/src/canvas/model/Canvas.ts @@ -1,11 +1,11 @@ -import { Model } from '../../abstract'; +import { ModuleModel } from '../../abstract'; import { evPageSelect } from '../../pages'; import { evUpdate as evDeviceUpdate } from '../../device_manager'; import Frames from './Frames'; import Page from '../../pages/model/Page'; import CanvasModule from '..'; -export default class Canvas extends Model { +export default class Canvas extends ModuleModel { defaults() { return { frame: '', diff --git a/src/canvas/model/Frame.ts b/src/canvas/model/Frame.ts index 034a306ea..aa21abc6f 100644 --- a/src/canvas/model/Frame.ts +++ b/src/canvas/model/Frame.ts @@ -1,5 +1,5 @@ import { result, forEach, isEmpty, isString } from 'underscore'; -import { Model } from '../../abstract'; +import { ModuleModel } from '../../abstract'; import CanvasModule from '..'; import ComponentWrapper from '../../dom_components/model/ComponentWrapper'; import { isComponent, isObject } from '../../utils/mixins'; @@ -17,7 +17,7 @@ const keyAutoH = '__ah'; * @property {Number} [y=0] Vertical position of the frame in the canvas. * */ -export default class Frame extends Model { +export default class Frame extends ModuleModel { defaults() { return { x: 0, @@ -182,7 +182,7 @@ export default class Frame extends Model { } toJSON(opts: any = {}) { - const obj = Model.prototype.toJSON.call(this, opts); + const obj = ModuleModel.prototype.toJSON.call(this, opts); const defaults = result(this, 'defaults'); if (opts.fromUndo) delete obj.component; diff --git a/src/canvas/model/Frames.ts b/src/canvas/model/Frames.ts index 33fc17742..fe836191b 100644 --- a/src/canvas/model/Frames.ts +++ b/src/canvas/model/Frames.ts @@ -1,10 +1,10 @@ import { bindAll } from 'underscore'; import CanvasModule from '..'; -import { Collection } from '../../abstract'; +import { ModuleCollection } from '../../abstract'; import Page from '../../pages/model/Page'; import Frame from './Frame'; -export default class Frames extends Collection { +export default class Frames extends ModuleCollection { loadedItems = 0; itemsToLoad = 0; page?: Page; diff --git a/src/canvas/view/CanvasView.ts b/src/canvas/view/CanvasView.ts index b9ec23c86..24a7a15ed 100644 --- a/src/canvas/view/CanvasView.ts +++ b/src/canvas/view/CanvasView.ts @@ -1,5 +1,5 @@ import { bindAll } from 'underscore'; -import { View } from '../../abstract'; +import { ModuleView } from '../../abstract'; import { on, off, getElement, getKeyChar, isTextNode, getElRect, getUiClass } from '../../utils/mixins'; import { createEl } from '../../utils/dom'; import FramesView from './FramesView'; @@ -8,7 +8,7 @@ import FrameView from './FrameView'; import ComponentView from '../../dom_components/view/ComponentView'; import Component from '../../dom_components/model/Component'; -interface MarginPaddingOffsets { +export interface MarginPaddingOffsets { marginTop?: number; marginRight?: number; marginBottom?: number; @@ -18,7 +18,8 @@ interface MarginPaddingOffsets { paddingBottom?: number; paddingLeft?: number; } -export default class CanvasView extends View { + +export default class CanvasView extends ModuleView { events() { return { wheel: 'onWheel', @@ -104,7 +105,7 @@ export default class CanvasView extends View { this.frames?.remove(); //@ts-ignore this.frames = undefined; - View.prototype.remove.apply(this, args); + ModuleView.prototype.remove.apply(this, args); this.toggleListeners(false); return this; } @@ -314,7 +315,7 @@ export default class CanvasView extends View { /** * Update javascript of a specific component passed by its View - * @param {View} view Component's View + * @param {ModuleView} view Component's View * @private */ //TODO change type after the ComponentView was updated to ts diff --git a/src/canvas/view/FrameView.ts b/src/canvas/view/FrameView.ts index 233512f8b..1548226d2 100644 --- a/src/canvas/view/FrameView.ts +++ b/src/canvas/view/FrameView.ts @@ -1,15 +1,14 @@ import { bindAll, isString, debounce, isUndefined } from 'underscore'; import { appendVNodes, append, createEl, createCustomEvent, motionsEv } from '../../utils/dom'; import { on, off, setViewEl, hasDnd, getPointerEvent } from '../../utils/mixins'; -import { View } from '../../abstract'; +import { ModuleView } from '../../abstract'; import CssRulesView from '../../css_composer/view/CssRulesView'; import Droppable from '../../utils/Droppable'; import Frame from '../model/Frame'; import Canvas from '../model/Canvas'; -import ComponentWrapper from '../../dom_components/model/ComponentWrapper'; import FrameWrapView from './FrameWrapView'; -export default class FrameView extends View { +export default class FrameView extends ModuleView { //@ts-ignore get tagName() { return 'iframe'; @@ -184,7 +183,7 @@ export default class FrameView extends View { this._toggleEffects(false); this.tools = {}; wrp && wrp.remove(); - View.prototype.remove.apply(this, args); + ModuleView.prototype.remove.apply(this, args); return this; } diff --git a/src/canvas/view/FrameWrapView.ts b/src/canvas/view/FrameWrapView.ts index ca9d28b4a..c03bc6e42 100644 --- a/src/canvas/view/FrameWrapView.ts +++ b/src/canvas/view/FrameWrapView.ts @@ -1,12 +1,12 @@ import { bindAll, isNumber, isNull, debounce } from 'underscore'; -import { View } from '../../abstract'; +import { ModuleView } from '../../abstract'; import FrameView from './FrameView'; import { createEl, removeEl } from '../../utils/dom'; import Dragger from '../../utils/Dragger'; import CanvasView from './CanvasView'; import Frame from '../model/Frame'; -export default class FrameWrapView extends View { +export default class FrameWrapView extends ModuleView { events() { return { 'click [data-action-remove]': 'remove', @@ -77,7 +77,7 @@ export default class FrameWrapView extends View { remove(opts?: any) { this.__clear(opts); - View.prototype.remove.apply(this, opts); + ModuleView.prototype.remove.apply(this, opts); //@ts-ignore ['frame', 'dragger', 'cv', 'elTools'].forEach(i => (this[i] = 0)); return this; diff --git a/src/canvas/view/FramesView.ts b/src/canvas/view/FramesView.ts index 40e542c5d..23d5b0726 100644 --- a/src/canvas/view/FramesView.ts +++ b/src/canvas/view/FramesView.ts @@ -1,18 +1,18 @@ import CanvasModule from '..'; -import DomainViews from '../../abstract/DomainViews'; +import ModuleDomainViews from '../../abstract/ModuleDomainViews'; import Frames from '../model/Frames'; import CanvasView from './CanvasView'; import FrameWrapView from './FrameWrapView'; -export default class FramesView extends DomainViews { +export default class FramesView extends ModuleDomainViews { canvasView: CanvasView; private _module: CanvasModule; - + constructor(opts = {}, config: any) { super(opts, true); //console.log(this.collection) this.listenTo(this.collection, 'reset', this.render); - this.canvasView = config.canvasView + this.canvasView = config.canvasView; this._module = config.module; } @@ -24,5 +24,7 @@ export default class FramesView extends DomainViews { const { $el, ppfx } = this; $el.attr({ class: `${ppfx}frames` }); } - protected renderView(item: any, type: string){return new FrameWrapView(item, this.canvasView)} + protected renderView(item: any, type: string) { + return new FrameWrapView(item, this.canvasView); + } } diff --git a/src/code_manager/index.ts b/src/code_manager/index.ts index 93b0b6525..8f5f4f317 100644 --- a/src/code_manager/index.ts +++ b/src/code_manager/index.ts @@ -24,7 +24,7 @@ import gCss from './model/CssGenerator'; import gJson from './model/JsonGenerator'; import gJs from './model/JsGenerator'; import eCM from './model/CodeMirrorEditor'; -import editorView from './view/EditorView'; +import CodeEditorView from './view/EditorView'; import { Module } from '../abstract'; import EditorModel from '../editor/model/Editor'; @@ -36,7 +36,7 @@ export default class CodeManagerModule extends Module; viewers: Record; - EditorView = editorView; + EditorView = CodeEditorView; constructor(em: EditorModel) { super(em, 'CodeManager', defaults); diff --git a/src/code_manager/view/EditorView.ts b/src/code_manager/view/EditorView.ts index e001fcfb3..8b1e9bc2e 100644 --- a/src/code_manager/view/EditorView.ts +++ b/src/code_manager/view/EditorView.ts @@ -1,7 +1,7 @@ import { View } from '../../common'; import html from '../../utils/html'; -export default class EditorView extends View { +export default class CodeEditorView extends View { pfx?: string; config!: Record; diff --git a/src/commands/index.ts b/src/commands/index.ts index c012d9d64..1ae76b9d8 100644 --- a/src/commands/index.ts +++ b/src/commands/index.ts @@ -43,17 +43,12 @@ */ import { isFunction, includes } from 'underscore'; -import CommandAbstract, { - Command, - CommandOptions, - CommandObject, - CommandFunction, - AnyObject, -} from './view/CommandAbstract'; +import CommandAbstract, { Command, CommandOptions, CommandObject, CommandFunction } from './view/CommandAbstract'; import defaults, { CommandsConfig } from './config/config'; import { Module } from '../abstract'; import { eventDrag } from '../dom_components/model/Component'; import Editor from '../editor/model/Editor'; +import { ObjectAny } from '../common'; const commandsDef = [ ['preview', 'Preview', 'preview'], @@ -237,7 +232,7 @@ export default class CommandsModule extends Module { ... }); * */ - add(id: string, command: CommandFunction | CommandObject) { + add(id: string, command: CommandFunction | CommandObject) { let result: CommandObject = isFunction(command) ? { run: command } : command; if (!result.stop) { diff --git a/src/commands/view/CommandAbstract.ts b/src/commands/view/CommandAbstract.ts index eb993a9ec..5c72f61f0 100644 --- a/src/commands/view/CommandAbstract.ts +++ b/src/commands/view/CommandAbstract.ts @@ -1,32 +1,30 @@ import CanvasModule from '../../canvas'; -import { Model } from '../../common'; +import { Model, ObjectAny } from '../../common'; import Editor from '../../editor'; import EditorModel from '../../editor/model/Editor'; -interface ICommand { +interface ICommand { run?: CommandAbstract['run']; stop?: CommandAbstract['stop']; id?: string; [key: string]: unknown; } -export type CommandFunction = CommandAbstract['run']; +export type CommandFunction = CommandAbstract['run']; export type Command = CommandObject | CommandFunction; export type CommandOptions = Record; -export type AnyObject = Record; - -export type CommandObject = ICommand & +export type CommandObject = ICommand & T & ThisType>; -export function defineCommand(def: CommandObject) { +export function defineCommand(def: CommandObject) { return def; } -export default class CommandAbstract extends Model { +export default class CommandAbstract extends Model { config: any; em: EditorModel; pfx: string; diff --git a/src/common/index.ts b/src/common/index.ts index cc78e377d..b101d3e5b 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -11,3 +11,8 @@ export type RemoveOptions = Backbone.Silenceable; export type ObjectAny = Record; export type ObjectStrings = Record; + +export type Position = { + x: number; + y: number; +}; diff --git a/src/css_composer/index.ts b/src/css_composer/index.ts index bf4f24757..ad16e1f90 100644 --- a/src/css_composer/index.ts +++ b/src/css_composer/index.ts @@ -38,6 +38,7 @@ import CssRulesView from './view/CssRulesView'; import { ItemManagerModule } from '../abstract/Module'; import EditorModel from '../editor/model/Editor'; import Component from '../dom_components/model/Component'; +import { ObjectAny } from '../common'; type RuleOptions = { atRuleType?: string; @@ -45,7 +46,6 @@ type RuleOptions = { }; type CssRuleStyle = Required['style']; -type AnyObject = Record; export default class CssComposer extends ItemManagerModule { rules: CssRules; @@ -178,8 +178,7 @@ export default class CssComposer extends ItemManagerModule rule.compare(slc, state, width, ruleProps)) || null; } - // @ts-ignore - getAll() { + getAll(): CssRules { return this.rules; } @@ -354,7 +353,7 @@ export default class CssComposer extends ItemManagerModule { selectors: (string | SelectorProps)[]; } -type AnyObject = Record; - // @ts-ignore const { CSS } = hasWin() ? window : {}; @@ -187,7 +185,7 @@ export default class CssRule extends StyleableModel { * cssRule.selectorsToString(); // ".class1:hover" * cssRule.selectorsToString({ skipState: true }); // ".class1" */ - selectorsToString(opts: AnyObject = {}) { + selectorsToString(opts: ObjectAny = {}) { const result = []; const state = this.get('state'); const addSelector = this.get('selectorsAdd'); @@ -213,7 +211,7 @@ export default class CssRule extends StyleableModel { * }); * cssRule.getDeclaration() // ".class1{color:red;}" */ - getDeclaration(opts: AnyObject = {}) { + getDeclaration(opts: ObjectAny = {}) { let result = ''; const { important } = this.attributes; const selectors = this.selectorsToString(opts); @@ -284,7 +282,7 @@ export default class CssRule extends StyleableModel { * }); * cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}" */ - toCSS(opts: AnyObject = {}) { + toCSS(opts: ObjectAny = {}) { let result = ''; const atRule = this.getAtRule(); const block = this.getDeclaration(opts); diff --git a/src/device_manager/index.ts b/src/device_manager/index.ts index 69b2d6478..4d8e9269b 100644 --- a/src/device_manager/index.ts +++ b/src/device_manager/index.ts @@ -202,7 +202,6 @@ export default class DeviceManager extends ItemManagerModule< return this.get(this.em.get('device')); } - // @ts-ignore getAll() { return this.devices; } diff --git a/src/dom_components/index.ts b/src/dom_components/index.ts index 2eb0a905c..1d5f0f372 100644 --- a/src/dom_components/index.ts +++ b/src/dom_components/index.ts @@ -97,10 +97,7 @@ import ComponentFrame from './model/ComponentFrame'; import ComponentFrameView from './view/ComponentFrameView'; import { ItemManagerModule } from '../abstract/Module'; import EditorModel from '../editor/model/Editor'; -import { Model } from 'backbone'; - -// TODO update once components are migrated to TS -type ComponentDefinition = Record; +import { ComponentAdd } from './model/types'; export default class ComponentManager extends ItemManagerModule { componentTypes = [ @@ -374,7 +371,7 @@ export default class ComponentManager extends ItemManagerModule { * attributes: { title: 'here' } * }); */ - addComponent(component: Component | string | ComponentDefinition, opt = {}) { + addComponent(component: ComponentAdd, opt = {}) { return this.getComponents().add(component, opt); } diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index 714b1b7c8..6fca8bf24 100644 --- a/src/dom_components/model/Component.ts +++ b/src/dom_components/model/Component.ts @@ -34,7 +34,7 @@ import { DomComponentsConfig } from '../config/config'; import ComponentView from '../view/ComponentView'; import { AddOptions, ObjectAny, ObjectStrings, SetOptions } from '../../common'; import CssRule, { CssRuleJSON, CssRuleProperties } from '../../css_composer/model/CssRule'; -import { TraitProperties } from '../../trait_manager/model/Trait'; +import Trait, { TraitProperties } from '../../trait_manager/model/Trait'; import { ToolbarButtonProps } from './ToolbarButton'; const escapeRegExp = (str: string) => { @@ -1224,7 +1224,7 @@ export default class Component extends StyleableModel { * console.log(traits); * // [Trait, Trait, Trait, ...] */ - getTraits() { + getTraits(): Trait[] { this.__loadTraits(); return [...this.traits.models]; } diff --git a/src/dom_components/model/ComponentSvgIn.ts b/src/dom_components/model/ComponentSvgIn.ts index a9ee64745..6b1558396 100644 --- a/src/dom_components/model/ComponentSvgIn.ts +++ b/src/dom_components/model/ComponentSvgIn.ts @@ -3,7 +3,7 @@ import ComponentSvg from './ComponentSvg'; /** * Component for inner SVG elements */ -export default class ComponentSvgln extends ComponentSvg { +export default class ComponentSvgIn extends ComponentSvg { get defaults() { return { // @ts-ignore diff --git a/src/dom_components/model/Components.ts b/src/dom_components/model/Components.ts index 765b35b00..db37b89f0 100644 --- a/src/dom_components/model/Components.ts +++ b/src/dom_components/model/Components.ts @@ -216,7 +216,7 @@ export default class Components extends Collection { }); } - return new model(attrs, options); + return new model(attrs, options) as Component; } parseString(value: string, opt: AddOptions & { temporary?: boolean; keepIds?: string[] } = {}) { diff --git a/src/domain_abstract/model/StyleableModel.ts b/src/domain_abstract/model/StyleableModel.ts index cad64eab5..dbcbdb058 100644 --- a/src/domain_abstract/model/StyleableModel.ts +++ b/src/domain_abstract/model/StyleableModel.ts @@ -1,12 +1,10 @@ import { isString, isArray, keys } from 'underscore'; import { shallowDiff } from '../../utils/mixins'; import ParserHtml from '../../parser/model/ParserHtml'; -import { Model } from '../../common'; +import { Model, ObjectAny } from '../../common'; import { ObjectHash } from 'backbone'; import Selectors from '../../selector_manager/model/Selectors'; -type AnyObject = Record; - const parserHtml = ParserHtml(); export default class StyleableModel extends Model { @@ -25,7 +23,7 @@ export default class StyleableModel extends Model * @param {Object} prop * @return {Object} */ - extendStyle(prop: AnyObject): AnyObject { + extendStyle(prop: ObjectAny): ObjectAny { return { ...this.getStyle(), ...prop }; } @@ -33,9 +31,9 @@ export default class StyleableModel extends Model * Get style object * @return {Object} */ - getStyle(prop?: string | AnyObject) { + getStyle(prop?: string | ObjectAny) { const style = this.get('style') || {}; - const result: AnyObject = { ...style }; + const result: ObjectAny = { ...style }; return prop && isString(prop) ? result[prop] : result; } @@ -45,7 +43,7 @@ export default class StyleableModel extends Model * @param {Object} opts * @return {Object} Applied properties */ - setStyle(prop: string | AnyObject = {}, opts: AnyObject = {}) { + setStyle(prop: string | ObjectAny = {}, opts: ObjectAny = {}) { if (isString(prop)) { prop = this.parseStyle(prop); } @@ -85,7 +83,7 @@ export default class StyleableModel extends Model * this.addStyle({color: 'red'}); * this.addStyle('color', 'blue'); */ - addStyle(prop: string | AnyObject, value = '', opts = {}) { + addStyle(prop: string | ObjectAny, value = '', opts = {}) { if (typeof prop == 'string') { prop = { prop: value, @@ -113,7 +111,7 @@ export default class StyleableModel extends Model * @param {Object} [opts={}] Options * @return {String} */ - styleToString(opts: AnyObject = {}) { + styleToString(opts: ObjectAny = {}) { const result = []; const style = this.getStyle(opts); @@ -132,7 +130,7 @@ export default class StyleableModel extends Model return (this.get('selectors') || this.get('classes')) as Selectors; } - getSelectorsString(opts?: AnyObject) { + getSelectorsString(opts?: ObjectAny) { // @ts-ignore return this.selectorsToString ? this.selectorsToString(opts) : this.getSelectors().getFullString(); } diff --git a/src/domain_abstract/model/TypeableCollection.ts b/src/domain_abstract/model/TypeableCollection.ts index ebd5e6584..a7b35f3d7 100644 --- a/src/domain_abstract/model/TypeableCollection.ts +++ b/src/domain_abstract/model/TypeableCollection.ts @@ -2,7 +2,7 @@ import { isFunction } from 'underscore'; import { View, Model } from '../../common'; -export default { +const TypeableCollection = { types: [], initialize(models, opts = {}) { @@ -140,3 +140,5 @@ export default { } }, }; + +export default TypeableCollection; diff --git a/src/editor/config/config.ts b/src/editor/config/config.ts index 45f60c31f..46df03a6f 100644 --- a/src/editor/config/config.ts +++ b/src/editor/config/config.ts @@ -21,8 +21,7 @@ import { StyleManagerConfig } from '../../style_manager/config/config'; import { DomComponentsConfig } from '../../dom_components/config/config'; import { HTMLGeneratorBuildOptions } from '../../code_manager/model/HtmlGenerator'; import { CssGeneratorBuildOptions } from '../../code_manager/model/CssGenerator'; - -type AnyObject = Record; +import { ObjectAny } from '../../common'; export interface EditorConfig { /** @@ -63,7 +62,7 @@ export interface EditorConfig { /** * Initial project data (JSON containing your components/styles/etc) to load. */ - projectData?: AnyObject; + projectData?: ObjectAny; /** * HTML string or object of components @@ -299,7 +298,7 @@ export interface EditorConfig { * Experimental: don't use. * Editor icons */ - icons?: AnyObject; + icons?: ObjectAny; /** * Configurations for I18n. @@ -420,7 +419,7 @@ export interface EditorConfig { /** * Color picker options. */ - colorPicker?: AnyObject; + colorPicker?: ObjectAny; pStylePrefix?: string; } diff --git a/src/editor/index.ts b/src/editor/index.ts index 192787584..3dccd2f9d 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -52,16 +52,17 @@ * Check the [Pages](/api/pages.html) module. * * ## Methods - * @module Editor + * @module docsjs.Editor */ import { EventHandler } from 'backbone'; import { IBaseModule } from '../abstract/Module'; import Component from '../dom_components/model/Component'; import { CustomParserCss } from '../parser/config/config'; +import { ProjectData } from '../storage_manager/model/IStorage'; import cash from '../utils/cash-dom'; import html from '../utils/html'; import defaults, { EditorConfig, EditorConfigKeys } from './config/config'; -import EditorModel, { ProjectData } from './model/Editor'; +import EditorModel from './model/Editor'; import EditorView from './view/EditorView'; export type ParsedRule = { @@ -75,7 +76,7 @@ type EditorConfigType = EditorConfig & { pStylePrefix?: string }; type EditorModelParam = Parameters[N]; -export default class EditorModule implements IBaseModule { +export default class Editor implements IBaseModule { editorView?: EditorView; editor: EditorModel; $: typeof cash; diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index 6150afe61..09a7d045b 100644 --- a/src/editor/model/Editor.ts +++ b/src/editor/model/Editor.ts @@ -6,7 +6,7 @@ import { getModel, hasWin, isEmptyObj } from '../../utils/mixins'; import { Model } from '../../common'; import Selected from './Selected'; import FrameView from '../../canvas/view/FrameView'; -import EditorModule from '..'; +import Editor from '..'; import EditorView from '../view/EditorView'; import { IModule } from '../../abstract/Module'; import CanvasModule from '../../canvas'; @@ -37,10 +37,7 @@ import CssRule from '../../css_composer/model/CssRule'; import { HTMLGeneratorBuildOptions } from '../../code_manager/model/HtmlGenerator'; import { CssGeneratorBuildOptions } from '../../code_manager/model/CssGenerator'; import ComponentView from '../../dom_components/view/ComponentView'; - -export interface ProjectData { - [key: string]: any; -} +import { ProjectData } from '../../storage_manager/model/IStorage'; //@ts-ignore Backbone.$ = $; @@ -172,7 +169,7 @@ export default class EditorModel extends Model { return this.get('Canvas'); } - get Editor(): EditorModule { + get Editor(): Editor { return this.get('Editor'); } @@ -435,7 +432,7 @@ export default class EditorModel extends Model { * @return {this} * @public */ - init(editor: EditorModule, opts = {}) { + init(editor: Editor, opts = {}) { if (this.destroyed) { this.initialize(opts); this.destroyed = false; @@ -443,7 +440,7 @@ export default class EditorModel extends Model { this.set('Editor', editor); } - getEditor(): EditorModule { + getEditor(): Editor { return this.get('Editor'); } diff --git a/src/keymaps/index.ts b/src/keymaps/index.ts index db03f096b..3daedf02b 100644 --- a/src/keymaps/index.ts +++ b/src/keymaps/index.ts @@ -44,7 +44,7 @@ */ import { isFunction, isString } from 'underscore'; -import { hasWin, isObject } from '../utils/mixins'; +import { hasWin } from '../utils/mixins'; import keymaster from '../utils/keymaster'; import { Module } from '../abstract'; import EditorModel from '../editor/model/Editor'; diff --git a/src/modal_dialog/index.ts b/src/modal_dialog/index.ts index 71074df66..a9afdf01f 100644 --- a/src/modal_dialog/index.ts +++ b/src/modal_dialog/index.ts @@ -82,7 +82,9 @@ export default class ModalModule extends Module { title: isString(titl) ? createText(titl) : titl, //@ts-ignore content: isString(cnt) ? createText(cnt) : cnt.get ? cnt.get(0) : cnt, - close: () => this.close(), + close: () => { + this.close(); + }, }; } diff --git a/src/modal_dialog/model/Modal.ts b/src/modal_dialog/model/Modal.ts index 0c98c684f..bd4e63d1d 100644 --- a/src/modal_dialog/model/Modal.ts +++ b/src/modal_dialog/model/Modal.ts @@ -1,7 +1,7 @@ -import ModalManager from '..'; -import { Model } from '../../abstract'; +import ModalModule from '..'; +import { ModuleModel } from '../../abstract'; -export default class Modal extends Model { +export default class Modal extends ModuleModel { defaults() { return { title: '', diff --git a/src/modal_dialog/view/ModalView.ts b/src/modal_dialog/view/ModalView.ts index eaa15886b..6d67296dd 100644 --- a/src/modal_dialog/view/ModalView.ts +++ b/src/modal_dialog/view/ModalView.ts @@ -1,7 +1,7 @@ -import { View } from '../../abstract'; +import { ModuleView } from '../../abstract'; import Modal from '../model/Modal'; -export default class ModalView extends View { +export default class ModalView extends ModuleView { template({ pfx, ppfx, content, title }: any) { return `
diff --git a/src/navigator/index.ts b/src/navigator/index.ts index 934a35ee3..d3c2afbc1 100644 --- a/src/navigator/index.ts +++ b/src/navigator/index.ts @@ -40,7 +40,7 @@ */ import { isString, bindAll } from 'underscore'; -import { Model } from '../abstract'; +import { ModuleModel } from '../abstract'; import Module from '../abstract/Module'; import Component from '../dom_components/model/Component'; import EditorModel from '../editor/model/Editor'; @@ -82,7 +82,7 @@ const isStyleHidden = (style: any = {}) => { }; export default class LayerManager extends Module { - model!: Model; + model!: ModuleModel; view?: View; @@ -91,7 +91,7 @@ export default class LayerManager extends Module { constructor(em: EditorModel) { super(em, 'LayerManager', defaults); bindAll(this, 'componentChanged', '__onRootChange', '__onComponent'); - this.model = new Model(this, { opened: {} }); + this.model = new ModuleModel(this, { opened: {} }); // @ts-ignore this.config.stylePrefix = this.config.pStylePrefix; return this; diff --git a/src/pages/index.ts b/src/pages/index.ts index c1e256e3a..7c4ca56b8 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -46,7 +46,7 @@ import { isString, bindAll, unique, flatten } from 'underscore'; import { createId } from '../utils/mixins'; -import { Model, Module } from '../abstract'; +import { ModuleModel } from '../abstract'; import { ItemManagerModule, ModuleConfig } from '../abstract/Module'; import Pages from './model/Pages'; import Page from './model/Page'; @@ -85,7 +85,12 @@ export default class PageManager extends ItemManagerModule coll.at(0) && this.select(coll.at(0))); this.pages.on('all', this.__onChange, this); diff --git a/src/panels/model/Button.ts b/src/panels/model/Button.ts index e7e3e5932..aa1b3e65f 100644 --- a/src/panels/model/Button.ts +++ b/src/panels/model/Button.ts @@ -1,9 +1,8 @@ import PanelManager from '..'; -import { Model } from '../../abstract'; -import EditorModel from '../../editor/model/Editor'; +import { ModuleModel } from '../../abstract'; import Buttons from './Buttons'; -export default class Button extends Model { +export default class Button extends ModuleModel { defaults() { return { id: '', diff --git a/src/panels/model/Buttons.ts b/src/panels/model/Buttons.ts index 64c2e0305..bfbee218b 100644 --- a/src/panels/model/Buttons.ts +++ b/src/panels/model/Buttons.ts @@ -1,8 +1,8 @@ import PanelManager from '..'; -import { Collection } from '../../abstract'; +import { ModuleCollection } from '../../abstract'; import Button from './Button'; -export default class Buttons extends Collection