Add callback events to Components

packages/core/src/canvas/view/CanvasView.ts

@@ -98,7 +98,7 @@ export default class CanvasView extends ModuleView<Canvas> {
     this.clsUnscale = `${pfx}unscale`;
     this._initFrames();
     this.listenTo(em, events.refresh, this.clearOff);
-    this.listenTo(em, 'component:selected', this.checkSelected);
+    this.listenTo(em, ComponentsEvents.selected, this.checkSelected);
     this.listenTo(em, `${events.coords} ${events.zoom}`, this.updateFrames);
     this.listenTo(model, 'change:frames', this._onFramesUpdate);
     this.toggleListeners(true);

packages/core/src/commands/index.ts

@@ -39,7 +39,8 @@ import { isFunction, includes } from 'underscore';
 import CommandAbstract, { Command, CommandOptions, CommandObject, CommandFunction } from './view/CommandAbstract';
 import defConfig, { CommandsConfig } from './config/config';
 import { Module } from '../abstract';
-import Component, { eventDrag } from '../dom_components/model/Component';
+import Component from '../dom_components/model/Component';
+import { ComponentsEvents } from '../dom_components/types';
 import type Editor from '../editor/model/Editor';
 import type { ObjectAny } from '../common';
 import CommandsEvents from './types';
@@ -74,9 +75,9 @@ const commandsDef = [
 
 const defComOptions = { preserveSelected: 1 };
 
-export const getOnComponentDragStart = (em: Editor) => (data: any) => em.trigger(`${eventDrag}:start`, data);
+export const getOnComponentDragStart = (em: Editor) => (data: any) => em.trigger(ComponentsEvents.dragStart, data);
 
-export const getOnComponentDrag = (em: Editor) => (data: any) => em.trigger(eventDrag, data);
+export const getOnComponentDrag = (em: Editor) => (data: any) => em.trigger(ComponentsEvents.drag, data);
 
 export const getOnComponentDragEnd =
   (em: Editor, targets: Component[], opts: { altMode?: boolean } = {}) =>
@@ -86,7 +87,7 @@ export const getOnComponentDragEnd =
       em.setSelected(targets);
       targets[0].emitUpdate();
     });
-    em.trigger(`${eventDrag}:end`, data);
+    em.trigger(ComponentsEvents.dragEnd, data);
 
     // Defer selectComponent in order to prevent canvas "freeze" #2692
     setTimeout(() => em.runDefault(defComOptions));

packages/core/src/commands/view/OpenTraitManager.ts

@@ -1,5 +1,6 @@
 import { CommandObject } from './CommandAbstract';
 import { $ } from '../../common';
+import { ComponentsEvents } from '../../dom_components/types';
 
 export default {
   run(editor, sender) {
@@ -40,7 +41,7 @@ export default {
       panelC?.set('appendContent', this.$cn.get(0)).trigger('change:appendContent');
 
       this.target = editor.getModel();
-      this.listenTo(this.target, 'component:toggled', this.toggleTm);
+      this.listenTo(this.target, ComponentsEvents.toggled, this.toggleTm);
     }
 
     this.toggleTm();

packages/core/src/commands/view/SelectComponent.ts

@@ -94,7 +94,7 @@ export default {
     };
     methods[method](window, 'resize', this.onFrameUpdated);
     methods[method](listenToEl, 'scroll', this.onContainerChange);
-    em[method](`component:toggled ${eventCmpUpdate} undo redo`, this.onSelect, this);
+    em[method](`${ComponentsEvents.toggled} ${eventCmpUpdate} undo redo`, this.onSelect, this);
     em[method]('change:componentHovered', this.onHovered, this);
     em[method](`${ComponentsEvents.resize} styleable:change ${ComponentsEvents.input}`, this.updateGlobalPos, this);
     em[method](`${eventCmpUpdate}:toolbar`, this._upToolbar, this);

packages/core/src/dom_components/index.ts

@@ -131,24 +131,7 @@ import ComponentView, { IComponentView } from './view/ComponentView';
 import ComponentWrapperView from './view/ComponentWrapperView';
 import ComponentsView from './view/ComponentsView';
 
-export type ComponentEvent =
+export type { ComponentEvent } from './types';
-  | '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'
-  | 'component:resize';
 
 export interface ComponentModelDefinition extends IComponent {
   defaults?: ComponentDefinition | (() => ComponentDefinition);
@@ -634,7 +617,7 @@ export default class ComponentManager extends ItemManagerModule<DomComponentsCon
       em.Blocks.add(blockProps.id || type, blockProps);
     }
 
-    const event = `component:type:${compType ? 'update' : 'add'}`;
+    const event = compType ? ComponentsEvents.typeUpdate : ComponentsEvents.typeAdd;
     em?.trigger(event, compType || methods);
 
     return this;
@@ -687,7 +670,9 @@ export default class ComponentManager extends ItemManagerModule<DomComponentsCon
       component.set({
         status: 'selected',
       });
-      ['component:selected', 'component:toggled'].forEach((event) => this.em.trigger(event, component, opts));
+      [ComponentsEvents.selected, ComponentsEvents.toggled].forEach((event) =>
+        this.em.trigger(event, component, opts),
+      );
     }
   }
 
