Javscript Files

var modelBtnDiv  = document.getElementById('modelBtnDiv');
var modelOptnDiv = document.getElementById('modelOptnDiv');
var canvas       = document.getElementById('modelCanvas');
var graphics     = canvas.getContext('2d');
canvas.width     = window.innerWidth*0.98;
canvas.height    = window.innerHeight;


var bedroombtn   = document.getElementById('bedroombtn');
var bathroombtn  = document.getElementById('bathroombtn');
var kitchenbtn   = document.getElementById('kitchenbtn');
var diningbtn    = document.getElementById('diningbtn');
var deckbtn      = document.getElementById('deckbtn');
var loungebtn    = document.getElementById('loungebtn');
var garagebtn    = document.getElementById('garagebtn');
var widerbtn     = document.getElementById('widerbtn');
var slimmerbtn   = document.getElementById('slimmerbtn');
var hallwaybtn   = document.getElementById('hallwaybtn');
var removebtn    = document.getElementById('removebtn');


var B1i  = document.createElement("img");
var B2i  = document.createElement("img");
var B3i  = document.createElement("img");
var B4i  = document.createElement("img");
var B5i  = document.createElement("img");
var Be1i = document.createElement("img");
var Be2i = document.createElement("img");
var Be3i = document.createElement("img");
var Be4i = document.createElement("img");
var Be5i = document.createElement("img");
var Be6i = document.createElement("img");
var G1i  = document.createElement("img");
var G2i  = document.createElement("img");
var E1i  = document.createElement("img");
var E2i  = document.createElement("img");
var E3i  = document.createElement("img");
var E4i  = document.createElement("img");
var E5i  = document.createElement("img");
var E6i  = document.createElement("img");
var K1i  = document.createElement("img");
var K2i  = document.createElement("img");
var K3i  = document.createElement("img");
var L1i  = document.createElement("img");
var L2i  = document.createElement("img");
var L3i  = document.createElement("img");
var D1i  = document.createElement("img");
var D2i  = document.createElement("img");


B1i.src  = 'resources/svg/6000x2400_Bathroom & Laundry 1.svg'
B2i.src  = 'resources/svg/6000x2400_Bathroom & Laundry 2.svg'
B3i.src  = 'resources/svg/6000x2400_Bathroom & Laundry 3.svg'
B4i.src  = 'resources/svg/6000x2400_Bathroom 1.svg'
B5i.src  = 'resources/svg/6000x2400_Bathroom 2.svg'
Be1i.src = 'resources/svg/6000x2400_Bedroom Left.svg'
Be2i.src = 'resources/svg/6000x2400_Bedroom Right.svg'
Be3i.src = 'resources/svg/6000x3600_Bedroom Left.svg'
Be4i.src = 'resources/svg/6000x3600_Bedroom Right.svg'
Be5i.src = 'resources/svg/6000x4800_Bedroom & Ensuite Left.svg'
Be6i.src = 'resources/svg/6000x4800_Bedroom & Ensuite Right.svg'
G1i.src  = 'resources/svg/6000x3600_Garage.svg'
G2i.src  = 'resources/svg/6000x7200_Garage.svg'
E1i.src  = 'resources/svg/2400x2000_Entry Link 1.svg'
E2i.src  = 'resources/svg/2400x2000_Entry Link 2.svg'
E3i.src  = 'resources/svg/2400x2000_Entry Link 3.svg'
E4i.src  = 'resources/svg/6000x2600_Covered Entry & Living.svg'
E5i.src  = 'resources/svg/6000x2600_Covered Entry & Living2.svg'
E6i.src  = 'resources/svg/1600x1200_Link.svg'
K1i.src  = 'resources/svg/6000x2400_Kitchen Left.svg'
K2i.src  = 'resources/svg/6000x2400_Kitchen Right.svg'
K3i.src  = 'resources/svg/6000x4800_Kitchen & Dining.svg'
L1i.src  = 'resources/svg/6000x2400_Living.svg'
L2i.src  = 'resources/svg/6000x3600_Living.svg'
L3i.src  = 'resources/svg/6000x4800_Living.svg'
D1i.src  = 'resources/svg/6000x2400_Deck.svg'
D2i.src  = 'resources/svg/6000x2400_Covered Deck.svg'


