JSFiddle - React, Tailwind, and code Playground

by xerxesnoble

HTML

<div id="mapContainer">
    
        <div id="map">
            <div class="hrule"></div>
            <div class="vrule"></div>
        </div>
    
    <div id="feature"></div>                            
    <div id="origin"></div>
</div>
<label>Rotation</label>
<br>
<input id="rotation" type="range" min="0" max="360" value="0">
<br>
<label>Scale</label>
<br>
<input id="scale" type="range" min="0" max="200" value="100">
<br>
<label>Origin point X</label>
<br>
<input id="originX" type="range" min="0" max="300" value="100">
<br>
<label>Origin point Y</label>
<br>
<input id="originY" type="range" min="0" max="300" value="100">
    
    
<pre id="output"></pre>

CSS

body {
    font-family: courier;
    font-size: 12px;
    padding: 2rem;
}
#mapContainer {
    width: 400px;
    height: 400px;
    border: 1px solid #222;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}
#feature {
    width: 10px;
    height: 10px;
    background-color: #ff0000;
    position: absolute;
    left: 0;
    top: 0;
}

#origin {
    width: 10px;
    height: 10px;
    background-color: #00f040;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius:10px;
}

#map {
    width: 300px;
    height: 300px;
    background-color: #eaeaea;
    position: absolute;
    left: 0;
    top: 0;
}

.hrule {
    position: absolute;
    top: 150px;
    width: 100%;
    height: 1px;
    border-top: 1px solid #aaa;
}

.vrule {
    position: absolute;
    left: 150px;
    height: 100%;
    width: 1px;
    border-left: 1px solid #aaa;
}

JavaScript

outputElement = document.getElementById('output');

originXInt = 95;
originYInt = 95;

_originX = 95;
_originY = 95;


//Scale and rotation controls
rotationElement = document.getElementById('rotation');
rotationElement.oninput = function () {
    rotation = parseInt(rotationElement.value, 10);
};
scaleElement = document.getElementById('scale');
scaleElement.oninput = function () {
    scale = parseInt(scaleElement.value, 10) / 100;
};

//Origin point controls
originXElement = document.getElementById('originX');
originXElement.oninput = function () {
    _originX = parseInt(originXElement.value, 10);
};
originYElement = document.getElementById('originY');
originYElement.oninput = function () {
    _originY = parseInt(originYElement.value, 10);
};


feature = {
    x: 20,
    y: 20,
    width: 10,
    height: 10,
    el: document.getElementById('feature')
};

map = {
    x: 50,
    y: 30,
    width: 300,
    height: 300,
    el: document.getElementById('map')
};

origin = {
    x: originXInt,
    y: originYInt,
    width: 10,
    height: 10,
    el: document.getElementById('origin')
};


rotation = 0;
scale = 1;



// Logic for correcting the coordinates of a point accounting for scale and rotation
adjustedTransform = function (_x, _y) {    
    var x = _x + map.x;
    var y = _y + map.y;
    
    var originValue = {
        x: originXInt,
        y: originYInt
    }
    
    var differenceFromOrigin = {
        x: x - originValue.x,
        y: y - originValue.y
    };
    
    var differenceFromOriginAtScale = {
        x: differenceFromOrigin.x * scale,
        y: differenceFromOrigin.y * scale
    };
    
    var rotatedPoint = {};
    var angle = rotation * Math.PI / 180.0;
    rotatedPoint.x = Math.cos(angle) * (differenceFromOriginAtScale.x) - Math.sin(angle) * (differenceFromOriginAtScale.y) + (originValue.x);
    rotatedPoint.y = Math.sin(angle) * (differenceFromOriginAtScale.x) + Math.cos(angle) * (differenceFromOriginAtScale.y) + (originValue.y);
    x =...