From e35f5c06a2ba114ad7c31a27e9e23817f454431e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertrand=20N=C3=A9ron?= <bneron@pasteur.fr>
Date: Wed, 8 Feb 2012 10:10:49 +0000
Subject: [PATCH] provide a schema of the genome whith the genes and their
respective label. and some controls - left/right translation with a control
panel - left/right by grabbing the paper - zoom in/out with a control
panel - zoom in/out with the mouswheel up/down
resize the view when the widow is resized
color each gene according to the "gene match" the gene match color chart is defined in color.css ( issue #872 )
constraint translation on Xaxis only ( issue #868 )
---
src/couchapp/secreton/.couchappignore | 3 +-
.../_attachments/images/closedhand.cur | Bin 0 -> 326 bytes
.../secreton/_attachments/images/openhand.cur | Bin 0 -> 326 bytes
.../_attachments/script/jquery.mousewheel.js | 84 +++++
.../secreton/_attachments/style/color.css | 26 +-
.../secreton/_attachments/style/main.css | 13 +-
.../secreton/templates/secretion_system.html | 354 ++++++++++--------
7 files changed, 326 insertions(+), 154 deletions(-)
create mode 100644 src/couchapp/secreton/_attachments/images/closedhand.cur
create mode 100644 src/couchapp/secreton/_attachments/images/openhand.cur
create mode 100755 src/couchapp/secreton/_attachments/script/jquery.mousewheel.js
diff --git a/src/couchapp/secreton/.couchappignore b/src/couchapp/secreton/.couchappignore
index b3cc732..0ecbe1d 100644
--- a/src/couchapp/secreton/.couchappignore
+++ b/src/couchapp/secreton/.couchappignore
@@ -6,5 +6,6 @@
// ".*\\.bak$"
"\\.project" ,
"\\.couchapprc",
-".*\\.swp$"
+".*\\.swp$",
+"\\.svn"
]
diff --git a/src/couchapp/secreton/_attachments/images/closedhand.cur b/src/couchapp/secreton/_attachments/images/closedhand.cur
new file mode 100644
index 0000000000000000000000000000000000000000..41aaa62a596f9e973f333e084e004da35bfdd9bf
GIT binary patch
literal 326
zcmZQzU}9ioP*7lEU}s=uFkob05My9q&|qL-P+(wSaA06yU}Ruq00SrmVl#mVDE|Nd
zKa@p2#r%PR0fgB<Ffj1{U|^63;Xe!v>`=`Ag@J*018(#GQwV;r|NjrdAK3r@f580z
Y{{awY{Qv&}<NyC3pfpJQlRtKg06Bbt$N&HU
literal 0
HcmV?d00001
diff --git a/src/couchapp/secreton/_attachments/images/openhand.cur b/src/couchapp/secreton/_attachments/images/openhand.cur
new file mode 100644
index 0000000000000000000000000000000000000000..fba3ddc807fd2e29b41d09af0b14d6db6bdb879c
GIT binary patch
literal 326
zcmZQzU}9ioP*7lEU}s=uFkob05My9q&|qL-P+(wSaA06yU}Ruq00SrmVl#mVDE|Nd
zKa@p2#r%PR0fgB<Ffj1{U|^63;Xe!v_J0@{%KtDhr2k`JVE@Lzz`Kosfp-%FgX9JX
zW^91i`JY1YgZ=-15dOga|NjH#|NjqwFysIK4UGT)Gk`F||Nj#h{{Mdf#Rpjb|3AR~
P|Nj&I|NsBh|NjpFZ%Tfs
literal 0
HcmV?d00001
diff --git a/src/couchapp/secreton/_attachments/script/jquery.mousewheel.js b/src/couchapp/secreton/_attachments/script/jquery.mousewheel.js
new file mode 100755
index 0000000..38b6095
--- /dev/null
+++ b/src/couchapp/secreton/_attachments/script/jquery.mousewheel.js
@@ -0,0 +1,84 @@
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ *
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+ for ( var i=types.length; i; ) {
+ $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+ }
+}
+
+$.event.special.mousewheel = {
+ setup: function() {
+ if ( this.addEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.addEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = handler;
+ }
+ },
+
+ teardown: function() {
+ if ( this.removeEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.removeEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = null;
+ }
+ }
+};
+
+$.fn.extend({
+ mousewheel: function(fn) {
+ return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+ },
+
+ unmousewheel: function(fn) {
+ return this.unbind("mousewheel", fn);
+ }
+});
+
+
+function handler(event) {
+ var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+ event = $.event.fix(orgEvent);
+ event.type = "mousewheel";
+
+ // Old school scrollwheel delta
+ if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+ if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
+
+ // New school multidimensional scroll (touchpads) deltas
+ deltaY = delta;
+
+ // Gecko
+ if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+ deltaY = 0;
+ deltaX = -1*delta;
+ }
+
+ // Webkit
+ if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+ if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+
+ // Add event and delta to the front of the arguments
+ args.unshift(event, delta, deltaX, deltaY);
+
+ return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
diff --git a/src/couchapp/secreton/_attachments/style/color.css b/src/couchapp/secreton/_attachments/style/color.css
index 635204f..726ac06 100644
--- a/src/couchapp/secreton/_attachments/style/color.css
+++ b/src/couchapp/secreton/_attachments/style/color.css
@@ -1,6 +1,20 @@
-.gene_sctC { background-color: blue}
-.gene_sctD { background-color: yellow}
-.gene_sctF { background-color: red}
-.gene_sctI { background-color: green}
-.gene_sctJ { background-color: orange}
-.gene_sctL { background-color: pink}
\ No newline at end of file
+.gene_sctC { background-color: BlueViolet }
+.gene_sctD { background-color: Blue}
+.gene_sctD2{ background-color: DarkCyan}
+.gene_sctF { background-color: Cyan}
+.gene_sctI { background-color: Aqua}
+.gene_sctJ { background-color: DarkGreen}
+.gene_sctL { background-color: Green}
+.gene_sctN { background-color: ForestGreen}
+.gene_sctO { background-color: LimeGreen}
+.gene_sctQ { background-color: GreenYellow}
+.gene_sctR { background-color: YellowGreen}
+.gene_sctS { background-color: Yellow}
+.gene_sctT { background-color: Gold}
+.gene_sctU { background-color: GoldenRod}
+.gene_sctV { background-color: Orange}
+.gene_sycD { background-color: DarkOrange}
+.gene_sycN { background-color: OrangeRed}
+.gene_yopB { background-color: Red}
+.gene_yopD { background-color: FireBrick}
+.gene_yopN { background-color: Maroon}
\ No newline at end of file
diff --git a/src/couchapp/secreton/_attachments/style/main.css b/src/couchapp/secreton/_attachments/style/main.css
index 77ae1c4..4e42c8d 100644
--- a/src/couchapp/secreton/_attachments/style/main.css
+++ b/src/couchapp/secreton/_attachments/style/main.css
@@ -46,6 +46,17 @@ td{
margin: 0;
}
#genes_schema{
- width: 1820px;
border:1px solid black;
+ padding:0;
+ margin-right:10px;
+ margin-left:10px;
+}
+
+body {cursor: default;}
+
+.grabbing{
+ cursor: url("../images/closedhand.cur") , default !important;
+}
+.grabbable{
+ cursor: url("../images/openhand.cur") , default !important;
}
diff --git a/src/couchapp/secreton/templates/secretion_system.html b/src/couchapp/secreton/templates/secretion_system.html
index 41fe7ad..4c9fc9e 100644
--- a/src/couchapp/secreton/templates/secretion_system.html
+++ b/src/couchapp/secreton/templates/secretion_system.html
@@ -4,163 +4,226 @@
<title>secretion system {{code}}</title>
<link rel="stylesheet" href="../../style/main.css" type="text/css">
<link rel="stylesheet" href="../../style/color.css" type="text/css">
-
<script src="/_utils/script/jquery.js" type="text/javascript"></script>
<script src="/_utils/script/jquery.couch.js" type="text/javascript"></script>
+<script src="../../script/jquery.mousewheel.js" type="text/javascript"></script>
<script src="../../script/raphael-min.js" type="text/javascript"></script>
<script src="../../script/popup.js" type="text/javascript"></script>
<script type="text/javascript">
-
function getdoc( docID ){
var dbname = document.location.href.split('/')[3];
$.couch.db(dbname).openDoc( docID, {
- success:function( doc ) {
- var min = doc.genes[0].begin ;
- var max = 0;
- for( var i = 0 ;i<doc.genes.length ; i++ ){
- var beg = doc.genes[i].begin ;
- var end = doc.genes[i].end ;
- if(beg<min){min = beg;}
- if(end>max){max = end;}
- }
- //var width = $("#genes_schema").attr("width");
- //console.log(["width", width] );
- var paper_l = $("#genes_schema").width();
- var paper_h = 250;
- var genome_offset = 45;
- var genes_offset= 10;
- var coef = ( paper_l - (genome_offset+genes_offset)*2 ) / ( max - min );
- var genome_orig = min;
- var Y_genome = 55 ;
- Raphael.fn.draw_genome = function(){
- var genome_l = paper_l -(2* genome_offset);
- return this.path( ["M", genome_offset , Y_genome, "h", genome_l ,"a25,5 -1 0,1 0,5h",(-1*(genome_l)),"a25,5 0 0,1 0,-5z" ]).attr({fill: "#aaa", stroke:"#aaa", "stroke-width":"1"} );
- };
-
- var Gene = function Gene( gene_info ){
- var g_arrow = paper.draw_gene(gene_info);
- this.arrow = g_arrow[0];
- this.popup = paper.draw_gene_popup( g_arrow[1] , g_arrow[2] , gene_info);
- this.arrow.mouseover( show.bind(this));
- this.arrow.mouseout( hide.bind(this) );
- this.zoom = zoom;
- this.translate = translate;
- };
-
- Raphael.fn.draw_gene_popup = function( start, stop, gene_info ){
- var popup = this.set()
- var label = this.set();
- var txt = {font: '12px Helvetica, Arial', fill: "#fff"};
- var title = {font: '12px Helvetica, Arial', fill: "#aaf"};
- label.push(this.text(60, 12, "gene id: "+gene_info.id ).attr(title));
- label.push(this.text(60, 27, "begin: "+gene_info.begin ).attr(txt));
- label.push(this.text(60, 42, "end: " +gene_info.end ).attr(txt));
- label.hide();
- popup.push( label );
- var frame = this.popup( start +( (stop -start)/2 ) , 100, label , "bottom").attr({fill: "#000", stroke: "#666", "stroke-width": 2, "fill-opacity": .7});
- frame.hide();
- popup.push( frame );
- return popup;
- };
-
- Raphael.fn.draw_gene = function( gene_info ){
- var arrow_beg = Math.round((gene_info.begin - genome_orig)*coef)+genome_offset+genes_offset;
- var arrow_end = Math.round((gene_info.end - genome_orig)*coef)+genome_offset+genes_offset;
- var bd_l = Math.round((arrow_end - arrow_beg)*3/5);
- var hd_l = Math.round((arrow_end - arrow_beg)*2/5);
- var arrow ;
- if( gene_info.strand =='D' ){
- arrow = this.path( ["M", arrow_beg, Y_genome-28, "m0 20h", bd_l, "v-20l", hd_l, " 30l", (-1*hd_l),"30v-20h",(-1*bd_l),"z"]).attr({fill: "#00f", stroke: "none", "stroke-dasharray": "-", "fill-opacity": 0.9});
- }else{
- arrow = this.path( ["M", arrow_beg, Y_genome-28, "m0 30l",hd_l, "-30v20h", bd_l, "v20h", (-1*bd_l),"v20z"]).attr({fill: "#0f0", stroke: "none", "stroke-dasharray": "-", "fill-opacity": 0.9});
- }
- return [arrow , arrow_beg ,arrow_end ];
- };
+ success:function( doc ) {
+
+ var min = doc.genes[0].begin ;
+ var max = 0;
+ for( var i = 0 ;i<doc.genes.length ; i++ ){
+ var beg = doc.genes[i].begin ;
+ var end = doc.genes[i].end ;
+ if(beg<min){min = beg;}
+ if(end>max){max = end;}
+ }
+ var paper_w= $("#genes_schema").width();
+ var paper_h= 250;
+ var genome_offset= 45;
+ var genes_offset= 10;
+ var coef= (paper_w - (genome_offset+genes_offset)*2 )/(max - min);
+ var genome_orig= min;
+ var Y_genome= 55 ;
+
+ Raphael.fn.draw_genome = function(){
+ var genome_l = paper_w -(2* genome_offset);
+ return this.path( ["M", genome_offset , Y_genome, "h", genome_l ,"a25,5 -1 0,1 0,5h",(-1*(genome_l)),"a25,5 0 0,1 0,-5z" ]).attr({fill: "#aaa", stroke:"#aaa", "stroke-width":"1"} );
+ };
+
+ var Gene = function Gene( gene_info ){
+ var g_arrow = paper.draw_gene(gene_info);
+ this.arrow = g_arrow[0];
+ this.popup = paper.draw_gene_popup( g_arrow[1] , g_arrow[2] , gene_info);
+ this.arrow.mouseover( gene_show.bind(this));
+ this.arrow.mouseout( gene_hide.bind(this) );
+ this.zoom = gene_zoom;
+ this.translate = gene_translate;
+ };
+
+ Raphael.fn.draw_gene_popup = function( start, stop, gene_info ){
+ var popup = this.set();
+ var label = this.set();
+ var txt = {font: '12px Helvetica, Arial', fill: "#fff"};
+ var title = {font: '12px Helvetica, Arial', fill: "#aaf"};
+ label.push(this.text(60, 12, "gene id: "+gene_info.id ).attr(title));
+ label.push(this.text(60, 27, "begin: "+gene_info.begin ).attr(txt));
+ label.push(this.text(60, 42, "end: "+gene_info.end ).attr(txt));
+ label.hide();
+ popup.push( label );
+ var frame = this.popup( start +( (stop -start)/2 ) , 100, label , "bottom").attr({fill: "#000", stroke: "#666", "stroke-width": 2, "fill-opacity": .7});
+ frame.hide();
+ popup.push( frame );
+ return popup;
+ };
+
+ Raphael.fn.draw_gene = function( gene_info ){
+ var arrow_beg = Math.round((gene_info.begin - genome_orig)*coef)+genome_offset+genes_offset;
+ var arrow_end = Math.round((gene_info.end - genome_orig)*coef)+genome_offset+genes_offset;
+ var bd_l = Math.round((arrow_end - arrow_beg)*3/5);
+ var hd_l = Math.round((arrow_end - arrow_beg)*2/5);
+ var arrow ;
+ if( gene_info.strand =='D' ){
+ arrow = this.path( ["M", arrow_beg, Y_genome-28, "m0 20h", bd_l, "v-20l", hd_l, " 30l", (-1*hd_l),"30v-20h",(-1*bd_l),"z"]);
+ }else{
+ arrow = this.path( ["M", arrow_beg, Y_genome-28, "m0 30l",hd_l, "-30v20h", bd_l, "v20h", (-1*bd_l),"v20z"]);
+ }
+ if(!gene_info.match){
+ arrow.attr({fill: "white", stroke: "black", "stroke-dasharray": "-", "fill-opacity": 0.5});
+ }else{
+ var color=$( ".gene_"+gene_info.match).css( "backgroundColor" );
+ arrow.attr({fill: color, stroke: "none", "stroke-dasharray": "-", "fill-opacity": 0.9});
+ }
+ return [arrow , arrow_beg ,arrow_end ];
+ };
+
+ function gene_zoom( factor , ori ){
+ var bf_box = this.arrow.getBBox();
+ this.arrow.scale( factor, 1 , ori ,Y_genome );
+ var af_box = this.arrow.getBBox();
+ this.popup.translate( (af_box.x+(af_box.width/2 )) - (bf_box.x+(bf_box.width /2 )) , 0);
+ };
+ function gene_translate( dx , dy ){
+ var bf_box = this.arrow.getBBox(false);
+ this.arrow.translate( dx , dy );
+ var af_box = this.arrow.getBBox(false);
+ this.popup.translate((af_box.x + (af_box.width /2 )) - (bf_box.x + (bf_box.width /2 )) , (af_box.y-bf_box.y));
+ };
+ function gene_show(){
+ this.popup.show();
+ };
+ function gene_hide(){
+ this.popup.hide();
+ };
+
+ Raphael.fn.control = function( x , y , genes , genome ){
+ var west= this.path( ["M", x-40, y]+ "l20 -12 a70, 40 0 0,0 0, 24z").attr({fill:"blue"});//West
+ west.mousedown( function(){
+ for(var i = 0 ;i<genes.length ; i++){ genes[i].translate( -50 , 0); }
+ genome.translate( -50 , 0);
+ });
+ var east = this.path( ["M", x+40, y]+ "l-20 -12 a70, 40 0 0,1 0, 24z").attr({fill:"blue"});//East
+ east.mousedown( function(){
+ for(var i=0;i<genes.length; i++){ genes[i].translate(+50, 0);}
+ genome.translate(+50, 0);
+ });
+ this.circle( x , y , 20).attr({stroke:"black", "stroke-width": 2});
+ var genome_box= genome.getBBox();
+ var Xori_scale= genome_box.x+genome_box.width /2 ;
+ var zoom_in = this.set();
+ zoom_in.push(this.circle( x , y+9 , 8).attr({fill:"blue"}));//plus
+ zoom_in.push(this.rect( x-4 , y+7.5 , 8 ,3 ).attr({fill:"white", stroke:"white"}));//plus
+ zoom_in.push(this.rect( x-1.5 , y+5 , 3 ,8 ).attr({fill:"white", stroke:"white" }));//plus
+ zoom_in.mousedown( function(){
+ for(var i= 0 ;i<genes.length ; i++){
+ var g= genes[i] ;
+ genes[i].zoom(1.25 , Xori_scale);
+ }
+ genome.scale(1.25 ,1,Xori_scale ,Y_genome )
+ });
- function zoom( factor , ori ){
- var bf_box = this.arrow.getBBox();
- this.arrow.scale( factor, 1 , ori ,Y_genome );
- var af_box = this.arrow.getBBox();
- this.popup.translate( (af_box.x + (af_box.width /2 )) - (bf_box.x + (bf_box.width /2 )) , 0);
- };
- function translate( dx , dy ){
- var bf_box = this.arrow.getBBox(false);
- this.arrow.translate( dx , dy );
- var af_box = this.arrow.getBBox(false);
- this.popup.translate( (af_box.x + (af_box.width /2 )) - (bf_box.x + (bf_box.width /2 )) , (af_box.y-bf_box.y));
- };
- function show(){
- this.popup.show();
- };
- function hide(){
- this.popup.hide();
- };
-
- Raphael.fn.control = function( x , y , genes , genome ){
- this.circle( x , y , 42).attr({ fill:"white" ,"fill-opacity": 0.75 });
- north = this.path( ["M", x, y-40 ]+ "l12 20 a40, 70 0 0,0 -24, 0z").attr({fill:"blue"});//North
- north.mousedown( function(){
- for(var i = 0 ;i<genes.length ; i++){ genes[i].translate( 0 , -20);}
- genome.translate( 0 , -20);
- });
- var west= this.path( ["M", x-40, y]+ "l20 -12 a70, 40 0 0,0 0, 24z").attr({fill:"blue"});//West
- west.mousedown( function(){
- for(var i = 0 ;i<genes.length ; i++){ genes[i].translate( -50 , 0); }
- genome.translate( -50 , 0);
- });
- var south = this.path( ["M", x, y+40]+ "l12 -20 a40, 70 0 0,1 -24, 0z").attr({fill:"blue"});//South
- south.mousedown( function(){
- for(var i = 0 ;i<genes.length ; i++){ genes[i].translate( 0 , +20);}
- genome.translate( 0 , +20);
- });
- var east = this.path( ["M", x+40, y]+ "l-20 -12 a70, 40 0 0,1 0, 24z").attr({fill:"blue"});//East
- east.mousedown( function(){
- for(var i = 0 ;i<genes.length ; i++){ genes[i].translate( +50 , 0);}
- genome.translate( +50 , 0);
- });
- this.circle( x , y , 20).attr({stroke:"black", "stroke-width": 2});
- var genome_box = genome.getBBox();
- var Xori_scale = genome_box.x + genome_box.width /2 ;
-
- var zoom_in = this.set();
- zoom_in.push( this.circle( x , y+9 , 8).attr({fill:"blue"}));//plus
- zoom_in.push(this.rect( x-4 , y+7.5 , 8 ,3 ).attr({fill:"white", stroke:"white"}));//plus
- zoom_in.push(this.rect( x-1.5 , y+5 , 3 ,8 ).attr({fill:"white", stroke:"white" }));
- zoom_in.mousedown( function(){
- for(var i = 0 ;i<genes.length ; i++){
- var g = genes[i] ;
- genes[i].zoom(1.25 , Xori_scale); }
- genome.scale( 1.25 ,1,Xori_scale ,Y_genome )
- });
-
- var zoom_out = this.set();
- zoom_out.push(this.circle( x , y-9 , 8).attr({fill:"blue"}));//moins
- zoom_out.push(this.rect( x-4 , y-10.5 , 8 ,3 ).attr({fill:"white", stroke:"white"}));//moins
- zoom_out.mousedown( function(){
- for(var i = 0 ;i<genes.length ; i++){ genes[i].zoom( 0.8 , Xori_scale); }
- genome.scale( 0.8 ,1,Xori_scale ,Y_genome );
- })
- };
- var paper = Raphael("genes_schema", paper_l, paper_h );
- var genome = paper.draw_genome();
- var genes = new Array();
- for(var i = 0 ;i<doc.genes.length ; i++){
- var g = new Gene( doc.genes[i] ) ;
- genes.push(g);
- };
- var genome_box = genome.getBBox();
- var Xori_scale = genome_box.x + genome_box.width /2 ;
- for(var i = 0 ;i<doc.genes.length ; i++){
- for(var i = 0 ;i<genes.length ; i++){ genes[i].zoom( 1.01 , Xori_scale); }
- };
- ctr = paper.control( 50 , paper_h-50 , genes , genome );
-
- },
+ var zoom_out = this.set();
+ zoom_out.push(this.circle( x , y-9 , 8).attr({fill:"blue"}));//moins
+ zoom_out.push(this.rect( x-4 , y-10.5 , 8 ,3 ).attr({fill:"white", stroke:"white"}));//moins
+ zoom_out.mousedown( function(){
+ for(var i = 0 ;i<genes.length ; i++){
+ genes[i].zoom( 0.8 , Xori_scale);
+ }
+ genome.scale( 0.8 ,1,Xori_scale ,Y_genome );
+ });
+ };
+
+ var paper = Raphael("genes_schema", paper_w, paper_h );
+ var background = paper.rect( 0 , 0 , paper_w , paper_h).attr( {stroke:"none", fill:"white"});//pour recevoir les evts
+ var genesNgenome= paper.set();
+ var genome= paper.draw_genome();//bar grise
+ genesNgenome.push( genome );
+ var genes = new Array();
+ for(var i = 0 ;i<doc.genes.length ; i++){
+ var g = new Gene( doc.genes[i] ) ;//fleche+popup
+ genes.push(g);
+ genesNgenome.push(g.arrow , g.popup);
+ };
+ var genome_box = genome.getBBox();
+ var Xori4scale = genome_box.x + genome_box.width /2 ;
+ for(var i = 0 ;i<doc.genes.length ; i++){
+ for(var i = 0 ;i<genes.length ; i++){ genes[i].zoom( 1.01 , Xori4scale); }
+ };
+ ctrl_panel = paper.control( 50 , paper_h-30 , genes , genome );
+ var curr_paper_width = $("#genes_schema").width();
+
+ $(window).bind("resize" , function(Evt){
+ console.log( "resize");
+ var gs = $("#genes_schema")
+ var new_width = gs.width();
+ paper.setSize( gs.width() , paper_h);
+ var scale_factor = (new_width -2* genome_offset)/(curr_paper_width -2* genome_offset);
+ var Xori4scale = genome_offset;
+ genome.scale( scale_factor, 1 , Xori4scale ,Y_genome );
+ for(var i= 0 ;i<genes.length ; i++){ genes[i].zoom( scale_factor , Xori4scale); }
+ background.scale( scale_factor,1,0,0 );
+ curr_paper_width= new_width;
+ });
+
+ var intOverallDelta= 0 ;
+ $("#genes_schema").mousewheel(function(objEvent, intDelta){
+ objEvent.stopImmediatePropagation();
+ var x = objEvent.pageX;
+ if (intDelta > 0){
+ intOverallDelta++;
+ genome.scale( 1.25, 1 , objEvent.pageX ,Y_genome );
+ for(var i = 0 ;i<genes.length ; i++){ genes[i].zoom( 1.25 , objEvent.pageX); }
+ }
+ else if (intDelta < 0){
+ intOverallDelta--;
+ genome.scale( 0.8, 1 , objEvent.pageX ,Y_genome );
+ for(var i=0 ;i<genes.length ; i++){ genes[i].zoom( 0.8 , objEvent.pageX); }
+ }
+ return false;//prevent to scroll the window
+ });
+
+ var drag_mousedown= function(x ,y,event) {
+ this.ox = event.screenX;
+ this.oy = event.screenY;
+ this.attr({
+ opacity: .5
+ });
+ };
+
+ var drag_mousemove= function(dx, dy,x ,y ,event) {
+ for(var i = 0 ;i<genes.length ; i++){ genes[i].translate(event.screenX - this.ox , 0); }
+ genome.translate( event.screenX - this.ox, 0);
+ this.ox = event.screenX;
+ this.oy = event.screenY;
+ };
+
+ var drag_mouseup= function(x,y,event){
+ dragging = false;
+ this.attr({
+ opacity: 1
+ });
+ };
+
+ genesNgenome.drag( drag_mousemove, drag_mousedown, drag_mouseup, genesNgenome, genesNgenome, genesNgenome );
+ background.drag( drag_mousemove, drag_mousedown, drag_mouseup, genesNgenome, genesNgenome, genesNgenome );
+
+
+ $("#genes_schema").bind("mousedown" , function( evt ){
+ $(this).toggleClass( "grabbing" ).toggleClass( "grabbable" );
+ });
+ $("#genes_schema").bind("mouseup" , function(){
+ $(this).toggleClass( "grabbable" ).toggleClass( "grabbing" );
+ });
+ },
error: function(status) { console.log(status); }
});
};
-
$(document).ready( getdoc( "{{code}}"));
</script>
</head>
@@ -180,8 +243,7 @@
<li>taxonomy: {{taxonomy}}</li>
<li>type: {{type}}</li> {{/replicon}}
</ul>
- <div id="genes_schema"></div>
- <p id="test"></p>
+ <div id="genes_schema" class="grabbable"></div>
<h3>Genes</h3>
<table>
<thead>
--
GitLab