Week 5: Dragging around

In week 5 I worked more on the navigation. I ended up learning a lot of the internals of JS and exploring the jQuery library, something I had refused to do, avoiding unnecessary overheads.

For the navigation I want to be able to drag and drop on the region with reads. My naive idea was to simply calculate a div big enough to populate the whole chromosome, and then fill the divs according to whatever region I had on screen. However, I learnt that having more than 10,000 pixels of width, even when empty, just kills the browser.

My next attempt was to make my container div draggable and whenever I let the mouse go, re-render the divs with the offset. This ended up with adding the native JavaScript listeners to my container div:

 
_select_chromosome: function(full_region){
  this._container.empty();
  this.alignments = {};
  this.full_region = this.parse_region(full_region); //New object, to avoid modifying the current region unintentionally.

  var new_div = document.createElement("div");
  
  new_div.addEventListener('dragstart',this._drag_start,false); 
  new_div.addEventListener('dragover',this._drag_over,false); 
  new_div.addEventListener('drop',this._drop,false); 
  new_div.style.width = this.opt.width;
  new_div.draggable = "true";
  new_div.style.position = "absolute";
  new_div.style.overflow = "scroll";
  new_div.style.height = this.opt.height;
  new_div.bam_container = this;
  this._render_div = new_div;    
  this._container.append(new_div);  
}

And then adding the calculations of the offsets from the beginning and the end of the drag

 
_drag_start: function (event) {
    offset_data = event.clientX + ',' +  event.clientY;
    _startX = event.clientX;
    _bam_offset_data= offset_data;
    _tmp_target = event.target;
},

_move_draged: function(render_div, offset, event){

  console.log("From " +  _startX + " to " + event.clientX);
  var diff_x =  event.clientX   - _startX  ;
  var als_rend = render_div.children;
  for(var i = 0; i < als_rend.length; i++) {
    var local_left = parseInt(als_rend[i].offsetLeft , 10);
    var new_pos = local_left + diff_x;
    als_rend[i].style.left = new_pos + "px";
  }
},

_drag_over: function (event) { 
    var offset;
    offset = _bam_offset_data;
    var dm = _tmp_target ;
    var render_div =  _tmp_target ;
    event.preventDefault(); 
    return false; 
} ,
_drop: function (event) { 
    var offset;
    offset = _bam_offset_data;  
    var render_div =  _tmp_target ;
    render_div.bam_container._move_draged(render_div, offset, event);
    render_div.bam_container._move_to_top();
    event.preventDefault();
    return false;
}

However, this approach ended up not looking natural, so I ended up using jQuery instead. Personaly, I don't like the abuse of the $ sign (bad memories with php and perl!). So, I added a call to jQuery to enrich the div. And now it is now smoother.

_select_chromosome: function(full_region){
  this._container.empty();
  this.alignments = {};
  this.full_region = this.parse_region(full_region); //New object, to avoid modifying the current region unintentionally.
 
  var outter_div = document.createElement("div");
  outter_div.style.width = this.opt.width;
  outter_div.style.position = "absolute";
  outter_div.style.overflow = "scroll";
  outter_div.style.height = this.opt.height;
  var new_div = document.createElement("div");
  new_div.classList.add("ui-widget-content");
  jQuery(new_div).draggable({ axis: "x" });
  new_div.bam_container = this;
  this._render_div = new_div;    
  outter_div.appendChild(new_div);
  this._container.append(outter_div);  
}