Search alternative style target

package-lock.json

@@ -9935,8 +9935,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -9957,14 +9956,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -9979,20 +9976,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -10109,8 +10103,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -10122,7 +10115,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -10137,7 +10129,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -10145,14 +10136,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -10171,7 +10160,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -10252,8 +10240,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -10265,7 +10252,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -10351,8 +10337,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -10388,7 +10373,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -10408,7 +10392,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -10452,14 +10435,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },

src/style_manager/index.js

@@ -256,8 +256,9 @@ export default () => {
      * @param  {Model} model
      * @return {Model}
      */
-    getModelToStyle(model) {
+    getModelToStyle(model, options = {}) {
       const em = c.em;
+      const { skipAdd } = options;
       const classes = model.get('classes');
       const id = model.getId();
 
@@ -270,6 +271,7 @@ export default () => {
         const state = !config.devicePreviewMode ? em.get('state') : '';
         const valid = classes.getStyleable();
         const hasClasses = valid.length;
+        const useClasses = !smConf.componentFirst || options.useClasses;
         const opts = { state };
         let rule;
 
@@ -279,16 +281,16 @@ export default () => {
         // #268
         um.stop();
 
-        if (hasClasses && !smConf.componentFirst) {
+        if (hasClasses && useClasses) {
           const deviceW = em.getCurrentMedia();
           rule = cssC.get(valid, state, deviceW);
 
-          if (!rule) {
+          if (!rule && !skipAdd) {
             rule = cssC.add(valid, state, deviceW);
           }
         } else if (config.avoidInlineStyle) {
           rule = cssC.getIdRule(id, opts);
-          !rule && (rule = cssC.setIdRule(id, {}, opts));
+          !rule && !skipAdd && (rule = cssC.setIdRule(id, {}, opts));
           if (model.is('wrapper')) rule.set('wrapper', 1);
         }
 

src/style_manager/view/PropertyStackView.js

@@ -1,4 +1,4 @@
-import { isUndefined } from 'underscore';
+import { isUndefined, keys } from 'underscore';
 import PropertyCompositeView from './PropertyCompositeView';
 import LayersView from './LayersView';
 
@@ -33,6 +33,8 @@ export default PropertyCompositeView.extend({
     if (!this.model.get('detached')) {
       PropertyCompositeView.prototype.targetUpdated.apply(this, args);
     } else {
+      const { status } = this._getTargetData();
+      this.setStatus(status);
       this.checkVisibility();
     }
 
@@ -108,15 +110,30 @@ export default PropertyCompositeView.extend({
    * */
   refreshLayers() {
     let layersObj = [];
-    const model = this.model;
+    const { model, em } = this;
     const layers = this.getLayers();
     const detached = model.get('detached');
     const target = this.getTarget();
+    let style, valueComput, targetAlt;
 
     // With detached layers values will be assigned to their properties
     if (detached) {
-      const style = target ? target.getStyle() : {};
-      layersObj = layers.getLayersFromStyle(style);
+      const selected = em.getSelected();
+      style = target ? target.getStyle() : 0;
+      valueComput = this.getComputedValue();
+
+      // If the style object is empty but the target has a computed value,
+      // that means the style might exist in some other place
+      if ((!style || !keys(style).length) && valueComput && selected) {
+        // The target is a component but the style is in class rules
+        targetAlt = em.get('StyleManager').getModelToStyle(selected, {
+          skipAdd: 1,
+          useClasses: 1
+        });
+        style = targetAlt !== selected ? targetAlt.getStyle() : 0;
+      }
+
+      layersObj = layers.getLayersFromStyle(style || {});
     } else {
       let value = this.getTargetValue({ ignoreDefault: 1 });
 
@@ -127,6 +144,19 @@ export default PropertyCompositeView.extend({
     }
 
     const toAdd = model.getLayersFromTarget(target) || layersObj;
+
+    // const prop = this.model.get('property');
+    // if (['background', 'box-shadow'].indexOf(prop) >= 0) {
+    //   console.log('PROP', prop, {
+    //     style,
+    //     toAdd,
+    //     layersObj,
+    //     targetAlt,
+    //     valueTrg: this.getTargetValue({ ignoreDefault: 1 }),
+    //     valueComput: this.getComputedValue(),
+    //   });
+    // }
+
     layers.reset();
     layers.add(toAdd);
     model.set({ stackIndex: null }, { silent: true });

src/style_manager/view/PropertyView.js

@@ -213,25 +213,13 @@ export default Backbone.View.extend({
     em && em.trigger('styleManager:update:target', this.getTarget());
   }),
 
-  /**
-   * Fired when the target is changed
-   * */
-  targetUpdated(mod, val, opts = {}) {
-    this.emitUpdateTarget();
-
-    if (!this.checkVisibility()) {
-      return;
-    }
-
-    const config = this.config;
-    const em = config.em;
-    const { model } = this;
-    const property = model.get('property');
+  _getTargetData() {
+    const { model, config } = this;
+    const targetValue = this.getTargetValue({ ignoreDefault: 1 });
+    const defaultValue = model.getDefaultValue();
+    const computedValue = this.getComputedValue();
     let value = '';
     let status = '';
-    let targetValue = this.getTargetValue({ ignoreDefault: 1 });
-    let defaultValue = model.getDefaultValue();
-    let computedValue = this.getComputedValue();
 
     if (targetValue) {
       value = targetValue;
@@ -254,16 +242,39 @@ export default Backbone.View.extend({
       status = '';
     }
 
+    return {
+      value,
+      status,
+      targetValue,
+      defaultValue,
+      computedValue
+    };
+  },
+
+  /**
+   * Fired when the target is changed
+   * */
+  targetUpdated(mod, val, opts = {}) {
+    this.emitUpdateTarget();
+
+    if (!this.checkVisibility()) {
+      return;
+    }
+
+    const config = this.config;
+    const em = config.em;
+    const { model } = this;
+    const property = model.get('property');
+    const { status, value, ...targetData } = this._getTargetData();
+
     this.setStatus(status);
     model.setValue(value, 0, { fromTarget: 1, ...opts });
 
     if (em) {
       const data = {
         status,
-        targetValue,
-        defaultValue,
-        computedValue,
-        value
+        value,
+        ...targetData
       };
       em.trigger('styleManager:change', this, property, value, data);
       em.trigger(`styleManager:change:${property}`, this, value, data);