More updates on properties

src/style_manager/model/Property.js

@@ -28,6 +28,7 @@ module.exports = require('backbone').Model.extend({
     init && init();
   },
 
+
   /**
    * Update value
    * @param {any} value

src/style_manager/model/PropertyComposite.js

@@ -16,14 +16,37 @@ module.exports = Property.extend({
 
     // Array of sub properties
     properties: [],
+
+    // Separator between properties
+    separator: ' ',
   }),
 
+
   init() {
     const properties = this.get('properties') || [];
     const Properties = require('./Properties');
     this.set('properties', new Properties(properties));
+    this.listenTo(this, 'change:value', this.updateValues)
   },
 
+
+  /**
+   * Update property values
+   */
+  updateValues() {
+    const values = this.get('value').split(this.get('separator'));
+    this.get('properties').each((property, i) => {
+      const len = values.length;
+      // Try to get value from a shorthand:
+      // 11px -> 11px 11px 11px 11xp
+      // 11px 22px -> 11px 22px 11px 22xp
+      const value = values[i] || values[(i % len) + (len != 1 && len % 2 ? 1 : 0)];
+      // There some issue with UndoManager
+      //property.setValue(value, 0, {fromParent: 1});
+    });
+  },
+
+
   /**
    * Returns default value
    * @param  {Boolean} defaultProps Force to get defaults from properties
@@ -42,12 +65,12 @@ module.exports = Property.extend({
     return value.trim();
   },
 
+
   getFullValue() {
     if (this.get('detached')) {
       return '';
     }
 
-    let result = '';
     return this.get('properties').getFullValue();
   },
 

src/style_manager/model/PropertyFactory.js

@@ -209,7 +209,8 @@ module.exports = () => ({
       }
 
       // Min/Max
-      switch(prop){
+      switch(prop) {
+        case 'padding-top': case 'padding-right': case 'padding-bottom': case 'padding-left':
         case 'min-height': case 'min-width': case 'max-height': case 'max-width':
         case 'width': case 'height':
         case 'font-size':

src/style_manager/view/PropertyCompositeView.js

@@ -13,8 +13,11 @@ module.exports = PropertyView.extend({
   },
 
   inputValueChanged(...args) {
-    if(!this.model.get('detached'))
+    // If it's not detached (eg. 'padding: 1px 2px 3px 4px;') it will follow
+    // the same flow of PropertyView
+    if (!this.model.get('detached')) {
       PropertyView.prototype.inputValueChanged.apply(this, args);
+    }
   },
 
   /**

src/style_manager/view/PropertyView.js

@@ -312,7 +312,9 @@ module.exports = Backbone.View.extend({
 
     // Avoid target update if the changes comes from it
     if (!opt.fromTarget) {
-      if (onChange) {
+      // The onChange is used by Composite/Stack properties, so I'd avoid sending
+      // it back if the change comes from one of those
+      if (onChange && !opt.fromParent) {
         onChange(target, this, opt);
       } else {
         this.updateTargetStyle(value, null, opt);