From 2c2d6335f187d60ae4d7e74d5e640b09f107f9cd Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 29 Sep 2017 23:53:22 +0200 Subject: [PATCH] Updates on Layers --- src/style_manager/model/Layer.js | 13 ++- src/style_manager/model/Layers.js | 6 ++ src/style_manager/model/Properties.js | 8 +- src/style_manager/model/PropertyComposite.js | 3 +- src/style_manager/view/LayerView.js | 59 ++++++----- src/style_manager/view/LayersView.js | 3 +- src/style_manager/view/PropertyStackView.js | 101 +++++++++---------- 7 files changed, 110 insertions(+), 83 deletions(-) diff --git a/src/style_manager/model/Layer.js b/src/style_manager/model/Layer.js index 55bf5db5d..9160048d8 100644 --- a/src/style_manager/model/Layer.js +++ b/src/style_manager/model/Layer.js @@ -1,5 +1,3 @@ -var Backbone = require('backbone'); - module.exports = Backbone.Model.extend({ defaults: { @@ -8,10 +6,15 @@ module.exports = Backbone.Model.extend({ values: {}, active: true, preview: false, + properties: [], }, initialize() { + const Properties = require('./Properties'); + const properties = this.get('properties'); var value = this.get('value'); + this.set('properties', properties instanceof Properties ? + properties : new Properties(properties)); // If there is no value I'll try to get it from values // I need value setted to make preview working @@ -27,4 +30,10 @@ module.exports = Backbone.Model.extend({ } }, + getFullValue() { + let result = []; + this.get('properties').each(prop => result.push(prop.getFullValue())); + return result.join(' '); + } + }); diff --git a/src/style_manager/model/Layers.js b/src/style_manager/model/Layers.js index 2316620f7..d781d6aac 100644 --- a/src/style_manager/model/Layers.js +++ b/src/style_manager/model/Layers.js @@ -18,6 +18,12 @@ module.exports = Backbone.Collection.extend({ onReset() { this.idx = 1; + }, + + getFullValue() { + let result = []; + this.each(layer => result.push(layer.getFullValue())); + return result.join(', '); } }); diff --git a/src/style_manager/model/Properties.js b/src/style_manager/model/Properties.js index c7288ca62..28c02a2ab 100644 --- a/src/style_manager/model/Properties.js +++ b/src/style_manager/model/Properties.js @@ -84,5 +84,11 @@ module.exports = require('backbone').Collection.extend(TypeableCollection).exten return value; } } - ] + ], + + getFullValue() { + let result = ''; + this.each(model => result += `${model.getFullValue()} `); + return result.trim(); + } }); diff --git a/src/style_manager/model/PropertyComposite.js b/src/style_manager/model/PropertyComposite.js index 3abce912b..fcf18f609 100644 --- a/src/style_manager/model/PropertyComposite.js +++ b/src/style_manager/model/PropertyComposite.js @@ -48,8 +48,7 @@ module.exports = Property.extend({ } let result = ''; - this.get('properties').each(prop => result += `${prop.getFullValue()} `); - return result.trim(); + return this.get('properties').getFullValue(); }, }); diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js index deaebdb9b..3eab861b4 100644 --- a/src/style_manager/view/LayerView.js +++ b/src/style_manager/view/LayerView.js @@ -1,35 +1,40 @@ -var Backbone = require('backbone'); - module.exports = Backbone.View.extend({ events:{ - 'click': 'updateIndex', + click: 'updateIndex', + 'click [data-close-layer]': 'remove', + 'mousedown [data-move-layer]': 'initSorter', }, - template: _.template(` -
- -
-
<%= label %>
-
-
-
-
⨯
-
-
`), + template(model) { + const pfx = this.pfx; + const label = `Layer ${model.get('index')}`; + + return ` +
+ +
+
${label}
+
+
+
+
+ ⨯ +
+
+
+ ` + }, initialize(o) { let model = this.model; this.stackModel = o.stackModel || {}; this.config = o.config || {}; this.pfx = this.config.stylePrefix || ''; - this.className = this.pfx + 'layer'; this.sorter = o.sorter || null; this.listenTo(model, 'destroy remove', this.remove); this.listenTo(model, 'change:value', this.valueChanged); this.listenTo(model, 'change:props', this.showProps); - this.events['click #' + this.pfx + 'close-layer'] = 'remove'; - this.events['mousedown [data-move-layer]'] = 'initSorter'; if (!model.get('preview')) { this.$el.addClass(this.pfx + 'no-preview'); @@ -39,7 +44,6 @@ module.exports = Backbone.View.extend({ model.view = this; model.set({droppable: 0, draggable: 1}); this.$el.data('model', model); - this.delegateEvents(); }, /** @@ -178,12 +182,19 @@ module.exports = Backbone.View.extend({ }, render() { - this.$el.html( this.template({ - label: 'Layer ' + this.model.get('index'), - pfx: this.pfx, - })); - this.$el.attr('class', this.className); - this.valueChanged(); + const PropertiesView = require('./PropertiesView'); + const className = `${this.pfx}layer`; + const model = this.model; + const el = this.el; + const properties = new PropertiesView({ + collection: model.get('properties'), + config: this.config + }).render().el; + el.innerHTML = this.template(model); + el.className = className; + console.log('Append to ', el.querySelector('[data-properties]'), 'props', properties); + el.querySelector('[data-properties]').appendChild(properties); + //this.valueChanged(); return this; }, diff --git a/src/style_manager/view/LayersView.js b/src/style_manager/view/LayersView.js index 84a710aa0..e6287016b 100644 --- a/src/style_manager/view/LayersView.js +++ b/src/style_manager/view/LayersView.js @@ -55,13 +55,12 @@ module.exports = Backbone.View.extend({ * */ addToCollection(model, fragmentEl, index) { var fragment = fragmentEl || null; - var viewObject = LayerView; if(typeof this.preview !== 'undefined'){ model.set('preview', this.preview); } - var view = new viewObject({ + var view = new LayerView({ model, stackModel: this.stackModel, config: this.config, diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index 1c51b0460..29b2acad3 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -9,8 +9,7 @@ module.exports = PropertyCompositeView.extend({ const ppfx = this.ppfx; return `
- - +
`; }, @@ -19,7 +18,7 @@ module.exports = PropertyCompositeView.extend({ const model = this.model; const pfx = this.pfx; model.set('stackIndex', null); - this.events[`click #${pfx}add`] = 'addLayer'; + this.events[`click [data-add-layer]`] = 'addLayer'; this.listenTo(model, 'change:stackIndex', this.indexChanged); this.listenTo(model, 'updateValue', this.inputValueChanged); this.delegateEvents(); @@ -28,7 +27,7 @@ module.exports = PropertyCompositeView.extend({ /** * Fired when the target is updated. * With detached mode the component will be always empty as its value - * so we gonna check all props and fine if there is some differences. + * so we gonna check all props and find if it has any difference * */ targetUpdated(...args) { if (!this.model.get('detached')) { @@ -57,18 +56,14 @@ module.exports = PropertyCompositeView.extend({ * @return {Object} * */ indexChanged(e) { - var model = this.model; + const model = this.model; + console.log('New layer index', model.get('stackIndex')); + /* + var layer = this.getLayers().at(model.get('stackIndex')); layer.set('props', this.$props); model.get('properties').each(prop => prop.trigger('targetUpdated')); - }, - - /** - * Get array of values from layers - * @return Array - * */ - getStackValues() { - return this.getLayers().pluck('value'); + */ }, /** @inheritDoc */ @@ -123,7 +118,7 @@ module.exports = PropertyCompositeView.extend({ result = result ? result.trim() : propModel.getDefaultValue(); result = propModel.parseValue(result); } else { - var aStack = this.getStackValues(); + var aStack = this.getLayerValues(); var strVar = aStack[layerIndex]; if(!strVar) return; @@ -163,31 +158,36 @@ module.exports = PropertyCompositeView.extend({ layerModel && layerModel.set({values, value}); }, - /** - * Add new layer - * */ - addLayer() { - if (this.getTarget()) { - const layers = this.getLayers(); - const layer = layers.add({name: 'New'}); - const index = layers.indexOf(layer); - const model = this.model; - layer.set('value', model.getDefaultValue(1)); - - // In detached mode inputValueChanged will add new 'layer value' - // to all subprops - this.inputValueChanged(); - // This will set subprops with a new default values - model.set('stackIndex', index); - } + addLayer(e) { + const model = this.model; + const layers = this.getLayers(); + const layer = layers.add({ + name: 'New', + properties: model.get('properties') + }); + console.log('Props ', model.get('properties'), 'layer props', layer.get('properties')); + const index = layers.indexOf(layer); + //layer.set('value', model.getDefaultValue(1)); + + // In detached mode inputValueChanged will add new 'layer value' + // to all subprops + this.inputValueChanged(); + + // This will set subprops with a new default values + model.set('stackIndex', index); }, + inputValueChanged() { - var model = this.model; + const model = this.model; + this.elementUpdated(); + // If not detached I'll just put all the values from layers to property + // eg. + // background: layer1Value, layer2Value, layer3Value, ... if (!model.get('detached')) { - model.set('value', this.createValue()); + model.set('value', this.getLayerValues()); } else { model.get('properties').each(prop => { prop.trigger('change:value'); @@ -199,8 +199,8 @@ module.exports = PropertyCompositeView.extend({ * Create value by layers * @return string * */ - createValue() { - return this.getStackValues().join(', '); + getLayerValues() { + return this.getLayers().getFullValue(); }, /** @@ -208,19 +208,14 @@ module.exports = PropertyCompositeView.extend({ * @return self * */ renderLayers() { - if (!this.fieldEl) { - this.fieldEl = this.el.querySelector(`.${this.pfx}field`); - } - - if(!this.$layers) - this.$layers = new LayersView({ - collection: this.getLayers(), - stackModel: this.model, - preview: this.model.get('preview'), - config: this.config - }); - - this.fieldEl.appendChild(this.$layers.render().el); + const fieldEl = this.el.querySelector(`.${this.pfx}field`); + const layers = new LayersView({ + collection: this.getLayers(), + stackModel: this.model, + preview: this.model.get('preview'), + config: this.config + }).render().el; + fieldEl.appendChild(layers); this.$props.hide(); }, @@ -265,14 +260,16 @@ module.exports = PropertyCompositeView.extend({ var n = []; var a = []; var fieldName = 'value'; - var detached = this.model.get('detached'); + const model = this.model; + const detached = model.get('detached'); + // With detached layers values will be assigned to their properties if (detached) { fieldName = 'values'; a = this.getLayersFromTarget(); } else { var v = this.getTargetValue(); - var vDef = this.model.getDefaultValue(); + var vDef = model.getDefaultValue(); v = v == vDef ? '' : v; if (v) { // Remove spaces inside functions: @@ -303,12 +300,12 @@ module.exports = PropertyCompositeView.extend({ this.inputValueChanged(); } - this.model.set({stackIndex: null}, {silent: true}); + model.set({stackIndex: null}, {silent: true}); }, onRender(...args) { PropertyCompositeView.prototype.onRender.apply(this, args); - this.refreshLayers(); + //this.refreshLayers(); this.renderLayers(); },