From 146a00fd7d6e7d9c5662b41a7df89d94fb60bd2e Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 2 Oct 2017 20:37:52 +0200 Subject: [PATCH] Update stack property in style manager --- src/style_manager/model/Properties.js | 10 ++++ src/style_manager/model/PropertyStack.js | 8 +-- src/style_manager/view/LayerView.js | 8 ++- src/style_manager/view/LayersView.js | 20 ++++--- src/style_manager/view/PropertyStackView.js | 60 +++++++++++++-------- 5 files changed, 68 insertions(+), 38 deletions(-) diff --git a/src/style_manager/model/Properties.js b/src/style_manager/model/Properties.js index 28c02a2ab..4562b0a14 100644 --- a/src/style_manager/model/Properties.js +++ b/src/style_manager/model/Properties.js @@ -86,6 +86,16 @@ module.exports = require('backbone').Collection.extend(TypeableCollection).exten } ], + deepClone() { + const collection = this.clone(); + collection.reset(collection.map(model => { + const cloned = model.clone(); + cloned.typeView = model.typeView; + return cloned; + })); + return collection; + }, + getFullValue() { let result = ''; this.each(model => result += `${model.getFullValue()} `); diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js index 1ab65d796..a0d14796d 100644 --- a/src/style_manager/model/PropertyStack.js +++ b/src/style_manager/model/PropertyStack.js @@ -18,13 +18,7 @@ module.exports = Property.extend({ }, getFullValue() { - if (this.get('detached')) { - return ''; - } - - const layers = this.get('layers'); - let val = layers.length ? layers.pluck('value').join(', ') : ''; - return val.trim(); + return this.get('detached') ? '' : this.get('layers').getFullValue(); }, }); diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js index ad7d005f0..edbd5c498 100644 --- a/src/style_manager/view/LayerView.js +++ b/src/style_manager/view/LayerView.js @@ -32,6 +32,7 @@ module.exports = Backbone.View.extend({ this.config = o.config || {}; this.pfx = this.config.stylePrefix || ''; this.sorter = o.sorter || null; + this.propsConfig = o.propsConfig || {}; this.listenTo(model, 'destroy remove', this.remove); this.listenTo(model, 'change:value', this.valueChanged); this.listenTo(model, 'change:active', this.updateVisibility); @@ -206,12 +207,17 @@ module.exports = Backbone.View.extend({ render() { const PropertiesView = require('./PropertiesView'); + const propsConfig = this.propsConfig; const className = `${this.pfx}layer`; const model = this.model; const el = this.el; + console.log(propsConfig); const properties = new PropertiesView({ collection: model.get('properties'), - config: this.config + config: this.config, + customValue: propsConfig.customValue, + propTarget: propsConfig.propTarget, + onChange: propsConfig.onChange, }).render().el; el.innerHTML = this.template(model); el.className = className; diff --git a/src/style_manager/view/LayersView.js b/src/style_manager/view/LayersView.js index e6287016b..8289645a5 100644 --- a/src/style_manager/view/LayersView.js +++ b/src/style_manager/view/LayersView.js @@ -9,6 +9,7 @@ module.exports = Backbone.View.extend({ this.preview = o.preview; this.pfx = this.config.stylePrefix || ''; this.ppfx = this.config.pStylePrefix || ''; + this.propsConfig = o.propsConfig; let pfx = this.pfx; let ppfx = this.ppfx; let collection = this.collection; @@ -55,6 +56,10 @@ module.exports = Backbone.View.extend({ * */ addToCollection(model, fragmentEl, index) { var fragment = fragmentEl || null; + const stackModel = this.stackModel; + const config = this.config; + const sorter = this.sorter; + const propsConfig = this.propsConfig; if(typeof this.preview !== 'undefined'){ model.set('preview', this.preview); @@ -62,15 +67,16 @@ module.exports = Backbone.View.extend({ var view = new LayerView({ model, - stackModel: this.stackModel, - config: this.config, - sorter: this.sorter + config, + sorter, + stackModel, + propsConfig }); - var rendered = view.render().el; + var rendered = view.render().el; - if(fragment){ - fragment.appendChild( rendered ); - }else{ + if (fragment) { + fragment.appendChild(rendered); + } else { if(typeof index != 'undefined'){ var method = 'before'; // If the added model is the last of collection diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index 557c28ffd..0de74163e 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -1,6 +1,5 @@ -var PropertyCompositeView = require('./PropertyCompositeView'); -var Layers = require('./../model/Layers'); -var LayersView = require('./LayersView'); +const PropertyCompositeView = require('./PropertyCompositeView'); +const LayersView = require('./LayersView'); module.exports = PropertyCompositeView.extend({ @@ -58,14 +57,9 @@ module.exports = PropertyCompositeView.extend({ indexChanged(e) { const model = this.model; this.getLayers().active(model.get('stackIndex')); - /* - var layer = this.getLayers().at(model.get('stackIndex')); - layer.set('props', this.$props); - model.get('properties').each(prop => prop.trigger('targetUpdated')); - */ }, - /** @inheritDoc */ + /** @inheritDoc * getPropsConfig(opts) { const model = this.model; const detached = model.get('detached'); @@ -87,7 +81,7 @@ module.exports = PropertyCompositeView.extend({ propVal += (propVal ? ',' : '') + val; } }); - */ + ** view.updateTargetStyle(propVal, null, opt); } else { model.set('value', model.getFullValue(), opt); @@ -96,6 +90,7 @@ module.exports = PropertyCompositeView.extend({ return result; }, + */ /** * Extract string from the composite value of the target @@ -134,7 +129,7 @@ module.exports = PropertyCompositeView.extend({ /** * Build composite value * @private - * */ + * * build(...args) { let value = ''; let values = {}; @@ -157,17 +152,15 @@ module.exports = PropertyCompositeView.extend({ const layerModel = this.getLayers().at(stackIndex); layerModel && layerModel.set({values, value}); }, + */ - - addLayer(e) { + addLayer() { const model = this.model; const layers = this.getLayers(); const layer = layers.add({ name: 'New', - properties: model.get('properties') + properties: model.get('properties').deepClone(), }); - console.log('Props ', model.get('properties'), 'layer props', layer.get('properties')); - //layer.set('value', model.getDefaultValue(1)); // In detached mode inputValueChanged will add new 'layer value' // to all subprops @@ -207,16 +200,38 @@ module.exports = PropertyCompositeView.extend({ * @return self * */ renderLayers() { + const self = this; + const model = this.model; const fieldEl = this.el.querySelector(`.${this.pfx}field`); const layers = new LayersView({ - // TODO Here I should put the onChange method collection: this.getLayers(), - stackModel: this.model, - preview: this.model.get('preview'), - config: this.config + stackModel: model, + preview: model.get('preview'), + config: this.config, + propsConfig: { + propTarget: this.propTarget, + + // Things to do when a single sub-property is changed + onChange(el, view, opt) { + const subModel = view.model; + + if (model.get('detached')) { + const subProp = subModel.get('property'); + const values = self.getLayers().getPropertyValues(subProp); + view.updateTargetStyle(propVal, null, opt); + } else { + model.set('value', model.getFullValue(), opt); + } + }, + + // How to get a value on a single sub-property. + // eg. When the target is updated + customValue(property, mIndex) { + return self.valueOnIndex(mIndex, property); + } + } }).render().el; fieldEl.appendChild(layers); - this.$props.hide(); }, /** @@ -304,8 +319,7 @@ module.exports = PropertyCompositeView.extend({ }, onRender(...args) { - PropertyCompositeView.prototype.onRender.apply(this, args); - //this.refreshLayers(); + //PropertyCompositeView.prototype.onRender.apply(this, args); this.renderLayers(); },