Move sectors/properties visibility check

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 = [];

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