Trigger `component:styleUpdate` on `component.addStyle/setStyle`. Closes #5424

src/commands/view/SelectComponent.ts

@@ -89,11 +89,7 @@ export default {
     methods[method](listenToEl, 'scroll', this.onContainerChange);
     em[method]('component:toggled component:update undo redo', this.onSelect, this);
     em[method]('change:componentHovered', this.onHovered, this);
-    em[method](
+    em[method]('component:resize styleable:change component:input', this.updateGlobalPos, this);
-      'component:resize styleable:change component:input', // component:styleUpdate
-      this.updateGlobalPos,
-      this
-    );
     em[method]('component:update:toolbar', this._upToolbar, this);
     em[method]('change:canvasOffset', this.updateAttached, this);
     em[method]('frame:updated', this.onFrameUpdated, this);

src/dom_components/model/Component.ts

@@ -318,6 +318,18 @@ export default class Component extends StyleableModel<ComponentProperties> {
     }
   }
 
+  __onStyleChange(newStyles: StyleProps) {
+    const { em } = this;
+    if (!em) return;
+
+    const event = 'component:styleUpdate';
+    const styleKeys = keys(newStyles);
+    const pros = { style: newStyles };
+
+    em.trigger(event, this, pros);
+    styleKeys.forEach(key => em.trigger(`${event}:${key}`, this, pros));
+  }
+
   __changesUp(opts: any) {
     const { em, frame } = this;
     [frame, em].forEach(md => md && md.changesUp(opts));
@@ -619,6 +631,10 @@ export default class Component extends StyleableModel<ComponentProperties> {
       prop = super.setStyle.apply(this, arguments as any);
     }
 
+    if (!opt.temporary) {
+      this.__onStyleChange(opts.addStyle || prop);
+    }
+
     return prop;
   }
 

src/domain_abstract/model/StyleableModel.ts

@@ -8,6 +8,7 @@ export type StyleProps = Record<string, string | string[]>;
 
 export type UpdateStyleOptions = ObjectAny & {
   partial?: boolean;
+  addStyle?: StyleProps;
 };
 
 const parserHtml = ParserHtml();
@@ -109,6 +110,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
       opts = value || {};
     }
 
+    opts.addStyle = prop;
     prop = this.extendStyle(prop);
     this.setStyle(prop, opts);
   }

src/selector_manager/view/ClassTagsView.ts

@@ -88,7 +88,7 @@ export default class ClassTagsView extends View<Selector> {
     this.listenTo(em, toList, this.componentChanged);
     this.listenTo(em, 'styleManager:update', this.componentChanged);
     this.listenTo(em, toListCls, this.__handleStateChange);
-    this.listenTo(em, 'styleable:change change:device', this.checkSync); // component:styleUpdate
+    this.listenTo(em, 'styleable:change change:device', this.checkSync);
     this.listenTo(coll, 'add', this.addNew);
     this.listenTo(coll, 'reset', this.renderClasses);
     this.listenTo(coll, 'remove', this.tagRemoved);

src/style_manager/index.ts

@@ -725,21 +725,20 @@ export default class StyleManager extends ItemManagerModule<
 
   __emitCmpStyleUpdate(style: StyleProps, opts: { components?: Component | Component[] } = {}) {
     const { em } = this;
-    const event = 'component:styleUpdate';
 
     // Ignore partial updates
     if (!style.__p) {
+      const allSel = this.getSelectedAll();
       const cmp = opts.components || em.getSelectedAll();
       const cmps = Array.isArray(cmp) ? cmp : [cmp];
-      const newStyle = { ...style };
+      const newStyles = { ...style };
-      delete newStyle.__p;
+      delete newStyles.__p;
-      const styleKeys = Object.keys(newStyle);
+
-      const optsToPass = { style: newStyle };
+      cmps.forEach(
-
+        cmp =>
-      cmps.forEach(component => {
+          // if cmp is part of selected, the event should already been triggered
-        em.trigger(event, component, optsToPass);
+          !allSel.includes(cmp as any) && cmp.__onStyleChange(newStyles)
-        styleKeys.forEach(key => em.trigger(`${event}:${key}`, component, optsToPass));
+      );
-      });
     }
   }