diff --git a/src/style_manager/index.js b/src/style_manager/index.js index 08ff5ddeb..10f19f408 100644 --- a/src/style_manager/index.js +++ b/src/style_manager/index.js @@ -65,6 +65,7 @@ */ import { isElement, isUndefined, isArray, isString, debounce } from 'underscore'; +import { isComponent } from 'utils/mixins'; import Module from 'common/module'; import { Model } from 'common'; import defaults from './config/config'; @@ -356,14 +357,27 @@ export default () => { targets.push(model); }); + const component = opts.component || targets.filter(t => isComponent(t)).reverse()[0]; targets = targets.map(t => this.getModelToStyle(t)); + const state = em.getState(); const lastTarget = targets.slice().reverse()[0]; - const lastTargetParents = this.getParentRules(lastTarget, em.getState()); + const lastTargetParents = this.getParentRules(lastTarget, { state, component }); let stateTarget = this.__getStateTarget(); + // Update sectors/properties visibility + sectors.forEach(sector => { + const props = sector.getProperties(); + props.forEach(prop => { + const isVisible = prop.__checkVisibility({ target: lastTarget, component, sectors }); + prop.set('visible', isVisible); + }); + const sectorVisible = props.some(p => p.isVisible()); + sector.set('visible', sectorVisible); + }); + // Handle the creation and update of the state rule, if enabled. em.skip(() => { - if (em.getState() && lastTarget?.getState?.()) { + if (state && lastTarget?.getState?.()) { const style = lastTarget.getStyle(); if (!stateTarget) { stateTarget = cssc.getAll().add({ selectors: 'gjs-selected', style, important: true }); @@ -518,15 +532,15 @@ export default () => { return model; }, - getParentRules(target, state) { + getParentRules(target, { state, component } = {}) { const { em } = this; let result = []; if (em && target) { + const sel = component; const cssC = em.get('CssComposer'); const cssGen = em.get('CodeManager').getGenerator('css'); const cmp = target.toHTML ? target : target.getComponent(); - const sel = em.getSelected(); const optsSel = { combination: true, array: true }; let cmpRules = []; let otherRules = []; diff --git a/src/style_manager/model/Sectors.js b/src/style_manager/model/Sectors.js index 1c496ab55..f7e1f5336 100644 --- a/src/style_manager/model/Sectors.js +++ b/src/style_manager/model/Sectors.js @@ -7,7 +7,6 @@ export default class Sectors extends Collection { this.em = em; this.module = module; this.listenTo(this, 'reset', this.onReset); - module && this.listenTo(em, module.events.target, this.__targetUpdated); } model(props, opts = {}) { @@ -19,22 +18,4 @@ export default class Sectors extends Collection { const prev = opts.previousModels || []; prev.forEach(sect => sect.get('properties').reset()); } - - __targetUpdated() { - const component = this.em.getSelected(); - const target = this.module.getSelected(); - const params = { target, component, sectors: this }; - - this.forEach(sector => { - const props = sector.getProperties(); - props.forEach(prop => { - const isVisible = prop.__checkVisibility(params); - prop.set('visible', isVisible); - }); - sector.set( - 'visible', - props.some(p => p.isVisible()) - ); - }); - } }