Vector quadrants

by doug65536

HTML

<div id="quadrant_debug"></div>
<img id="mininav" src="http://colorworld.se/videodauti/img/zoneempty.svg"/>
<!--img id="pillar" src="http://colorworld.se/videodauti/img/bigzonepillars.svg"/-->
<img id="pillar" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img id="pillar-mid" src="http://colorworld.se/videodauti/img/zone.svg"/>

CSS

#mininav, #pillar, #pillar-mid {
    position: fixed;
    width: 150px;
    right: 64px;
    bottom: 64px;
    background-color: gray;
}
#mininav {
}
#pillar {
    fill: black;
}
#pillar, #pillar-mid {
    display: none;
    z-index: 1;
    background-color: rgba(0,0,0,0);
}

JavaScript

$(function() {
    "use strict";
    
    function initialize_mininav(callback) {
        var mininav = $('#mininav'),  pillar = $('#pillar'), pillar_mid = $('#pillar-mid');
        $('#mininav, #pillar, #pillar-mid').on('mousemove mouseup', function(ev) {
            var pos = mininav.offset();
            var siz = { w: mininav.width(), h: mininav.height() };
            var ofs = { x: ev.pageX - pos.left - siz.w/2, y: ev.pageY - pos.top -siz.h/2};
            var len = Math.sqrt(ofs.x*ofs.x + ofs.y*ofs.y);
            
            var where;
            if (len <= 33) {
                where = 'mid';
            } else if (len >= 70) {
                where = 'nowhere';
            } else if (ofs.y >= 0) {
                // Might be right, left or bottom
                if (ofs.x >= 0) {
                    // Might be right or bottom
                    where = (Math.abs(ofs.x) < Math.abs(ofs.y)) ? 'bottom' : 'right';
                } else {
                    // Might be left or bottom
                    where = (Math.abs(ofs.x) < Math.abs(ofs.y)) ? 'bottom' : 'left';
                }
            } else {
                // Might be right, left or top
                if (ofs.x >= 0) {
                    // Might be right or top
                    where = (Math.abs(ofs.x) < Math.abs(ofs.y)) ? 'top' : 'right';
                } else {
                    // Might be left or top
                    where = (Math.abs(ofs.x) < Math.abs(ofs.y)) ? 'top' : 'left';
                }
            }
            
            var rotation_lookup = {
                top: 0,
                right: 90,
                bottom: 180,
                left: 270
            };
            
            var pillar_angle = rotation_lookup[where];
            if (where == 'mid') {
                pillar.hide();
                pillar_mid.show();
            } else if (pillar_angle !== undefined) {
                pillar.css({transform: 'rotate(' + pillar_angle + 'deg)'});
     ...