var B1  = new button(B1i,  'B1',  2.4, 6);
var B2  = new button(B2i,  'B2',  2.4, 6);
var B3  = new button(B3i,  'B3',  2.4, 6);
var B4  = new button(B4i,  'B4',  2.4, 6);
var B5  = new button(B5i,  'B5',  2.4, 6);
var Be1 = new button(Be1i, 'Be1', 2.4, 6);
var Be2 = new button(Be2i, 'Be2', 2.4, 6);
var Be3 = new button(Be3i, 'Be3', 3.6, 6);
var Be4 = new button(Be4i, 'Be4', 3.6, 6);
var Be5 = new button(Be5i, 'Be5', 4.8, 6);
var Be6 = new button(Be6i, 'Be6', 4.8, 6);
var G1  = new button(G1i,  'G1',  3.6, 6);
var G2  = new button(G2i,  'G2',  7.2, 6);
var E1  = new button(E1i,  'E1',  2.4, 2);
var E2  = new button(E2i,  'E2',  2.4, 2);
var E3  = new button(E3i,  'E3',  2.4, 2);
var E4  = new button(E4i,  'E4',  2.6, 6);
var E5  = new button(E5i,  'E5',  2.6, 6);
var E6  = new button(E6i,  'E6',1.2, 1.6);
var K1  = new button(K1i,  'K1',  2.4, 6);
var K2  = new button(K2i,  'K2',  2.4, 6);
var K3  = new button(K3i,  'K3',  4.8, 6);
var L1  = new button(L1i,  'L1',  2.4, 6);
var L2  = new button(L2i,  'L2',  3.6, 6);
var L3  = new button(L3i,  'L3',  4.8, 6);
var D1  = new button(D1i,  'D1',  2.4, 6);
var D2  = new button(D2i,  'D2',  2.4, 6);


modelOptnDiv.width = '600px';


var BButtons  = [B1,B2,B3,B4,B5];
var BeButtons = [Be1,Be2,Be3,Be4,Be5,Be6];
var GButtons  = [G1,G2];
var EButtons  = [E1,E2,E3,E4,E5,E6];
var KButtons  = [K1,K2,K3];
var LButtons  = [L1,L2,L3];
var DButtons  = [D1,D2];


var allButtons = [
    ...BButtons, 
    ...BeButtons, 
    ...GButtons, 
    ...EButtons, 
    ...KButtons, 
    ...LButtons, 
    ...DButtons];


var centerx = canvas.width/2;
var centery = canvas.height/2;
var topz = 10;
var plan = [];
var allRooms = [];
var defaultscale = canvas.height/18;
var scale = defaultscale;
var f = 0;
var fontsize = 25;
const moduleH = 6;
const moduleHeight = 6;
var xstartdrawing = centerx;
graphics.textAlign = 'center';
graphics.font = fontsize+"px Arial";
var previewRoom;
var mxi, myf, mxf, myi;
var chosenRoom;
var activeBtns = [];
var g = 0.2*scale;


canvas.addEventListener('mousedown', e => {
    if(e.button == 0){
        mxi = e.offsetX;
        myi = e.offsetY;
        chosenCheck(mxi, myi);
    }
    if(e.button != 0) {rCheck(e.offsetX, e.offsetY);}
});


canvas.addEventListener('mousemove', e => {    
    if(chosenRoom != undefined){
        mxf = e.offsetX;
        myf = e.offsetY;
        var dx = mxf - mxi;
        var dy = myf - myi;
        chosenRoom.x += dx;
        chosenRoom.y += dy;
        background();
        mxi = mxf;
        myi = myf;
    }
});


