Add `unstylable` property on Component Model

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, {});

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,
 

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() {
+  isTargetStylable(target) {
-    var stylable = this.getTarget().get('stylable');
+    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)
+    if (isArray(stylable)) {
-      stylable = _.indexOf(stylable, this.property) >= 0;
+      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;
+    const em = this.em;
-    var component = em && em.get('selectedComponent');
+    const component = em && em.get('selectedComponent');
 
     if (!component) {
       return true;
     }
 
-    var stylable = component.get('stylable');
+    return this.isTargetStylable(component);
-    // 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;
   },
 
   /**