Update sectors visibility check in model

src/style_manager/index.js

@@ -115,7 +115,7 @@ export default () => {
       if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;
       this.builtIn = new PropertyFactory();
       properties = new Properties();
-      sectors = new Sectors([], c);
+      sectors = new Sectors([], { ...c, module: this });
       const model = new Model({ targets: [] });
       this.model = model;
 

src/style_manager/model/Property.js

@@ -1,5 +1,5 @@
 import { Model } from 'common';
-import { isUndefined, isString, result, keys } from 'underscore';
+import { isUndefined, isString, isArray, result, keys } from 'underscore';
 import { capitalize, camelCase } from 'utils/mixins';
 
 /**
@@ -165,6 +165,14 @@ export default class Property extends Model {
     return this._up(parsed, opts);
   }
 
+  /**
+   * Check if the property is visible
+   * @returns {Boolean}
+   */
+  isVisible() {
+    return !!this.get('visible');
+  }
+
   /**
    * Clear the value.
    * The change is also propagated to the selected targets (eg. the css property is cleared).
@@ -347,18 +355,18 @@ export default class Property extends Model {
     return this.__parentTarget || null;
   }
 
-  isVisible(target) {
-    const trg = target;
+  __checkVisibility({ target, component, sectors }) {
+    const trg = component || target;
+    if (!trg) return false;
+
     const id = this.getId();
     const property = this.getName();
     const toRequire = this.get('toRequire');
     const requires = this.get('requires');
     const requiresParent = this.get('requiresParent');
-    const sectors = this.sector?.collection || null;
-    const selected = this.em?.getSelected() || null;
-    const unstylable = trg?.get('unstylable');
-    const stylableReq = trg?.get('stylable-require');
-    let stylable = trg?.get('stylable');
+    const unstylable = trg.get('unstylable');
+    const stylableReq = trg.get('stylable-require');
+    let stylable = trg.get('stylable');
 
     // Stylable could also be an array indicating with which property
     // the target could be styled
@@ -391,7 +399,7 @@ export default class Property extends Model {
 
     // Check if the property is available based on parent's property values
     if (requiresParent) {
-      const parent = selected && selected.parent();
+      const parent = component && component.parent();
       const parentEl = parent && parent.getEl();
       if (parentEl) {
         const styles = window.getComputedStyle(parentEl);
@@ -403,7 +411,7 @@ export default class Property extends Model {
       }
     }
 
-    return stylable;
+    return !!stylable;
   }
 }
 

src/style_manager/model/Sector.js

@@ -86,6 +86,14 @@ export default class Sector extends Model {
     return this.set('open', value);
   }
 
+  /**
+   * Check if the sector is visible
+   * @returns {Boolean}
+   */
+  isVisible() {
+    return !!this.get('visible');
+  }
+
   /**
    * Get sector properties.
    * @param {Object} [opts={}] Options

src/style_manager/model/Sectors.js

@@ -3,8 +3,11 @@ import Sector from './Sector';
 
 export default class Sectors extends Collection {
   initialize(prop, opts = {}) {
-    this.em = opts.em;
+    const { module, em } = opts;
+    this.em = em;
+    this.module = module;
     this.listenTo(this, 'reset', this.onReset);
+    module && this.listenTo(em, module.events.target, this.__targetUpdated);
   }
 
   model(props, opts = {}) {
@@ -18,11 +21,20 @@ export default class Sectors extends Collection {
   }
 
   __targetUpdated() {
-    const sectors = this.collection;
-    // Enable all
-    sectors.forEach(sector => {});
-    // Check for property
     const component = this.em.getSelected();
     const target = this.module.getLastSelected();
+    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())
+      );
+    });
   }
 }

test/specs/style_manager/model/Sectors.js

@@ -55,15 +55,14 @@ describe('Sectors', () => {
     });
 
     test('All sectors should exist', () => {
-      console.log(sm.getSectors().map(s => s.id));
       [s1, s2].forEach(sector => expect(sector).toBeTruthy());
     });
 
     test('All sectors and properties are visible by default', () => {
       [s1, s2].forEach(sector => {
-        expect(sector.get('visible')).toBe(true);
+        expect(sector.isVisible()).toBe(true);
         sector.getProperties().forEach(prop => {
-          expect(prop.get('visible')).toBe(true);
+          expect(prop.isVisible()).toBe(true);
         });
       });
     });
@@ -72,15 +71,16 @@ describe('Sectors', () => {
       const stylable = ['width', 'height'];
       const cmp = domc.addComponent({ stylable });
       em.setSelected(cmp);
+      sm.__upSel();
 
-      expect(s1.get('visible')).toBe(true);
-      expect(s2.get('visible')).toBe(false);
+      expect(s1.isVisible()).toBe(true);
+      expect(s2.isVisible()).toBe(false);
       s1.getProperties().forEach(prop => {
         const isVisible = stylable.indexOf(prop.getName()) >= 0;
-        expect(prop.get('visible')).toBe(isVisible);
+        expect(prop.isVisible()).toBe(isVisible);
       });
       s2.getProperties().forEach(prop => {
-        expect(prop.get('visible')).toBe(false);
+        expect(prop.isVisible()).toBe(false);
       });
     });
 
@@ -88,15 +88,16 @@ describe('Sectors', () => {
       const unstylable = ['color'];
       const cmp = domc.addComponent({ unstylable });
       em.setSelected(cmp);
+      sm.__upSel();
 
-      expect(s1.get('visible')).toBe(true);
-      expect(s2.get('visible')).toBe(true);
+      expect(s1.isVisible()).toBe(true);
+      expect(s2.isVisible()).toBe(true);
       s1.getProperties().forEach(prop => {
-        expect(prop.get('visible')).toBe(true);
+        expect(prop.isVisible()).toBe(true);
       });
       s2.getProperties().forEach(prop => {
         const isVisible = unstylable.indexOf(prop.getName()) < 0;
-        expect(prop.get('visible')).toBe(!isVisible);
+        expect(prop.isVisible()).toBe(isVisible);
       });
     });
   });