canvas.addEventListener('mouseup', e => {
    if(chosenRoom!=undefined && previewRoom===chosenRoom) allRooms.push(chosenRoom)
    chosenRoom = undefined;
    for(var i = 0; i<activeBtns.length; i++){
        var b = activeBtns[i];
        if(overOptn(b,e.offsetX,e.offsetY)){
            previewRoom = new room(b);
            previewRoom.draw();
        }
    }
    snap();
    background();
});

function snap(){
    for(var i = 0; i<allRooms.length; i++){ 
        var r = allRooms[i];
        r.x = round(r.x);
        r.y = round(r.y);
    }
}

function round(a){
    return Math.round(a/g) * g;
    
}


function overOptn(b,x,y){
    var xin = b.x-b.r < x && x < b.x+b.r;
    var yin = b.y-b.r < y && y < b.y+b.r;
    return xin && yin;
}


function chosenCheck(x, y){
    if(previewRoom!=undefined){
        var xa = previewRoom.x;
        var xb = previewRoom.x+previewRoom.w*scale;
        var ya = previewRoom.y;
        var yb = previewRoom.y+previewRoom.h*scale;
        var xin = (x<xb && xa<x)
        var yin = (y<yb && ya<y)
        if(xin && yin) chosenRoom = previewRoom;
    }
    for(var i = 0; i<allRooms.length; i++){ 
        var r = allRooms[i]
        var xa = r.x;
        var xb = r.x+r.w*scale;
        var ya = r.y;
        var yb = r.y+r.h*scale;
        var xin = (x<xb && xa<x)
        var yin = (y<yb && ya<y)
        if(xin && yin) chosenRoom = r;
    }
    
}

function rCheck(x, y){
    var changeCount = 0;
    if(previewRoom != undefined){
        var xa = previewRoom.x;
        var xb = previewRoom.x+previewRoom.w*scale;
        var ya = previewRoom.y;
        var yb = previewRoom.y+previewRoom.h*scale;
        var xin = (x<xb && xa<x)
        var yin = (y<yb && ya<y)
        if(xin && yin) {previewRoom.rot(); changeCount++;}
    }
    
    if(changeCount<1){
        for(var i = 0; i<allRooms.length; i++){ 
            var r = allRooms[i];
            var xa = r.x;
            var xb = r.x+r.w*scale;
            var ya = r.y;
            var yb = r.y+r.h*scale;
            var xin = (x<xb && xa<x)
            var yin = (y<yb && ya<y)
            if(xin && yin) r.rot();
        }
    }
}


bedroombtn.onclick  = function(){ btnclick('bedroom')  };
bathroombtn.onclick = function(){ btnclick('bathroom') };
kitchenbtn.onclick  = function(){ btnclick('kitchen')  };
diningbtn.onclick   = function(){ btnclick('entry')    };
deckbtn.onclick     = function(){ btnclick('deck')     };
loungebtn.onclick   = function(){ btnclick('lounge')   };
garagebtn.onclick   = function(){ btnclick('garage')   };


function btnclick(s){
     switch(s){
        case 'bedroom' :  activate(BeButtons);  break;
        case 'bathroom':  activate(BButtons);   break;
        case 'kitchen' :  activate(KButtons);   break;
        case 'entry'   :  activate(EButtons);   break;
        case 'deck'    :  activate(DButtons);   break;
        case 'lounge'  :  activate(LButtons);   break;
        case 'garage'  :  activate(GButtons);   break;
    }
    
    //previewRoom.y = 100;
    //previewRoom.x = canvas.width - 230 - previewRoom.w*scale/2;
    //background();
}


function activate(a){activeBtns = a; background();}

function displayBtns(){
    for(var i = activeBtns.length-1; i>=0; i--){ 
    var aa = activeBtns[i];
    aa.x = canvas.width - 48 - 73*(activeBtns.length-1-i);
    aa.y = 118;
    aa.draw();}
}

