Update component events

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 };
 

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<Component> {}
 
@@ -296,7 +297,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
       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<ComponentProperties> {
         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<ComponentProperties> {
     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<ComponentProperties> {
       }
     };
     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<ComponentProperties> {
         if (sameParent && at && at > index) {
           opts.at = at - 1;
         }
-        this.remove({ temporary: 1 });
+        const action = ActionLabelComponents.move;
-        component.append(this, opts);
+        this.remove({ action, temporary: 1 });
+        component.append(this, { action, ...opts });
         this.emitUpdate();
       }
     }

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();

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',
+}

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);