diff --git a/docs/api/property_number.md b/docs/api/property_number.md index a966f9aaf..d6093dc92 100644 --- a/docs/api/property_number.md +++ b/docs/api/property_number.md @@ -23,6 +23,24 @@ Get property unit value. Returns **[String][2]** +### getMin + +Get min value. + +Returns **[Number][3]** + +### getMax + +Get max value. + +Returns **[Number][3]** + +### getStep + +Get step value. + +Returns **[Number][3]** + ### upUnit Update property unit value. diff --git a/src/style_manager/model/PropertyRadio.js b/src/style_manager/model/PropertyRadio.js index 1b3721b36..809f2b9a1 100644 --- a/src/style_manager/model/PropertyRadio.js +++ b/src/style_manager/model/PropertyRadio.js @@ -1,85 +1,10 @@ -import Property from './Property'; +import Property from './PropertySelect'; export default class PropertyRadio extends Property { defaults() { return { - ...Property.prototype.defaults, - options: [], // Array of options, eg. [{ id: '100', label: 'Set 100' }] + ...Property.getDefaults(), full: 1, }; } - - /** - * Get available options. - * @returns {Array} Array of options - */ - getOptions() { - // support old list property - const { options, list } = this.attributes; - return (options && options.length ? options : list) || []; - } - - /** - * Get current selected option. - * @returns {Object | null} - */ - getOption(id) { - const idSel = id || this.getValue(); - return this.getOptions().filter(o => this.getOptionId(o) === idSel)[0] || null; - } - - /** - * Update options. - * @param {Array} value Array of options, eg. `[{ id: 'val-1', label: 'Value 1' }]` - */ - setOptions(value = []) { - this.set('options', value); - return this; - } - - /** - * Add new option. - * @param {Object} value Option object, eg. `{ id: 'val-1', label: 'Value 1' }` - */ - addOption(value) { - if (value) { - const opts = this.getOptions(); - this.setOptions([...opts, value]); - } - return this; - } - - /** - * Get the option id from the option object. - * @param {Object} option Option object - * @returns {String} Option id - */ - getOptionId(option) { - return option.id || option.value; - } - - /** - * Get option label. - * @param {String} id Option id - * @param {Object} [opts={}] Options - * @param {Boolean} [opts.locale=true] Use the locale string from i18n module - * @returns {String} Option label - */ - getOptionLabel(id, opts = {}) { - const { locale = true } = opts; - const options = this.getOptions(); - const option = options.filter(o => this.getOptionId(o) === id)[0] || {}; - const label = option.label || option.name || id; - const propId = this.getId(); - return (locale && this.em?.t(`styleManager.options.${propId}.${id}`)) || label; - } - - initialize(...args) { - Property.prototype.initialize.apply(this, args); - this.listenTo(this, 'change:options', this.__onOptionChange); - } - - __onOptionChange() { - this.set('list', this.get('options')); - } } diff --git a/src/style_manager/model/PropertySelect.js b/src/style_manager/model/PropertySelect.js index 9e87193f6..8be5d9442 100644 --- a/src/style_manager/model/PropertySelect.js +++ b/src/style_manager/model/PropertySelect.js @@ -1,8 +1,85 @@ -import Property from './PropertyRadio'; - -export default Property.extend({ - defaults: () => ({ - ...Property.prototype.defaults(), - full: 0 - }) -}); +import Property from './Property'; + +export default class PropertySelect extends Property { + defaults() { + return { + ...Property.getDefaults(), + options: [], // Array of options, eg. [{ id: '100', label: 'Set 100' }] + full: 0, + }; + } + + /** + * Get available options. + * @returns {Array} Array of options + */ + getOptions() { + // support old list property + const { options, list } = this.attributes; + return (options && options.length ? options : list) || []; + } + + /** + * Get current selected option. + * @returns {Object | null} + */ + getOption(id) { + const idSel = id || this.getValue(); + return this.getOptions().filter(o => this.getOptionId(o) === idSel)[0] || null; + } + + /** + * Update options. + * @param {Array} value Array of options, eg. `[{ id: 'val-1', label: 'Value 1' }]` + */ + setOptions(value = []) { + this.set('options', value); + return this; + } + + /** + * Add new option. + * @param {Object} value Option object, eg. `{ id: 'val-1', label: 'Value 1' }` + */ + addOption(value) { + if (value) { + const opts = this.getOptions(); + this.setOptions([...opts, value]); + } + return this; + } + + /** + * Get the option id from the option object. + * @param {Object} option Option object + * @returns {String} Option id + */ + getOptionId(option) { + return option.id || option.value; + } + + /** + * Get option label. + * @param {String} id Option id + * @param {Object} [opts={}] Options + * @param {Boolean} [opts.locale=true] Use the locale string from i18n module + * @returns {String} Option label + */ + getOptionLabel(id, opts = {}) { + const { locale = true } = opts; + const options = this.getOptions(); + const option = options.filter(o => this.getOptionId(o) === id)[0] || {}; + const label = option.label || option.name || id; + const propId = this.getId(); + return (locale && this.em?.t(`styleManager.options.${propId}.${id}`)) || label; + } + + initialize(...args) { + Property.prototype.initialize.apply(this, args); + this.listenTo(this, 'change:options', this.__onOptionChange); + } + + __onOptionChange() { + this.set('list', this.get('options')); + } +}