From 407b03e61e756bac0cfad1146171eefc87a73e07 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 6 Jan 2022 13:38:57 +0100 Subject: [PATCH] Add new methods to Layer --- src/style_manager/model/Layer.js | 69 ++++++--- src/style_manager/model/Layers.js | 148 ++++++++++---------- src/style_manager/model/PropertyStack.js | 40 +++--- src/style_manager/view/PropertyStackView.js | 4 +- 4 files changed, 145 insertions(+), 116 deletions(-) diff --git a/src/style_manager/model/Layer.js b/src/style_manager/model/Layer.js index 26b2abee7..6c2617ec6 100644 --- a/src/style_manager/model/Layer.js +++ b/src/style_manager/model/Layer.js @@ -14,6 +14,29 @@ export default class Layer extends Model { }; } + initialize() { + this.prop = this.collection.prop; + // const prp = this.get('properties'); + // var value = this.get('value'); + // this.set('properties', prp instanceof Properties ? prp : new Properties(prp)); + // const props = this.get('properties'); + // props.forEach(this.onPropAdd, this); + // this.listenTo(props, 'add', this.onPropAdd); + + // // If there is no value I'll try to get it from values + // // I need value setted to make preview working + // if (!value) { + // var val = ''; + // var values = this.get('values'); + + // for (var prop in values) { + // val += ' ' + values[prop]; + // } + + // this.set('value', val.trim()); + // } + } + /** * Get layer index. * @returns {Number} @@ -40,26 +63,34 @@ export default class Layer extends Model { : values; } - initialize() { - const prp = this.get('properties'); - var value = this.get('value'); - this.set('properties', prp instanceof Properties ? prp : new Properties(prp)); - const props = this.get('properties'); - props.forEach(this.onPropAdd, this); - this.listenTo(props, 'add', this.onPropAdd); - - // If there is no value I'll try to get it from values - // I need value setted to make preview working - if (!value) { - var val = ''; - var values = this.get('values'); - - for (var prop in values) { - val += ' ' + values[prop]; - } + /** + * Get layer label. + * @returns {String} + */ + getLabel() { + return this.prop?.getLayerLabel(this); + } - this.set('value', val.trim()); - } + /** + * Check if the layer is selected. + * @returns {Boolean} + */ + isSelected() { + return this.prop?.getSelectedLayer() === this; + } + + /** + * Select the layer. + */ + select() { + return this.prop?.selectLayer(this); + } + + /** + * Remove the layer. + */ + remove() { + return this.prop?.removeLayer(this); } upValues(props = {}) { diff --git a/src/style_manager/model/Layers.js b/src/style_manager/model/Layers.js index 173635c60..f3981e888 100644 --- a/src/style_manager/model/Layers.js +++ b/src/style_manager/model/Layers.js @@ -5,25 +5,25 @@ import Layer from './Layer'; export default Backbone.Collection.extend({ model: Layer, - initialize() { - this.idx = 1; + initialize(prop, opts = {}) { + this.prop = opts.prop; this.on('add', this.onAdd); - this.on('reset', this.onReset); }, onAdd(model, c, opts) { - if (!opts.noIncrement) model.set('index', this.idx++); opts.active && this.active(this.indexOf(model)); }, - onReset() { - this.idx = 1; + active(index) { + this.each(layer => layer.set('active', 0)); + const layer = this.at(index); + layer && layer.set('active', 1); }, - getSeparator() { - const { property } = this; - return property ? property.get('layerSeparator') : ', '; - }, + // getSeparator() { + // const { property } = this; + // return property ? property.get('layerSeparator') : ', '; + // }, /** * Get layers from a value string (for not detached properties), @@ -33,21 +33,21 @@ export default Backbone.Collection.extend({ * @return {Array} * @private */ - getLayersFromValue(value) { - const layers = []; - // Remove spaces inside functions, eg: - // From: 1px 1px rgba(2px, 2px, 2px), 2px 2px rgba(3px, 3px, 3px) - // To: 1px 1px rgba(2px,2px,2px), 2px 2px rgba(3px,3px,3px) - value.replace(/\(([\w\s,.]*)\)/g, match => { - var cleaned = match.replace(/,\s*/g, ','); - value = value.replace(match, cleaned); - }); - const layerValues = value ? value.split(this.getSeparator()) : []; - layerValues.forEach(layerValue => { - layers.push({ properties: this.properties.parseValue(layerValue) }); - }); - return layers; - }, + // getLayersFromValue(value) { + // const layers = []; + // // Remove spaces inside functions, eg: + // // From: 1px 1px rgba(2px, 2px, 2px), 2px 2px rgba(3px, 3px, 3px) + // // To: 1px 1px rgba(2px,2px,2px), 2px 2px rgba(3px,3px,3px) + // value.replace(/\(([\w\s,.]*)\)/g, match => { + // var cleaned = match.replace(/,\s*/g, ','); + // value = value.replace(match, cleaned); + // }); + // const layerValues = value ? value.split(this.getSeparator()) : []; + // layerValues.forEach(layerValue => { + // layers.push({ properties: this.properties.parseValue(layerValue) }); + // }); + // return layers; + // }, /** * Get layers from a style object (for detached properties), @@ -61,63 +61,57 @@ export default Backbone.Collection.extend({ * @return {Array} * @private */ - getLayersFromStyle(styleObj) { - const layers = []; - const properties = this.properties; - - properties.each(propModel => { - const style = styleObj[propModel.get('property')]; - const values = style ? style.split(', ') : []; - values.forEach((value, i) => { - value = propModel.parseValue(value.trim()).value; - const layer = layers[i]; - const propertyObj = { ...propModel.attributes, ...{ value } }; + // getLayersFromStyle(styleObj) { + // const layers = []; + // const properties = this.properties; - if (layer) { - layer.properties.push(propertyObj); - } else { - layers[i] = { - properties: [propertyObj] - }; - } - }); - }); + // properties.each(propModel => { + // const style = styleObj[propModel.get('property')]; + // const values = style ? style.split(', ') : []; + // values.forEach((value, i) => { + // value = propModel.parseValue(value.trim()).value; + // const layer = layers[i]; + // const propertyObj = { ...propModel.attributes, ...{ value } }; - // Now whit all layers in, will check missing properties - layers.forEach(layer => { - const layerProprs = layer.properties.map(prop => prop.property); - properties.each(propModel => { - const propertyName = propModel.get('property'); + // if (layer) { + // layer.properties.push(propertyObj); + // } else { + // layers[i] = { + // properties: [propertyObj] + // }; + // } + // }); + // }); - if (layerProprs.indexOf(propertyName) < 0) { - layer.properties.push({ ...propModel.attributes }); - } - }); - }); + // // Now whit all layers in, will check missing properties + // layers.forEach(layer => { + // const layerProprs = layer.properties.map(prop => prop.property); + // properties.each(propModel => { + // const propertyName = propModel.get('property'); - return layers; - }, + // if (layerProprs.indexOf(propertyName) < 0) { + // layer.properties.push({ ...propModel.attributes }); + // } + // }); + // }); - active(index) { - this.each(layer => layer.set('active', 0)); - const layer = this.at(index); - layer && layer.set('active', 1); - }, + // return layers; + // }, - getFullValue() { - let result = []; - this.each(layer => result.push(layer.getFullValue())); - return result.join(this.getSeparator()); - }, + // getFullValue() { + // let result = []; + // this.each(layer => result.push(layer.getFullValue())); + // return result.join(this.getSeparator()); + // }, - getPropertyValues(property, defValue) { - const result = []; - this.each(layer => { - const value = layer.getPropertyValue(property); - value - ? result.push(value) - : !isUndefined(defValue) && result.push(defValue); - }); - return result.join(', '); - } + // getPropertyValues(property, defValue) { + // const result = []; + // this.each(layer => { + // const value = layer.getPropertyValue(property); + // value + // ? result.push(value) + // : !isUndefined(defValue) && result.push(defValue); + // }); + // return result.join(', '); + // } }); diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js index 3e3ec489d..2889f4cc8 100644 --- a/src/style_manager/model/PropertyStack.js +++ b/src/style_manager/model/PropertyStack.js @@ -40,11 +40,27 @@ export default class PropertyStack extends PropertyComposite { }; } + initialize(props = {}, opts = {}) { + PropertyComposite.callParentInit(PropertyComposite, this, props, opts); + const layers = this.get('layers'); + const layersColl = new Layers(layers, { prop: this }); + layersColl.property = this; + layersColl.properties = this.get('properties'); + this.set('layers', layersColl, { silent: true }); + this.on('change:selectedLayer', this.__upSelected); + this.listenTo(layersColl, 'add remove', this.__upLayers); + PropertyComposite.callInit(this, props, opts); + } + /** * Get all available layers. - * @returns {Collection<[Layer]>} + * @returns {Array<[Layer]>} */ getLayers() { + return this.__getLayers().models; + } + + __getLayers() { return this.get('layers'); } @@ -60,7 +76,7 @@ export default class PropertyStack extends PropertyComposite { * const layerLast = property.getLayer(layers.length - 1); */ getLayer(index = 0) { - return this.getLayers().at(index) || null; + return this.__getLayers().at(index) || null; } /** @@ -240,18 +256,6 @@ export default class PropertyStack extends PropertyComposite { return isString(sep) ? new RegExp(`${sep}(?![^\\(]*\\))`) : sep; } - initialize(props = {}, opts = {}) { - PropertyComposite.callParentInit(PropertyComposite, this, props, opts); - const layers = this.get('layers'); - const layersColl = new Layers(layers); - layersColl.property = this; - layersColl.properties = this.get('properties'); - this.set('layers', layersColl, { silent: true }); - this.on('change:selectedLayer', this.__upSelected); - this.listenTo(layersColl, 'add remove', this.__upLayers); - PropertyComposite.callInit(this, props, opts); - } - __upProperties(prop, opts = {}) { const layer = this.getSelectedLayer(); if (opts.__up || !layer) return; @@ -300,13 +304,13 @@ export default class PropertyStack extends PropertyComposite { } __setLayers(newLayers = []) { - const layers = this.getLayers(); + const layers = this.__getLayers(); const layersNew = newLayers.map(values => ({ values })); if (layers.length === layersNew.length) { layersNew.map((layer, n) => layers.at(n)?.upValues(layer.values)); } else { - this.getLayers().reset(layersNew); + this.__getLayers().reset(layersNew); } this.__upSelected({ noEvent: true }); @@ -429,7 +433,7 @@ export default class PropertyStack extends PropertyComposite { } getValueFromStyle(styles = {}) { - const layers = this.getLayers().getLayersFromStyle(styles); + const layers = this.__getLayers().getLayersFromStyle(styles); return new Layers(layers).getFullValue(); } @@ -462,7 +466,7 @@ export default class PropertyStack extends PropertyComposite { * @private */ clear(opts = {}) { - this.getLayers().reset(); + this.__getLayers().reset(); this.__upTargetsStyleProps(opts); return PropertyBase.prototype.clear.call(this); } diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index d44ee9b5f..1e2cf9787 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -27,7 +27,7 @@ export default PropertyCompositeView.extend({ init() { const { model } = this; - this.listenTo(model.getLayers(), 'change reset', this.updateStatus); + this.listenTo(model.__getLayers(), 'change reset', this.updateStatus); }, addLayer() { @@ -68,7 +68,7 @@ export default PropertyCompositeView.extend({ propsView.render(); const layersView = new LayersView({ - collection: model.getLayers(), + collection: model.__getLayers(), config: this.config, propertyView: this, });