JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-10 col-lg-10 col-sm-10">
      <div class="img">
        <svg class="ang" width="100%" height="500">
          <path d="M1000,300 L800,300" class="deg45" transform="rotate(0 300 300)"></path>
          <text text-anchor="left" x="850" y="300" style="font-size: 15pt;" transform="rotate(0 300 300)">0 degrees</text>
          <circle cx="900" cy="300" id="center" r="2" />
          <circle cx="900" cy="300" id="dynamic" r="2" fill="none" />
          <path id="deg" d="M300,300 L900,300" stroke="#000" stroke-width="1px" />
          <text text-anchor="left" x="0" y="100" id="txt" style="font-size: 20pt;" transform="rotate(45 100 100)"></text>
        </svg>
      </div>
    </div>
  </div>
  <div class="data-report">
    <ul>
      <li>
        <label>Mouse:</label><span id="mouse"></span>
      </li>
      <li>
        <label>SVG:</label><span id="svgPos"></span>
      </li>
      <li>
        <label>Offset:</label><span id="offset"></span>
      </li>
      <li>
        <label>CenterPoint:</label><span id="centerPoint"></span>
      </li>
      <li>
        <label>Point:</label><span id="point"></span>
      </li>
      <li>
        <label>Path:</label><span id="path"></span>
      </li>
      <li>
        <label>Angle:</label><span id="angle"></span>
      </li>
      <li>
        <label>Distance:</label><span id="distance"></span>
      </li>
    </ul>
    <span class="line left" style="left: 200px">X200</span>
    <span class="line left" style="left: 400px">X400</span>
    <span class="line left" style="left: 600px;">X600</span>
    <span class="line left" style="left: 800px;">X800</span>
    <span class="line left" style="left:...

CSS

body {
  margin: 0;
  padding: 0;
}


/*DROG-IN-DROP*/

.img {
  border: 1px dashed #ddf;
}

.opac {
  opacity: .8;
}

.ang:hover {
  cursor: move;
}

.grab-cursor {
  cursor: grab;
  cursor: -webkit-grab;
}

circle,
text {
  fill: yellow;
  cursor: pointer;
  font-family: monospace;
}

#dynamic {
  fill: none;
  stroke: red;
}

path {
  stroke: red;
}

.deg45 {
  stroke: red;
  stroke-width: 2px;
}

.container {
  position: relative;
}

.data-report {
  font-family: Arial, sans-serif;
  font-size: 12px;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 3px;
}

.data-report ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.data-report ul li label {
  display: inline-block;
  width: 75px;
}

.line {
  position: absolute;
  border: 0 dotted #ddd;
  z-index: -100;
}

.line.left {
  border-left-width: 1px;
  top: 0;
  height: 1000px;
}

.line.top {
  border-top-width: 1px;
  left: 0;
  width: 1200px;
}

JavaScript

$(function() {
  var center = $("#center"),
    dynamic = $("#dynamic"),
    path = $("#deg"),
    svg = $("svg"),
    txt = $("#txt"),
    svgNS = svg[0].namespaceURI,
    degree = String.fromCharCode(176),
    arrows = String.fromCharCode(845),
    follow = true,
    startPos,
    endPos,
    offset = {
      X: 0,
      Y: 0
    };

  function Point(x, y) {
    return {
      "X": x,
      "Y": y
    };
  }

  function getCenter(target) {
    var b, x, y, w, h, cx, cy;
    b = target[0].getBoundingClientRect();
    console.log(target, b);
    x = b.x;
    y = b.y;
    w = b.width;
    h = b.height;
    cx = x + (w / 2);
    cy = y + (h / 2);
    console.log(x, y, w, h, cx, cy);
    return {
      X: cx,
      Y: cy
    };
  }

  // 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.width(width);
    svg.height(height);
  }

  function updateSVG(e) {
    if (follow) {
      //var centerPoint = new Point(center[0].getAttribute("cx"), center[0].getAttribute("cy"));
      var centerPoint = getCenter(center);
      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 od = {
        p: {
          X: point.X - offset.X,
          Y: point.Y - offset.Y
        },
       ...