Add symbol:instance events for root instances

src/dom_components/model/Components.ts

@@ -16,6 +16,7 @@ import {
 import ComponentText from './ComponentText';
 import ComponentWrapper from './ComponentWrapper';
 import { ComponentsEvents } from '../types';
+import { isSymbolInstance, isSymbolRoot } from './SymbolUtils';
 
 export const getComponentIds = (cmp?: Component | Component[] | Components, res: string[] = []) => {
   if (!cmp) return [];
@@ -193,12 +194,14 @@ Component> {
       sels.remove(rulesRemoved.map(rule => rule.getSelectors().at(0)));
 
       if (!removed.opt.temporary) {
-        em.Commands.run('core:component-style-clear', {
-          target: removed,
-        });
+        em.Commands.run('core:component-style-clear', { target: removed });
         removed.removed();
         removed.trigger('removed');
         em.trigger(ComponentsEvents.remove, removed);
+
+        if (domc && isSymbolInstance(removed) && isSymbolRoot(removed)) {
+          domc.symbols.__trgEvent(domc.events.symbolInstanceRemove, { component: removed }, true);
+        }
       }
 
       const inner = removed.components();
@@ -384,6 +387,10 @@ Component> {
         model.components().forEach(comp => triggerAdd(comp));
       };
       triggerAdd(model);
+
+      if (domc && isSymbolInstance(model) && isSymbolRoot(model)) {
+        domc.symbols.__trgEvent(domc.events.symbolInstanceAdd, { component: model }, true);
+      }
     }
   }
 }

src/dom_components/model/Symbols.ts

@@ -46,9 +46,11 @@ export default class Symbols extends Components {
     em.trigger(events.symbol);
   }
 
-  __trgEvent(event: string, props: ObjectAny) {
-    this.em.trigger(event, props);
-    this.em.trigger(this.events.symbolMain, { ...props, event });
+  __trgEvent(event: string, props: ObjectAny, isInstance = false) {
+    const { em, events } = this;
+    const eventType = isInstance ? events.symbolInstance : events.symbolMain;
+    em.trigger(event, props);
+    em.trigger(eventType, { ...props, event });
     this.refreshDbn();
   }
 }

src/dom_components/types.ts

@@ -76,6 +76,27 @@ export enum ComponentsEvents {
    */
   symbolMain = 'symbol:main',
 
+  /**
+   * @event `symbol:instance:add` Added new root instance symbol.
+   * @example
+   * editor.on('symbol:instance:add', ({ component }) => { ... });
+   */
+  symbolInstanceAdd = 'symbol:instance:add',
+
+  /**
+   * @event `symbol:instance:remove` Root instance symbol removed.
+   * @example
+   * editor.on('symbol:instance:remove', ({ component }) => { ... });
+   */
+  symbolInstanceRemove = 'symbol:instance:remove',
+
+  /**
+   * @event `symbol:instance` Catch-all event related to instance symbol updates.
+   * @example
+   * editor.on('symbol:instance', ({ event, component }) => { ... });
+   */
+  symbolInstance = 'symbol:instance',
+
   /**
    * @event `symbol` Catch-all event for any symbol update (main or instance).
    * @example