Add dynamic styleable dependencies

Starting with flex-direction.

src/editor/config/config.js

@@ -216,6 +216,7 @@ module.exports = {
         buildProps: [
           'float',
           'display',
+          'flex-direction',
           'position',
           'top',
           'right',

src/style_manager/model/PropertyFactory.js

@@ -274,6 +274,19 @@ module.exports = () => ({
           break;
       }
 
+      /*
+       * Add styleable dependency on other properties. Allows properties to be
+       * dynamically hidden or shown based on values of other properties.
+       *
+       * Property will be styleable if all of the properties (keys) in the
+       * requires object have any of the values specified in the array.
+       */
+      switch (prop) {
+        case 'flex-direction':
+          obj.requires = { display: ['flex'] };
+          break;
+      }
+
       // Units
       switch (prop) {
         case 'top':

src/style_manager/view/PropertyView.js

@@ -70,6 +70,15 @@ module.exports = Backbone.View.extend({
 
     em && em.on(`update:component:style:${this.property}`, this.targetUpdated);
     //em && em.on(`styleable:change:${this.property}`, this.targetUpdated);
+
+    // Listening to changes of properties in this.requires, so that styleable
+    // changes based on other properties are propagated
+    const requires = model.get('requires');
+    requires &&
+      Object.keys(requires).forEach(property => {
+        em && em.on(`component:styleUpdate:${property}`, this.targetUpdated);
+      });
+
     this.listenTo(
       this.propTarget,
       'update styleManager:update',
@@ -406,6 +415,8 @@ module.exports = Backbone.View.extend({
     const toRequire = model.get('toRequire');
     const unstylable = trg.get('unstylable');
     const stylableReq = trg.get('stylable-require');
+    const requires = model.get('requires');
+    const sectors = this.sector ? this.sector.collection : null;
     let stylable = trg.get('stylable');
 
     // Stylable could also be an array indicating with which property
@@ -427,6 +438,19 @@ module.exports = Backbone.View.extend({
           (stylableReq.indexOf(id) >= 0 || stylableReq.indexOf(property) >= 0));
     }
 
+    // Check if the property is available based on other property's values
+    if (sectors && requires) {
+      const properties = Object.keys(requires);
+      sectors.each(sector => {
+        sector.get('properties').each(model => {
+          if (properties.includes(model.id)) {
+            const values = requires[model.id];
+            stylable = stylable && values.includes(model.get('value'));
+          }
+        });
+      });
+    }
+
     return stylable;
   },