Create trait types

src/trait_manager/index.ts

@@ -1,53 +1,23 @@
 import { debounce } from 'underscore';
-import { Model } from '../common';
 import { Module } from '../abstract';
-import defaults, { TraitManagerConfig } from './config/config';
+import Categories from '../abstract/ModuleCategories';
-import TraitsView from './view/TraitsView';
+import Category from '../abstract/ModuleCategory';
-import TraitView from './view/TraitView';
+import { Model } from '../common';
-import TraitSelectView from './view/TraitSelectView';
-import TraitCheckboxView from './view/TraitCheckboxView';
-import TraitNumberView from './view/TraitNumberView';
-import TraitColorView from './view/TraitColorView';
-import TraitButtonView from './view/TraitButtonView';
-import EditorModel from '../editor/model/Editor';
 import Component from '../dom_components/model/Component';
+import EditorModel from '../editor/model/Editor';
+import defaults from './config/config';
 import Trait from './model/Trait';
-import Category from '../abstract/ModuleCategory';
+import { CustomTrait, TraitManagerConfigModule, TraitViewTypes, TraitsEvents } from './types';
-import Categories from '../abstract/ModuleCategories';
+import TraitButtonView from './view/TraitButtonView';
-
+import TraitCheckboxView from './view/TraitCheckboxView';
-export const evAll = 'trait';
+import TraitColorView from './view/TraitColorView';
-export const evPfx = `${evAll}:`;
+import TraitNumberView from './view/TraitNumberView';
-export const evCustom = `${evPfx}custom`;
+import TraitSelectView from './view/TraitSelectView';
-
+import TraitView from './view/TraitView';
-const typesDef: { [id: string]: { new (o: any): TraitView } } = {
+import TraitsView from './view/TraitsView';
-  text: TraitView,
-  number: TraitNumberView,
-  select: TraitSelectView,
-  checkbox: TraitCheckboxView,
-  color: TraitColorView,
-  button: TraitButtonView,
-};
-
-interface ITraitView {
-  noLabel?: TraitView['noLabel'];
-  eventCapture?: TraitView['eventCapture'];
-  templateInput?: TraitView['templateInput'];
-  onEvent?: TraitView['onEvent'];
-  onUpdate?: TraitView['onUpdate'];
-  createInput?: TraitView['createInput'];
-  createLabel?: TraitView['createLabel'];
-}
-
-export type CustomTrait<T> = ITraitView & T & ThisType<T & TraitView>;
-
-export interface TraitManagerConfigModule extends TraitManagerConfig {
-  pStylePrefix?: string;
-  em: EditorModel;
-}
 
 export default class TraitManager extends Module<TraitManagerConfigModule> {
   view?: TraitsView;
-  types: { [id: string]: { new (o: any): TraitView } };
   model: Model;
   __ctn?: any;
   categories: Categories;
@@ -55,10 +25,14 @@ export default class TraitManager extends Module<TraitManagerConfigModule> {
   TraitsView = TraitsView;
   Category = Category;
   Categories = Categories;
-
+  events = TraitsEvents;
-  events = {
+  types: TraitViewTypes = {
-    all: evAll,
+    text: TraitView,
-    custom: evCustom,
+    number: TraitNumberView,
+    select: TraitSelectView,
+    checkbox: TraitCheckboxView,
+    color: TraitColorView,
+    button: TraitButtonView,
   };
 
   /**
@@ -76,7 +50,6 @@ export default class TraitManager extends Module<TraitManagerConfigModule> {
     super(em, 'TraitManager', defaults as any);
     const model = new Model();
     this.model = model;
-    this.types = typesDef;
     const ppfx = this.config.pStylePrefix;
     ppfx && (this.config.stylePrefix = `${ppfx}${this.config.stylePrefix}`);
     this.categories = new Categories();

src/trait_manager/types.ts

@@ -0,0 +1,47 @@
+import EditorModel from '../editor/model/Editor';
+import { TraitManagerConfig } from './config/config';
+import TraitView from './view/TraitView';
+
+export interface TraitViewTypes {
+  [id: string]: { new (o: any): TraitView };
+}
+
+export interface ITraitView {
+  noLabel?: TraitView['noLabel'];
+  eventCapture?: TraitView['eventCapture'];
+  templateInput?: TraitView['templateInput'];
+  onEvent?: TraitView['onEvent'];
+  onUpdate?: TraitView['onUpdate'];
+  createInput?: TraitView['createInput'];
+  createLabel?: TraitView['createLabel'];
+}
+
+export type CustomTrait<T> = ITraitView & T & ThisType<T & TraitView>;
+
+export interface TraitManagerConfigModule extends TraitManagerConfig {
+  pStylePrefix?: string;
+  em: EditorModel;
+}
+
+export type TraitsEvent = `${TraitsEvents}`;
+
+/**{START_EVENTS}*/
+export enum TraitsEvents {
+  /**
+   * @event `trait:custom`
+   * @example
+   * editor.on('trait:custom', () => { ... });
+   */
+  custom = 'trait:custom',
+
+  /**
+   * @event `trait` Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
+   * @example
+   * editor.on('trait', ({ event, model, ... }) => { ... });
+   */
+  all = 'trait',
+}
+/**{END_EVENTS}*/
+
+// need this to avoid the TS documentation generator to break
+export default TraitsEvents;

src/trait_manager/view/TraitsView.ts

@@ -1,11 +1,12 @@
+import { isObject, isString } from 'underscore';
+import TraitManager from '..';
+import Categories from '../../abstract/ModuleCategories';
+import CategoryView from '../../abstract/ModuleCategoryView';
 import DomainViews from '../../domain_abstract/view/DomainViews';
 import EditorModel from '../../editor/model/Editor';
-import TraitView from './TraitView';
-import CategoryView from '../../abstract/ModuleCategoryView';
-import Categories from '../../abstract/ModuleCategories';
 import Trait from '../model/Trait';
-import { isObject, isString } from 'underscore';
+import { TraitManagerConfigModule } from '../types';
-import TraitManager, { TraitManagerConfigModule } from '..';
+import TraitView from './TraitView';
 
 interface TraitsViewProps {
   el?: HTMLElement;