Improve component dragging with parent selection

src/canvas/view/CanvasView.js

@@ -75,6 +75,9 @@ module.exports = Backbone.View.extend({
         externalStyles += `<link rel="stylesheet" href="${style}"/>`;
       });
 
+      // rgb(255, 202, 111)
+      const colorWarn = '#ffca6f';
+
       let baseCss = `
         * {
           box-sizing: border-box;
@@ -95,10 +98,19 @@ module.exports = Backbone.View.extend({
         }
       `;
 
+      let layoutCss = `
+        .${ppfx}comp-selected{
+          outline: 3px solid #3b97e3 !important
+        }
+        .${ppfx}comp-selected-parent{
+          outline: 2px solid ${colorWarn} !important
+        }
+      `;
+
       // I need all this styles to make the editor work properly
       var frameCss = baseCss +
         '.' + 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}' +
+        layoutCss +
         '.' + ppfx + 'no-select{user-select: none; -webkit-user-select:none; -moz-user-select: none}'+
         '.' + ppfx + 'freezed{opacity: 0.5; pointer-events: none}' +
         '.' + ppfx + 'no-pointer{pointer-events: none}' +

src/dom_components/view/ComponentView.js

@@ -100,16 +100,22 @@ module.exports = Backbone.View.extend({
    * @private
    * */
   updateStatus(e) {
-    var s = this.model.get('status'),
-        pfx = this.pfx;
+    var s = this.model.get('status');
+    var pfx = this.pfx;
+    var selectedClass = pfx + 'selected';
+    var selectedParentClass = selectedClass + '-parent';
+
     switch(s) {
         case 'selected':
-          this.$el.addClass(pfx + 'selected');
+          this.$el.addClass(selectedClass);
+            break;
+        case 'selected-parent':
+          this.$el.addClass(selectedParentClass);
             break;
         case 'moving':
             break;
         default:
-          this.$el.removeClass(pfx + 'selected');
+          this.$el.removeClass(`${selectedClass} ${selectedParentClass}`);
     }
   },
 

src/utils/Sorter.js

@@ -252,6 +252,31 @@ module.exports = Backbone.View.extend({
     this.toggleSortCursor(1);
   },
 
+  /**
+   * Get the model from HTMLElement target
+   * @return {Model|null}
+   */
+  getModelFromTarget(el) {
+    let elem = el || this.target;
+    return $(elem).data('model');
+  },
+
+  /**
+   * Highlight target
+   * @param  {Model|null} model
+   */
+  selectTargetModel(model) {
+    var prevModel = this.targetModel;
+    if (prevModel) {
+      prevModel.set('status', '');
+    }
+
+    if (model && model.set) {
+      model.set('status', 'selected-parent');
+      this.targetModel = model;
+    }
+  },
+
   /**
    * During move
    * @param {Event} e
@@ -279,6 +304,10 @@ module.exports = Backbone.View.extend({
     }
 
     var dims = this.dimsFromTarget(e.target, rX, rY);
+
+    let targetModel = this.getModelFromTarget(this.target);
+    this.selectTargetModel(targetModel);
+
     this.lastDims = dims;
     var pos = this.findPosition(dims, rX, rY);
     // If there is a significant changes with the pointer
@@ -640,10 +669,13 @@ module.exports = Backbone.View.extend({
       this.onEndMove(created);
 
     var dragHelper = this.dragHelper;
+
     if(dragHelper) {
       dragHelper.remove();
       this.dragHelper = null;
     }
+
+    this.selectTargetModel();
     this.toggleSortCursor();
   },