ray one - drag and resize

???????

by dirtyd77

HTML

<button id="rayOne">Ray One</button>

CSS

svg {
    border: solid 1px;
}

.rayOne {
    stroke: green;
    stroke-width: 5px;
    fill: lightgreen;    
}

JavaScript

d3.select('#rayOne').on('click', function(){
  new RayOne();
});

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

function RayOne() {
    var self = this;
    var m, m1, m2, rayOne, pointR1, isDown = false, isDragging = false, click = 1, pathArray = [],
        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() {    
    m1 = d3.mouse(this);
    
    self.pathArray = [ { x: m1[0], y: m1[1] } ];
    if(!isDragging && !isDown) {
        self.rayElement = d3.select('svg').append('path').attr('class', 'rayOne').call(dragP);
        if(click == 1) {                          
            self.pointElement1 = d3.select('svg').append('circle').attr('class', 'pointR').call(dragC);  
            updatePath();  
            updatePoint1();
        }
    } else {
        self.pointElement1 = d3.select('svg').append('circle').attr('class', 'pointR').call(dragC);
        updatePoint2();
        isDragging = true;         
    }
    isDown = !isDown;
    click++;    
})

.on('mousemove', function() {
    m2 = d3.mouse(this);         
    var equalsZero = false, equalsInfinity; 
    if(isDown && !isDragging && click == 2){
        if((m2[0] - m1[0]) > 0) {
            isLeft = false;
            self.pathArray[1] = { x: w, y: getY(m1[0], m1[1], m2[0], m2[1], isLeft) };
        } else if((m2[0] - m1[0]) < 0) {
            isLeft = true;
            self.pathArray[1] = { x: 0, y: getY(m1[0], m1[1], m2[0], m2[1], isLeft) };
        } else if((m2[0] - m1[0]) === 0) {
            equalsZero = true; 
        }    
        
        if(equalsZero) {
            equalsInfinity = true;
            if(m === Number.POSITIVE_INFINITY){
                self.pathArray[1] = { x: m2[0], y: w };
            }
            else if(m === Number.NEGATIVE_INFINITY){
               ...