var center = document.querySelector("#center"),

    dynamic = document.querySelector("#dynamic"),

    path = document.querySelector("#deg"),

    svg = document.querySelector("svg"),

    txt = document.querySelector("#txt"),

    svgNS = svg.namespaceURI,

    degree = String.fromCharCode(176),

    arrows = String.fromCharCode(845);

​

function Point(x, y) {

    return {

        "X": x,

        "Y": y

    };

}

​

// Credits goes to Stackoverflow: http://stackoverflow.com/a/14413632

function getAngleFromPoint(point, centerPoint) {

    var dy = (point.Y - centerPoint.Y),

        dx = (point.X - centerPoint.X);

    var theta = Math.atan2(dy, dx);

    var angle = (((theta * 180) / Math.PI)) % 360;

    angle = (angle < 0) ? 360 + angle : angle;

    return angle;

}

// Credits goes to http://snipplr.com/view/47207/

function getDistance(point1, point2) {

    var xs = 0;

    var ys = 0;

​

    xs = point2.X - point1.X;

    xs = xs * xs;

​

    ys = point2.Y - point1.Y;

    ys = ys * ys;

​

    return Math.sqrt(xs + ys);

}

​

function fitSVG() {

    var width = window.innerWidth,

        height = window.innerHeight;

    svg.setAttribute("width", width);

    svg.setAttribute("height", height);

}

​

svg.onmousemove = function (e) {

    var centerPoint = new Point(center.getAttribute("cx"), center.getAttribute("cy"));

    var point = new Point(e.clientX, e.clientY);

    var angle = Math.round(100 * getAngleFromPoint(point, centerPoint)) / 100;

    var distance = Math.round(getDistance(point, centerPoint));

    var d = "M " + centerPoint.X + " " + centerPoint.Y + " L " + point.X + " " + point.Y;

    path.setAttribute("d", d);

    txt.setAttribute("x", point.X);

    txt.setAttribute("y", point.Y);

    txt.textContent = distance + arrows + " (" + angle + degree + ")";

    txt.setAttribute("transform", "rotate(" + angle + " " + point.X + " " + point.Y + ")");

​

    dynamic.setAttribute("r", distance);

    fitSVG();

}

​

​

​

​

​

//

grid_size = 10;

​

$(" .ang")

    .draggable({

        grid: [grid_size, grid_size]

    })

​

.on("mouseover", function () {

    $(this).addClass("move-cursor")

})

​

.on("mousedown", function () {

    $(this)

        .removeClass("move-cursor")

        .addClass("grab-cursor")

        .addClass("opac");

​

    $(" .text ").hide();

​

})

​

.on("mouseup", function () {

    $(this)

        .removeClass("grab-cursor")

        .removeClass("opac")

        .addClass("move-cursor");

});

​