From e7e91e89c067a3ebd6398f42f78df4440045777b Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 21 Jun 2021 07:44:15 +0200 Subject: [PATCH] Fix layers visibility change. Closes #3508 --- src/css_composer/index.js | 7 +++--- src/dom_components/model/Component.js | 26 ++++++++++++++------ src/dom_components/view/ComponentView.js | 6 ++--- src/domain_abstract/model/Styleable.js | 4 +-- src/navigator/view/ItemView.js | 7 +++--- test/specs/dom_components/model/Component.js | 1 + 6 files changed, 33 insertions(+), 18 deletions(-) diff --git a/src/css_composer/index.js b/src/css_composer/index.js index 8418d7de4..0165016e5 100644 --- a/src/css_composer/index.js +++ b/src/css_composer/index.js @@ -389,9 +389,9 @@ export default () => { * // #myid:hover { color: blue } */ setIdRule(name, style = {}, opts = {}) { - const { addOpts = {} } = opts; + const { addOpts = {}, mediaText } = opts; const state = opts.state || ''; - const media = opts.mediaText || em.getCurrentMedia(); + const media = !isUndefined(mediaText) ? mediaText : em.getCurrentMedia(); const sm = em.get('SelectorManager'); const selector = sm.add({ name, type: Selector.TYPE_ID }, addOpts); const rule = this.add(selector, state, media, {}, addOpts); @@ -410,8 +410,9 @@ export default () => { * const ruleHover = cc.setIdRule('myid', { state: 'hover' }); */ getIdRule(name, opts = {}) { + const { mediaText } = opts; const state = opts.state || ''; - const media = opts.mediaText || em.getCurrentMedia(); + const media = !isUndefined(mediaText) ? mediaText : em.getCurrentMedia(); const selector = em.get('SelectorManager').get(name, Selector.TYPE_ID); return selector && this.get(selector, state, media); }, diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 039a636d0..85c5ca300 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -1,7 +1,6 @@ import { isUndefined, isFunction, - isObject, isArray, isEmpty, isBoolean, @@ -12,7 +11,7 @@ import { bindAll, keys } from 'underscore'; -import { shallowDiff, capitalize, isEmptyObj } from 'utils/mixins'; +import { shallowDiff, capitalize, isEmptyObj, isObject } from 'utils/mixins'; import Styleable from 'domain_abstract/model/Styleable'; import Backbone from 'backbone'; import Components from './Components'; @@ -506,13 +505,13 @@ const Component = Backbone.Model.extend(Styleable).extend( * Get the style of the component * @return {Object} */ - getStyle() { + getStyle(opts = {}) { const em = this.em; - if (em && em.getConfig('avoidInlineStyle')) { + if (em && em.getConfig('avoidInlineStyle') && !opts.inline) { const state = em.get('state'); const cc = em.get('CssComposer'); - const rule = cc.getIdRule(this.getId(), { state }); + const rule = cc.getIdRule(this.getId(), { state, ...opts }); this.rule = rule; if (rule) { @@ -534,13 +533,18 @@ const Component = Backbone.Model.extend(Styleable).extend( const em = this.em; const { opt } = this; - if (em && em.getConfig('avoidInlineStyle') && !opt.temporary) { + if ( + em && + em.getConfig('avoidInlineStyle') && + !opt.temporary && + !opts.inline + ) { const style = this.get('style') || {}; prop = isString(prop) ? this.parseStyle(prop) : prop; prop = { ...prop, ...style }; const state = em.get('state'); const cc = em.get('CssComposer'); - const propOrig = this.getStyle(); + const propOrig = this.getStyle(opts); this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state }); const diff = shallowDiff(propOrig, prop); this.set('style', '', { silent: 1 }); @@ -571,6 +575,14 @@ const Component = Backbone.Model.extend(Styleable).extend( classes.length && (attributes.class = classes.join(' ')); } + // Add style + if (!opts.noStyle) { + const style = this.get('style'); + if (isObject(style) && !isEmptyObj(style)) { + attributes.style = this.styleToString({ inline: 1 }); + } + } + // Check if we need an ID on the component if (!has(attributes, 'id')) { let addId; diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 87379550e..763bdd629 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -240,10 +240,10 @@ export default Backbone.View.extend({ * Update style attribute * @private * */ - updateStyle() { + updateStyle(m, v, opts = {}) { const { model, em, el } = this; - if (em && em.getConfig('avoidInlineStyle')) { + if (em && em.getConfig('avoidInlineStyle') && !opts.inline) { const style = model.getStyle(); const empty = isEmpty(style); !empty && model.setStyle(style); @@ -253,7 +253,7 @@ export default Backbone.View.extend({ el.id = model.getId(); } } else { - this.setAttribute('style', model.styleToString()); + this.setAttribute('style', model.styleToString(opts)); } }, diff --git a/src/domain_abstract/model/Styleable.js b/src/domain_abstract/model/Styleable.js index 5f2ecd183..63c3ed0b2 100644 --- a/src/domain_abstract/model/Styleable.js +++ b/src/domain_abstract/model/Styleable.js @@ -37,7 +37,7 @@ export default { prop = parseStyle(prop); } - const propOrig = this.getStyle(); + const propOrig = this.getStyle(opts); const propNew = { ...prop }; this.set('style', propNew, opts); const diff = shallowDiff(propOrig, propNew); @@ -91,7 +91,7 @@ export default { */ styleToString(opts = {}) { const result = []; - const style = this.getStyle(); + const style = this.getStyle(opts); for (let prop in style) { const imp = opts.important; diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js index fc937a491..167c2ae0b 100644 --- a/src/navigator/view/ItemView.js +++ b/src/navigator/view/ItemView.js @@ -5,6 +5,7 @@ import ComponentView from 'dom_components/view/ComponentView'; import { eventDrag } from 'dom_components/model/Component'; const inputProp = 'contentEditable'; +const styleOpts = { mediaText: '' }; const $ = Backbone.$; let ItemsView; @@ -121,7 +122,7 @@ export default Backbone.View.extend({ const model = this.model; const hClass = `${pfx}layer-hidden`; const hideIcon = 'fa-eye-slash'; - const hidden = model.getStyle().display === 'none'; + const hidden = model.getStyle(styleOpts).display === 'none'; const method = hidden ? 'addClass' : 'removeClass'; this.$el[method](hClass); this.getVisibilityEl()[method](hideIcon); @@ -138,7 +139,7 @@ export default Backbone.View.extend({ const { model, em } = this; const prevDspKey = '__prev-display'; const prevDisplay = model.get(prevDspKey); - const style = model.getStyle(); + const style = model.getStyle(styleOpts); const { display } = style; const hidden = display == 'none'; @@ -154,7 +155,7 @@ export default Backbone.View.extend({ style.display = 'none'; } - model.setStyle(style); + model.setStyle(style, styleOpts); em && em.trigger('component:toggled'); // Updates Style Manager #2938 }, diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js index 2ee1f4625..a4ca70a2a 100644 --- a/test/specs/dom_components/model/Component.js +++ b/test/specs/dom_components/model/Component.js @@ -267,6 +267,7 @@ describe('Component', () => { expect(obj.getAttributes()).toEqual({ id: 'test', class: 'class1 class2', + style: 'color:white;background:#fff;', 'data-test': 'value' }); expect(obj.get('classes').length).toEqual(2);