function first(){
    var r = (f==0);
    f++;
    return r;
}

function rect(a,b,c,d){
    graphics.fillStyle = 'white';
    graphics.fillRect(a,b,c*scale,d*scale);
    graphics.strokeStyle = 'black';
    graphics.strokeRect(a,b,c*scale,d*scale);
    graphics.fillStyle = 'black';
}

function rectO(a,b,c,d){
    graphics.strokeStyle = 'black';
    graphics.strokeRect(a,b,c*scale,d*scale);
}

function rectO2(a,b,c,d){
    graphics.strokeStyle = 'black';
    graphics.strokeRect(a,b,c,d);
}

function room(b){
    this.w = b.w;
    this.h = b.h;
    this.x = canvas.width - 230 - this.w*scale/2;;
    this.y = 200;
    this.img = b.img;
    this.r = 0;
    this.draw = function(){
        drawImage2(this.img, this.x, this.y, this.w*scale, this.h*scale, this.r); 
        //rectO(this.x, this.y, this.w, this.h);
    }
    this.rot = function(){
        this.r += Math.PI/2;
        if(this.r >= 2*Math.PI){this.r = 0;}
        var pw = this.w;
        var ph = this.h;
        var px = this.x;
        var py = this.y;
        this.w = ph;
        this.h = pw;
        this.y = py + ph*scale/2 - pw*scale/2;
        this.x = px + pw*scale/2 - ph*scale/2;
    }
}

function button(i,s,w,h){
    this.x = 0;
    this.y = 0;
    this.w = w;
    this.h = h;
    this.r = 31;
    //this.name = 'resources/svg/'+n+'.svg';
    this.img = i;
    this.symbol = s;
    this.draw = function(){
        circG(this.x, this.y, this.r);
        textG(this.x, this.y+8, this.symbol);
    }
}

function text(x,y,t){
    graphics.fillStyle = 'black';
    graphics.fillText(t,x,y);
}

function circ(x,y,r){
    graphics.fillStyle = 'white';
    graphics.beginPath();
    graphics.arc(x, y, r, 0, 2 * Math.PI);
    graphics.fill();
    graphics.strokeStyle = 'black';
    graphics.beginPath();
    graphics.arc(x, y, r, 0, 2 * Math.PI);
    graphics.stroke();
}

function textG(x,y,t){
    graphics.fillStyle = '#555';
    graphics.fillText(t,x,y);
}

function circG(x,y,r){
    graphics.fillStyle = 'white';
    graphics.beginPath();
    graphics.arc(x, y, r, 0, 2 * Math.PI);
    graphics.fill();
    graphics.strokeStyle = '#555';
    graphics.beginPath();
    graphics.arc(x, y, r, 0, 2 * Math.PI);
    graphics.stroke();
}

function drawBuildings(){
    for(var i = 0; i<allRooms.length; i++){ allRooms[i].draw();}
    if(previewRoom!=undefined) previewRoom.draw();
}

function background(){ 
    graphics.fillStyle = '#cceBcc';
    //graphics.fillStyle = 'white';
    //graphics.fillStyle = '#e67e22'
    //graphics.fillStyle = '#515151'
    graphics.fillRect(0,0,canvas.width,canvas.height);
    drawBuildings();
    displayBtns();
    modelBtnDiv.style.zIndex = ++topz;
    modelOptnDiv.style.zIndex = ++topz;
}

function assessScale(){
    var tw = 0;
    for(var i = 0; i<plan.length; i++){tw += plan[i].w*scale;}
    const adj = 0.12;
    if(tw/canvas.width > 0.9){ 
        scale -= scale * adj; 
        fontsize -= fontsize * adj;
        graphics.font = fontsize + "px Arial";
    }
    if(tw/canvas.width < 0.8 && scale < defaultscale){
        scale += scale * adj; 
        fontsize += fontsize * adj;
        graphics.font = fontsize + "px Arial";
    }
}


