Add events TS

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`;

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`;

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<CanvasConfig> {
   /**
    * Get configuration object

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'],

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 = [
     {

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<T extends keyof EditorModel, N extends number> = Parameters<EditorModel[T]>[N];
@@ -714,7 +731,7 @@ export default class Editor implements IBaseModule<EditorConfig> {
    * @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<EditorConfig> {
    * @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<EditorConfig> {
    * @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<EditorConfig> {
    * @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;
   }
 

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<KeymapsConfig & { name?: string }> {

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<ModalConfig> {
   modal?: ModalView;
 

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<T = any> {

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] == '.';
 

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';

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';