@@ -698,7 +683,9 @@ export default class ComponentManager extends ItemManagerModule<DomComponentsCon
         status: '',
         state: '',
       });
-      ['component:deselected', 'component:toggled'].forEach((event) => this.em.trigger(event, component, opts));
+      [ComponentsEvents.deselected, ComponentsEvents.toggled].forEach((event) =>
+        this.em.trigger(event, component, opts),
+      );
     }
   }
 
@@ -775,7 +762,7 @@ export default class ComponentManager extends ItemManagerModule<DomComponentsCon
 
     const symbol = component.clone({ symbol: true });
     isSymbolMain(symbol) && this.symbols.add(symbol);
-    this.em.trigger('component:toggled');
+    this.em.trigger(ComponentsEvents.toggled);
 
     return symbol;
   }

packages/core/src/dom_components/model/Component.ts

@@ -84,7 +84,7 @@ const escapeRegExp = (str: string) => {
 
 export const avoidInline = (em: EditorModel) => !!em?.getConfig().avoidInlineStyle;
 
-export const eventDrag = 'component:drag';
+export const eventDrag = ComponentsEvents.drag;
 export const keySymbols = '__symbols';
 export const keySymbol = '__symbol';
 export const keySymbolOvrd = '__symbol_ovrd';
@@ -1048,7 +1048,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
     const resolvedAttributes = this.dataResolverWatchers.getValueOrResolver('attributes', attrs);
     traits.length && this.setAttributes(resolvedAttributes);
     this.on(event, this.initTraits);
-    changed && em && em.trigger('component:toggled');
+    changed && em && em.trigger(ComponentsEvents.toggled);
     return this;
   }
 
@@ -1310,7 +1310,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
   updateTrait(id: string, props: Partial<TraitProperties>) {
     const trait = this.getTrait(id);
     trait && trait.set(props);
-    this.em?.trigger('component:toggled');
+    this.em?.trigger(ComponentsEvents.toggled);
     return this;
   }
 
@@ -1341,7 +1341,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
     const toRemove = ids.map((id) => this.getTrait(id));
     const { traits } = this;
     const removed = toRemove.length ? traits.remove(toRemove) : [];
-    this.em?.trigger('component:toggled');
+    this.em?.trigger(ComponentsEvents.toggled);
     return isArray(removed) ? removed : [removed];
   }
 
@@ -1361,7 +1361,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
   addTrait(trait: Parameters<Traits['add']>[0], opts: AddOptions = {}) {
     this.__loadTraits();
     const added = this.traits.add(trait, opts);
-    this.em?.trigger('component:toggled');
+    this.em?.trigger(ComponentsEvents.toggled);
     return isArray(added) ? added : [added];
   }
 
@@ -1467,7 +1467,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
       }
     }
 
-    const event = 'component:clone';
+    const event = ComponentsEvents.clone;
     em && em.trigger(event, cloned);
     this.trigger(event, cloned);
 

packages/core/src/dom_components/model/ComponentVideo.ts

@@ -1,5 +1,6 @@
 import { ObjectAny } from '../../common';
 import { isDef, isEmptyObj, toLowerCase } from '../../utils/mixins';
+import { ComponentsEvents } from '../types';
 import ComponentImage from './ComponentImage';
 import { ComponentOptions, ComponentProperties } from './types';
 
