| $('.line').hover(function () { |
| var $t = $(this); |
| var $i = $('#' + $t.data('id')); |
| let type = $t.attr('class').split(' ')[0]; |
|
|
| var ot = { |
| x: $t.offset().left + $t.width() / 2, |
| y: $t.offset().top + $t.height() / 2 |
| }; |
| var oi = { |
| x: $i.offset().left + $i.width() / 2, |
| y: $i.offset().top + $i.height() / 2 |
| }; |
|
|
| |
| |
| var p = { |
| x: ot.x < oi.x ? ot.x : oi.x, |
| x1: ot.x > oi.x ? ot.x : oi.x, |
| y: ot.y < oi.y ? ot.y : oi.y, |
| y1: ot.y > oi.y ? ot.y : oi.y |
| }; |
| |
| var c = $('<canvas/>').attr({ |
| 'width': p.x1 - p.x + 1, |
| 'height': p.y1 - p.y + 1 |
| }).css({ |
| 'position': 'absolute', |
| 'left': p.x, |
| 'top': p.y, |
| 'z-index': 1, |
| 'opacity':0.65 |
| }).appendTo($('body'))[0].getContext('2d'); |
|
|
| |
| if (type === "insertion"){ |
| color = "#4169E1" |
| }if (type === "delSubts"){ |
| color= "#D2122E" |
| }if(type==="exact-match"){ |
| color="#3CB371" |
| } |
| c.strokeStyle = color; |
| c.lineCap = "round"; |
| |
| c.lineWidth = 5; |
| c.beginPath(); |
| c.moveTo(ot.x - p.x, ot.y - p.y); |
| c.lineTo(oi.x - p.x, oi.y - p.y); |
| c.stroke(); |
| $($i).addClass('char') |
| $($t).addClass('char') |
|
|
| }, function () { |
| $('canvas').remove(); |
| $(".char").removeClass("char") |
| }); |
