script.js

//#g General
const 
doc = document.documentElement,
canvas = document.querySelector('#workspace'),
context = canvas.getContext('2d'),
workspace = {
    x:0,
    y:0,
    scale:1
},
settings = {
    scrollSens:10,
},
drawSettings = {
    color:'purple',
    lineWidth:3,
    lineJoin:'miter',   // miter, bevel, round
},
obj = [],
PI = Math.PI / 180;
var angle = 0,
mouse = {x:0,y:0};

new ResizeObserver(function(){
    canvas.height = canvas.clientHeight;
    canvas.width = canvas.height * (canvas.clientWidth / canvas.clientHeight);
    draw();
}).observe(canvas);


//#o triangles
t = new magic_circle(200,200)
t.inheritance = 'inherited'

// outer ring
a = new shape(100,3,0,5)
new shape(100,3,60,5).fillStyle = -1
new shape(85,3,60,5)

//#o triangle precision
new magic_circle(200,500)
new arc(100)
// // center
new shape(10,3)
new shape(100,2)
new shape(100,2,90)
// first leg
new offset('xy',100,100,5)
new shape(25,3,0,-5)
// second leg
new offset('xy','reset',0,5,0)
new shape(25,3,0,-5)
// third leg
new offset('xy',100,'reset',5,0)
new shape(25,3,0,-5)

//#o planets
new magic_circle(200,800);
// paths
new arc([70,20],0,360,0,5)
new arc([100,30],0,360,0,7)
// ring 1
new offset('xy',70,20,1,5)
new arc(6)
obj.lastChild.fillStyle = -1
new arc(3).lineWidth = 0
obj.lastChild.fillStyle = 1

// ring 2
new offset('reset');
new offset('xy',100,30,2,7)
new arc(10)
obj.lastChild.fillStyle = -1
new arc(6).lineWidth = 0
obj.lastChild.fillStyle = 1

// sun
new offset('reset');
new arc(15)
obj.lastChild.fillStyle = 1

// #o rad test
new magic_circle(200,1100);
new arc([100,50])
new offset('rad',[100,50],0,1);
new arc(10).fillStyle = 1

new magic_circle(200,1220);
new arc([100,50],0,360,0,10)
new offset('rad',[100,50],1,1,10);
new arc(10).fillStyle = 1

new magic_circle(200,1400);
new arc(114,0,360,0,10)
new offset('rad',[100,50],1,120,360,'circular');
new arc(10).fillStyle = 1


//#c draw
draw.pause = 0
setInterval(draw,30);
function draw() {
    //#o Setup
    context.resetTransform();
    context.translate(workspace.x,workspace.y);
    context.scale(workspace.scale,workspace.scale);
    context.clearRect(-workspace.x / workspace.scale,-workspace.y / workspace.scale,doc.clientWidth / workspace.scale,doc.clientHeight / workspace.scale);
    //#o update
    !draw.pause && (angle = ++angle % 360);
    for (var i = 0; i < obj.length; i++){
        obj[i].draw();
    }
}

//#y Translations
canvas.addEventListener('mousedown', e => {
    if (e.button !== 0) return; //#r MAY CAUSE ISSUES, NEVER TESTED... return to block if error occurs
    addEventListener('mousemove', move);
    addEventListener('mouseup', stop);
    let mp = [];
    while (mp.length < 2) {mp.push([e.clientX,e.clientY]);}
    function move(e) {
        mp.shift();
        mp.push([e.clientX,e.clientY]);
        // console.log(mouse);
        // mouse bounding
        for (var i = 0; i < 2; i++){
            const dim = canvas['client' + ['Width','Height'][i]];
            mp[1][i] < 0 && (mp[1][i] = 0);
            mp[1][i] > dim && (mp[1][i] = dim);
        }

        workspace.x += mp[1][0] - mp[0][0];
        workspace.y += mp[1][1] - mp[0][1];

        mouse = {x:mp[1][0],y:mp[1][1]}
    }
    function stop() {
        mouse.x = undefined;
        mouse.y = undefined;
        removeEventListener('mousemove',move);
        removeEventListener('mouseup',stop);
    }
})

canvas.addEventListener('wheel', e => {
    if (e.ctrlKey){
        e.preventDefault();
    }
    const dir = -e.deltaY / Math.abs(e.deltaY) || 0
    // old/new scales
    const old = workspace.scale; 
    workspace.scale += dir * workspace.scale / (100 / settings.scrollSens);
    // Bind scale
    workspace.scale > 20 && (workspace.scale = 20);
    workspace.scale < 1/10 && (workspace.scale = 1/10);
    // Which pos?
    let x = mouse.x || e.clientX;
    let y = mouse.y || e.clientY;
    // reposition workspace
    workspace.x -= (x - workspace.x) / old * (workspace.scale - old);
    workspace.y -= (y - workspace.y) / old * (workspace.scale - old);
}, {passive:false})