From 500b431c1ae8186744b1e90fab1eb0fc350eadbc Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 15 Mar 2020 14:35:00 +0100 Subject: [PATCH] Improve style preview --- src/style_manager/view/LayerView.js | 18 +++++++++++++++--- src/style_manager/view/PropertyFileView.js | 1 + 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js index 523b45786..87ba35203 100644 --- a/src/style_manager/view/LayerView.js +++ b/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)); + } } }, diff --git a/src/style_manager/view/PropertyFileView.js b/src/style_manager/view/PropertyFileView.js index d38ba3fc9..93233edbc 100644 --- a/src/style_manager/view/PropertyFileView.js +++ b/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' }); }, /**