Try extHl option in canvas

src/canvas/config/config.js

@@ -35,6 +35,9 @@ export default {
    */
   autoscrollLimit: 50,
 
+  // Experimental: external highlighter box
+  extHl: 0,
+
   /**
    * When some textable component is selected and focused (eg. input or text component) the editor
    * stops some commands (eg. disables the copy/paste of components with CTRL+C/V to allow the copy/paste of the text).

src/canvas/view/CanvasView.js

@@ -355,7 +355,7 @@ export default Backbone.View.extend({
   },
 
   render() {
-    const { el, $el, ppfx, model, em, frames } = this;
+    const { el, $el, ppfx, config } = this;
     $el.html(this.template());
     const $frames = $el.find('[data-frames]');
     this.framesArea = $frames.get(0);
@@ -369,6 +369,7 @@ export default Backbone.View.extend({
         </div>
       </div>
       <div id="${ppfx}tools" style="pointer-events:none">
+        ${config.extHl ? `<div class="${ppfx}highlighter-sel"></div>` : ''}
         <div class="${ppfx}badge"></div>
         <div class="${ppfx}ghost"></div>
         <div class="${ppfx}toolbar" style="pointer-events:all"></div>

src/dom_components/view/ComponentView.js

@@ -190,23 +190,24 @@ export default Backbone.View.extend({
    * @private
    * */
   updateStatus(opts = {}) {
-    const em = this.em;
+    const { em } = this;
+    const { extHl } = em ? em.get('Canvas').getConfig() : {};
     const el = this.el;
     const status = this.model.get('status');
-    const pfx = this.pfx;
     const ppfx = this.ppfx;
     const selectedCls = `${ppfx}selected`;
     const selectedParentCls = `${selectedCls}-parent`;
     const freezedCls = `${ppfx}freezed`;
     const hoveredCls = `${ppfx}hovered`;
     const toRemove = [selectedCls, selectedParentCls, freezedCls, hoveredCls];
+    const selCls = extHl && !opts.noExtHl ? '' : selectedCls;
     this.$el.removeClass(toRemove.join(' '));
     var actualCls = el.getAttribute('class') || '';
     var cls = '';
 
     switch (status) {
       case 'selected':
-        cls = `${actualCls} ${selectedCls}`;
+        cls = `${actualCls} ${selCls}`;
         break;
       case 'selected-parent':
         cls = `${actualCls} ${selectedParentCls}`;
@@ -215,7 +216,7 @@ export default Backbone.View.extend({
         cls = `${actualCls} ${freezedCls}`;
         break;
       case 'freezed-selected':
-        cls = `${actualCls} ${freezedCls} ${selectedCls}`;
+        cls = `${actualCls} ${freezedCls} ${selCls}`;
         break;
       case 'hovered':
         cls = !opts.avoidHover ? `${actualCls} ${hoveredCls}` : '';

src/navigator/view/ItemView.js

@@ -313,7 +313,8 @@ export default Backbone.View.extend({
   updateStatus(e) {
     ComponentView.prototype.updateStatus.apply(this, [
       {
-        avoidHover: !this.config.highlightHover
+        avoidHover: !this.config.highlightHover,
+        noExtHl: 1
       }
     ]);
   },

src/styles/scss/_gjs_canvas.scss

@@ -244,7 +244,8 @@ $guide_pad: 5px;
   }
 
   .#{$app-prefix}highlighter-sel {
-    outline: 3px solid $colorBlue;
+    outline: 2px solid $colorBlue;
+    outline-offset: -2px;
   }
 
   ##{$app-prefix}tools, .#{$app-prefix}tools {