Fix layers visibility change. Closes #3508

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);
     },

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;

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));
     }
   },
 

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;

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
   },
 

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);