Refactor PropertyView and make computed function configurable

index.html

@@ -1320,6 +1320,14 @@
       console.log('STORE ', e);
     })
 
+    editor.on('styleManager:change:text-shadow', function(view) {
+      var model = view.model;
+      let targetValue = view.getTargetValue({ignoreDefault: 1});
+      let computedValue = view.getComputedValue();
+      let defaultValue = view.getDefaultValue();
+      console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
+    })
+
     editor.render();
     </script>
   </body>

src/domain_abstract/ui/InputNumber.js

@@ -62,6 +62,7 @@ module.exports = Backbone.View.extend({
   handleChange(e) {
     e.stopPropagation();
     this.setValue(this.getInputEl().value);
+    this.elementUpdated();
   },
 
   /**
@@ -71,6 +72,14 @@ module.exports = Backbone.View.extend({
     e.stopPropagation();
     var value = this.getUnitEl().value;
     this.model.set('unit', value);
+    this.elementUpdated();
+  },
+
+  /**
+   * Fired when the element of the property is updated
+   */
+  elementUpdated() {
+    this.model.trigger('el:change');
   },
 
   /**
@@ -185,6 +194,7 @@ module.exports = Backbone.View.extend({
       var value = this.prValue - 1;
       this.model.set('value', value, {avoidStore: 1})
         .set('value', value + 1);
+      this.elementUpdated();
     }
   },
 

src/editor/index.js

@@ -36,6 +36,8 @@
  * component:update:{propertyName} - Listen any property change
  * component:styleUpdate - Triggered when the style of the component is updated
  * component:styleUpdate:{propertyName} - Listen for a specific style property change
+ * styleManager:change - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
+ * styleManager:change:{propertyName} - As above but for a specific style property
  * storage:load - Triggered when something was loaded from the storage, loaded object passed as an argumnet
  * storage:store - Triggered when something is stored to the storage, stored object passed as an argumnet
  * canvasScroll - Triggered when the canvas is scrolled

src/style_manager/config/config.js

@@ -9,4 +9,22 @@ module.exports = {
   // Hide the property in case it's not stylable for the
   // selected component (each component has 'stylable' property)
   hideNotStylable: true,
+
+  // Highlight changed properties of the selected component
+  highlightChanged: true,
+
+  // Highlight computed properties of the selected component
+  highlightComputed: true,
+
+  // Show computed properties of the selected component, if this value
+  // is set to false, highlightComputed will not take effect
+  showComputed: true,
+
+  // Properties which are valid to be shown as computed
+  // (Identified as inherited properties: https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance)
+  validComputed: ['border-collapse', 'border-spacing', 'caption-side', 'color', 'cursor', 'direction', 'empty-cells',
+  'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'font-size-adjust', 'font-stretch', 'font',
+  'letter-spacing', 'line-height', 'list-style-image', 'list-style-position', 'list-style-type', 'list-style', 'orphans',
+  'quotes', 'tab-size', 'text-align', 'text-align-last', 'text-decoration-color', 'text-indent', 'text-justify',
+  'text-shadow', 'text-transform', 'visibility', 'white-space', 'widows', 'word-break', 'word-spacing', 'word-wrap'],
 };

src/style_manager/model/PropertyFactory.js

@@ -95,9 +95,9 @@ module.exports = () => ({
       }
 
       // Defaults
-      switch(prop){
+      switch(prop) {
         case 'float': case 'background-color':
-        case 'background-image':
+        case 'background-image': case 'text-shadow':
           obj.defaults = 'none';
           break;
         case 'display':

src/style_manager/view/PropertyCompositeView.js

@@ -99,7 +99,7 @@ module.exports = PropertyView.extend({
     this.props.each((prop, index) => {
       str += prop.get('defaults') + prop.get('unit') + ' ';
     });
-    return str.replace(/ +$/,'');
+    return this.model.get('defaults') || str.replace(/ +$/,'');
   },
 
   /**

src/style_manager/view/PropertyFileView.js

@@ -41,14 +41,15 @@ module.exports = PropertyView.extend({
       this.$previewBox = this.$el.find('#' + this.pfx + 'preview-box');
     }
 
-    if(!this.componentValue || this.componentValue == this.defaultValue)
-      this.setPreviewView(0);
-    else
-      this.setPreviewView(1);
-
     this.setValue(this.componentValue, 0);
   },
 
+  setValue(value, f) {
+    PropertyView.prototype.setValue.apply(this, arguments);
+    this.setPreviewView(value && value != this.getDefaultValue());
+    this.setPreview(value);
+  },
+
   /**
    * Change visibility of the preview box
    * @param bool Visibility
@@ -84,11 +85,6 @@ module.exports = PropertyView.extend({
       this.$preview.css('background-image', "url(" + url + ")");
   },
 
-  /** @inheritdoc */
-  setValue(value, f) {
-    PropertyView.prototype.setValue.apply(this, arguments);
-    this.setPreview(value);
-  },
 
   /** @inheritdoc */
   renderTemplate() {

src/style_manager/view/PropertyIntegerView.js

@@ -6,7 +6,8 @@ module.exports = PropertyView.extend({
 
   initialize(options) {
     PropertyView.prototype.initialize.apply(this, arguments);
-    this.listenTo( this.model ,'change:unit', this.valueChanged);
+    this.listenTo(this.model, 'change:unit', this.valueChanged);
+    this.listenTo(this.model, 'el:change', this.elementUpdated);
   },
 
   /**
@@ -35,8 +36,6 @@ module.exports = PropertyView.extend({
   renderTemplate() {},
 
   setValue(value) {
-    if(this.model.get('property') == 'font-size')
-      console.log('set value int', value);
     this.input.setValue(value, {silent: 1});
   },
 

src/style_manager/view/PropertyStackView.js

@@ -28,18 +28,13 @@ module.exports = PropertyCompositeView.extend({
    * so we gonna check all props and fine if there is some differences.
    * */
   targetUpdated(...args) {
-    if(!this.model.get('detached'))
+    if (!this.model.get('detached')) {
       PropertyCompositeView.prototype.targetUpdated.apply(this, args);
-    else {
+    } else {
       this.checkVisibility();
-      this.refreshLayers();
-
-      /*
-      this.model.get('properties').each(function(prop) {
-        console.log(prop.get('property'), ' - ', prop.get('value'));
-      });
-      */
     }
+
+    this.refreshLayers();
   },
 
   /**
@@ -115,7 +110,7 @@ module.exports = PropertyCompositeView.extend({
 
     // If detached the value in this case is stacked, eg. substack-prop: 1px, 2px, 3px...
     if (this.model.get('detached')) {
-      var targetValue = propView.getTargetValue();
+      var targetValue = propView.getTargetValue({ignoreCustomValue: 1});
       var valist = (targetValue + '').split(',');
       result = valist[layerIndex];
       result = result ? result.trim() : propView.getDefaultValue();
@@ -283,7 +278,10 @@ module.exports = PropertyCompositeView.extend({
       fieldName = 'values';
       a = this.getLayersFromTarget();
     } else {
-      var v  = this.getComponentValue();
+      //var v  = this.getComponentValue();
+      var v = this.getTargetValue();
+      var vDef = this.getDefaultValue();
+      v = v == vDef ? '' : v;
       if (v) {
         // Remove spaces inside functions:
         // eg:

src/style_manager/view/PropertyView.js

@@ -14,7 +14,9 @@ module.exports = Backbone.View.extend({
     </div>
   </div>`),
 
-  events: {'change': 'valueUpdated'},
+  events: {
+    'change': 'valueUpdated'
+  },
 
   initialize(o) {
     this.config = o.config || {};
@@ -92,8 +94,15 @@ module.exports = Backbone.View.extend({
    * Fired when the input value is updated
    */
   valueUpdated() {
-    if(this.$input)
+    this.model.set('value', this.getInputValue());
-      this.model.set('value', this.getInputValue());
+    this.elementUpdated();
+  },
+
+  /**
+   * Fired when the element of the property is updated
+   */
+  elementUpdated() {
+    this.model.set('status', 'updated');
   },
 
   /**
@@ -109,41 +118,44 @@ module.exports = Backbone.View.extend({
     let targetValue = this.getTargetValue({ignoreDefault: 1});
     let defaultValue = this.getDefaultValue();
     let computedValue = this.getComputedValue();
+    const config = this.config;
+    const em = config.em;
+    const model = this.model;
 
     if (targetValue) {
       value = targetValue;
-      status = 'updated';
+
-    } else if (computedValue && computedValue != defaultValue) {
+      if (config.highlightChanged) {
+        status = 'updated';
+      }
+    } else if (computedValue && config.showComputed &&
+        computedValue != defaultValue) {
       value = computedValue;
-      status = 'computed';
+
+      if (config.highlightComputed) {
+        status = 'computed';
+      }
     } else {
       value = defaultValue;
       status = '';
     }
 
+    //value = this.tryFetchFromFunction(value);
     this.setValue(value, 1);
     this.model.set('status', status);
 
-    /*
+    if (em) {
-    get targetValue
+      em.trigger('styleManager:change', this);
-    if targetValue
+      em.trigger(`styleManager:change:${model.get('property')}`, this);
-      setValue(targetValue)
+    }
-      setStatus('updated');
-    elseif computedValue != defaultValue
-      setValue(computedValue)
-      setStatus('computed');
-    else
-      setValue(defaultValue)
-      setStatus('');
-     */
 
-     /*
+    /*
     if(this.getTarget()) {
       if(!this.sameValue()){
         this.renderInputRequest();
       }
-    }
+    }*/
-    */
+
   },
 
   checkVisibility() {
@@ -171,11 +183,10 @@ module.exports = Backbone.View.extend({
    * same of the value of the model
    *
    * @return {Boolean}
-   * *
+   * */
   sameValue() {
     return this.getComponentValue() == this.getValueForTarget();
   },
-  */
 
 
   /**
@@ -226,6 +237,7 @@ module.exports = Backbone.View.extend({
     var result;
     var model = this.model;
     var target = this.getTarget();
+    var customFetchValue = this.customValue;
 
     if (!target) {
       return result;
@@ -237,6 +249,15 @@ module.exports = Backbone.View.extend({
       result = this.getDefaultValue();
     }
 
+    if (typeof customFetchValue == 'function' && !opts.ignoreCustomValue) {
+      let index = model.collection.indexOf(model);
+      let customValue = customFetchValue(this, index);
+
+      if (customValue) {
+        result = customValue;
+      }
+    }
+
     return result;
   },
 
@@ -256,7 +277,9 @@ module.exports = Backbone.View.extend({
    */
   getComputedValue() {
     let computed = this.propTarget.computed;
-    return computed && computed[this.model.get('property')];
+    const valid = this.config.validComputed;
+    const property = this.model.get('property');
+    return computed && valid.indexOf(property) >= 0 && computed[property];
   },
 
   /**
@@ -274,9 +297,10 @@ module.exports = Backbone.View.extend({
       return value;
     }
 
-    var start = value.indexOf("(") + 1;
+    var valueStr = value + '';
-    var end = value.lastIndexOf(")");
+    var start = valueStr.indexOf("(") + 1;
-    return value.substring(start, end);
+    var end = valueStr.lastIndexOf(")");
+    return valueStr.substring(start, end);
   },
 
   /**

src/styles/scss/main.scss

@@ -88,17 +88,18 @@ $fontV: 20;//random(1000)
   transform: $v;
 }
 
-//.#{$app-prefix}fonts {}
+$colorActive: #71b7f1;
+$colorWarn: #ffca6f;
 
 .#{$app-prefix}active {
   &-color {
-    color: $colorBlue;
+    color: $colorActive;
   }
 }
 
 .#{$app-prefix}warn {
   &-color {
-    color: $colorYell;
+    color: $colorWarn;
   }
 }