diff --git a/packages/core/src/canvas/view/CanvasView.ts b/packages/core/src/canvas/view/CanvasView.ts index fbf8152c7..7696aaa7b 100644 --- a/packages/core/src/canvas/view/CanvasView.ts +++ b/packages/core/src/canvas/view/CanvasView.ts @@ -98,7 +98,7 @@ export default class CanvasView extends ModuleView { 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); diff --git a/packages/core/src/commands/index.ts b/packages/core/src/commands/index.ts index b142ef809..a9c65b972 100644 --- a/packages/core/src/commands/index.ts +++ b/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)); diff --git a/packages/core/src/commands/view/OpenTraitManager.ts b/packages/core/src/commands/view/OpenTraitManager.ts index cb458a6e9..1076f57ff 100644 --- a/packages/core/src/commands/view/OpenTraitManager.ts +++ b/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(); diff --git a/packages/core/src/commands/view/SelectComponent.ts b/packages/core/src/commands/view/SelectComponent.ts index 5f44b79c8..ce4163d6c 100644 --- a/packages/core/src/commands/view/SelectComponent.ts +++ b/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); diff --git a/packages/core/src/dom_components/index.ts b/packages/core/src/dom_components/index.ts index 807492318..9847c7e9e 100644 --- a/packages/core/src/dom_components/index.ts +++ b/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 = - | '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 type { ComponentEvent } from './types'; export interface ComponentModelDefinition extends IComponent { defaults?: ComponentDefinition | (() => ComponentDefinition); @@ -634,7 +617,7 @@ export default class ComponentManager extends ItemManagerModule 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 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 { 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 { 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 { updateTrait(id: string, props: Partial) { 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 { 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 { addTrait(trait: Parameters[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 { } } - const event = 'component:clone'; + const event = ComponentsEvents.clone; em && em.trigger(event, cloned); this.trigger(event, cloned); diff --git a/packages/core/src/dom_components/model/ComponentVideo.ts b/packages/core/src/dom_components/model/ComponentVideo.ts index 1bd420723..4288d25c4 100644 --- a/packages/core/src/dom_components/model/ComponentVideo.ts +++ b/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); } /** diff --git a/packages/core/src/dom_components/model/Components.ts b/packages/core/src/dom_components/model/Components.ts index f62832eaf..74f6273b3 100644 --- a/packages/core/src/dom_components/model/Components.ts +++ b/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?.(); } diff --git a/packages/core/src/dom_components/types.ts b/packages/core/src/dom_components/types.ts index d0c5782fd..15047150b 100644 --- a/packages/core/src/dom_components/types.ts +++ b/packages/core/src/dom_components/types.ts @@ -1,5 +1,22 @@ -import { AddOptions, OptionAsDocument, WithHTMLParserOptions } from '../common'; -import Component from './model/Component'; +import type { + 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> { + 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; + [ComponentsEvents.remove]: [Component]; + [ComponentsEvents.removeBefore]: EventCallbackRemoveBefore; + [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; diff --git a/packages/core/src/domain_abstract/ui/InputColor.ts b/packages/core/src/domain_abstract/ui/InputColor.ts index 051dffab5..3776c168d 100644 --- a/packages/core/src/domain_abstract/ui/InputColor.ts +++ b/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 = ''; diff --git a/packages/core/src/editor/model/Editor.ts b/packages/core/src/editor/model/Editor.ts index 1dc90fee5..cebe55085 100644 --- a/packages/core/src/editor/model/Editor.ts +++ b/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) => { diff --git a/packages/core/src/editor/types.ts b/packages/core/src/editor/types.ts index 461d6dcfc..baaf88f33 100644 --- a/packages/core/src/editor/types.ts +++ b/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, diff --git a/packages/core/src/navigator/index.ts b/packages/core/src/navigator/index.ts index ff4388a92..11019ef6d 100644 --- a/packages/core/src/navigator/index.ts +++ b/packages/core/src/navigator/index.ts @@ -78,7 +78,7 @@ export default class LayerManager extends Module { 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 { 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 } /** diff --git a/packages/core/src/selector_manager/index.ts b/packages/core/src/selector_manager/index.ts index 274660e79..3b8062957 100644 --- a/packages/core/src/selector_manager/index.ts +++ b/packages/core/src/selector_manager/index.ts @@ -127,8 +127,8 @@ export default class SelectorManager extends ItemManagerModule 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); - const listenTo = `component:toggled ${eventCmpUpdateCls} change:device styleManager:update selector:state selector:type style:target`; + em.on(`${ComponentsEvents.toggled} ${eventCmpUpdateCls}`, this.__updateSelectedByComponents); + const listenTo = `${ComponentsEvents.toggled} ${eventCmpUpdateCls} change:device styleManager:update selector:state selector:type style:target`; this.model.listenTo(em, listenTo, () => this.__update()); } diff --git a/packages/core/src/selector_manager/view/ClassTagsView.ts b/packages/core/src/selector_manager/view/ClassTagsView.ts index 5da9b1268..4d2f6a5b9 100644 --- a/packages/core/src/selector_manager/view/ClassTagsView.ts +++ b/packages/core/src/selector_manager/view/ClassTagsView.ts @@ -86,7 +86,7 @@ export default class ClassTagsView extends View { 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 { }); style && rule.addStyle(style); - em.trigger('component:toggled'); + em.trigger(ComponentsEvents.toggled); em.trigger('component:sync-style', { component: target, selectors, diff --git a/packages/core/src/style_manager/index.ts b/packages/core/src/style_manager/index.ts index a64d4b70f..04c59ac0c 100644 --- a/packages/core/src/style_manager/index.ts +++ b/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(() => { diff --git a/packages/core/src/trait_manager/index.ts b/packages/core/src/trait_manager/index.ts index 31a4a3cc9..750ceec06 100644 --- a/packages/core/src/trait_manager/index.ts +++ b/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 { 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); diff --git a/packages/core/src/trait_manager/view/TraitsView.ts b/packages/core/src/trait_manager/view/TraitsView.ts index a070cd480..703642986 100644 --- a/packages/core/src/trait_manager/view/TraitsView.ts +++ b/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(); }