File size: 1,465 Bytes
92da9af |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
$('.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
};
// x,y = top left corner
// x1,y1 = bottom right corner
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
};
// create canvas between those points
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');
// draw line
if (type === "insertion"){
color = "#4169E1"
}if (type === "delSubts"){
color= "#D2122E"
}if(type==="exact-match"){
color="#3CB371"
}
c.strokeStyle = color;
c.lineCap = "round";
//c.setLineDash([2, 4]);
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")
}); |