From b7b7e1c0e9f5ca5891d55537a062097c8d6cc7a2 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 11 May 2017 14:51:41 +0200
Subject: [PATCH] Add highlightable property to Components

---
 src/canvas/view/CanvasView.js            |  2 +-
 src/dom_components/model/Component.js    |  3 +++
 src/dom_components/view/ComponentView.js | 13 +++++++++----
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js
index 86a9fc318..cff06f2c1 100644
--- a/src/canvas/view/CanvasView.js
+++ b/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}' +
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index b866a3b6c..c8fb58d3b 100644
--- a/src/dom_components/model/Component.js
+++ b/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,
 
diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js
index 733d4f266..e794f5b24 100644
--- a/src/dom_components/view/ComponentView.js
+++ b/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"))
-          attributes.src = this.model.get("src");
+        if(model.get('src'))
+          attributes.src = model.get('src');
+
+        if(model.get('highlightable'))
+          attributes['data-highlightable'] = 1;
 
         var styleStr = this.getStyleString();