@@ -90,7 +91,7 @@ export default class ComponentVideo extends ComponentImage {
     this.set({ tagName }, { silent: true }); // avoid break in view
     // @ts-ignore
     this.set({ traits });
-    em.get('ready') && em.trigger('component:toggled');
+    em.get('ready') && em.trigger(ComponentsEvents.toggled);
   }
 
   /**

packages/core/src/dom_components/model/Components.ts

@@ -168,7 +168,7 @@ Component> {
     Components.cloneCssRules(em, fromDefOpts.visitedCmps);
 
     this.reset(newCmps, opts as any);
-    em?.trigger('component:content', parent, opts, input);
+    em?.trigger(ComponentsEvents.content, parent, opts, input);
     (parent as ComponentText).__checkInnerChilds?.();
   }
 

packages/core/src/dom_components/types.ts

@@ -1,5 +1,22 @@
-import { AddOptions, OptionAsDocument, WithHTMLParserOptions } from '../common';
+import type {
-import Component from './model/Component';
+  AddOptions,
+  EventCallbackAdd,
+  EventCallbackRemoveBefore,
+  ObjectAny,
+  OptionAsDocument,
+  WithHTMLParserOptions,
+} from '../common';
+import type {
+  ComponentResizeEventEndProps,
+  ComponentResizeEventMoveProps,
+  ComponentResizeEventStartProps,
+  ComponentResizeEventUpdateProps,
+} from '../commands/view/Resize';
+import type { StyleProps } from '../domain_abstract/model/StyleableModel';
+import type Component from './model/Component';
+import type { ResetFromStringOptions } from './model/Components';
+import type { ComponentOptions, ComponentStackItem } from './model/types';
+import type ComponentView from './view/ComponentView';
 
 export enum ActionLabelComponents {
   remove = 'component:remove',
@@ -38,6 +55,7 @@ export enum ComponentsEvents {
   remove = 'component:remove',
   removeBefore = 'component:remove:before',
   removed = 'component:removed',
+  clone = 'component:clone',
 
   /**
    * @event `component:create` Component created.
@@ -52,6 +70,7 @@ export enum ComponentsEvents {
    * editor.on('component:update', (component) => { ... });
    */
   update = 'component:update',
+  updateProperty = 'component:update:',
   updateInside = 'component:update-inside',
 
   /**
@@ -69,6 +88,14 @@ export enum ComponentsEvents {
    */
   select = 'component:select',
   selectBefore = 'component:select:before',
+  selected = 'component:selected',
+  deselected = 'component:deselected',
+  toggled = 'component:toggled',
+  typeAdd = 'component:type:add',
+  typeUpdate = 'component:type:update',
+  dragStart = 'component:drag:start',
+  drag = 'component:drag',
+  dragEnd = 'component:drag:end',
 
   /**
    * @event `component:mount` Component is mounted in the canvas.
@@ -105,6 +132,7 @@ export enum ComponentsEvents {
    * editor.on('component:input', (component) => { ... });
    */
   input = 'component:input',
+  content = 'component:content',
 
   /**
    * @event `component:resize` Component resized. This event is triggered when the component is resized in the canvas.
@@ -214,3 +242,134 @@ export enum ComponentsEvents {
    */
   symbol = 'symbol',
 }
