Fixes to detached layers

src/style_manager/model/Layers.js

@@ -64,7 +64,6 @@ export default Backbone.Collection.extend({
   getLayersFromStyle(styleObj) {
     const layers = [];
     const properties = this.properties;
-    const propNames = properties.pluck('property');
 
     properties.each(propModel => {
       const style = styleObj[propModel.get('property')];

src/style_manager/model/PropertyStack.js

@@ -1,3 +1,4 @@
+import { keys } from 'underscore';
 import Property from './PropertyComposite';
 import Layers from './Layers';
 
@@ -49,6 +50,24 @@ export default Property.extend({
     return Property.prototype.clearValue.apply(this, arguments);
   },
 
+  getValueFromTarget(target) {
+    const { detached, property, properties } = this.attributes;
+    const style = target.getStyle();
+    const validStyles = {};
+
+    properties.forEach(prop => {
+      const name = prop.get('property');
+      const value = style[name];
+      if (value) validStyles[name] = value;
+    });
+
+    return !detached
+      ? style[property]
+      : keys(validStyles).length
+      ? validStyles
+      : '';
+  },
+
   /**
    * This method allows to customize layers returned from the target
    * @param  {Object} target

src/style_manager/view/PropertyStackView.js

@@ -51,17 +51,18 @@ export default PropertyCompositeView.extend({
    * so we gonna check all props and find if it has any difference
    * */
   targetUpdated(...args) {
+    let data;
     if (!this.model.get('detached')) {
-      PropertyCompositeView.prototype.targetUpdated.apply(this, args);
+      data = PropertyCompositeView.prototype.targetUpdated.apply(this, args);
     } else {
-      const { status } = this._getTargetData();
-      this.setStatus(status);
+      data = this._getTargetData();
+      this.setStatus(data.status);
       this.checkVisibility();
     }
 
     // I have to wait the update of inner properites (like visibility)
     // before render layers
-    setTimeout(() => this.refreshLayers());
+    setTimeout(() => this.refreshLayers(data));
   },
 
   /**
@@ -183,7 +184,7 @@ export default PropertyCompositeView.extend({
   /**
    * Refresh layers
    * */
-  refreshLayers() {
+  refreshLayers(opts = {}) {
     let layersObj = [];
     const { model, em } = this;
     const layers = this.getLayers();
@@ -202,7 +203,7 @@ export default PropertyCompositeView.extend({
 
     // With detached layers values will be assigned to their properties
     if (detached) {
-      style = target ? target.getStyle() : {};
+      style = opts.targetValue || {};
       const hasDetachedStyle = rule => {
         const name = model
           .get('properties')
@@ -277,15 +278,19 @@ export default PropertyCompositeView.extend({
   },
 
   getTargetValue(opts = {}) {
+    const { model } = this;
+    const { detached } = model.attributes;
+    const target = this.getTarget();
     let result = PropertyCompositeView.prototype.getTargetValue.call(
       this,
       opts
     );
-    const { detached } = this.model.attributes;
 
     // It might happen that the browser split properties on CSSOM parse
     if (isUndefined(result) && !detached) {
-      result = this.model.getValueFromStyle(this.getTarget().getStyle());
+      result = model.getValueFromStyle(target.getStyle());
+    } else if (detached) {
+      result = model.getValueFromTarget(target);
     }
 
     return result;

src/style_manager/view/PropertyView.js

@@ -266,20 +266,22 @@ export default Backbone.View.extend({
     const { model } = this;
     const property = model.get('property');
     const { status, value, ...targetData } = this._getTargetData();
+    const data = {
+      status,
+      value,
+      ...targetData
+    };
 
     this.setStatus(status);
     model.setValue(value, 0, { fromTarget: 1, ...opts });
 
     if (em) {
-      const data = {
-        status,
-        value,
-        ...targetData
-      };
       em.trigger('styleManager:change', this, property, value, data);
       em.trigger(`styleManager:change:${property}`, this, value, data);
       this._emitUpdate(data);
     }
+
+    return data;
   },
 
   _emitUpdate(addData = {}) {

src/style_manager/view/SectorsView.js

@@ -44,7 +44,7 @@ export default Backbone.View.extend({
   toggleStateCls(targets = [], enable) {
     targets.forEach(trg => {
       const el = trg.getEl();
-      el && el.classList[enable ? 'add' : 'remove'](helperCls);
+      el && el.classList && el.classList[enable ? 'add' : 'remove'](helperCls);
     });
   },