Add highlightable property to Components

src/canvas/view/CanvasView.js

@@ -74,7 +74,7 @@ function(Backbone, FrameView) {
 
         // I need all this styles to make the editor work properly
         var frameCss = '* {box-sizing: border-box;} body{margin:0;height:auto;background-color:#fff} #wrapper{min-height:100%; overflow:auto}' +
-          '.' + ppfx + 'dashed :not([contenteditable]) > *{outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px}' +
+          '.' + ppfx + 'dashed :not([contenteditable]) > *[data-highlightable]{outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px}' +
           '.' + ppfx + 'comp-selected{outline: 3px solid #3b97e3 !important}' +
           '.' + ppfx + 'no-select{user-select: none; -webkit-user-select:none; -moz-user-select: none}'+
           '.' + ppfx + 'freezed{opacity: 0.5; pointer-events: none}' +

src/dom_components/model/Component.js

@@ -28,6 +28,9 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
         // Tip:  Indicate an array of CSS properties which is possible to style
         stylable: true,
 
+        // Highlightable with 'dotted' style if true
+        highlightable: true,
+
         // True if it's possible to clone the component
         copyable: true,
 

src/dom_components/view/ComponentView.js

@@ -133,16 +133,21 @@ define(['backbone', './ComponentsView'],
        * Update attributes
        * @private
        * */
-      updateAttributes: function(){
+      updateAttributes: function() {
+        var model = this.model;
         var attributes = {},
-          attr = this.model.get("attributes");
+          attr = model.get("attributes");
         for(var key in attr) {
             if(attr.hasOwnProperty(key))
               attributes[key] = attr[key];
         }
+
         // Update src
-        if(this.model.get("src"))
+        if(model.get('src'))
-          attributes.src = this.model.get("src");
+          attributes.src = model.get('src');
+
+        if(model.get('highlightable'))
+          attributes['data-highlightable'] = 1;
 
         var styleStr = this.getStyleString();