function drawImage2(image, x, y, w, h, rotation){
    var s = h/image.height;
    graphics.setTransform(1, 0, 0, 1, x, y);
    graphics.rotate(rotation);
    switch(rotation){
        case 0:           graphics.drawImage(image, 0,0,w,h); break;
        case Math.PI/2:   graphics.drawImage(image, 0,-w,h,w); break;
        case Math.PI:     graphics.drawImage(image, -w,-h,w,h); break;
        case Math.PI*1.5: graphics.drawImage(image, -h,0,h,w); break;

    }
    graphics.setTransform(1,0,0,1,0,0);
} 


function test(){console.log("fuck")}

function test(str){console.log(str)}

function line(a,b,c,d){
    graphics.strokeStyle = 'black';
    graphics.beginPath();
    graphics.moveTo(a,b);
    graphics.lineTo(c,d);
    graphics.stroke();
}

background();

/**
function baseline(){
    var h = canvas.height-1;
    line(0,h,canvas.width,h)
}

function centerPlus(){
    graphics.strokeStyle = 'black';
    const ps = 20;
    graphics.beginPath();
    graphics.moveTo(centerx-ps, centery);
    graphics.lineTo(centerx+ps, centery);
    graphics.moveTo(centerx, centery-ps);
    graphics.lineTo(centerx, centery+ps);
    graphics.stroke();
}

canvas.onmouseup = function(e){
    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
    if(plan.length>1){
        if(over(x,y)){
            
        }
    }
}

function over(x,y){
    if(y>centery-moduleH*scale/2 && y<centery+moduleH*scale/2){
        
        //for(var i=0; i<plan.length; i++){ //loop modules see if x is over them, make a model 'selected'
        //    xstartdrawing
        //}
    }
}


function drawBtn(){
        var ps = 20;
        graphics.fillStyle = 'black';
        graphics.beginPath();
        graphics.moveTo(centerx-ps, centery);
        graphics.lineTo(centerx+ps, centery);
        graphics.moveTo(centerx, centery-ps);
        graphics.lineTo(centerx, centery+ps);
        graphics.stroke();
}


var allButtons = [];

canvas.onmouseup = function(e){
    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
    console.log(x+", "+y);
    
    checkButtons(x, y);
}

function background(){
    graphics.fillStyle = '#e67e22'
    graphics.fillRect(0,0,canvas.width,canvas.height);
    
    drawButtons();
    modelBtnDiv.style.zIndex = ++topz;
}

function checkButtons(x, y){
    for(i=0; i<allButtons.length; i++){
        allButtons[i].checkClick(x, y);
    }
}

function drawButtons(x, y){
    for(i=0; i<allButtons.length; i++){
        allButtons[i].draw();
    }
}

function circ(x,y,r,color){
    graphics.fillStyle = color;
    graphics.beginPath();
    graphics.arc(x, y, r, 0, 2 * Math.PI);
    graphics.fill();
}

var PlusBtn = function(x,y,code){
    var radius = 20;
    var ps = 10;
    this.x = x;
    this.y = y;
    this.code = code;
    
    this.draw = function(){
        circ(x, y, radius, 'white');
        graphics.fillStyle = 'black';
        graphics.beginPath();
        graphics.moveTo(centerx-ps, centery);
        graphics.lineTo(centerx+ps, centery);
        graphics.moveTo(centerx, centery-ps);
        graphics.lineTo(centerx, centery+ps);
        graphics.stroke();
    }
    
    this.checkClick = function(mx, my){
        if (x-radius<mx && x+radius>mx && y-radius<my && y+radius>my){
            canvasClicked(code);
        }
    }
}

function canvasClicked(a){
    console.log(a);
}

var startbtn = new PlusBtn(centerx, centery, "plus");
allButtons.push(startbtn);
background();

function drawPlan(){
    assessScale();
    var tw = 0;
    for(var i = 0; i<plan.length; i++){tw += plan[i].w;}
    xstartdrawing = centerx - tw*scale / 2;
    var h = moduleHeight;
    var ys = centery - h*scale/2;
    for(var i = 0; i<plan.length; i++){
        rect(xstartdrawing,ys,plan[i].w,h);
        graphics.fillStyle = 'black';
        graphics.fillText(plan[i].type, xstartdrawing + plan[i].w*scale/2, ys+h*scale/2);
        xstartdrawing += plan[i].w*scale;
    }
    drawMeasurements(tw*scale,h*scale);
}


function btnclick2(s){
    switch(s){
        case 'bedroom': plan.push(new room('Bedroom', 4.2, first())); break;
        case 'bathroom': plan.push(new room('Bathroom', 2.4, true)); break;
        case 'kitchen': plan.push(new room('Kitchen', 2.4, true)); break;
        case 'dining': plan.push(new room('Dining', 3.0, true)); break;
        case 'lounge': plan.push(new room('Living Room', 4.2, true)); break;
        case 'garage': plan.push(new room('Garage', 3.0, first())); break;
    }
    background();
}

function drawMeasurements(w,h){
    if(plan.length>0){
        graphics.fillStyle = 'black';
        var delta = 0.125 * scale;
        var xs = centerx - w/2;
        var xf = centerx + w/2;
        var h1 = centery - h/2 - delta*2;
        var h2 = h1 - delta;
        var h3 = h2 - delta;
        var h4 = h3 - delta;
        var h5 = h4 - delta;
            graphics.beginPath();
            graphics.moveTo(xs,h1);
            graphics.lineTo(xs,h3);
            graphics.moveTo(xf,h1);
            graphics.lineTo(xf,h3);
            graphics.moveTo(xs,h2);
            graphics.lineTo(xf,h2);

        var x1 = xs - delta*2;
        var x2 = x1-delta;
        var x3 = x2-delta;
        var x5 = x3-delta*3;
        var ys = centery - h/2;
        var yf = centery + h/2;
            graphics.moveTo(x1,ys);
            graphics.lineTo(x3,ys);
            graphics.moveTo(x2,ys);
            graphics.lineTo(x2,yf);
            graphics.moveTo(x1,yf);
            graphics.lineTo(x3,yf);

            graphics.stroke();
        
        graphics.fillStyle = 'black';
        graphics.fillText(Math.round(10*w/scale)/10+"m", centerx, h5);
        graphics.fillText(Math.round(10*h/scale)/10+"m", x5, centery);
    }
}





function btnclick2(s){
    switch(s){
        case 'bedroom' :  previewRoom = new room('Bedroom',     4.2, 6,   'resources/svg/Double Bedroom LH.svg');     break;
        case 'bathroom':  previewRoom = new room('Bathroom',    2.4, 6,   'resources/svg/Bathroom 1.svg');            break;
        case 'kitchen' :  previewRoom = new room('Kitchen',     2.4, 6,   'resources/svg/Kitchen 2400 LH.svg');       break;
        case 'dining'  :  previewRoom = new room('Dining',      2.4, 6,   'resources/svg/Living 2400.svg');           break;
        case 'lounge'  :  previewRoom = new room('Living Room', 2.4, 6,   'resources/svg/6000x2400_Living-01.svg');   break;
        case 'garage'  :  previewRoom = new room('Garage',      3.0, 6,   'resources/svg/Single Garage.svg');         break;
    }
    previewRoom.y = 100;
    previewRoom.x = canvas.width - 230 - previewRoom.w*scale/2;
    background();
}



function room(t,w,h,i,x,y){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.t = t;
    this.img = document.createElement("img");
    this.img.src = i;
    this.draw = function(){
        rectO(this.x, this.y, this.w, this.h);
        graphics.drawImage(this.img, this.x, this.y, this.w*scale, this.h*scale); 
    }
}



*/