Update _up in composite type

src/style_manager/model/PropertyComposite.js

@@ -56,6 +56,13 @@ export default Property.extend({
     this.__upTargetsStyle(style, opts);
   },
 
+  _up(props, opts = {}) {
+    if (this.isDetached() && props.value) {
+      this.__setProperties(this.__getSplitValue(props.value), opts);
+    }
+    return Property.prototype._up.call(this, props, opts);
+  },
+
   /**
    * Get style object from current properties
    * @returns {Object} Style object
@@ -123,13 +130,41 @@ export default Property.extend({
     return allNameProps.some(prop => !isUndefined(style[prop]) && style[prop] !== '');
   },
 
-  __splitStyleName(style, name, sep) {
-    return (style[name] || '')
+  __splitValue(value, sep) {
+    return value
       .split(sep)
       .map(value => value.trim())
       .filter(Boolean);
   },
 
+  __splitStyleName(style, name, sep) {
+    return this.__splitValue(style[name] || '', sep);
+  },
+
+  __getSplitValue(value = '') {
+    const props = this.getProperties();
+    const props4Nums = props.length === 4 && props.every(prop => prop.getType() === 'integer');
+    const values = this.__splitValue(value, this.getSplitSeparator());
+    const result = {};
+
+    props.forEach((prop, i) => {
+      const value = values[i];
+      let res = !isUndefined(value) ? value : ''; // : prop.getDefaultValue();
+
+      if (props4Nums) {
+        // Try to get value from a shorthand:
+        // 11px -> 11px 11px 11px 11xp
+        // 11px 22px -> 11px 22px 11px 22xp
+        const len = values.length;
+        res = values[i] || values[(i % len) + (len != 1 && len % 2 ? 1 : 0)] || res;
+      }
+
+      result[prop.getId()] = res || '';
+    });
+
+    return result;
+  },
+
   __getPropsFromStyle(style = {}) {
     if (!this.__styleHasProps(style)) return null;
 
@@ -139,24 +174,8 @@ export default Property.extend({
     let result = fromStyle ? fromStyle(style, { property: this, separator: sep }) : {};
 
     if (!fromStyle) {
-      const props4Nums = props.length === 4 && props.every(prop => prop.getType() === 'integer');
-
       // Get props from the main property
-      const values = this.__splitStyleName(style, this.getName(), sep);
-      props.forEach((prop, i) => {
-        const value = values[i];
-        let res = !isUndefined(value) ? value : ''; // : prop.getDefaultValue();
-
-        if (props4Nums) {
-          // Try to get value from a shorthand:
-          // 11px -> 11px 11px 11px 11xp
-          // 11px 22px -> 11px 22px 11px 22xp
-          const len = values.length;
-          res = values[i] || values[(i % len) + (len != 1 && len % 2 ? 1 : 0)] || res;
-        }
-
-        result[prop.getId()] = res || '';
-      });
+      result = this.__getSplitValue(style[this.getName()] || '');
 
       // Get props from the inner properties
       props.forEach(prop => {

src/style_manager/model/PropertyStack.js

@@ -90,7 +90,7 @@ export default Property.extend({
     // Detached props will update their layers later in sm.__upProp
     !this.isDetached() && this.__setLayers(__layers);
     this.__upSelected({ noEvent: true }, opts);
-    return Property.prototype._up.call(this, rest, opts);
+    return PropertyBase.prototype._up.call(this, rest, opts);
   },
 
   __setLayers(newLayers = []) {

test/specs/style_manager/model/Properties.js

@@ -89,6 +89,58 @@ describe('StyleManager properties logic', () => {
       });
     });
 
+    test('Split value properly', () => {
+      expect(compTypeProp.__getSplitValue('1px 2px 3px 4px')).toEqual({
+        [propATest]: '1px',
+        [propBTest]: '2px',
+        [propCTest]: '3px',
+        [propDTest]: '4px',
+      });
+      expect(compTypeProp.__getSplitValue('1px 2px')).toEqual({
+        [propATest]: '1px',
+        [propBTest]: '2px',
+        [propCTest]: '1px',
+        [propDTest]: '2px',
+      });
+      expect(compTypeProp.__getSplitValue('100%')).toEqual({
+        [propATest]: '100%',
+        [propBTest]: '100%',
+        [propCTest]: '100%',
+        [propDTest]: '100%',
+      });
+    });
+
+    test('Updating the main property, the value is splitted properly', () => {
+      compTypeProp.upValue('1px 2px 3px 4px');
+      [
+        [propATest, '1px'],
+        [propBTest, '2px'],
+        [propCTest, '3px'],
+        [propDTest, '4px'],
+      ].forEach(item => {
+        expect(compTypeProp.getProperty(item[0]).getFullValue()).toBe(item[1]);
+      });
+      compTypeProp.upValue('11px');
+      [
+        [propATest, '11px'],
+        [propBTest, '11px'],
+        [propCTest, '11px'],
+        [propDTest, '11px'],
+      ].forEach(item => {
+        expect(compTypeProp.getProperty(item[0]).getFullValue()).toBe(item[1]);
+      });
+      obj.__upSel();
+      expect(rule1.getStyle()).toEqual({
+        __p: false,
+        color: 'red',
+        [propTest]: '',
+        [propATest]: '11px',
+        [propBTest]: '11px',
+        [propCTest]: '11px',
+        [propDTest]: '11px',
+      });
+    });
+
     test('getPropsFromStyle returns correct values', () => {
       expect(
         compTypeProp.__getPropsFromStyle({