$('.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")})