From 776a499e20869b4c6b4c375364cc440dd457a51a Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 26 Jan 2023 17:12:08 +0400 Subject: [PATCH] Add events TS --- src/asset_manager/index.ts | 13 ++++++++++ src/block_manager/index.ts | 2 ++ src/canvas/index.ts | 2 ++ src/commands/index.ts | 2 ++ src/dom_components/index.ts | 18 +++++++++++++ src/editor/index.ts | 49 +++++++++++++++++++++++------------ src/keymaps/index.ts | 2 ++ src/modal_dialog/index.ts | 2 ++ src/rich_text_editor/index.ts | 2 ++ src/selector_manager/index.ts | 2 ++ src/storage_manager/index.ts | 13 ++++++++++ src/style_manager/index.ts | 9 +++++++ 12 files changed, 100 insertions(+), 16 deletions(-) diff --git a/src/asset_manager/index.ts b/src/asset_manager/index.ts index e87026089..b1e9b447b 100644 --- a/src/asset_manager/index.ts +++ b/src/asset_manager/index.ts @@ -52,6 +52,19 @@ import Assets from './model/Assets'; import AssetsView from './view/AssetsView'; import FileUploaderView from './view/FileUploader'; +export type AssetEvent = + | 'asset' + | 'asset:open' + | 'asset:close' + | 'asset:add' + | 'asset:remove' + | 'asset:update' + | 'asset:custom' + | 'asset:upload:start' + | 'asset:upload:end' + | 'asset:upload:error' + | 'asset:upload:response'; + export const evAll = 'asset'; export const evPfx = `${evAll}:`; export const evSelect = `${evPfx}select`; diff --git a/src/block_manager/index.ts b/src/block_manager/index.ts index d9c319fff..c9abd5daa 100644 --- a/src/block_manager/index.ts +++ b/src/block_manager/index.ts @@ -55,6 +55,8 @@ import { ItemManagerModule } from '../abstract/Module'; import EditorModel from '../editor/model/Editor'; import Component from '../dom_components/model/Component'; +export type BlockEvent = 'block:add' | 'block:remove' | 'block:drag:start' | 'block:drag' | 'block:drag:stop'; + export const evAll = 'block'; export const evPfx = `${evAll}:`; export const evAdd = `${evPfx}add`; diff --git a/src/canvas/index.ts b/src/canvas/index.ts index 17ac68ce5..fbeaa9cfe 100644 --- a/src/canvas/index.ts +++ b/src/canvas/index.ts @@ -57,6 +57,8 @@ import Frame from './model/Frame'; import CanvasView from './view/CanvasView'; import FrameView from './view/FrameView'; +export type CanvasEvent = 'canvas:dragenter' | 'canvas:dragover' | 'canvas:drop' | 'canvas:dragend' | 'canvas:dragdata'; + export default class CanvasModule extends Module { /** * Get configuration object diff --git a/src/commands/index.ts b/src/commands/index.ts index 1ae76b9d8..563cea0e4 100644 --- a/src/commands/index.ts +++ b/src/commands/index.ts @@ -50,6 +50,8 @@ import { eventDrag } from '../dom_components/model/Component'; import Editor from '../editor/model/Editor'; import { ObjectAny } from '../common'; +export type CommandEvent = 'run' | 'stop' | `run:${string}` | `stop:${string}` | `abort:${string}`; + const commandsDef = [ ['preview', 'Preview', 'preview'], ['resize', 'Resize', 'resize'], diff --git a/src/dom_components/index.ts b/src/dom_components/index.ts index 1d5f0f372..71d25801d 100644 --- a/src/dom_components/index.ts +++ b/src/dom_components/index.ts @@ -99,6 +99,24 @@ import { ItemManagerModule } from '../abstract/Module'; import EditorModel from '../editor/model/Editor'; import { ComponentAdd } from './model/types'; +export type ComponentEvent = + | 'component:create' + | 'component:mount' + | 'component:add' + | 'component:remove' + | 'component:remove:before' + | 'component:clone' + | 'component:update' + | 'component:styleUpdate' + | 'component:selected' + | 'component:deselected' + | 'component:toggled' + | 'component:type:add' + | 'component:type:update' + | 'component:drag:start' + | 'component:drag' + | 'component:drag:end'; + export default class ComponentManager extends ItemManagerModule { componentTypes = [ { diff --git a/src/editor/index.ts b/src/editor/index.ts index 8cae89941..2b33871d4 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -55,33 +55,33 @@ * @module docsjs.Editor */ import { IBaseModule } from '../abstract/Module'; -import AssetManager from '../asset_manager'; -import BlockManager from '../block_manager'; -import CanvasModule from '../canvas'; +import AssetManager, { AssetEvent } from '../asset_manager'; +import BlockManager, { BlockEvent } from '../block_manager'; +import CanvasModule, { CanvasEvent } from '../canvas'; import CodeManagerModule from '../code_manager'; -import CommandsModule from '../commands'; +import CommandsModule, { CommandEvent } from '../commands'; import { EventHandler } from '../common'; import CssComposer from '../css_composer'; import CssRule from '../css_composer/model/CssRule'; import CssRules from '../css_composer/model/CssRules'; import DeviceManager from '../device_manager'; -import ComponentManager from '../dom_components'; +import ComponentManager, { ComponentEvent } from '../dom_components'; import Component from '../dom_components/model/Component'; import Components from '../dom_components/model/Components'; import ComponentWrapper from '../dom_components/model/ComponentWrapper'; import I18nModule from '../i18n'; -import KeymapsModule from '../keymaps'; -import ModalModule from '../modal_dialog'; +import KeymapsModule, { KeymapEvent } from '../keymaps'; +import ModalModule, { ModalEvent } from '../modal_dialog'; import LayerManager from '../navigator'; import PageManager from '../pages'; import PanelManager from '../panels'; import ParserModule from '../parser'; import { CustomParserCss } from '../parser/config/config'; -import RichTextEditorModule from '../rich_text_editor'; -import SelectorManager from '../selector_manager'; -import StorageManager from '../storage_manager'; +import RichTextEditorModule, { RichTextEditorEvent } from '../rich_text_editor'; +import SelectorManager, { SelectorEvent } from '../selector_manager'; +import StorageManager, { StorageEvent } from '../storage_manager'; import { ProjectData } from '../storage_manager/model/IStorage'; -import StyleManager from '../style_manager'; +import StyleManager, { StyleManagerEvent } from '../style_manager'; import TraitManager from '../trait_manager'; import UndoManagerModule from '../undo_manager'; import UtilsModule from '../utils'; @@ -97,6 +97,23 @@ export type ParsedRule = { params?: string; }; +type EditorEvent = + | ComponentEvent + | BlockEvent + | AssetEvent + | KeymapEvent + | StyleManagerEvent + | StorageEvent + | CanvasEvent + | SelectorEvent + | RichTextEditorEvent + | ModalEvent + | CommandEvent + | GeneralEvent + | string; + +type GeneralEvent = 'canvasScroll' | 'undo' | 'redo' | 'load' | 'update'; + type EditorConfigType = EditorConfig & { pStylePrefix?: string }; type EditorModelParam = Parameters[N]; @@ -714,7 +731,7 @@ export default class Editor implements IBaseModule { * @param {Function} callback Callback function * @return {this} */ - on(event: string, callback: EventHandler) { + on(event: EditorEvent, callback: EventHandler) { this.em.on(event, callback); return this; } @@ -725,7 +742,7 @@ export default class Editor implements IBaseModule { * @param {Function} callback Callback function * @return {this} */ - once(event: string, callback: EventHandler) { + once(event: EditorEvent, callback: EventHandler) { this.em.once(event, callback); return this; } @@ -736,7 +753,7 @@ export default class Editor implements IBaseModule { * @param {Function} callback Callback function * @return {this} */ - off(event: string, callback: EventHandler) { + off(event: EditorEvent, callback: EventHandler) { this.em.off(event, callback); return this; } @@ -746,8 +763,8 @@ export default class Editor implements IBaseModule { * @param {string} event Event to trigger * @return {this} */ - trigger(eventName: string, ...args: any[]) { - this.em.trigger.apply(this.em, [eventName, ...args]); + trigger(event: EditorEvent, ...args: any[]) { + this.em.trigger.apply(this.em, [event, ...args]); return this; } diff --git a/src/keymaps/index.ts b/src/keymaps/index.ts index fe4325c73..b9377d62b 100644 --- a/src/keymaps/index.ts +++ b/src/keymaps/index.ts @@ -50,6 +50,8 @@ import { Module } from '../abstract'; import EditorModel from '../editor/model/Editor'; import defaults, { Keymap, KeymapOptions, KeymapsConfig } from './config'; +export type KeymapEvent = 'keymap:add' | 'keymap:remove' | 'keymap:emit' | `keymap:emit:${string}`; + hasWin() && keymaster.init(window); export default class KeymapsModule extends Module { diff --git a/src/modal_dialog/index.ts b/src/modal_dialog/index.ts index c9228e6af..e7857a993 100644 --- a/src/modal_dialog/index.ts +++ b/src/modal_dialog/index.ts @@ -43,6 +43,8 @@ import ModalM from './model/Modal'; import ModalView from './view/ModalView'; import { EventHandler } from '../common'; +export type ModalEvent = 'modal:open' | 'modal:close' | 'modal'; + export default class ModalModule extends Module { modal?: ModalView; diff --git a/src/rich_text_editor/index.ts b/src/rich_text_editor/index.ts index 907e18767..f3f79cf22 100644 --- a/src/rich_text_editor/index.ts +++ b/src/rich_text_editor/index.ts @@ -44,6 +44,8 @@ import EditorModel from '../editor/model/Editor'; import { removeEl } from '../utils/dom'; import ComponentView from '../dom_components/view/ComponentView'; +export type RichTextEditorEvent = 'rte:enable' | 'rte:disable'; + const eventsUp = 'change:canvasOffset frame:scroll component:update'; export interface CustomRTE { diff --git a/src/selector_manager/index.ts b/src/selector_manager/index.ts index e34348637..ce9068434 100644 --- a/src/selector_manager/index.ts +++ b/src/selector_manager/index.ts @@ -86,6 +86,8 @@ import { ItemManagerModule } from '../abstract/Module'; import { StyleModuleParam } from '../style_manager'; import StyleableModel from '../domain_abstract/model/StyleableModel'; +export type SelectorEvent = 'selector:add' | 'selector:remove' | 'selector:update' | 'selector:state' | 'selector'; + const isId = (str: string) => isString(str) && str[0] == '#'; const isClass = (str: string) => isString(str) && str[0] == '.'; diff --git a/src/storage_manager/index.ts b/src/storage_manager/index.ts index 541160e01..247bf12ad 100644 --- a/src/storage_manager/index.ts +++ b/src/storage_manager/index.ts @@ -59,6 +59,19 @@ import RemoteStorage from './model/RemoteStorage'; import EditorModel from '../editor/model/Editor'; import IStorage, { StorageOptions, ProjectData } from './model/IStorage'; +export type StorageEvent = + | 'storage:start' + | 'storage:start:store' + | 'storage:start:load' + | 'storage:load' + | 'storage:store' + | 'storage:end' + | 'storage:end:store' + | 'storage:end:load' + | 'storage:error' + | 'storage:error:store' + | 'storage:error:load'; + const eventStart = 'storage:start'; const eventAfter = 'storage:after'; const eventEnd = 'storage:end'; diff --git a/src/style_manager/index.ts b/src/style_manager/index.ts index 4991660d0..12492eed1 100644 --- a/src/style_manager/index.ts +++ b/src/style_manager/index.ts @@ -80,6 +80,15 @@ import CssRule from '../css_composer/model/CssRule'; import StyleableModel from '../domain_abstract/model/StyleableModel'; import { CustomPropertyView } from './view/PropertyView'; +export type StyleManagerEvent = + | 'style:sector:add' + | 'style:sector:remove' + | 'style:sector:update' + | 'style:property:add' + | 'style:property:remove' + | 'style:property:update' + | 'style:target'; + type StyleTarget = StyleableModel; export const evAll = 'style';