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();
},