+
+type ComponentEventStatic = Exclude<
+  `${ComponentsEvents}`,
+  `${ComponentsEvents.updateProperty}` | `${ComponentsEvents.styleUpdateProperty}`
+>;
+
+type SymbolMainEvent =
+  | ComponentsEvents.symbolMainAdd
+  | ComponentsEvents.symbolMainUpdate
+  | ComponentsEvents.symbolMainUpdateDeep
+  | ComponentsEvents.symbolMainRemove;
+
+type SymbolInstanceEvent = ComponentsEvents.symbolInstanceAdd | ComponentsEvents.symbolInstanceRemove;
+
+export type ComponentEvent =
+  | ComponentEventStatic
+  | `${ComponentsEvents.updateProperty}${string}`
+  | `${ComponentsEvents.styleUpdateProperty}${string}`;
+
+export interface ComponentScriptEventData {
+  component: Component;
+  view: ComponentView;
+  el: HTMLElement;
+}
+
+export interface ComponentStyleUpdateEventData {
+  style: StyleProps;
+}
+
+export interface ComponentUpdateEventData {
+  component: Component;
+  changed: ObjectAny;
+  options: ObjectAny;
+}
+
+export interface ComponentTypeEventData extends Partial<Omit<ComponentStackItem, 'id'>> {
+  id: string;
+  [key: string]: any;
+}
+
+export interface ComponentDragEventData {
+  target?: Component;
+  parent?: Component;
+  index?: number;
+  cancelled?: boolean;
+  [key: string]: unknown;
+}
+
+export interface ComponentResizeEventEndData {
+  type: 'end';
+  component: Component;
+  el: HTMLElement;
+}
+
+export type ComponentResizeEventData =
+  | ({ type: 'start' } & ComponentResizeEventStartProps)
+  | ({ type: 'move' } & ComponentResizeEventMoveProps)
+  | ComponentResizeEventEndData;
+
+export interface ComponentResizeInitEventData {
+  component: Component;
+  hasCustomResize: boolean;
+  resizable: Component['resizable'];
+}
+
+export interface ComponentRemovedEventData {
+  removeOptions: ObjectAny;
+}
+
+export interface SymbolEventData {
+  component: Component;
+  changed?: ObjectAny;
+  options?: ObjectAny;
+}
+
+export interface SymbolMainEventData extends SymbolEventData {
+  event: SymbolMainEvent;
+}
+
+export interface SymbolInstanceEventData extends SymbolEventData {
+  event: SymbolInstanceEvent;
+}
+
+export interface ComponentsEventCallback {
+  [ComponentsEvents.add]: EventCallbackAdd<Component>;
+  [ComponentsEvents.remove]: [Component];
+  [ComponentsEvents.removeBefore]: EventCallbackRemoveBefore<Component>;
+  [ComponentsEvents.removed]: [Component, ComponentRemovedEventData | undefined];
+  [ComponentsEvents.clone]: [Component];
+  [ComponentsEvents.create]: [Component, ComponentOptions];
+  [ComponentsEvents.update]: [Component, ...any[]];
+  [ComponentsEvents.updateInside]: [ComponentUpdateEventData];
+  [ComponentsEvents.styleUpdate]: [Component, ComponentStyleUpdateEventData];
+  [ComponentsEvents.select]: [Component, ObjectAny];
+  [ComponentsEvents.selectBefore]: [Component, ObjectAny];
+  [ComponentsEvents.selected]: [Component, ObjectAny];
+  [ComponentsEvents.deselected]: [Component, ObjectAny];
+  [ComponentsEvents.toggled]: [Component?, ObjectAny?];
+  [ComponentsEvents.typeAdd]: [ComponentTypeEventData];
+  [ComponentsEvents.typeUpdate]: [ComponentTypeEventData];
+  [ComponentsEvents.dragStart]: [ComponentDragEventData];
+  [ComponentsEvents.drag]: [ComponentDragEventData];
+  [ComponentsEvents.dragEnd]: [ComponentDragEventData];
+  [ComponentsEvents.mount]: [Component];
+  [ComponentsEvents.scriptMount]: [ComponentScriptEventData];
+  [ComponentsEvents.scriptMountBefore]: [ComponentScriptEventData];
+  [ComponentsEvents.scriptUnmount]: [ComponentScriptEventData];
+  [ComponentsEvents.render]: [ComponentScriptEventData];
+  [ComponentsEvents.input]: [Component];
+  [ComponentsEvents.content]: [Component | undefined, ResetFromStringOptions, string];
+  [ComponentsEvents.resize]: [ComponentResizeEventData];
+  [ComponentsEvents.resizeStart]: [ComponentResizeEventStartProps | ComponentResizeEventMoveProps];
+  [ComponentsEvents.resizeMove]: [ComponentResizeEventMoveProps];
+  [ComponentsEvents.resizeEnd]: [ComponentResizeEventEndProps];
+  [ComponentsEvents.resizeUpdate]: [ComponentResizeEventUpdateProps];
+  [ComponentsEvents.resizeInit]: [ComponentResizeInitEventData];
+  [ComponentsEvents.symbolMainAdd]: [SymbolEventData];
+  [ComponentsEvents.symbolMainUpdate]: [ComponentUpdateEventData];
+  [ComponentsEvents.symbolMainUpdateDeep]: [ComponentUpdateEventData];
+  [ComponentsEvents.symbolMainRemove]: [SymbolEventData];
+  [ComponentsEvents.symbolMain]: [SymbolMainEventData];
+  [ComponentsEvents.symbolInstanceAdd]: [SymbolEventData];
+  [ComponentsEvents.symbolInstanceRemove]: [SymbolEventData];
+  [ComponentsEvents.symbolInstance]: [SymbolInstanceEventData];
+  [ComponentsEvents.symbol]: [];
+  [key: `${ComponentsEvents.updateProperty}${string}`]: [Component, ...any[]];
+  [key: `${ComponentsEvents.styleUpdateProperty}${string}`]: [Component, ComponentStyleUpdateEventData];
+}
+
+// need this to avoid the TS documentation generator to break
+export default ComponentsEvents;

