From d7f4e85c3ffc681a374cb8a306f74da66df51ffe Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 24 May 2024 16:38:24 +0400 Subject: [PATCH] Update component events --- src/common/index.ts | 2 +- src/dom_components/model/Component.ts | 17 ++++++++----- src/dom_components/model/Components.ts | 3 ++- src/dom_components/types.ts | 29 +++++++++++++++++++++++ src/dom_components/view/ComponentsView.ts | 3 ++- 5 files changed, 45 insertions(+), 9 deletions(-) create mode 100644 src/dom_components/types.ts diff --git a/src/common/index.ts b/src/common/index.ts index bd983b2c3..57c000ce6 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -7,7 +7,7 @@ export type Debounced = Function & { cancel(): void }; export type SetOptions = Backbone.ModelSetOptions & { avoidStore?: boolean }; -export type AddOptions = Backbone.AddOptions & { temporary?: boolean }; +export type AddOptions = Backbone.AddOptions & { temporary?: boolean; action?: string }; export type DisableOptions = { fromMove?: boolean }; diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index 584b62dc7..c70138539 100644 --- a/src/dom_components/model/Component.ts +++ b/src/dom_components/model/Component.ts @@ -38,6 +38,7 @@ import CssRule, { CssRuleJSON } from '../../css_composer/model/CssRule'; import Trait from '../../trait_manager/model/Trait'; import { ToolbarButtonProps } from './ToolbarButton'; import { TraitProperties } from '../../trait_manager/types'; +import { ActionLabelComponents, ComponentsEvents } from '../types'; export interface IComponent extends ExtractMethods {} @@ -296,7 +297,7 @@ export default class Component extends StyleableModel { this.__postAdd(); this.init(); this.__isSymbolOrInst() && this.__initSymb(); - em && em.trigger('component:create', this); + em?.trigger(ComponentsEvents.create, this, opt); } } @@ -1134,7 +1135,10 @@ export default class Component extends StyleableModel { return comp; } }); - const result = this.components().add(toAppend, opts); + const result = this.components().add(toAppend, { + action: ActionLabelComponents.add, + ...opts, + }); return isArray(result) ? result : [result]; } @@ -1891,7 +1895,7 @@ export default class Component extends StyleableModel { const { em } = this; const coll = this.collection; const remove = () => { - coll && coll.remove(this, { ...opts, action: 'remove-component' }); + coll && coll.remove(this, { action: ActionLabelComponents.remove, ...opts }); // Component without parent if (!coll) { this.components('', opts); @@ -1899,7 +1903,7 @@ export default class Component extends StyleableModel { } }; const rmOpts = { ...opts }; - [this, em].map(i => i.trigger('component:remove:before', this, remove, rmOpts)); + [this, em].map(i => i.trigger(ComponentsEvents.removeBefore, this, remove, rmOpts)); !rmOpts.abort && remove(); return this; } @@ -1925,8 +1929,9 @@ export default class Component extends StyleableModel { if (sameParent && at && at > index) { opts.at = at - 1; } - this.remove({ temporary: 1 }); - component.append(this, opts); + const action = ActionLabelComponents.move; + this.remove({ action, temporary: 1 }); + component.append(this, { action, ...opts }); this.emitUpdate(); } } diff --git a/src/dom_components/model/Components.ts b/src/dom_components/model/Components.ts index 9da8866d1..fcdae405d 100644 --- a/src/dom_components/model/Components.ts +++ b/src/dom_components/model/Components.ts @@ -8,6 +8,7 @@ import CssRule from '../../css_composer/model/CssRule'; import { ComponentAdd, ComponentDefinitionDefined, ComponentProperties } from './types'; import ComponentText from './ComponentText'; import ComponentWrapper from './ComponentWrapper'; +import { ComponentsEvents } from '../types'; export const getComponentIds = (cmp?: Component | Component[] | Components, res: string[] = []) => { if (!cmp) return []; @@ -181,7 +182,7 @@ Component> { }); removed.removed(); removed.trigger('removed'); - em.trigger('component:remove', removed); + em.trigger(ComponentsEvents.remove, removed); } const inner = removed.components(); diff --git a/src/dom_components/types.ts b/src/dom_components/types.ts new file mode 100644 index 000000000..e8f3c0819 --- /dev/null +++ b/src/dom_components/types.ts @@ -0,0 +1,29 @@ +export enum ActionLabelComponents { + remove = 'component:remove', + add = 'component:add', + move = 'component:move', +} + +export enum ComponentsEvents { + /** + * @event `component:add` New component added. + * @example + * editor.on('component:add', (component) => { ... }); + */ + add = 'component:add', + + /** + * @event `component:remove` Component removed. + * @example + * editor.on('component:remove', (component) => { ... }); + */ + remove = 'component:remove', + removeBefore = 'component:remove:before', + + /** + * @event `component:create` Component created. + * @example + * editor.on('component:create', (component) => { ... }); + */ + create = 'component:create', +} diff --git a/src/dom_components/view/ComponentsView.ts b/src/dom_components/view/ComponentsView.ts index 8ed6359f6..83d4b1091 100644 --- a/src/dom_components/view/ComponentsView.ts +++ b/src/dom_components/view/ComponentsView.ts @@ -7,6 +7,7 @@ import Component from '../model/Component'; import ComponentView from './ComponentView'; import FrameView from '../../canvas/view/FrameView'; import Components from '../model/Components'; +import { ComponentsEvents } from '../types'; export default class ComponentsView extends View { opts!: any; @@ -53,7 +54,7 @@ export default class ComponentsView extends View { if (em && !opts.temporary) { const triggerAdd = (model: Component) => { - em.trigger('component:add', model); + em.trigger(ComponentsEvents.add, model, opts); model.components().forEach(comp => triggerAdd(comp)); }; triggerAdd(model);