From f8ff7bb62f7ac08d168a07cbebbc1089d598df00 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 7 Jan 2022 17:02:45 +0100 Subject: [PATCH] Update Layers view --- src/style_manager/view/LayerView.js | 97 ++++++------ src/style_manager/view/LayersView.js | 154 +++++++------------- src/style_manager/view/PropertyStackView.js | 6 +- 3 files changed, 104 insertions(+), 153 deletions(-) diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js index 7e6576720..a6d632565 100644 --- a/src/style_manager/view/LayerView.js +++ b/src/style_manager/view/LayerView.js @@ -1,17 +1,19 @@ -import { keys } from 'underscore'; import { View } from 'backbone'; +import { keys } from 'underscore'; -export default View.extend({ - events: { - click: 'select', - 'click [data-close-layer]': 'removeItem', - 'mousedown [data-move-layer]': 'initSorter', - 'touchstart [data-move-layer]': 'initSorter', - }, +export default class LayersView extends View { + events() { + return { + click: 'select', + 'click [data-close-layer]': 'removeItem', + 'mousedown [data-move-layer]': 'initSorter', + 'touchstart [data-move-layer]': 'initSorter', + }; + } template() { - const { pfx, ppfx } = this; - const icons = this.em?.getConfig('icons'); + const { pfx, ppfx, em } = this; + const icons = em?.getConfig('icons'); const iconClose = icons?.close || ''; const iconMove = icons?.move || ''; @@ -30,71 +32,55 @@ export default View.extend({
`; - }, + } initialize(o = {}) { const { model } = this; - this.stackModel = o.stackModel; + const config = o.config || {}; + this.em = config.em; + this.config = config; + this.sorter = o.sorter; + this.pfx = config.stylePrefix || ''; + this.ppfx = config.pStylePrefix || ''; this.propertyView = o.propertyView; - this.config = o.config || {}; - this.em = this.config.em; - this.pfx = this.config.stylePrefix || ''; - this.ppfx = this.config.pStylePrefix || ''; - this.sorter = o.sorter || null; - this.propsConfig = o.propsConfig || {}; const pModel = this.propertyView.model; this.listenTo(model, 'destroy remove', this.remove); - this.listenTo(pModel, 'change:selectedLayer', this.updateVisibility); this.listenTo(model, 'change:values', this.updateLabel); + this.listenTo(pModel, 'change:selectedLayer', this.updateVisibility); // For the sorter model.view = this; model.set({ droppable: 0, draggable: 1 }); this.$el.data('model', model); - }, + } initSorter() { - if (this.sorter) this.sorter.startSort(this.el); - }, + this.sorter?.startSort(this.el); + } removeItem(ev) { ev && ev.stopPropagation(); this.model.remove(); - }, + } + + select() { + this.model.select(); + } getPropertiesWrapper() { - if (!this.propsWrapEl) { - this.propsWrapEl = this.el.querySelector('[data-properties]'); - } + if (!this.propsWrapEl) this.propsWrapEl = this.el.querySelector('[data-properties]'); return this.propsWrapEl; - }, + } getPreviewEl() { - if (!this.previewEl) { - this.previewEl = this.el.querySelector('[data-preview]'); - } + if (!this.previewEl) this.previewEl = this.el.querySelector('[data-preview]'); return this.previewEl; - }, + } getLabelEl() { - if (!this.labelEl) { - this.labelEl = this.el.querySelector('[data-label]'); - } + if (!this.labelEl) this.labelEl = this.el.querySelector('[data-label]'); return this.labelEl; - }, - - select() { - this.model.select(); - }, - - updateVisibility() { - const { pfx, model, propertyView } = this; - const wrapEl = this.getPropertiesWrapper(); - const isSelected = model.isSelected(); - wrapEl.style.display = isSelected ? '' : 'none'; - this.$el[isSelected ? 'addClass' : 'removeClass'](`${pfx}active`); - isSelected && wrapEl.appendChild(propertyView.props.el); - }, + } updateLabel() { const { model } = this; @@ -109,7 +95,16 @@ export default View.extend({ .join(';'); prvEl.setAttribute('style', styleStr); } - }, + } + + updateVisibility() { + const { pfx, model, propertyView } = this; + const wrapEl = this.getPropertiesWrapper(); + const isSelected = model.isSelected(); + wrapEl.style.display = isSelected ? '' : 'none'; + this.$el[isSelected ? 'addClass' : 'removeClass'](`${pfx}active`); + isSelected && wrapEl.appendChild(propertyView.props.el); + } render() { const { el, pfx, model } = this; @@ -121,5 +116,5 @@ export default View.extend({ this.updateLabel(); this.updateVisibility(); return this; - }, -}); + } +} diff --git a/src/style_manager/view/LayersView.js b/src/style_manager/view/LayersView.js index 9d33ed41f..b7747575f 100644 --- a/src/style_manager/view/LayersView.js +++ b/src/style_manager/view/LayersView.js @@ -1,81 +1,47 @@ -import Backbone from 'backbone'; +import { View } from 'common'; import LayerView from './LayerView'; -export default Backbone.View.extend({ +export default class LayersView extends View { initialize(o) { - this.config = o.config || {}; - this.stackModel = o.stackModel; + const coll = this.collection; + const config = o.config || {}; + const em = config.em; + const pfx = config.stylePrefix || ''; + const ppfx = config.pStylePrefix || ''; + this.config = config; + this.pfx = pfx; + this.ppfx = ppfx; this.propertyView = o.propertyView; - this.preview = o.preview; - this.pfx = this.config.stylePrefix || ''; - this.ppfx = this.config.pStylePrefix || ''; - this.propsConfig = o.propsConfig; - let pfx = this.pfx; - let ppfx = this.ppfx; - let collection = this.collection; this.className = `${pfx}layers ${ppfx}field`; - this.listenTo(collection, 'add', this.addTo); - this.listenTo(collection, 'deselectAll', this.deselectAll); - this.listenTo(collection, 'reset', this.reset); + this.listenTo(coll, 'add', this.addTo); + this.listenTo(coll, 'reset', this.reset); this.items = []; - var em = this.config.em || ''; - var utils = em ? em.get('Utils') : ''; - + // For the Sorter + const utils = em ? em.get('Utils') : ''; this.sorter = utils ? new utils.Sorter({ container: this.el, ignoreViewChildren: 1, containerSel: `.${pfx}layers`, itemSel: `.${pfx}layer`, - pfx: this.config.pStylePrefix, + pfx: config.pStylePrefix, }) : ''; + coll.view = this; + this.$el.data('model', coll); + this.$el.data('collection', coll); + } - // For the Sorter - collection.view = this; - this.$el.data('model', collection); - this.$el.data('collection', collection); - }, - - /** - * Add to collection - * @param Object Model - * - * @return Object - * */ addTo(model) { - var i = this.collection.indexOf(model); + const i = this.collection.indexOf(model); this.addToCollection(model, null, i); - }, + } - /** - * Add new object to collection - * @param Object Model - * @param Object Fragment collection - * @param {number} index Index of append - * - * @return Object Object created - * */ addToCollection(model, fragmentEl, index) { - var fragment = fragmentEl || null; - const { propertyView, config } = this; - const stackModel = this.stackModel; - const sorter = this.sorter; - const propsConfig = this.propsConfig; - - if (typeof this.preview !== 'undefined') { - model.set('preview', this.preview); - } - - const view = new LayerView({ - model, - config, - sorter, - stackModel, - propsConfig, - propertyView, - }); + const fragment = fragmentEl || null; + const { propertyView, config, sorter, $el } = this; + const view = new LayerView({ model, config, sorter, propertyView }); const rendered = view.render().el; this.items.push(view); @@ -83,60 +49,50 @@ export default Backbone.View.extend({ fragment.appendChild(rendered); } else { if (typeof index != 'undefined') { - var method = 'before'; - // If the added model is the last of collection - // need to change the logic of append - if (this.$el.children().length == index) { + let method = 'before'; + + if ($el.children().length === index) { index--; method = 'after'; } - // In case the added is new in the collection index will be -1 + if (index < 0) { - this.$el.append(rendered); - } else this.$el.children().eq(index)[method](rendered); - } else this.$el.append(rendered); + $el.append(rendered); + } else { + $el.children().eq(index)[method](rendered); + } + } else { + $el.append(rendered); + } } return rendered; - }, - - /** - * Deselect all - * - * @return void - * */ - deselectAll() { - this.$el.find('.' + this.pfx + 'layer').removeClass(this.pfx + 'active'); - }, + } reset(coll, opts) { this.clearItems(opts); this.render(); - }, - - render() { - var fragment = document.createDocumentFragment(); - this.$el.empty(); - - this.collection.each(function (model) { - this.addToCollection(model, fragment); - }, this); - - this.$el.append(fragment); - this.$el.attr('class', this.className); - - if (this.sorter) this.sorter.plh = null; - - return this; - }, + } remove() { this.clearItems(); - Backbone.View.prototype.remove.apply(this, arguments); - }, + View.prototype.remove.apply(this, arguments); + } - clearItems(opts) { - this.items.forEach(item => item.remove(opts)); + clearItems() { + this.items.forEach(item => item.remove()); this.items = []; - }, -}); + } + + render() { + const { $el, sorter } = this; + const frag = document.createDocumentFragment(); + $el.empty(); + this.collection.forEach(m => this.addToCollection(m, frag)); + $el.append(frag); + $el.attr('class', this.className); + if (sorter) sorter.plh = null; + + return this; + } +} diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index 1e2cf9787..a029414bf 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -52,13 +52,13 @@ export default PropertyCompositeView.extend({ }, onRender() { - const { model, el } = this; + const { model, el, config } = this; const props = model.getProperties(); if (props.length && !this.props) { const propsView = new PropertiesView({ config: { - ...this.config, + ...config, highlightComputed: false, highlightChanged: false, }, @@ -69,7 +69,7 @@ export default PropertyCompositeView.extend({ const layersView = new LayersView({ collection: model.__getLayers(), - config: this.config, + config, propertyView: this, }); layersView.render();