From 5a4aa9b6ff42c78953793fb26961274670637591 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 31 Dec 2021 01:20:47 +0100 Subject: [PATCH] Update property composite view --- src/style_manager/model/Property.js | 7 +- src/style_manager/model/PropertyComposite.js | 2 +- src/style_manager/model/PropertyStack.js | 1 - src/style_manager/view/PropertiesView.js | 6 +- .../view/PropertyCompositeView.js | 126 +++--------------- 5 files changed, 24 insertions(+), 118 deletions(-) diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js index 8c58ffe79..002a10889 100644 --- a/src/style_manager/model/Property.js +++ b/src/style_manager/model/Property.js @@ -23,16 +23,15 @@ export default class Property extends Model { Property.callInit(this, props, opts); } - __hasCustom() { - return !!this.em?.get('StyleManager').getConfig().custom; - } + // __hasCustom() { + // return !!this.em?.get('StyleManager').getConfig().custom; + // } __getParentProp() { return this.collection?.opts?.parentProp; } __upTargets(p, opts = {}) { - // if (!this.__hasCustom()) return; const { em } = this; const sm = em.get('StyleManager'); const name = this.getName(); diff --git a/src/style_manager/model/PropertyComposite.js b/src/style_manager/model/PropertyComposite.js index e236ccb85..fb57bcc6c 100644 --- a/src/style_manager/model/PropertyComposite.js +++ b/src/style_manager/model/PropertyComposite.js @@ -112,7 +112,7 @@ export default class PropertyComposite extends Property { } __upProperties(p, opts = {}) { - if (!this.__hasCustom() || opts.__up || opts.__clearIn) return; + if (opts.__up || opts.__clearIn) return; const parentProp = this.__getParentProp(); if (parentProp) return parentProp.__upProperties(this, opts); diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js index bdb987fe3..460f773d6 100644 --- a/src/style_manager/model/PropertyStack.js +++ b/src/style_manager/model/PropertyStack.js @@ -252,7 +252,6 @@ export default class PropertyStack extends PropertyComposite { } __upSelected({ noEvent } = {}, opts = {}) { - if (!this.__hasCustom()) return; const sm = this.em.get('StyleManager'); const selected = this.getSelectedLayer(); const values = selected?.getValues(); diff --git a/src/style_manager/view/PropertiesView.js b/src/style_manager/view/PropertiesView.js index 7014d62a8..1b12f5052 100644 --- a/src/style_manager/view/PropertiesView.js +++ b/src/style_manager/view/PropertiesView.js @@ -30,7 +30,7 @@ export default Backbone.View.extend({ propTarget: this.propTarget, onChange: this.onChange, onInputRender: this.onInputRender, - config: this.config + config: this.config, }); if (model.get('type') != 'composite') { @@ -49,7 +49,7 @@ export default Backbone.View.extend({ const { $el } = this; this.clearItems(); const fragment = document.createDocumentFragment(); - this.collection.each(model => this.add(model, fragment)); + this.collection.forEach(model => this.add(model, fragment)); $el.empty(); $el.append(fragment); $el.attr('class', `${this.pfx}properties`); @@ -64,5 +64,5 @@ export default Backbone.View.extend({ clearItems() { this.properties.forEach(item => item.remove()); this.properties = []; - } + }, }); diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index fa49d312b..beee5a9c4 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/src/style_manager/view/PropertyCompositeView.js @@ -1,11 +1,9 @@ -import Backbone from 'backbone'; import PropertyView from './PropertyView'; - -const $ = Backbone.$; +import PropertiesView from './PropertiesView'; export default PropertyView.extend({ templateInput() { - const pfx = this.pfx; + const { pfx } = this; return `
@@ -14,124 +12,34 @@ export default PropertyView.extend({ }, inputValueChanged(...args) { - // If it's not detached (eg. 'padding: 1px 2px 3px 4px;') it will follow - // the same flow of PropertyView - if (!this.model.get('detached')) { + // If it's not detached (eg. 'padding: 1px 2px 3px 4px;') it will follow the same flow of the PropertyView + if (!this.model.isDetached()) { PropertyView.prototype.inputValueChanged.apply(this, args); } }, - clear(e) { - const props = this.properties; - props && props.forEach(propView => propView.clear()); - PropertyView.prototype.clear.apply(this, arguments); - }, - remove() { - this.model.get('properties').reset(); + this.props?.remove(); PropertyView.prototype.remove.apply(this, arguments); - ['properties', 'props', '$props'].forEach(i => (this[i] = {})); }, - /** - * Renders input - * */ onRender() { - var model = this.model; - var props = model.get('properties') || []; - var self = this; - this.properties = []; - - if (props.length) { - if (!this.$input) { - this.$input = $(''); - this.input = this.$input.get(0); - } - - if (!this.props) { - this.props = model.get('properties'); - } - - if (!this.$props) { - //Not yet supported nested composite - this.props.each(function(prop, index) { - if (prop && prop.get('type') == 'composite') { - this.props.remove(prop); - console.warn('Nested composite types not yet allowed.'); - } - prop.parent = model; - }, this); - - var PropertiesView = require('./PropertiesView').default; - var propsView = new PropertiesView(this.getPropsConfig()); - this.$props = propsView.render().$el; - this.properties = propsView.properties; - this.$el.find(`#${this.pfx}input-holder`).append(this.$props); - } + const { model, pfx } = this; + const props = model.getProperties(); + + if (props.length && !this.props) { + const propsView = new PropertiesView({ + config: { ...this.config, highlightComputed: 0 }, + collection: props, + }); + propsView.render(); + this.$el.find(`#${pfx}input-holder`).append(propsView.el); + this.props = propsView; } }, - /** - * Returns configurations that should be past to properties - * @param {Object} opts - * @return {Object} - */ - getPropsConfig(opts) { - var that = this; - const model = this.model; - - var result = { - config: { ...this.config, highlightComputed: 0 }, - collection: this.props, - target: this.target, - propTarget: this.propTarget, - // On any change made to children I need to update composite value - onChange(el, view, opts) { - model.set('value', model.getFullValue(), opts); - }, - // Each child property will receive a full composite string, eg. '0px 0px 10px 0px' - // I need to extract from that string the corresponding one to that property. - customValue(property, mIndex) { - return that.valueOnIndex(mIndex, property); - } - }; - - // If detached let follow its standard flow - if (model.get('detached')) { - delete result.onChange; - } - - return result; - }, - - /** - * Extract string from composite value - * @param {number} index Index - * @param {Object} view Property view - * @return {string} - * */ - valueOnIndex(index, view) { - let value; - const targetValue = this.getTargetValue({ ignoreDefault: 1 }); - - // If the target value of the composite is not empty I'll fetch - // the corresponding value from the requested index, otherwise try - // to get the value of the sub-property - if (targetValue) { - const values = targetValue.split(this.model.getSplitSeparator()); - value = values[index]; - } else { - value = - view && view.getTargetValue({ ignoreCustomValue: 1, ignoreDefault: 1 }); - } - - return value; - }, - clearCached() { PropertyView.prototype.clearCached.apply(this, arguments); - this.$input = null; this.props = null; - this.$props = null; - } + }, });