diff --git a/packages/core/src/navigator/index.ts b/packages/core/src/navigator/index.ts index 4325b191f..f45a27726 100644 --- a/packages/core/src/navigator/index.ts +++ b/packages/core/src/navigator/index.ts @@ -9,7 +9,7 @@ * }) * ``` * - * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance + * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance. * * ```js * const layers = editor.Layers; diff --git a/packages/core/src/selector_manager/index.ts b/packages/core/src/selector_manager/index.ts index 129cdfec8..25f822a96 100644 --- a/packages/core/src/selector_manager/index.ts +++ b/packages/core/src/selector_manager/index.ts @@ -29,23 +29,13 @@ * }) * ``` * - * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance. + * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance. * * ```js - * // Listen to events - * editor.on('selector:add', (selector) => { ... }); - * - * // Use the API * const sm = editor.Selectors; - * sm.add(...); * ``` * - * ## Available Events - * * `selector:add` - Selector added. The [Selector] is passed as an argument to the callback. - * * `selector:remove` - Selector removed. The [Selector] is passed as an argument to the callback. - * * `selector:update` - Selector updated. The [Selector] and the object containing changes are passed as arguments to the callback. - * * `selector:state` - States changed. An object containing all the available data about the triggered event is passed as an argument to the callback. - * * `selector` - 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. + * {REPLACE_EVENTS} * * ## Methods * * [getConfig](#getconfig) @@ -73,47 +63,27 @@ * @module Selectors */ -import { isString, debounce, isObject, isArray, bindAll } from 'underscore'; +import { bindAll, debounce, isArray, isObject, isString } from 'underscore'; +import { ItemManagerModule } from '../abstract/Module'; +import { Collection, Debounced, Model, RemoveOptions, SetOptions } from '../common'; +import Component from '../dom_components/model/Component'; +import { ComponentsEvents } from '../dom_components/types'; +import StyleableModel from '../domain_abstract/model/StyleableModel'; +import EditorModel from '../editor/model/Editor'; +import { StyleModuleParam } from '../style_manager'; import { isComponent, isRule } from '../utils/mixins'; -import { Model, Collection, RemoveOptions, SetOptions, Debounced } from '../common'; import defConfig, { SelectorManagerConfig } from './config/config'; import Selector from './model/Selector'; import Selectors from './model/Selectors'; import State from './model/State'; +import { SelectorEvents, SelectorStringObject } from './types'; import ClassTagsView from './view/ClassTagsView'; -import EditorModel from '../editor/model/Editor'; -import Component from '../dom_components/model/Component'; -import { ItemManagerModule } from '../abstract/Module'; -import { StyleModuleParam } from '../style_manager'; -import StyleableModel from '../domain_abstract/model/StyleableModel'; -import { ComponentsEvents } from '../dom_components/types'; -export type SelectorEvent = 'selector:add' | 'selector:remove' | 'selector:update' | 'selector:state' | 'selector'; +export type { SelectorEvent } from './types'; const isId = (str: string) => isString(str) && str[0] == '#'; const isClass = (str: string) => isString(str) && str[0] == '.'; -export const evAll = 'selector'; -export const evPfx = `${evAll}:`; -export const evAdd = `${evPfx}add`; -export const evUpdate = `${evPfx}update`; -export const evRemove = `${evPfx}remove`; -export const evRemoveBefore = `${evRemove}:before`; -export const evCustom = `${evPfx}custom`; -export const evState = `${evPfx}state`; - -const selectorEvents = { - all: evAll, - update: evUpdate, - add: evAdd, - remove: evRemove, - removeBefore: evRemoveBefore, - state: evState, - custom: evCustom, -}; - -type SelectorStringObject = string | { name?: string; label?: string; type?: number }; - export default class SelectorManager extends ItemManagerModule { Selector = Selector; @@ -124,7 +94,7 @@ export default class SelectorManager extends ItemManagerModule this.__trgCustom(), 0); this.__initListen({ collections: [this.states, this.selected], - propagate: [{ entity: this.states, event: this.events.state }], + propagate: [{ entity: this.states, event: events.state }], }); - em.on('change:state', (m, value) => em.trigger(evState, value)); + 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); diff --git a/packages/core/src/selector_manager/types.ts b/packages/core/src/selector_manager/types.ts new file mode 100644 index 000000000..1585ba894 --- /dev/null +++ b/packages/core/src/selector_manager/types.ts @@ -0,0 +1,59 @@ +/**{START_EVENTS}*/ +export enum SelectorEvents { + /** + * @event `selector:add` Selector added. The Selector is passed as an argument to the callback. + * @example + * editor.on('selector:add', (selector) => { ... }); + */ + add = 'selector:add', + + /** + * @event `selector:remove` Selector removed. The Selector is passed as an argument to the callback. + * @example + * editor.on('selector:remove', (selector) => { ... }); + */ + remove = 'selector:remove', + + /** + * @event `selector:remove:before` Before selector remove. The Selector is passed as an argument to the callback. + * @example + * editor.on('selector:remove:before', (selector) => { ... }); + */ + removeBefore = 'selector:remove:before', + + /** + * @event `selector:update` Selector updated. The Selector and the object containing changes are passed as arguments to the callback. + * @example + * editor.on('selector:update', (selector, changes) => { ... }); + */ + update = 'selector:update', + + /** + * @event `selector:state` States changed. An object containing all the available data about the triggered event is passed as an argument to the callback. + * @example + * editor.on('selector:state', (state) => { ... }); + */ + state = 'selector:state', + + /** + * @event `selector:custom` Custom selector event. An object containing states, selected selectors, and container is passed as an argument. + * @example + * editor.on('selector:custom', ({ states, selected, container }) => { ... }); + */ + custom = 'selector:custom', + + /** + * @event `selector` 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('selector', ({ event, selector, changes, ... }) => { ... }); + */ + all = 'selector', +} +/**{END_EVENTS}*/ + +export type SelectorEvent = `${SelectorEvents}`; + +export type SelectorStringObject = string | { name?: string; label?: string; type?: number }; + +// need this to avoid the TS documentation generator to break +export default SelectorEvents;