diff --git a/src/dom_components/model/Components.ts b/src/dom_components/model/Components.ts index e563fd115..79ec7a944 100644 --- a/src/dom_components/model/Components.ts +++ b/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); + } } } } diff --git a/src/dom_components/model/Symbols.ts b/src/dom_components/model/Symbols.ts index df4cc8a42..463b07c72 100644 --- a/src/dom_components/model/Symbols.ts +++ b/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(); } } diff --git a/src/dom_components/types.ts b/src/dom_components/types.ts index 8e2710652..fbca11658 100644 --- a/src/dom_components/types.ts +++ b/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