JSFiddle - React, Tailwind, and code Playground

by Rebeca Vascon

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="M 1000 300 L 800 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="M 300 300 L 400 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>
<div class="row">
  <div class='box'></div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}



/*DROG-IN-DROP*/

.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;
}

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;

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

  function updateSVG(e) {
    if (follow) {
      var centerPoint = new Point(center[0].getAttribute("cx"), center[0].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.attr("d", d);
      txt.attr("x", point.X);
      txt.attr("y", point.Y);
      txt.html(distance + arrows + " (" + angle + degree + ")");
      txt.attr("transform", "rotate(" + angle + " " + point.X + " " + point.Y + ")");
      dynamic.attr("r", distance);
    }
    fitSVG();
  }

  grid_size = 10;

  svg
    .mousemove(updateSVG)
    .click(function() {
      follow = !follow;
      return true;
    })
    .draggable({
      classes: {
       ...