Generate preview for layers

src/style_manager/model/PropertyComposite.js

@@ -1,7 +1,7 @@
 import { isString, isUndefined } from 'underscore';
 import Property from './Property';
 
-const isNumberType = type => type === 'integer' || type === 'number';
+export const isNumberType = type => type === 'integer' || type === 'number';
 
 /**
  * @typedef PropertyComposite

src/style_manager/model/PropertyStack.js

@@ -1,5 +1,5 @@
 import { keys, isUndefined, isArray, isString } from 'underscore';
-import PropertyComposite from './PropertyComposite';
+import PropertyComposite, { isNumberType } from './PropertyComposite';
 import PropertyBase from './Property';
 import Layers from './Layers';
 import { camelCase } from 'utils/mixins';
@@ -13,6 +13,7 @@ const PARTS_REG = /\s(?![^(]*\))/;
  *
  *
  * @typedef PropertyStack
+ * @property {Boolean} [preview=false] Indicate if the layer should display a preview.
  * @property {String|RegExp} [layerSeparator=', '] The separator used to split layer values.
  * @property {String} [layerJoin=', '] Value used to join layer values.
  * @property {Function} [layerLabel] Custom logic for creating the layer label.
@@ -26,7 +27,7 @@ export default class PropertyStack extends PropertyComposite {
       layerSeparator: ', ',
       layerJoin: '',
       prepend: 0,
-      preview: 0,
+      preview: false,
       layerLabel: null,
       selectedLayer: null,
     };
@@ -184,7 +185,14 @@ export default class PropertyStack extends PropertyComposite {
       const result = this.getProperties().map(prop => {
         const name = prop.getName();
         const val = values[name];
-        const value = isUndefined(val) ? prop.getDefaultValue() : val;
+        let value = isUndefined(val) ? prop.getDefaultValue() : val;
+
+        // Limit number values if necessary (useful for previews)
+        if (opts.number && isNumberType(prop.getType())) {
+          const newVal = prop.parseValue(val, opts.number);
+          value = `${newVal.value}${newVal.unit}`;
+        }
+
         return { name, value };
       });
       style = this.isDetached()

src/style_manager/view/LayerView.js

@@ -1,3 +1,4 @@
+import { keys } from 'underscore';
 import { View } from 'backbone';
 
 export default View.extend({
@@ -17,7 +18,7 @@ export default View.extend({
       </div>
       <div id="${pfx}label" data-label></div>
       <div id="${pfx}preview-box">
-      	<div id="${pfx}preview" data-preview></div>
+      	<div id="${pfx}preview" style="display: none" data-preview></div>
       </div>
       <div id="${pfx}close-layer" class="${pfx}btn-close" data-close-layer>
         &Cross;
@@ -105,16 +106,24 @@ export default View.extend({
   },
 
   updateLabel() {
-    const { model, propertyView } = this;
+    const { model, pModel } = this;
-    const label = propertyView.model.getLayerLabel(model);
+    const label = pModel.getLayerLabel(model);
     this.getLabelEl().innerHTML = label;
+
+    if (pModel.get('preview')) {
+      const prvEl = this.getPreviewEl();
+      const style = pModel.getStyleFromLayer(model, { number: { min: -3, max: 3 } });
+      const styleStr = keys(style)
+        .map(k => `${k}:${style[k]}`)
+        .join(';');
+      prvEl.setAttribute('style', styleStr);
+    }
   },
 
   render() {
-    const { model, el, pfx } = this;
+    const { el, pfx } = this;
-    const preview = model.get('preview');
     el.innerHTML = this.template();
-    el.className = `${pfx}layer${!preview ? ` ${pfx}no-preview` : ''}`;
+    el.className = `${pfx}layer`;
     this.updateLabel();
     this.updateVisibility();
     return this;