ray two - drag and resize

??????

by dirtyd77

HTML

<button id='rayTwo'>ray two</button>

CSS

svg{
    border: solid 1px black;    
}

.rayTwo {
  fill: none;
  stroke: gold;
  stroke-width: 5px;
}

JavaScript

var w = 500, h = 500;

var svg = d3.select('body').append('svg').attr({'width': w, 'height': h});

d3.select('#rayTwo').on('click', function(){ new RayTwo(); });

function RayTwo() {
    var self = this;
    var m, m1, m2, rayTwo, isDown = false, isDragging = false, click = 1, pathArray = [], pathArray1 = [],
        x1, y1, x2, y2, slope, isLeft;
    
    var lineFunction = d3.svg.line()
                        .x(function(d) { return d.x; })
                        .y(function(d) { return d.y; })
                        .interpolate("linear");
    
    svg.on('mousedown', function() {
        isDown = !isDown;
        m1 = d3.mouse(this);
        self.pathArray = [{ x: m1[0], y: m1[1] }];
        if(!isDragging) {
            if(click == 1){ 
                self.rayElement = d3.select('svg').append('path').attr({'class': 'rayTwo'}).call(dragP);
                updatePath();                
                updatePoint1();
            } else if(click == 2){
                updatePoint2();
            }
        } else {
            isDragging = true;
        }
        click++;
    })
    
    .on('mousemove', function() {
        m2 = d3.mouse(this);       
        if (isDown && !isDragging && click == 2) {
            self.pathArray[1] = {x: 0, y: getY(m1[0], m1[1], m2[0], m2[1], true) }, 
            self.pathArray[2] = {x: w, y: getY(m1[0], m1[1], m2[0], m2[1], false)};
            for(var i = 0; i < self.pathArray.length; i++){
                if(self.pathArray[i].y === Number.POSITIVE_INFINITY){
                    self.pathArray[i].x = m2[0];
                    self.pathArray[i].y = 0;
                }
                else if(self.pathArray[i].y === Number.NEGATIVE_INFINITY){
                    self.pathArray[i].x = m2[0];
                    self.pathArray[i].y = h;
                }
            }            
            updatePath();
        }
    });
    
    function updatePath() {
        rayTwo =...