Commit 395cb56f authored by Floreal Cabanettes's avatar Floreal Cabanettes
Browse files

Add help if try to zoom or translate without pressing CTRL key, Implements #136

parent 7e08158e
......@@ -157,6 +157,34 @@ label.input-checkbox-label input[type=checkbox]{
background-size: 65% 65%;
}
#draw {
position: relative;
}
#help-zoom, #help-trans {
position: absolute;
top: 5%;
left: 5%;
height: 89.5%;
width: 90%;
background: rgba(93, 93, 93, 0.63);;
text-align: center;
padding-top: 45%;
color: white;
font-weight: bold;
font-size: 24pt;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}
#help-zoom img, #help-trans img {
position: absolute;
top: 37%;
left: 35%;
}
/*Loading logo*/
#loading {
position: absolute;
......
This diff is collapsed.
......@@ -1019,6 +1019,17 @@ d3.boxplot.draw = function (x_contigs, x_order, y_contigs, y_order) {
dgenies.hide_loading();
}, 0);
draw.append($("<div>").attr("id", "help-zoom")
.append("Press CTRL to zoom")
.append($("<img>").attr("src", "/static/images/ctrl_plus_mouse.png")
.attr("alt", "")).hide().on("click", function() {$(this).hide()}));
draw.append($("<div>").attr("id", "help-trans")
.append("Press CTRL to translate")
.append($("<img>").attr("src", "/static/images/ctrl_plus_click.png")
.attr("alt", "")).hide().on("click", function() {$(this).hide()})
.on("mouseup", function() {d3.boxplot.translate_start = null; $("#help-trans").fadeOut("slow");}));
d3.boxplot.zoom.init();
d3.boxplot.events.init_context_menu();
......
......@@ -2,6 +2,7 @@ if (!d3 || !d3.boxplot) {
throw "d3.boxplot wasn't included!"
}
d3.boxplot.zoom = {};
d3.boxplot.zoom.help_timeout = null;
/**
* Initialize zoom.init module
......@@ -55,6 +56,7 @@ d3.boxplot.zoom.mousedown = function() {
*/
d3.boxplot.zoom.mouseup = function() {
d3.boxplot.translate_start = null;
$("#help-trans").fadeOut("slow");
};
/**
......@@ -105,6 +107,10 @@ d3.boxplot.zoom.translate = function () {
d3.boxplot.zoom_bottom_axis();
d3.boxplot.zoom_left_axis();
}
else if(d3.boxplot.translate_start !== null) {
let help_trans = $("#help-trans");
help_trans.fadeIn("slow");
}
};
/**
......@@ -196,6 +202,16 @@ d3.boxplot.zoom.zoom = function () {
d3.boxplot.zoom_left_axis();
}
}
else if (d3.boxplot.zoom_enabled) {
let help_zoom = $("#help-zoom");
help_zoom.fadeIn("slow");
if (d3.boxplot.zoom.help_timeout !== null) {
window.clearTimeout(d3.boxplot.zoom.help_timeout);
}
d3.boxplot.zoom.help_timeout = window.setTimeout(() => {
help_zoom.fadeOut("slow");
}, 700);
}
};
/**
......
......@@ -328,7 +328,7 @@ for(let i=0;i<4;i++){d3.boxplot.__draw_idy_lines(i.toString(),lines,x_len,y_len)
*/d3.boxplot.draw=function(x_contigs,x_order,y_contigs,y_order){let width=850;let height=850;$("div#draw").width(width).height(height);let draw=$("#draw");draw.empty();draw.append($("<div>").attr("id","restore-all").css("display","none").attr("title","Unzoom"));let draw_in=draw.append($("<div>").attr("id","draw-in"));d3.boxplot.svgsupercontainer=d3.select("#draw-in").append("svg:svg").attr("width","100%").attr("height","100%").attr("viewBox","0 0 100 100").attr("preserveAspectRatio","none");let drawcontainer=d3.boxplot.svgsupercontainer.append("svg:g").attr("class","drawcontainer");drawcontainer.append("rect").attr("x",0).attr("y",0).attr("width","100%").attr("height","100%").attr("stroke","none").attr("fill","white");d3.boxplot.svgcontainer=drawcontainer.append("svg:svg").attr("class","svgcontainer").attr("width",90).attr("height",90).attr("x",5).attr("y",5).attr("viewBox","0 0 "+d3.boxplot.scale+" "+d3.boxplot.scale).attr("preserveAspectRatio","none");d3.boxplot.container=d3.boxplot.svgcontainer.append("svg:g").attr("class","container");d3.boxplot.container.append("rect").attr("x",0).attr("y",0).attr("width","100%").attr("height","100%").attr("stroke","none").attr("fill","white");//X axis:
d3.boxplot.x_zones={};let sum=0;for(let i=0;i<x_order.length-1;i++){let x_id=x_order[i];let x_contig_len=x_contigs[x_id]/d3.boxplot.x_len*d3.boxplot.scale;d3.boxplot.x_zones[x_id]=[sum,sum+x_contig_len];sum+=x_contig_len;d3.boxplot.container.append("line").attr("x1",sum).attr("y1",d3.boxplot.scale).attr("x2",sum).attr("y2",0).attr("class","break-lines").attr("stroke-width",d3.boxplot.break_lines_width).attr("stroke",d3.boxplot.break_lines_color).style("stroke-dasharray",d3.boxplot.break_lines_dash)}d3.boxplot.x_zones[x_order[x_order.length-1]]=[sum,d3.boxplot.scale];//Y axis:
d3.boxplot.y_zones={};sum=0;for(let i=0;i<y_order.length-1;i++){let y_id=y_order[i];let y_contig_len=y_contigs[y_id]/d3.boxplot.y_len*d3.boxplot.scale;d3.boxplot.y_zones[y_id]=[sum,sum+y_contig_len];sum+=y_contig_len;d3.boxplot.container.append("line").attr("x1",0).attr("y1",d3.boxplot.scale-sum).attr("x2",d3.boxplot.scale).attr("y2",d3.boxplot.scale-sum).attr("class","break-lines").attr("stroke-width",d3.boxplot.break_lines_width).attr("stroke",d3.boxplot.break_lines_color).style("stroke-dasharray",d3.boxplot.break_lines_dash)}d3.boxplot.y_zones[y_order[y_order.length-1]]=[sum,d3.boxplot.scale];if(!d3.boxplot.break_lines_show){d3.selectAll("line.break-lines").style("visibility","hidden")}d3.boxplot.draw_axis_bckgd();d3.boxplot.draw_left_axis(d3.boxplot.y_len);d3.boxplot.draw_bottom_axis(d3.boxplot.x_len);d3.boxplot.draw_top_axis(d3.boxplot.x_zones);d3.boxplot.draw_right_axis(d3.boxplot.y_zones);window.setTimeout(()=>{//Data:
d3.boxplot.draw_lines();$("#restore-all").click(function(){if(d3.boxplot.zoom.reset_scale(false,null,false)){$(this).hide()}});$(document).on("keyup",function(e){if(e.keyCode===27){if(d3.boxplot.zoom.reset_scale(false,null,false)){$("#restore-all").hide()}}});d3.boxplot.draw_legend();dgenies.hide_loading()},0);d3.boxplot.zoom.init();d3.boxplot.events.init_context_menu()};if(!d3||!d3.boxplot){throw"d3.boxplot wasn't included!"}d3.boxplot.events={};d3.boxplot.events.context_menu={actions:[{name:"Export SVG",onClick:dgenies.result.export.export_svg},{name:"Export PNG",onClick:dgenies.result.export.export_png},{name:"Reverse query",isShown:function(){return d3.boxplot.name_x!==d3.boxplot.name_y},onClick:dgenies.result.controls.launch_reverse_contig}]};/**
d3.boxplot.draw_lines();$("#restore-all").click(function(){if(d3.boxplot.zoom.reset_scale(false,null,false)){$(this).hide()}});$(document).on("keyup",function(e){if(e.keyCode===27){if(d3.boxplot.zoom.reset_scale(false,null,false)){$("#restore-all").hide()}}});d3.boxplot.draw_legend();dgenies.hide_loading()},0);draw.append($("<div>").attr("id","help-zoom").append("Press CTRL to zoom").append($("<img>").attr("src","/static/images/ctrl_plus_mouse.png").attr("alt","")).hide().on("click",function(){$(this).hide()}));draw.append($("<div>").attr("id","help-trans").append("Press CTRL to translate").append($("<img>").attr("src","/static/images/ctrl_plus_click.png").attr("alt","")).hide().on("click",function(){$(this).hide()}).on("mouseup",function(){d3.boxplot.translate_start=null;$("#help-trans").fadeOut("slow")}));d3.boxplot.zoom.init();d3.boxplot.events.init_context_menu()};if(!d3||!d3.boxplot){throw"d3.boxplot wasn't included!"}d3.boxplot.events={};d3.boxplot.events.context_menu={actions:[{name:"Export SVG",onClick:dgenies.result.export.export_svg},{name:"Export PNG",onClick:dgenies.result.export.export_png},{name:"Reverse query",isShown:function(){return d3.boxplot.name_x!==d3.boxplot.name_y},onClick:dgenies.result.controls.launch_reverse_contig}]};/**
* Initialise events
*/d3.boxplot.events.init=function(){$("input#filter_size").change(function(){d3.boxplot.events.filter_size(d3.boxplot.min_sizes[this.value])});$("input#stroke-linecap").change(function(){d3.boxplot.events.stroke_linecap(!this.checked)});$("input#stroke-width").change(function(){d3.boxplot.events.stroke_width(this.value)});$("input#filter_identity").change(function(){d3.boxplot.events.filter_identity(this.value)});$("input#chroms-limits").change(function(){d3.boxplot.events.set_break_lines_visibility(this.value)});$("div#legend div.draw").on("click",d3.boxplot.switch_color_theme)};/**
* Initialise context menu
......@@ -354,6 +354,7 @@ d3.boxplot.draw_lines();$("#restore-all").click(function(){if(d3.boxplot.zoom.re
* @param {string} width new width class ("1", "2", or "3")
*/d3.boxplot.events.stroke_width=function(width){let stroke_width=d3.boxplot.scale/600;if(width==="1"){stroke_width=d3.boxplot.scale/400}else if(width==="2"){stroke_width=d3.boxplot.scale/200}else if(width==="3"){stroke_width=d3.boxplot.scale/100}d3.boxplot.content_lines_width=stroke_width;d3.selectAll("path.content-lines").attr("stroke-width",stroke_width/d3.boxplot.zoom_scale_lines)};if(!d3||!d3.boxplot){throw"d3.boxplot wasn't included!"}d3.boxplot.mousetip={};/**
* Get color (black/white) depending on bgColor so it would be clearly seen.
*
* @param bgColor
* @returns {string}
*/d3.boxplot.mousetip.getColorByBgColor=function(bgColor){if(!bgColor){return""}return parseInt(bgColor.replace("#",""),16)>16777215/2?"#000":"#fff"};/**
......@@ -378,6 +379,7 @@ d3.boxplot.draw_lines();$("#restore-all").click(function(){if(d3.boxplot.zoom.re
* Hide tooltip
*/d3.boxplot.mousetip.hide=function(){$(".tip","#draw").hide()};/**
* get label to show
*
* @param {string} label initial label
* @returns {string} new label
*/d3.boxplot.mousetip.get_label=function(label){if(label.startsWith("###MIX###")){let parts=label.substr(10).split("###");label="Mix:&nbsp;"+parts.slice(0,3).join(",&nbsp;");if(parts.length>3){label+=",&nbsp;..."}}return label};/**
......@@ -388,7 +390,7 @@ d3.boxplot.draw_lines();$("#restore-all").click(function(){if(d3.boxplot.zoom.re
*/d3.boxplot.mousetip.get_match=function(e){let rect=$("g.container")[0].getBoundingClientRect();let posX=rect.left+window.scrollX,posY=rect.top+window.scrollY,width_c=rect.width,height_c=rect.height;let c_x=(e.pageX-posX)/width_c*d3.boxplot.scale,c_y=d3.boxplot.scale-(e.pageY-posY)/height_c*d3.boxplot.scale;c_x=c_x/d3.boxplot.scale*d3.boxplot.x_len;c_y=c_y/d3.boxplot.scale*d3.boxplot.y_len;let error_x=d3.boxplot.content_lines_width/d3.boxplot.scale*d3.boxplot.x_len;let error_y=d3.boxplot.content_lines_width/d3.boxplot.scale*d3.boxplot.y_len;// let error_x = 0,
// error_y = 0;
let match=null;let found=false;for(let i=3;i>=0;i--){let j=0;while(!found&&j<d3.boxplot.lines[i].length){let line=d3.boxplot.lines[i][j];//console.log(c_x, c_y, line[0],line[1],line[2],line[3]);
let x_a=Math.min(line[0],line[1]);let x_b=Math.max(line[0],line[1]);let y_a=Math.min(line[2],line[3]);let y_b=Math.max(line[2],line[3]);if(x_a<=c_x&&c_x<=x_b&&y_a<=c_y&&c_y<=y_b){let m=(y_b-y_a)/(x_b-x_a);let p=y_a-m*x_a;let y_xmouse=m*c_x+p;if(y_xmouse-error_y<=c_y&&c_y<=y_xmouse+error_y){match=line;found=true}}j++}}if(match!==null){let y_zone=match[5];let x_zone=match[6];let y_min=null;let y_max=null;if(y_zone in d3.boxplot.y_zones){let cy_min=d3.boxplot.y_zones[y_zone][0]/d3.boxplot.scale*d3.boxplot.y_len;y_min=d3.boxplot.get_human_readable_size(match[2]-cy_min,3,"&nbsp;");y_max=d3.boxplot.get_human_readable_size(match[3]-cy_min,3,"&nbsp;")}let x_min=null;let x_max=null;if(x_zone in d3.boxplot.x_zones){let cx_min=d3.boxplot.x_zones[x_zone][0]/d3.boxplot.scale*d3.boxplot.x_len;x_min=d3.boxplot.get_human_readable_size(match[0]-cx_min,3,"&nbsp;");x_max=d3.boxplot.get_human_readable_size(match[1]-cx_min,3,"&nbsp;")}console.log("MATCH:");console.log(y_zone,y_min,y_max);console.log(x_zone,x_min,x_max);console.log(match[4]);return{x_zone:x_zone,y_zone:y_zone,x_match:[x_min,x_max],y_match:[y_min,y_max],idy:match[4]}}return null};if(!d3||!d3.boxplot){throw"d3.boxplot wasn't included!"}d3.boxplot.zoom={};/**
let x_a=Math.min(line[0],line[1]);let x_b=Math.max(line[0],line[1]);let y_a=Math.min(line[2],line[3]);let y_b=Math.max(line[2],line[3]);if(x_a<=c_x&&c_x<=x_b&&y_a<=c_y&&c_y<=y_b){let m=(y_b-y_a)/(x_b-x_a);let p=y_a-m*x_a;let y_xmouse=m*c_x+p;if(y_xmouse-error_y<=c_y&&c_y<=y_xmouse+error_y){match=line;found=true}}j++}}if(match!==null){let y_zone=match[5];let x_zone=match[6];let y_min=null;let y_max=null;if(y_zone in d3.boxplot.y_zones){let cy_min=d3.boxplot.y_zones[y_zone][0]/d3.boxplot.scale*d3.boxplot.y_len;y_min=d3.boxplot.get_human_readable_size(match[2]-cy_min,3,"&nbsp;");y_max=d3.boxplot.get_human_readable_size(match[3]-cy_min,3,"&nbsp;")}let x_min=null;let x_max=null;if(x_zone in d3.boxplot.x_zones){let cx_min=d3.boxplot.x_zones[x_zone][0]/d3.boxplot.scale*d3.boxplot.x_len;x_min=d3.boxplot.get_human_readable_size(match[0]-cx_min,3,"&nbsp;");x_max=d3.boxplot.get_human_readable_size(match[1]-cx_min,3,"&nbsp;")}console.log("MATCH:");console.log(y_zone,y_min,y_max);console.log(x_zone,x_min,x_max);console.log(match[4]);return{x_zone:x_zone,y_zone:y_zone,x_match:[x_min,x_max],y_match:[y_min,y_max],idy:match[4]}}return null};if(!d3||!d3.boxplot){throw"d3.boxplot wasn't included!"}d3.boxplot.zoom={};d3.boxplot.zoom.help_timeout=null;/**
* Initialize zoom.init module
*/d3.boxplot.zoom.init=function(){d3.boxplot.svgcontainer.on("click",d3.boxplot.zoom.click);d3.select(".drawcontainer").on("mousedown",d3.boxplot.zoom.mousedown).on("mouseup",d3.boxplot.zoom.mouseup).on("mousemove",d3.boxplot.zoom.translate);d3.boxplot.svgcontainer.on("wheel",d3.boxplot.zoom.zoom)};/**
* Click event action
......@@ -396,11 +398,11 @@ let x_a=Math.min(line[0],line[1]);let x_b=Math.max(line[0],line[1]);let y_a=Math
* Mousedown event action
*/d3.boxplot.zoom.mousedown=function(){if(d3.boxplot.zoom_enabled){d3.boxplot.mousetip.hide();let rect=$("g.container")[0].getBoundingClientRect();let posX=rect.left+window.scrollX,posY=rect.top+window.scrollY,width_c=rect.width,height_c=rect.height;let cursor_x=(d3.event.pageX-posX)/width_c*d3.boxplot.scale,cursor_y=(d3.event.pageY-posY)/height_c*d3.boxplot.scale;d3.boxplot.translate_start=[cursor_x,cursor_y];d3.boxplot.posX=posX;d3.boxplot.posY=posY;let old_transform=d3.boxplot.container.attr("transform");d3.boxplot.old_translate=[0,0];if(old_transform!==null){let search_tr=old_transform.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);d3.boxplot.old_translate=[parseFloat(search_tr[1]),parseFloat(search_tr[2])]}}};/**
* Mouseup event action
*/d3.boxplot.zoom.mouseup=function(){d3.boxplot.translate_start=null};/**
*/d3.boxplot.zoom.mouseup=function(){d3.boxplot.translate_start=null;$("#help-trans").fadeOut("slow")};/**
* Translate event action
*/d3.boxplot.zoom.translate=function(){let rect=$("g.container")[0].getBoundingClientRect();let posX=d3.boxplot.posX,posY=d3.boxplot.posY,width_c=rect.width,height_c=rect.height;let cursor_x=(d3.event.pageX-posX)/width_c*d3.boxplot.scale,cursor_y=(d3.event.pageY-posY)/height_c*d3.boxplot.scale;if(d3.boxplot.translate_start!==null&&d3.event.ctrlKey){let old_transform=d3.boxplot.container.attr("transform");//let scale = 1;
let scale_x=1;let scale_y=1;if(old_transform){let scale=old_transform.match(/scale\(([-\d.]+)(,\s*([-\d.]+))?\)/);scale_x=scale[1];scale_y=scale[1];if(scale[3]!==undefined)scale_y=scale[3]}let translate=[d3.boxplot.old_translate[0]+(cursor_x-d3.boxplot.translate_start[0])*scale_x,d3.boxplot.old_translate[1]+(cursor_y-d3.boxplot.translate_start[1])*scale_y];let min_tr=[d3.boxplot.scale-0.2*d3.boxplot.scale,d3.boxplot.scale-0.2*d3.boxplot.scale];let max_tr=[-d3.boxplot.scale*scale_x+200,-d3.boxplot.scale*scale_x+200];if(translate[0]<max_tr[0]){translate[0]=max_tr[0]}else if(translate[0]>min_tr[0]){translate[0]=min_tr[0]}if(translate[1]<max_tr[1]){translate[1]=max_tr[1]}else if(translate[1]>min_tr[1]){translate[1]=min_tr[1]}let new_transform=`translate(${translate[0]}, ${translate[1]}) scale(${scale_x}, ${scale_y})`;d3.boxplot.container.attr("transform",new_transform);//Update axis:
d3.boxplot.draw_top_axis();d3.boxplot.draw_right_axis();d3.boxplot.zoom_bottom_axis();d3.boxplot.zoom_left_axis()}};/**
d3.boxplot.draw_top_axis();d3.boxplot.draw_right_axis();d3.boxplot.zoom_bottom_axis();d3.boxplot.zoom_left_axis()}else if(d3.boxplot.translate_start!==null){let help_trans=$("#help-trans");help_trans.fadeIn("slow")}};/**
* Get cursor position
*
* @param {DOMRect} rect if given, dont get it from DOM
......@@ -411,7 +413,7 @@ d3.boxplot.draw_top_axis();d3.boxplot.draw_right_axis();d3.boxplot.zoom_bottom_a
*/d3.boxplot.zoom.zoom=function(){if(d3.event.ctrlKey){d3.event.preventDefault();d3.boxplot.mousetip.hide();if(d3.boxplot.zoom_enabled){let cursor=d3.boxplot.zoom._cursor_pos();let zoom_f=1.2;let old_transform=d3.boxplot.container.attr("transform");if(old_transform!==null){let search_tr=old_transform.match(/translate\(([-\de.]+),\s*([-\de.]+)\)/);let search_sc=old_transform.match(/scale\(([-\de.]+)(,\s*[-\de.]+)?\)/);old_transform={"scale":parseFloat(search_sc[1]),"translate":[parseFloat(search_tr[1]),parseFloat(search_tr[2])]}}else{old_transform={"scale":1,"translate":[0,0]}}let new_scale;let new_rect=cursor[2];if(d3.event.deltaY<0){new_scale=old_transform["scale"]*zoom_f;new_rect["width"]*=zoom_f;new_rect["height"]*=zoom_f}else{new_scale=old_transform["scale"]/zoom_f;let scale_ratio=zoom_f;if(new_scale<1){new_scale=1;scale_ratio=old_transform["scale"]}new_rect["width"]/=scale_ratio;new_rect["height"]/=scale_ratio}new_rect["bottom"]=new_rect["y"]+new_rect["height"];new_rect["right"]=new_rect["x"]+new_rect["width"];let new_cursor=d3.boxplot.zoom._cursor_pos(new_rect);let x_trans=(new_cursor[0]-cursor[0])*new_scale;let y_trans=(new_cursor[1]-cursor[1])*new_scale;let new_transform=`translate(${old_transform["translate"][0]+x_trans},${old_transform["translate"][1]-y_trans})
scale(${new_scale})`;d3.boxplot.container.attr("transform",new_transform);d3.boxplot.zoom_scale_lines=new_scale;d3.boxplot.zoom._cursor_pos();//Correct lines stroke width to be not impacted by the zoom:
d3.selectAll("path.content-lines").attr("stroke-width",d3.boxplot.content_lines_width/new_scale);d3.selectAll("line.break-lines").attr("stroke-width",d3.boxplot.break_lines_width/new_scale);//Update axis:
d3.boxplot.draw_top_axis();d3.boxplot.draw_right_axis();d3.boxplot.zoom_bottom_axis();d3.boxplot.zoom_left_axis()}}};/**
d3.boxplot.draw_top_axis();d3.boxplot.draw_right_axis();d3.boxplot.zoom_bottom_axis();d3.boxplot.zoom_left_axis()}}else if(d3.boxplot.zoom_enabled){let help_zoom=$("#help-zoom");help_zoom.fadeIn("slow");if(d3.boxplot.zoom.help_timeout!==null){window.clearTimeout(d3.boxplot.zoom.help_timeout)}d3.boxplot.zoom.help_timeout=window.setTimeout(()=>{help_zoom.fadeOut("slow")},700)}};/**
* Restore previous scale
*
* @param transform: transform object
......
......@@ -247,7 +247,7 @@ for(let i=0;i<4;i++){d3.boxplot.__draw_idy_lines(i.toString(),lines,x_len,y_len)
*/d3.boxplot.draw=function(x_contigs,x_order,y_contigs,y_order){let width=850;let height=850;$("div#draw").width(width).height(height);let draw=$("#draw");draw.empty();draw.append($("<div>").attr("id","restore-all").css("display","none").attr("title","Unzoom"));let draw_in=draw.append($("<div>").attr("id","draw-in"));d3.boxplot.svgsupercontainer=d3.select("#draw-in").append("svg:svg").attr("width","100%").attr("height","100%").attr("viewBox","0 0 100 100").attr("preserveAspectRatio","none");let drawcontainer=d3.boxplot.svgsupercontainer.append("svg:g").attr("class","drawcontainer");drawcontainer.append("rect").attr("x",0).attr("y",0).attr("width","100%").attr("height","100%").attr("stroke","none").attr("fill","white");d3.boxplot.svgcontainer=drawcontainer.append("svg:svg").attr("class","svgcontainer").attr("width",90).attr("height",90).attr("x",5).attr("y",5).attr("viewBox","0 0 "+d3.boxplot.scale+" "+d3.boxplot.scale).attr("preserveAspectRatio","none");d3.boxplot.container=d3.boxplot.svgcontainer.append("svg:g").attr("class","container");d3.boxplot.container.append("rect").attr("x",0).attr("y",0).attr("width","100%").attr("height","100%").attr("stroke","none").attr("fill","white");//X axis:
d3.boxplot.x_zones={};let sum=0;for(let i=0;i<x_order.length-1;i++){let x_id=x_order[i];let x_contig_len=x_contigs[x_id]/d3.boxplot.x_len*d3.boxplot.scale;d3.boxplot.x_zones[x_id]=[sum,sum+x_contig_len];sum+=x_contig_len;d3.boxplot.container.append("line").attr("x1",sum).attr("y1",d3.boxplot.scale).attr("x2",sum).attr("y2",0).attr("class","break-lines").attr("stroke-width",d3.boxplot.break_lines_width).attr("stroke",d3.boxplot.break_lines_color).style("stroke-dasharray",d3.boxplot.break_lines_dash)}d3.boxplot.x_zones[x_order[x_order.length-1]]=[sum,d3.boxplot.scale];//Y axis:
d3.boxplot.y_zones={};sum=0;for(let i=0;i<y_order.length-1;i++){let y_id=y_order[i];let y_contig_len=y_contigs[y_id]/d3.boxplot.y_len*d3.boxplot.scale;d3.boxplot.y_zones[y_id]=[sum,sum+y_contig_len];sum+=y_contig_len;d3.boxplot.container.append("line").attr("x1",0).attr("y1",d3.boxplot.scale-sum).attr("x2",d3.boxplot.scale).attr("y2",d3.boxplot.scale-sum).attr("class","break-lines").attr("stroke-width",d3.boxplot.break_lines_width).attr("stroke",d3.boxplot.break_lines_color).style("stroke-dasharray",d3.boxplot.break_lines_dash)}d3.boxplot.y_zones[y_order[y_order.length-1]]=[sum,d3.boxplot.scale];if(!d3.boxplot.break_lines_show){d3.selectAll("line.break-lines").style("visibility","hidden")}d3.boxplot.draw_axis_bckgd();d3.boxplot.draw_left_axis(d3.boxplot.y_len);d3.boxplot.draw_bottom_axis(d3.boxplot.x_len);d3.boxplot.draw_top_axis(d3.boxplot.x_zones);d3.boxplot.draw_right_axis(d3.boxplot.y_zones);window.setTimeout(()=>{//Data:
d3.boxplot.draw_lines();$("#restore-all").click(function(){if(d3.boxplot.zoom.reset_scale(false,null,false)){$(this).hide()}});$(document).on("keyup",function(e){if(e.keyCode===27){if(d3.boxplot.zoom.reset_scale(false,null,false)){$("#restore-all").hide()}}});d3.boxplot.draw_legend();dgenies.hide_loading()},0);d3.boxplot.zoom.init();d3.boxplot.events.init_context_menu()};
d3.boxplot.draw_lines();$("#restore-all").click(function(){if(d3.boxplot.zoom.reset_scale(false,null,false)){$(this).hide()}});$(document).on("keyup",function(e){if(e.keyCode===27){if(d3.boxplot.zoom.reset_scale(false,null,false)){$("#restore-all").hide()}}});d3.boxplot.draw_legend();dgenies.hide_loading()},0);draw.append($("<div>").attr("id","help-zoom").append("Press CTRL to zoom").append($("<img>").attr("src","/static/images/ctrl_plus_mouse.png").attr("alt","")).hide().on("click",function(){$(this).hide()}));draw.append($("<div>").attr("id","help-trans").append("Press CTRL to translate").append($("<img>").attr("src","/static/images/ctrl_plus_click.png").attr("alt","")).hide().on("click",function(){$(this).hide()}).on("mouseup",function(){d3.boxplot.translate_start=null;$("#help-trans").fadeOut("slow")}));d3.boxplot.zoom.init();d3.boxplot.events.init_context_menu()};
if(!d3||!d3.boxplot){throw'd3.boxplot wasn\'t included!'}d3.boxplot.events={};d3.boxplot.events.context_menu={actions:[{name:'Export SVG',onClick:dgenies.result.export.export_svg},{name:'Export PNG',onClick:dgenies.result.export.export_png},{name:'Reverse query',isShown:function(){return d3.boxplot.name_x!==d3.boxplot.name_y},onClick:dgenies.result.controls.launch_reverse_contig}]};/**
* Initialise events
*/d3.boxplot.events.init=function(){$('input#filter_size').change(function(){d3.boxplot.events.filter_size(d3.boxplot.min_sizes[this.value])});$('input#stroke-linecap').change(function(){d3.boxplot.events.stroke_linecap(!this.checked)});$('input#stroke-width').change(function(){d3.boxplot.events.stroke_width(this.value)});$('input#filter_identity').change(function(){d3.boxplot.events.filter_identity(this.value)});$('input#chroms-limits').change(function(){d3.boxplot.events.set_break_lines_visibility(this.value)});$('div#legend div.draw').on('click',d3.boxplot.switch_color_theme)};/**
......@@ -275,6 +275,7 @@ if(!d3||!d3.boxplot){throw'd3.boxplot wasn\'t included!'}d3.boxplot.events={};d3
*/d3.boxplot.events.stroke_width=function(width){let stroke_width=d3.boxplot.scale/600;if(width==='1'){stroke_width=d3.boxplot.scale/400}else if(width==='2'){stroke_width=d3.boxplot.scale/200}else if(width==='3'){stroke_width=d3.boxplot.scale/100}d3.boxplot.content_lines_width=stroke_width;d3.selectAll('path.content-lines').attr('stroke-width',stroke_width/d3.boxplot.zoom_scale_lines)};
if(!d3||!d3.boxplot){throw'd3.boxplot wasn\'t included!'}d3.boxplot.mousetip={};/**
* Get color (black/white) depending on bgColor so it would be clearly seen.
*
* @param bgColor
* @returns {string}
*/d3.boxplot.mousetip.getColorByBgColor=function(bgColor){if(!bgColor){return''}return parseInt(bgColor.replace('#',''),16)>16777215/2?'#000':'#fff'};/**
......@@ -299,6 +300,7 @@ if(!d3||!d3.boxplot){throw'd3.boxplot wasn\'t included!'}d3.boxplot.mousetip={};
* Hide tooltip
*/d3.boxplot.mousetip.hide=function(){$('.tip','#draw').hide()};/**
* get label to show
*
* @param {string} label initial label
* @returns {string} new label
*/d3.boxplot.mousetip.get_label=function(label){if(label.startsWith('###MIX###')){let parts=label.substr(10).split('###');label='Mix:&nbsp;'+parts.slice(0,3).join(',&nbsp;');if(parts.length>3){label+=',&nbsp;...'}}return label};/**
......@@ -310,7 +312,7 @@ if(!d3||!d3.boxplot){throw'd3.boxplot wasn\'t included!'}d3.boxplot.mousetip={};
// error_y = 0;
let match=null;let found=false;for(let i=3;i>=0;i--){let j=0;while(!found&&j<d3.boxplot.lines[i].length){let line=d3.boxplot.lines[i][j];//console.log(c_x, c_y, line[0],line[1],line[2],line[3]);
let x_a=Math.min(line[0],line[1]);let x_b=Math.max(line[0],line[1]);let y_a=Math.min(line[2],line[3]);let y_b=Math.max(line[2],line[3]);if(x_a<=c_x&&c_x<=x_b&&y_a<=c_y&&c_y<=y_b){let m=(y_b-y_a)/(x_b-x_a);let p=y_a-m*x_a;let y_xmouse=m*c_x+p;if(y_xmouse-error_y<=c_y&&c_y<=y_xmouse+error_y){match=line;found=true}}j++}}if(match!==null){let y_zone=match[5];let x_zone=match[6];let y_min=null;let y_max=null;if(y_zone in d3.boxplot.y_zones){let cy_min=d3.boxplot.y_zones[y_zone][0]/d3.boxplot.scale*d3.boxplot.y_len;y_min=d3.boxplot.get_human_readable_size(match[2]-cy_min,3,'&nbsp;');y_max=d3.boxplot.get_human_readable_size(match[3]-cy_min,3,'&nbsp;')}let x_min=null;let x_max=null;if(x_zone in d3.boxplot.x_zones){let cx_min=d3.boxplot.x_zones[x_zone][0]/d3.boxplot.scale*d3.boxplot.x_len;x_min=d3.boxplot.get_human_readable_size(match[0]-cx_min,3,'&nbsp;');x_max=d3.boxplot.get_human_readable_size(match[1]-cx_min,3,'&nbsp;')}console.log('MATCH:');console.log(y_zone,y_min,y_max);console.log(x_zone,x_min,x_max);console.log(match[4]);return{x_zone:x_zone,y_zone:y_zone,x_match:[x_min,x_max],y_match:[y_min,y_max],idy:match[4]}}return null};
if(!d3||!d3.boxplot){throw"d3.boxplot wasn't included!"}d3.boxplot.zoom={};/**
if(!d3||!d3.boxplot){throw"d3.boxplot wasn't included!"}d3.boxplot.zoom={};d3.boxplot.zoom.help_timeout=null;/**
* Initialize zoom.init module
*/d3.boxplot.zoom.init=function(){d3.boxplot.svgcontainer.on("click",d3.boxplot.zoom.click);d3.select(".drawcontainer").on("mousedown",d3.boxplot.zoom.mousedown).on("mouseup",d3.boxplot.zoom.mouseup).on("mousemove",d3.boxplot.zoom.translate);d3.boxplot.svgcontainer.on("wheel",d3.boxplot.zoom.zoom)};/**
* Click event action
......@@ -318,11 +320,11 @@ if(!d3||!d3.boxplot){throw"d3.boxplot wasn't included!"}d3.boxplot.zoom={};/**
* Mousedown event action
*/d3.boxplot.zoom.mousedown=function(){if(d3.boxplot.zoom_enabled){d3.boxplot.mousetip.hide();let rect=$("g.container")[0].getBoundingClientRect();let posX=rect.left+window.scrollX,posY=rect.top+window.scrollY,width_c=rect.width,height_c=rect.height;let cursor_x=(d3.event.pageX-posX)/width_c*d3.boxplot.scale,cursor_y=(d3.event.pageY-posY)/height_c*d3.boxplot.scale;d3.boxplot.translate_start=[cursor_x,cursor_y];d3.boxplot.posX=posX;d3.boxplot.posY=posY;let old_transform=d3.boxplot.container.attr("transform");d3.boxplot.old_translate=[0,0];if(old_transform!==null){let search_tr=old_transform.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);d3.boxplot.old_translate=[parseFloat(search_tr[1]),parseFloat(search_tr[2])]}}};/**
* Mouseup event action
*/d3.boxplot.zoom.mouseup=function(){d3.boxplot.translate_start=null};/**
*/d3.boxplot.zoom.mouseup=function(){d3.boxplot.translate_start=null;$("#help-trans").fadeOut("slow")};/**
* Translate event action
*/d3.boxplot.zoom.translate=function(){let rect=$("g.container")[0].getBoundingClientRect();let posX=d3.boxplot.posX,posY=d3.boxplot.posY,width_c=rect.width,height_c=rect.height;let cursor_x=(d3.event.pageX-posX)/width_c*d3.boxplot.scale,cursor_y=(d3.event.pageY-posY)/height_c*d3.boxplot.scale;if(d3.boxplot.translate_start!==null&&d3.event.ctrlKey){let old_transform=d3.boxplot.container.attr("transform");//let scale = 1;
let scale_x=1;let scale_y=1;if(old_transform){let scale=old_transform.match(/scale\(([-\d.]+)(,\s*([-\d.]+))?\)/);scale_x=scale[1];scale_y=scale[1];if(scale[3]!==undefined)scale_y=scale[3]}let translate=[d3.boxplot.old_translate[0]+(cursor_x-d3.boxplot.translate_start[0])*scale_x,d3.boxplot.old_translate[1]+(cursor_y-d3.boxplot.translate_start[1])*scale_y];let min_tr=[d3.boxplot.scale-0.2*d3.boxplot.scale,d3.boxplot.scale-0.2*d3.boxplot.scale];let max_tr=[-d3.boxplot.scale*scale_x+200,-d3.boxplot.scale*scale_x+200];if(translate[0]<max_tr[0]){translate[0]=max_tr[0]}else if(translate[0]>min_tr[0]){translate[0]=min_tr[0]}if(translate[1]<max_tr[1]){translate[1]=max_tr[1]}else if(translate[1]>min_tr[1]){translate[1]=min_tr[1]}let new_transform=`translate(${translate[0]}, ${translate[1]}) scale(${scale_x}, ${scale_y})`;d3.boxplot.container.attr("transform",new_transform);//Update axis:
d3.boxplot.draw_top_axis();d3.boxplot.draw_right_axis();d3.boxplot.zoom_bottom_axis();d3.boxplot.zoom_left_axis()}};/**
d3.boxplot.draw_top_axis();d3.boxplot.draw_right_axis();d3.boxplot.zoom_bottom_axis();d3.boxplot.zoom_left_axis()}else if(d3.boxplot.translate_start!==null){let help_trans=$("#help-trans");help_trans.fadeIn("slow")}};/**
* Get cursor position
*
* @param {DOMRect} rect if given, dont get it from DOM
......@@ -333,7 +335,7 @@ d3.boxplot.draw_top_axis();d3.boxplot.draw_right_axis();d3.boxplot.zoom_bottom_a
*/d3.boxplot.zoom.zoom=function(){if(d3.event.ctrlKey){d3.event.preventDefault();d3.boxplot.mousetip.hide();if(d3.boxplot.zoom_enabled){let cursor=d3.boxplot.zoom._cursor_pos();let zoom_f=1.2;let old_transform=d3.boxplot.container.attr("transform");if(old_transform!==null){let search_tr=old_transform.match(/translate\(([-\de.]+),\s*([-\de.]+)\)/);let search_sc=old_transform.match(/scale\(([-\de.]+)(,\s*[-\de.]+)?\)/);old_transform={"scale":parseFloat(search_sc[1]),"translate":[parseFloat(search_tr[1]),parseFloat(search_tr[2])]}}else{old_transform={"scale":1,"translate":[0,0]}}let new_scale;let new_rect=cursor[2];if(d3.event.deltaY<0){new_scale=old_transform["scale"]*zoom_f;new_rect["width"]*=zoom_f;new_rect["height"]*=zoom_f}else{new_scale=old_transform["scale"]/zoom_f;let scale_ratio=zoom_f;if(new_scale<1){new_scale=1;scale_ratio=old_transform["scale"]}new_rect["width"]/=scale_ratio;new_rect["height"]/=scale_ratio}new_rect["bottom"]=new_rect["y"]+new_rect["height"];new_rect["right"]=new_rect["x"]+new_rect["width"];let new_cursor=d3.boxplot.zoom._cursor_pos(new_rect);let x_trans=(new_cursor[0]-cursor[0])*new_scale;let y_trans=(new_cursor[1]-cursor[1])*new_scale;let new_transform=`translate(${old_transform["translate"][0]+x_trans},${old_transform["translate"][1]-y_trans})
scale(${new_scale})`;d3.boxplot.container.attr("transform",new_transform);d3.boxplot.zoom_scale_lines=new_scale;d3.boxplot.zoom._cursor_pos();//Correct lines stroke width to be not impacted by the zoom:
d3.selectAll("path.content-lines").attr("stroke-width",d3.boxplot.content_lines_width/new_scale);d3.selectAll("line.break-lines").attr("stroke-width",d3.boxplot.break_lines_width/new_scale);//Update axis:
d3.boxplot.draw_top_axis();d3.boxplot.draw_right_axis();d3.boxplot.zoom_bottom_axis();d3.boxplot.zoom_left_axis()}}};/**
d3.boxplot.draw_top_axis();d3.boxplot.draw_right_axis();d3.boxplot.zoom_bottom_axis();d3.boxplot.zoom_left_axis()}}else if(d3.boxplot.zoom_enabled){let help_zoom=$("#help-zoom");help_zoom.fadeIn("slow");if(d3.boxplot.zoom.help_timeout!==null){window.clearTimeout(d3.boxplot.zoom.help_timeout)}d3.boxplot.zoom.help_timeout=window.setTimeout(()=>{help_zoom.fadeOut("slow")},700)}};/**
* Restore previous scale
*
* @param transform: transform object
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment