From 9559f529144b1c0feb156a5a7e4b749f9af730a5 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 24 Oct 2025 13:44:52 +0400 Subject: [PATCH] Move StyleManager events --- packages/core/src/style_manager/index.ts | 104 ++++++----------------- packages/core/src/style_manager/types.ts | 90 ++++++++++++++++++++ 2 files changed, 114 insertions(+), 80 deletions(-) create mode 100644 packages/core/src/style_manager/types.ts diff --git a/packages/core/src/style_manager/index.ts b/packages/core/src/style_manager/index.ts index f0d93c1ef..295bbe1e4 100644 --- a/packages/core/src/style_manager/index.ts +++ b/packages/core/src/style_manager/index.ts @@ -9,29 +9,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('style:sector:add', (sector) => { ... }); - * - * // Use the API * const styleManager = editor.StyleManager; - * styleManager.addSector(...); * ``` - * ## Available Events - * * `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback. - * * `style:sector:remove` - Sector removed. The [Sector] is passed as an argument to the callback. - * * `style:sector:update` - Sector updated. The [Sector] and the object containing changes are passed as arguments to the callback. - * * `style:property:add` - Property added. The [Property] is passed as an argument to the callback. - * * `style:property:remove` - Property removed. The [Property] is passed as an argument to the callback. - * * `style:property:update` - Property updated. The [Property] and the object containing changes are passed as arguments to the callback. - * * `style:target` - Target selection changed. The target (or `null` in case the target is deselected) is passed as an argument to the callback. - * + * + * {REPLACE_EVENTS} * * ## Methods * * [getConfig](#getconfig) @@ -63,72 +47,31 @@ * @module docsjs.StyleManager */ -import { isUndefined, isArray, isString, debounce, bindAll } from 'underscore'; -import { isComponent } from '../utils/mixins'; +import { bindAll, debounce, isArray, isString, isUndefined } from 'underscore'; +import { ItemManagerModule } from '../abstract/Module'; import { AddOptions, Debounced, Model } from '../common'; +import CssRule from '../css_composer/model/CssRule'; +import Component from '../dom_components/model/Component'; +import { ComponentsEvents } from '../dom_components/types'; +import StyleableModel, { StyleProps } from '../domain_abstract/model/StyleableModel'; +import EditorModel from '../editor/model/Editor'; +import { isComponent } from '../utils/mixins'; import defConfig, { StyleManagerConfig } from './config/config'; -import Sector, { SectorProperties } from './model/Sector'; -import Sectors from './model/Sectors'; import Properties from './model/Properties'; -import PropertyFactory from './model/PropertyFactory'; -import SectorsView from './view/SectorsView'; -import { ItemManagerModule } from '../abstract/Module'; -import EditorModel from '../editor/model/Editor'; import Property, { PropertyProps } from './model/Property'; -import Component from '../dom_components/model/Component'; -import CssRule from '../css_composer/model/CssRule'; -import StyleableModel, { StyleProps } from '../domain_abstract/model/StyleableModel'; -import { CustomPropertyView } from './view/PropertyView'; -import { PropertySelectProps } from './model/PropertySelect'; -import { PropertyNumberProps } from './model/PropertyNumber'; -import PropertyStack, { PropertyStackProps } from './model/PropertyStack'; import PropertyComposite from './model/PropertyComposite'; -import { ComponentsEvents } from '../dom_components/types'; +import PropertyFactory from './model/PropertyFactory'; +import PropertyStack from './model/PropertyStack'; +import Sector, { SectorProperties } from './model/Sector'; +import Sectors from './model/Sectors'; +import { PropertyTypes, StyleManagerEvents, StyleTarget } from './types'; +import { CustomPropertyView } from './view/PropertyView'; +import SectorsView from './view/SectorsView'; -export type PropertyTypes = PropertyStackProps | PropertySelectProps | PropertyNumberProps; - -export type StyleManagerEvent = - | 'style:sector:add' - | 'style:sector:remove' - | 'style:sector:update' - | 'style:property:add' - | 'style:property:remove' - | 'style:property:update' - | 'style:target'; - -export type StyleTarget = StyleableModel; - -export const evAll = 'style'; -export const evPfx = `${evAll}:`; -export const evSector = `${evPfx}sector`; -export const evSectorAdd = `${evSector}:add`; -export const evSectorRemove = `${evSector}:remove`; -export const evSectorUpdate = `${evSector}:update`; -export const evProp = `${evPfx}property`; -export const evPropAdd = `${evProp}:add`; -export const evPropRemove = `${evProp}:remove`; -export const evPropUp = `${evProp}:update`; -export const evLayerSelect = `${evPfx}layer:select`; -export const evTarget = `${evPfx}target`; -export const evCustom = `${evPfx}custom`; - -export type StyleModuleParam = Parameters[N]; +export type { PropertyTypes, StyleManagerEvent, StyleModuleParam, StyleTarget } from './types'; const propDef = (value: any) => value || value === 0; -const stylesEvents = { - all: evAll, - sectorAdd: evSectorAdd, - sectorRemove: evSectorRemove, - sectorUpdate: evSectorUpdate, - propertyAdd: evPropAdd, - propertyRemove: evPropRemove, - propertyUpdate: evPropUp, - layerSelect: evLayerSelect, - target: evTarget, - custom: evCustom, -}; - export default class StyleManager extends ItemManagerModule< StyleManagerConfig, /** @ts-ignore */ @@ -137,7 +80,7 @@ export default class StyleManager extends ItemManagerModule< builtIn: PropertyFactory; upAll: Debounced; properties: typeof Properties; - events!: typeof stylesEvents; + events = StyleManagerEvents; sectors: Sectors; SectView!: SectorsView; Sector = Sector; @@ -157,8 +100,9 @@ export default class StyleManager extends ItemManagerModule< * @private */ constructor(em: EditorModel) { - super(em, 'StyleManager', new Sectors([], { em }), stylesEvents, defConfig()); + super(em, 'StyleManager', new Sectors([], { em }), StyleManagerEvents, defConfig()); bindAll(this, '__clearStateTarget'); + const { events } = this; const c = this.config; const ppfx = c.pStylePrefix; if (ppfx) c.stylePrefix = ppfx + c.stylePrefix; @@ -185,10 +129,10 @@ export default class StyleManager extends ItemManagerModule< // Triggers only custom event const trgCustom = debounce(() => this.__trgCustom(), 0); - model.listenTo(em, `${evLayerSelect} ${evTarget}`, trgCustom); + model.listenTo(em, `${events.layerSelect} ${events.target}`, trgCustom); // Other listeners - model.on('change:lastTarget', () => em.trigger(evTarget, this.getSelected())); + model.on('change:lastTarget', () => em.trigger(events.target, this.getSelected())); } __upSel() { diff --git a/packages/core/src/style_manager/types.ts b/packages/core/src/style_manager/types.ts new file mode 100644 index 000000000..ae8dbd639 --- /dev/null +++ b/packages/core/src/style_manager/types.ts @@ -0,0 +1,90 @@ +import StyleManager from '.'; +import StyleableModel from '../domain_abstract/model/StyleableModel'; +import { PropertyNumberProps } from './model/PropertyNumber'; +import { PropertySelectProps } from './model/PropertySelect'; +import { PropertyStackProps } from './model/PropertyStack'; + +export type PropertyTypes = PropertyStackProps | PropertySelectProps | PropertyNumberProps; + +export type StyleTarget = StyleableModel; + +export type StyleModuleParam = Parameters[N]; + +/**{START_EVENTS}*/ +export enum StyleManagerEvents { + /** + * @event `style:sector:add` Sector added. The Sector is passed as an argument to the callback. + * @example + * editor.on('style:sector:add', (sector) => { ... }); + */ + sectorAdd = 'style:sector:add', + + /** + * @event `style:sector:remove` Sector removed. The Sector is passed as an argument to the callback. + * @example + * editor.on('style:sector:remove', (sector) => { ... }); + */ + sectorRemove = 'style:sector:remove', + + /** + * @event `style:sector:update` Sector updated. The Sector and the object containing changes are passed as arguments to the callback. + * @example + * editor.on('style:sector:update', (sector, changes) => { ... }); + */ + sectorUpdate = 'style:sector:update', + + /** + * @event `style:property:add` Property added. The Property is passed as an argument to the callback. + * @example + * editor.on('style:property:add', (property) => { ... }); + */ + propertyAdd = 'style:property:add', + + /** + * @event `style:property:remove` Property removed. The Property is passed as an argument to the callback. + * @example + * editor.on('style:property:remove', (property) => { ... }); + */ + propertyRemove = 'style:property:remove', + + /** + * @event `style:property:update` Property updated. The Property and the object containing changes are passed as arguments to the callback. + * @example + * editor.on('style:property:update', (property, changes) => { ... }); + */ + propertyUpdate = 'style:property:update', + + /** + * @event `style:target` Target selection changed. The target (or null in case the target is deselected) is passed as an argument to the callback. + * @example + * editor.on('style:target', (target) => { ... }); + */ + target = 'style:target', + + /** + * @event `style:layer:select` Layer selected. Object containing layer data is passed as an argument. + * @example + * editor.on('style:layer:select', (data) => { ... }); + */ + layerSelect = 'style:layer:select', + + /** + * @event `style:custom` Custom style event. Object containing all custom data is passed as an argument. + * @example + * editor.on('style:custom', ({ container }) => { ... }); + */ + custom = 'style:custom', + + /** + * @event `style` 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('style', ({ event, sector, property, ... }) => { ... }); + */ + all = 'style', +} +/**{END_EVENTS}*/ + +export type StyleManagerEvent = `${StyleManagerEvents}`; + +// need this to avoid the TS documentation generator to break +export default StyleManagerEvents;