packages/core/src/domain_abstract/ui/InputColor.ts

@@ -1,4 +1,5 @@
 import { isUndefined } from 'underscore';
+import { ComponentsEvents } from '../../dom_components/types';
 import ColorPicker from '../../utils/ColorPicker';
 import $ from '../../utils/cash-dom';
 import Input from './Input';
@@ -166,7 +167,7 @@ export default class InputColor extends Input {
       });
 
       if (em && em.on!) {
-        this.listenTo(em, 'component:selected', () => {
+        this.listenTo(em, ComponentsEvents.selected, () => {
           this.movedColor && handleChange(this.movedColor);
           changed = true;
           this.movedColor = '';

packages/core/src/editor/model/Editor.ts

@@ -284,7 +284,7 @@ export default class EditorModel extends Model {
     toLog.forEach((e) => this.listenLog(e as keyof typeof logs));
 
     // Deprecations
-    [{ from: 'change:selectedComponent', to: 'component:toggled' }].forEach((event) => {
+    [{ from: 'change:selectedComponent', to: ComponentsEvents.toggled }].forEach((event) => {
       const eventFrom = event.from;
       const eventTo = event.to;
       this.listenTo(this, eventFrom, (...args) => {

packages/core/src/editor/types.ts

@@ -5,7 +5,7 @@ import { CanvasEvent, CanvasEventCallback } from '../canvas/types';
 import { CommandEvent, CommandsEventCallback } from '../commands/types';
 import { DataSourceEvent, DataSourcesEventCallback } from '../data_sources/types';
 import { DeviceEvent, DevicesEventCallback } from '../device_manager/types';
-import { ComponentEvent } from '../dom_components';
+import { ComponentEvent, ComponentsEventCallback } from '../dom_components/types';
 import { I18nEvent, I18nEventCallback } from '../i18n/types';
 import { KeymapEvent, KeymapsEventCallback } from '../keymaps/types';
 import { ModalEvent, ModalEventCallback } from '../modal_dialog/types';
@@ -56,6 +56,7 @@ export interface EditorEventCallbacks
     CommandsEventCallback,
     DataSourcesEventCallback,
     DevicesEventCallback,
+    ComponentsEventCallback,
     I18nEventCallback,
     KeymapsEventCallback,
     LayerEventCallback,

packages/core/src/navigator/index.ts

@@ -78,7 +78,7 @@ export default class LayerManager extends Module<LayerManagerConfig> {
 
   onLoad() {
     const { em, config, model } = this;
-    model.listenTo(em, 'component:selected', this.componentChanged);
+    model.listenTo(em, ComponentsEvents.selected, this.componentChanged);
     model.on('change:root', this.__onRootChange);
     model.listenTo(em, propsToListen, this.__onComponent);
     this.componentChanged();
@@ -179,7 +179,7 @@ export default class LayerManager extends Module<LayerManagerConfig> {
 
     component.setStyle(style, styleOpts as any);
     this.updateLayer(component);
-    this.em.trigger('component:toggled'); // Updates Style Manager #2938
+    this.em.trigger(ComponentsEvents.toggled); // Updates Style Manager #2938
   }
 
   /**

packages/core/src/selector_manager/index.ts

@@ -127,8 +127,8 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
     em.on('change:state', (m, value) => em.trigger(events.state, value));
     this.model.on('change:cFirst', (m, value) => em.trigger('selector:type', value));
     const eventCmpUpdateCls = `${ComponentsEvents.update}:classes`;
-    em.on(`component:toggled ${eventCmpUpdateCls}`, this.__updateSelectedByComponents);
+    em.on(`${ComponentsEvents.toggled} ${eventCmpUpdateCls}`, this.__updateSelectedByComponents);
-    const listenTo = `component:toggled ${eventCmpUpdateCls} change:device styleManager:update selector:state selector:type style:target`;
+    const listenTo = `${ComponentsEvents.toggled} ${eventCmpUpdateCls} change:device styleManager:update selector:state selector:type style:target`;
     this.model.listenTo(em, listenTo, () => this.__update());
   }
 

packages/core/src/selector_manager/view/ClassTagsView.ts

@@ -86,7 +86,7 @@ export default class ClassTagsView extends View<Selector> {
     this.checkSync = debounce(this.checkSync.bind(this), 0);
     const eventCmpUpdate = ComponentsEvents.update;
     const evClsUp = `${eventCmpUpdate}:classes`;
-    const toList = `component:toggled ${evClsUp}`;
+    const toList = `${ComponentsEvents.toggled} ${evClsUp}`;
     const toListCls = `${evClsUp} ${eventCmpUpdate}:attributes:id change:state`;
     this.listenTo(em, toList, this.componentChanged);
     this.listenTo(em, 'styleManager:update', this.componentChanged);
@@ -126,7 +126,7 @@ export default class ClassTagsView extends View<Selector> {
     });
 
     style && rule.addStyle(style);
-    em.trigger('component:toggled');
+    em.trigger(ComponentsEvents.toggled);
     em.trigger('component:sync-style', {
       component: target,
       selectors,

packages/core/src/style_manager/index.ts

@@ -114,11 +114,11 @@ export default class StyleManager extends ItemManagerModule<
 
     // Triggers for the selection refresh and properties
     const eventCmpUpdate = ComponentsEvents.update;
-    const ev = `component:toggled ${eventCmpUpdate}:classes change:state change:device frame:resized selector:type`;
+    const ev = `${ComponentsEvents.toggled} ${eventCmpUpdate}:classes change:state change:device frame:resized selector:type`;
     this.upAll = debounce(() => this.__upSel(), 0);
     model.listenTo(em, ev, this.upAll as any);
     // Clear state target on any component selection change, without debounce (#4208)
-    model.listenTo(em, 'component:toggled', this.__clearStateTarget);
+    model.listenTo(em, ComponentsEvents.toggled, this.__clearStateTarget);
 
     // Triggers only for properties (avoid selection refresh)
     const upProps = debounce(() => {

packages/core/src/trait_manager/index.ts

@@ -32,6 +32,7 @@ import { bindAll, debounce } from 'underscore';
 import { Module } from '../abstract';
 import { Model } from '../common';
 import Component from '../dom_components/model/Component';
+import { ComponentsEvents } from '../dom_components/types';
 import EditorModel from '../editor/model/Editor';
 import defConfig from './config/config';
 import {
@@ -89,7 +90,7 @@ export default class TraitManager extends Module<TraitManagerConfigModule> {
 
     const upAll = debounce(() => this.__upSel(), 0);
     const update = debounce(() => this.__onUp(), 0);
-    state.listenTo(em, 'component:toggled', upAll);
+    state.listenTo(em, ComponentsEvents.toggled, upAll);
     state.listenTo(em, events.value, update);
     state.on('change:traits', this.__onSelect);
 

packages/core/src/trait_manager/view/TraitsView.ts

@@ -1,5 +1,6 @@
 import TraitManager from '..';
 import CategoryView from '../../abstract/ModuleCategoryView';
+import { ComponentsEvents } from '../../dom_components/types';
 import DomainViews from '../../domain_abstract/view/DomainViews';
 import EditorModel from '../../editor/model/Editor';
 import Trait from '../model/Trait';
@@ -49,7 +50,7 @@ export default class TraitsView extends DomainViews {
     this.classNoCat = `${ppfx}traits-empty-c`;
     this.catsClass = `${ppfx}trait-categories`;
     this.collection = new Traits([], { em });
-    this.listenTo(em, 'component:toggled', this.updatedCollection);
+    this.listenTo(em, ComponentsEvents.toggled, this.updatedCollection);
     this.updatedCollection();
   }