From 0342a8ce6113b19b40e9afc4875071818bd4c832 Mon Sep 17 00:00:00 2001
From: David Polak <git@davidpolak.cz>
Date: Fri, 4 Jan 2019 13:36:46 +0100
Subject: [PATCH] Add dynamic styleable dependencies

Starting with flex-direction.
---
 src/editor/config/config.js                |  1 +
 src/style_manager/model/PropertyFactory.js | 13 ++++++++++++
 src/style_manager/view/PropertyView.js     | 24 ++++++++++++++++++++++
 3 files changed, 38 insertions(+)

diff --git a/src/editor/config/config.js b/src/editor/config/config.js
index 9c86d7418..caf576e8e 100644
--- a/src/editor/config/config.js
+++ b/src/editor/config/config.js
@@ -216,6 +216,7 @@ module.exports = {
         buildProps: [
           'float',
           'display',
+          'flex-direction',
           'position',
           'top',
           'right',
diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js
index 351df1165..1e2a21d05 100644
--- a/src/style_manager/model/PropertyFactory.js
+++ b/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':
diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js
index 017996224..b242af896 100644
--- a/src/style_manager/view/PropertyView.js
+++ b/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;
   },