From b900c45dbd3b46efdac2ded8dbc4daca13c0cb4b Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 8 Jan 2023 10:11:20 +0400 Subject: [PATCH] Move TraitManager to TS --- src/trait_manager/index.js | 162 ----------------------------------- src/trait_manager/index.ts | 171 +++++++++++++++++++++++++++++++++++++ 2 files changed, 171 insertions(+), 162 deletions(-) delete mode 100644 src/trait_manager/index.js create mode 100644 src/trait_manager/index.ts diff --git a/src/trait_manager/index.js b/src/trait_manager/index.js deleted file mode 100644 index 108fe3472..000000000 --- a/src/trait_manager/index.js +++ /dev/null @@ -1,162 +0,0 @@ -import { debounce } from 'underscore'; -import { Model, Module } from '../common'; -import defaults from './config/config'; -import TraitsView from './view/TraitsView'; -import TraitView from './view/TraitView'; -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'; - -export const evAll = 'trait'; -export const evPfx = `${evAll}:`; -export const evCustom = `${evPfx}custom`; - -export default () => { - const typesDef = { - text: TraitView, - number: TraitNumberView, - select: TraitSelectView, - checkbox: TraitCheckboxView, - color: TraitColorView, - button: TraitButtonView, - }; - - return { - ...Module, - - TraitsView, - - events: { - all: evAll, - custom: evCustom, - }, - - /** - * Name of the module - * @type {String} - * @private - */ - name: 'TraitManager', - - /** - * Get configuration object - * @name getConfig - * @function - * @return {Object} - */ - - /** - * Initialize module. Automatically called with a new instance of the editor - * @param {Object} config Configurations - * @private - */ - init(config = {}) { - this.__initConfig(defaults, config); - const c = this.config; - const model = new Model(); - this.model = model; - const { em } = this; - const ppfx = c.pStylePrefix; - this.types = { ...typesDef }; - ppfx && (c.stylePrefix = `${ppfx}${c.stylePrefix}`); - - const upAll = debounce(() => this.__upSel()); - model.listenTo(em, 'component:toggled', upAll); - - const update = debounce(() => this.__onUp()); - model.listenTo(em, 'trait:update', update); - - return this; - }, - - __upSel() { - this.select(this.em.getSelected()); - }, - - __onUp() { - this.select(this.getSelected()); - }, - - select(component) { - const traits = component ? component.getTraits() : []; - this.model.set({ component, traits }); - this.__trgCustom(); - }, - - getSelected() { - return this.model.get('component') || null; - }, - - getCurrent() { - return this.model.get('traits') || []; - }, - - __trgCustom(opts = {}) { - this.__ctn = this.__ctn || opts.container; - this.em.trigger(this.events.custom, { container: this.__ctn }); - }, - - postRender() { - this.__appendTo(); - }, - - /** - * - * Get Traits viewer - * @private - */ - getTraitsViewer() { - return this.view; - }, - - /** - * Add new trait type - * @param {string} name Type name - * @param {Object} methods Object representing the trait - */ - addType(name, trait) { - const baseView = this.getType('text'); - this.types[name] = baseView.extend(trait); - }, - - /** - * Get trait type - * @param {string} name Type name - * @return {Object} - */ - getType(name) { - return this.getTypes()[name]; - }, - - /** - * Get all trait types - * @returns {Object} - */ - getTypes() { - return this.types; - }, - - render() { - let { view } = this; - const config = this.getConfig(); - const el = view && view.el; - view = new TraitsView( - { - el, - collection: [], - editor: config.em, - config, - }, - this.getTypes() - ); - this.view = view; - return view.el; - }, - - destroy() { - this.__destroy(); - }, - }; -}; diff --git a/src/trait_manager/index.ts b/src/trait_manager/index.ts new file mode 100644 index 000000000..459f24ea8 --- /dev/null +++ b/src/trait_manager/index.ts @@ -0,0 +1,171 @@ +import { debounce } from 'underscore'; +import { Model } from '../common'; +import { Module } from '../abstract'; +import defaults, { TraitManagerConfig } from './config/config'; +import TraitsView from './view/TraitsView'; +import TraitView from './view/TraitView'; +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'; + +export const evAll = 'trait'; +export const evPfx = `${evAll}:`; +export const evCustom = `${evPfx}custom`; + +const typesDef = { + 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 = ITraitView & T & ThisType; + +export default class TraitManager extends Module { + view?: TraitsView; + types: { [id: string]: { new (o: any): TraitView } }; + model: Model; + __ctn?: any; + TraitsView = TraitsView; + + events = { + all: evAll, + custom: evCustom, + }; + + /** + * Get configuration object + * @name getConfig + * @function + * @return {Object} + */ + + /** + * Initialize module. Automatically called with a new instance of the editor + * @param {Object} config Configurations + * @private + */ + constructor(em: EditorModel) { + super(em, 'TraitManager', defaults); + const c = this.config; + const model = new Model(); + this.model = model; + const ppfx = c.pStylePrefix; + this.types = { ...typesDef }; + ppfx && (c.stylePrefix = `${ppfx}${c.stylePrefix}`); + + const upAll = debounce(() => this.__upSel(), 0); + model.listenTo(em, 'component:toggled', upAll); + + const update = debounce(() => this.__onUp(), 0); + model.listenTo(em, 'trait:update', update); + + return this; + } + + __upSel() { + this.select(this.em.getSelected()); + } + + __onUp() { + this.select(this.getSelected()); + } + + select(component?: Component) { + const traits = component ? component.getTraits() : []; + this.model.set({ component, traits }); + this.__trgCustom(); + } + + getSelected() { + return this.model.get('component') || null; + } + + getCurrent() { + return this.model.get('traits') || []; + } + + __trgCustom(opts: any = {}) { + this.__ctn = this.__ctn || opts.container; + this.em.trigger(this.events.custom, { container: this.__ctn }); + } + + postRender() { + this.__appendTo(); + } + + /** + * + * Get Traits viewer + * @private + */ + getTraitsViewer() { + return this.view; + } + + /** + * Add new trait type + * @param {string} name Type name + * @param {Object} methods Object representing the trait + */ + addType(name: string, trait: CustomTrait) { + const baseView = this.getType('text'); + //@ts-ignore + this.types[name] = baseView.extend(trait); + } + + /** + * Get trait type + * @param {string} name Type name + * @return {Object} + */ + getType(name: string) { + return this.getTypes()[name]; + } + + /** + * Get all trait types + * @returns {Object} + */ + getTypes() { + return this.types; + } + + render() { + let { view } = this; + const config = this.getConfig(); + const el = view && view.el; + view = new TraitsView( + { + el, + collection: [], + editor: config.em, + config, + }, + this.getTypes() + ); + this.view = view; + return view.el; + } + + destroy() { + this.model.stopListening(); + this.model.clear(); + } +}