Improve style preview

src/style_manager/view/LayerView.js

@@ -1,3 +1,4 @@
+import { isString, each } from 'underscore';
 import Backbone from 'backbone';
 import PropertiesView from './PropertiesView';
 
@@ -82,11 +83,16 @@ export default Backbone.View.extend({
    * @param {Element} $el
    */
   onPreview(value) {
+    const { stackModel } = this;
+    const detach = stackModel && stackModel.get('detached');
     const values = value.split(' ');
     const lim = 3;
     const result = [];
+    const resultObj = {};
+
     this.model.get('properties').each((prop, index) => {
-      var value = values[index] || '';
+      const property = prop.get('property');
+      let value = detach ? prop.getFullValue() : values[index] || '';
 
       if (value) {
         if (prop.get('type') == 'integer') {
@@ -100,9 +106,10 @@ export default Backbone.View.extend({
       }
 
       result.push(value);
+      resultObj[property] = value;
     });
 
-    return result.join(' ');
+    return detach ? resultObj : result.join(' ');
   },
 
   updatePreview() {
@@ -115,7 +122,12 @@ export default Backbone.View.extend({
       : this.onPreview(value);
 
     if (preview && stackModel && previewEl) {
-      previewEl.style[stackModel.get('property')] = preview;
+      const { style } = previewEl;
+      if (isString(preview)) {
+        style[stackModel.get('property')] = preview;
+      } else {
+        each(preview, (val, prop) => (style[prop] = val));
+      }
     }
   },
 

src/style_manager/view/PropertyFileView.js

@@ -73,6 +73,7 @@ export default PropertyView.extend({
   setPreviewView(v) {
     const pv = this.$previewBox;
     pv && pv[v ? 'addClass' : 'removeClass'](`${this.pfx}show`);
+    pv && pv.css({ display: v ? 'block' : 'none' });
   },
 
   /**