Handle updateStatus for composite view

src/style_manager/config/config.js

@@ -57,29 +57,35 @@ export default {
   // With the empty value, nothing will be rendered
   appendTo: '',
 
+  // Style prefix
+  stylePrefix: 'sm-',
+
+  // Avoid rendering the default style manager.
+  custom: false,
+
   // Hide the property in case it's not stylable for the
   // selected component (each component has 'stylable' property)
+  // @deprecated
   hideNotStylable: true,
 
   // Highlight changed properties of the selected component
+  // @deprecated
   highlightChanged: true,
 
   // Highlight computed properties of the selected component
+  // @deprecated
   highlightComputed: true,
 
   // Show computed properties of the selected component, if this value
   // is set to false, highlightComputed will not take effect
+  // @deprecated
   showComputed: true,
 
   // Adds the possibility to clear property value from the target style
+  // @deprecated
   clearProperties: true,
 
   // Properties not to take in account for computed styles
+  // @deprecated
   avoidComputed: ['width', 'height'],
-
-  // Style prefix
-  stylePrefix: 'sm-',
-
-  // Avoid rendering the default style manager.
-  custom: false,
 };

src/style_manager/view/PropertiesView.js

@@ -11,6 +11,7 @@ export default Backbone.View.extend({
     this.onInputRender = o.onInputRender || {};
     this.customValue = o.customValue || {};
     this.properties = [];
+    this.parent = o.parent;
     const coll = this.collection;
     this.listenTo(coll, 'add', this.addTo);
     this.listenTo(coll, 'reset', this.render);
@@ -21,6 +22,7 @@ export default Backbone.View.extend({
   },
 
   add(model, frag, opts = {}) {
+    const { parent } = this;
     const appendTo = frag || this.el;
     const view = new model.typeView({
       model,
@@ -32,6 +34,7 @@ export default Backbone.View.extend({
       onInputRender: this.onInputRender,
       config: this.config,
     });
+    parent && (view.parent = parent);
 
     if (model.get('type') != 'composite') {
       view.customValue = this.customValue;

src/style_manager/view/PropertyCompositeView.js

@@ -28,9 +28,15 @@ export default PropertyView.extend({
     const props = model.getProperties();
 
     if (props.length && !this.props) {
+      const detached = model.isDetached();
       const propsView = new PropertiesView({
-        config: { ...this.config, highlightComputed: 0 },
+        config: {
+          ...this.config,
+          highlightComputed: detached,
+          highlightChanged: detached,
+        },
         collection: props,
+        parent: this,
       });
       propsView.render();
       this.$el.find(`#${pfx}input-holder`).append(propsView.el);

src/style_manager/view/PropertyView.js

@@ -90,6 +90,7 @@ export default Backbone.View.extend({
     // Put a sligh delay on debounce in order to execute the update
     // post styleManager.__upProps trigger.
     this.onValueChange = debounce(this.onValueChange.bind(this), 10);
+    this.updateStatus = debounce(this.updateStatus.bind(this));
     // this.listenTo(this.propTarget, 'update', this.onValueChange);
     this.listenTo(model, 'change:value', this.onValueChange);
     this.listenTo(em, 'change:device', this.onValueChange);
@@ -110,12 +111,7 @@ export default Backbone.View.extend({
    * @private
    */
   updateStatus() {
-    const { model } = this;
-    // const status = model.get('status');
-    // const parent = model.parent;
-    const pfx = this.pfx;
-    const ppfx = this.ppfx;
-    const config = this.config;
+    const { model, pfx, ppfx, config } = this;
     const updatedCls = `${ppfx}four-color`;
     const computedCls = `${ppfx}color-warn`;
     const labelEl = this.$el.children(`.${pfx}label`);
@@ -124,25 +120,14 @@ export default Backbone.View.extend({
     labelEl.removeClass(`${updatedCls} ${computedCls}`);
     clearStyle.display = 'none';
 
-    if (model.hasValue({ noParent: true })) {
+    if (model.hasValue({ noParent: true }) && config.highlightChanged) {
       labelEl.addClass(updatedCls);
       config.clearProperties && (clearStyle.display = '');
-    } else if (model.hasValue()) {
+    } else if (model.hasValue() && config.highlightComputed) {
       labelEl.addClass(computedCls);
     }
 
-    // switch (status) {
-    //   case 'updated':
-    //     !parent && labelEl.addClass(updatedCls);
-
-    //     if (config.clearProperties) {
-    //       clearStyle.display = 'inline';
-    //     }
-    //     break;
-    //   case 'computed':
-    //     labelEl.addClass(computedCls);
-    //     break;
-    // }
+    this.parent?.updateStatus();
   },
 
   /**