JSFiddle - React, Tailwind, and code Playground

by veloper

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="https://raw.github.com/weepy/jquery.path/master/jquery.path.js"></script>
<div class="diagram rel">
    <div class="degrees"></div>
    <div class="figure abs">
        <ul class="knobs abs">
            <li class="knob abs"><span>1</span></li>
            <li class="knob abs"><span>2</span></li>
            <li class="knob abs"><span>3</span></li>
            <li class="knob abs"><span>4</span></li>
            <li class="knob abs"><span>5</span></li>
            <li class="knob abs"><span>6</span></li>
            <li class="knob abs"><span>7</span></li>
            <li class="knob abs"><span>8</span></li>
        </ul>        
    </div>
    <div class="look_at"></div>
</div>

CSS

.abs {position:absolute}
.rel {position:relatvie}
.degrees {
  top:0;
  right:0;
}
.look_at {
    position:absolute;
    top:50%;
    left:50%;
    width:1px;
    height:1px;
    background-color:black;
}
.diagram {
    position:relative;
    margin:10px;
    width:500px;
    height:500px;
    border:1px solid green;
    overflow:hidden;
}

.figure {
    width:150px;
    height:150px;
    top:200px;
    left:220px;
    background-color:lightgray;
    border-radius:1000px;
}

.knobs {
    margin:0;
    padding:0;
    background-color:white;
    border-radius:25px;
    display:block;
    /* center of element :) */
    top:50%;
    left:50%;
    margin:0;
    width:26px;
    height:26px;
}

.knob {
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 20px;
    background-color:lightgray;
    color:white;
    padding:0;
}
.knob span {
    position:relative;
    top:4px;
    left:9px
}

JavaScript

var Plotter = function(items, options) {
    this._items = items;
    this._options = options;
    
    this._radius = 0;
    this._radius_padding = 0;
    this._item_spacing = 0;
    this._start_degree = 0;
    this._orient_degree = 0;
    this._placement_direction = 1;
    this._degree_offset = 90;
    
    this.placeItems = function() {
        var self = this;
        $(this._items).each(function(i){
            var item = $(this);
            var xy   = self.getXYForIndex(i);
            item.css({ left:xy[0] + "px", top:xy[1] + "px"});            
        });
    };
        
    this.getDegreesBetweenPoints = function(p1_x, p1_y, p2_x, p2_y){
        delta_y = p2_y - p1_y;
        delta_x = p2_x - p1_x;
        angle_in_degrees = Math.atan2(delta_y, delta_x) * 180 / Math.PI;
        adjusted = angle_in_degrees + this._degree_offset;
        return adjusted;
    };    
        
    this.orientItmesTo = function(p2_x, p2_y) {
        var items_radians = this.getRadiansOfAllItems();
        var items_degrees = this.getDegreesFromRadians(items_radians);
        
        var parent        = this._items.first().offsetParent();
        var parent_offset = parent.offset();
        var p1_x          = parent_offset.left + parent.width() / 2;
        var p1_y          = parent_offset.top + parent.height() / 2;
        
        var angle_in_degrees = this.getDegreesBetweenPoints(p1_x, p1_y, p2_x, p2_y);
        var offset_degress = items_degrees / 2       
        
        
        this.setStartDegree(angle_in_degrees + offset_degress );
        this.placeItems();
        
        $('.degrees').html(angle_in_degrees + " --- " + offset_degress);
    };    
            
    this.getXYForIndex = function(i) {
        var theta  = this.getTheta() * this._placement_direction * i;
        var radius = this._radius + this._radius_padding;
        var radians = this.getRadiansFromDegrees(this._start_degree);
        var offset =...