resizable line

once a line is drawn, click on either ends point to resize/reposition

by Amanda Williamson

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 600px"></div>

CSS

#container {
    border:1px solid;
}

JavaScript

$(function () {

    var renderer = new Highcharts.Renderer($('#container')[0], 600, 600),
        
        pathArray=[], l, isDown = false, firstClick = true, lineDown, lineMove, anchorX, anchorY;
    
    $('#container').mousedown(function (e) {
        if(!isDown){
            anchorX = e.pageX;
            anchorY = e.pageY;                
            if (firstClick) {
                pathArray = ['M', anchorX, anchorY];
                pathArray.push('L', anchorX, anchorY);
                l = renderer.path(pathArray)
                .attr({
                    'stroke-width': 15,
                    stroke: 'red'
                }).add();
            }                               
        } else {
            var lineDown = false;
                lineMove = true;
            l.on('mousedown', function(e){
                //debugger;                  
                lineDown = true;
                //isDown = false;                   
                e.stopImmediatePropagation();                   
            })
            .on('mousemove', function (e){
                if(lineDown){
                    //console.log('mousemove lineDown = ' + lineDown);
                    pathArray[4] = e.pageX;
                    pathArray[5] = e.pageY;            
                    l.attr('d', pathArray.join(' '));                          
                }
            })
            .on('mouseup', function (e){
                lineDown = false; 
            });
        }        
        firstClick = !firstClick;
        isDown = !isDown;        
    }); 
    $('#container').mousemove(function (e) {
        if (isDown) {
            pathArray[4] = e.pageX;
            pathArray[5] = e.pageY;            
            l.attr('d', pathArray.join(' '));        
        //} else if (lineMove) {
            //console.log('else if');            
            //pathArray[4] = e.pageX;
            //pathArray[5] = e.pageY;            
            //l.attr('d',...