From 235427487c12f68378cb8f5c4d9d7a5d2b0054c0 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Wed, 8 Nov 2017 01:41:37 +0100
Subject: [PATCH] Add `unstylable` property on Component Model

---
 src/commands/view/SelectComponent.js   |  2 +-
 src/dom_components/model/Component.js  |  7 +++++-
 src/style_manager/view/PropertyView.js | 34 ++++++++++++++------------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index 1778d080f..865902fca 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -392,7 +392,7 @@ module.exports = {
 
           modelToStyle.setStyle(style, {avoidStore: 1});
           const updateEvent = `update:component:style`;
-          em && em.trigger(`${updateEvent}:height ${updateEvent}:width`);
+          em && em.trigger(`${updateEvent}:${keyHeight} ${updateEvent}:${keyWidth}`);
 
           if (store) {
             modelToStyle.trigger('change:style', modelToStyle, style, {});
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 7d795dfd0..2c8a7f088 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -34,9 +34,14 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     badgable: true,
 
     // True if it's possible to style it
-    // Tip:  Indicate an array of CSS properties which is possible to style
+    // Tip:
+    // Indicate an array of CSS properties which is possible to style, eg. ['color', 'width']
+    // All other properties will be hidden from the style manager
     stylable: true,
 
+    // Indicate an array of style properties which should be hidden from the style manager
+    unstylable: '',
+
     // Highlightable with 'dotted' style if true
     highlightable: true,
 
diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js
index e0b997744..5245c643a 100644
--- a/src/style_manager/view/PropertyView.js
+++ b/src/style_manager/view/PropertyView.js
@@ -1,4 +1,4 @@
-import { bindAll } from 'underscore';
+import { bindAll, isArray } from 'underscore';
 import { camelCase } from 'utils/mixins';
 
 module.exports = Backbone.View.extend({
@@ -374,12 +374,23 @@ module.exports = Backbone.View.extend({
    * The target could be the Component as the CSS Rule
    * @return {Boolean}
    */
-  isTargetStylable() {
-    var stylable = this.getTarget().get('stylable');
+  isTargetStylable(target) {
+    const trg = target || this.getTarget();
+    const property = this.model.get('property');
+    const unstylable = trg.get('unstylable');
+    let stylable = trg.get('stylable');
+
     // Stylable could also be an array indicating with which property
     // the target could be styled
-    if(stylable instanceof Array)
-      stylable = _.indexOf(stylable, this.property) >= 0;
+    if (isArray(stylable)) {
+      stylable = stylable.indexOf(property) >= 0;
+    }
+
+    // Check if the property was signed as unstylable
+    if (isArray(unstylable)) {
+      stylable = unstylable.indexOf(property) < 0;
+    }
+
     return stylable;
   },
 
@@ -389,21 +400,14 @@ module.exports = Backbone.View.extend({
    * @return {Boolean}
    */
   isComponentStylable() {
-    var em = this.em;
-    var component = em && em.get('selectedComponent');
+    const em = this.em;
+    const component = em && em.get('selectedComponent');
 
     if (!component) {
       return true;
     }
 
-    var stylable = component.get('stylable');
-    // Stylable could also be an array indicating with which property
-    // the target could be styled
-    if(stylable instanceof Array){
-      stylable = _.indexOf(stylable, this.property) >= 0;
-    }
-
-    return stylable;
+    return this.isTargetStylable(component);
   },
 
   /**