Story05Js :: "canvasRenderCommands.js"

var imageCache = [];
var missingCache = [];

var frontCanvas = false;
var frontContext = false;

var backCanvas = false
var backContext = false;

makeCanvas ( );

function makeCanvas ( ) {

    //document.addEventListener("DOMContentLoaded",  ( ) => {

    let fragment;

    // Create an on-screen canvas

    fragment = document.createDocumentFragment ( );

    frontCanvas = document.createElement('canvas');

    fragment.appendChild(frontCanvas);

    frontCanvas.style.zIndex = -1;

    frontCanvas.width = 320;
    frontCanvas.height = 240;

    frontCanvas.style.width = `320px`;
    frontCanvas.style.height = `240px`;

    frontCanvas.id = `frontCanvas`;

    frontContext = frontCanvas.getContext('2d');

    frontContext.width = 320;
    frontContext.height = 200;

    // Create an off-screen canvas

    backCanvas = document.createElement('canvas');

    fragment.appendChild(backCanvas);

    // Append all changes at once to reduce reflows
    document.body.appendChild(fragment);

    backCanvas.style.width = frontCanvas.style.width;

    backCanvas.style.height = frontCanvas.style.height;

    backCanvas.width = frontCanvas.width;
    backCanvas.height = frontCanvas.height;

    backContext.width = frontContext.width;

    backContext.height = frontContext.height;

    backCanvas.style.zIndex = -2;

    backCanvas.style.visibility = 'hidden';

    backCanvas.id = `backCanvas`;

    backContext = backCanvas.getContext('2d');

}

function selectCanvas(id){
    workCanvas = document.getElementById(id);
}

function drawRectangle(x, y, width, height, color = 'black',fill = 'gray'){

    backContext.strokeStyle = color;

    if(fill === ''){
        fill = 'rgba(0,0,0,0.0)';
    }
    backContext.fillStyle = fill;

    backContext.fillRect(x, y, width, height);

    backContext.strokeRect(x, y, width, height);
}


function drawLine(x,y,x2,y2,color = 'black',width = 5){
    backContext.strokeStyle = color;
    backContext.lineWidth = width;
    backContext.beginPath ( );
    backContext.moveTo(x, y);
    backContext.lineTo(x2, y2);
    backContext.stroke ( );
}


function drawCircle(x,y,radius = 50, color = 'black',fill = '#00FF00', width = 5){
    backContext.beginPath ( );
    backContext.arc(x, y, radius, 0, 2 * Math.PI);
    backContext.fillStyle = '#00FF00';
    backContext.fill ( );
    backContext.strokeStyle = '#000000';
    backContext.lineWidth = width;
    backContext.stroke ( );
}


function drawText(x,y,font = '30px Arial',fill = '#000000',text = 'Hello backcanvas!'){
    backContext.font = font;
    backContext.fillStyle = fill;
    backContext.fillText(text, x, y);
}

function drawImageStack(imageStack, x, y, width = 24, height = 24) {

    // console.log({imageStack: imageStack});

    for(index = 0; index < imageStack.length; index++){

        if( imageStack[index] === undefined ){
            continue;
        }

        imageStack[index] = basename(imageStack[index],`.png`);
        imageStack[index] = left( imageStack[index] + `________`, 8 );

        // console.log(imageStack[index]);

        drawImage( imageStack[index], x, y, width, height );

    }

    if(DEBUG.GUI){
        if( index > 0 ){

            // drawImage(`dooropen`, x, y, width, height);

            // drawRectangle(x, y, width, height, 'rgba(255,0,0,0.7)','');

            // drawText(x,y+16,'12px Impact', 'rgba(255,0,0,0.7)','TEST');
        }
    }
}

function drawImage(imagePath, x, y, width = 24, height = 24) {

    var cachedImage = loadImage(imagePath);

    if (cachedImage === undefined) {
        return;
    }

    backContext.drawImage(cachedImage, x, y, width, height);
}

function loadImageStack(imageStack, width = 24, height = 24) {

    if(!Array.isArray(imageStack)) {
        imageStack = [imageStack];
    }

    for(let index = 0; index < imageStack.length; index++){
        imageStack[index] = loadImage(imageStack[index], width, height);
    }

    return imageStack;

}

function loadImage(imagePath, width = 24, height = 24) {

    if (imagePath === undefined) {
        return undefined;
    }

    if(isObject(imagePath)) {
        return undefined;
    }

    if(Array.isArray(imagePath)) {
        return loadImageStack(imagePath, width, height)[0];
    }

    if ( right ( imagePath, 4 )  === `.png` ) {
        imagePath = left( imagePath, len(imagePath) - 4 );
    }

    var fullPath = ``;
    if ( left ( imagePath, len ( `{{ project root }` ) ) === `{{ project root }}` ) {
        imagePath = mid ( imagePath, len( `{{ project root }` ) + 1 );
    }
        fullPath = `{{ project root }}${imagePath}.png`;
    if ( len ( imagePath ) === 4 || len ( imagePath ) === 8 ) {
        imagePath = left(imagePath + `________`, 8);

        if (imagePath === `________`) {
            // logFeats(`Placeholder Image: ${fullPath}`);
            return undefined;
        }

        fullPath = `${host}/GFX/${imagePath}.png`;

    } else {

        fullPath = `{{ project root }}${imagePath}.png`;

    }

    let cachedImage = imageCache.find(img => img.src === fullPath);

    if (!cachedImage) {
        cachedImage = new Image(width, height);
        cachedImage.src = fullPath;

        cachedImage.onload = function ( ) {
            imageCache.push(cachedImage);
            logFeats(`Loaded: ${cachedImage.src}`);
            // backContext.drawImage(cachedImage, x, y, width, height); // Draw image after loading
        };

        cachedImage.onerror = function ( ) {
            logFeats(`Failed to load: ${cachedImage.src}`);
            cachedImage = undefined;
        };
    } else {
        // logFeats(`Drawing Image: ${cachedImage.src}`);
        return cachedImage;
    }
}


function doubleBuffer ( ) {

    frontContext.clearRect(0, 0, frontCanvas.width, frontCanvas.height);

    frontContext.drawImage(backCanvas, 0, 0);
}

function getColorAtPoint(x, y) {
    const imageData = backCanvas.getImageData(x, y, 1, 1); // Step 4
    const data = imageData.data;
    const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`; // Step 5
    return rgba;
}

function grabColor(fg){
    if(left(fg,1) === '#'){
        fg = mid(fg,2);
        fg = sections(fg,2);
    }else if( ( left( fg, 5 ) === 'rgba(' ) && ( right( fg, 1 ) === ')' ) ){
        fg = mid(fg,6);
        fg = left(fg,len(fg)-1);
        fg = fg.replace(' ','');
        fg = fg.split(',');
    }else{
        fg = grabColor(fg);
    }

    return fg;
}

function calcTextWidth( font, text ){

    let fontTemp = backContext.font;

    backContext.font = font;

    const textMetrics = backContext.measureText(text);
    const textWidth = textMetrics.width;

    backContext.font = fontTemp;

    return textWidth;
}

function wrapText(x, y, maxWidth, lineHeight, font, fill, text) {

    const words = text.split(' ');
    let buffer = '';

    backContext.font = font;
    backContext.fillStyle = fill;

    for (let index = 0; index < words.length; index++) {

        const testLine = buffer + (buffer.length > 0 ? ' ' : '') + words[index];

        const metrics = backContext.measureText(testLine);

        if (metrics.width > maxWidth) {
            backContext.fillText(buffer, x, y);
            buffer = words[index];
            y += lineHeight;
        } else {
            buffer = testLine;
        }
    }

    if (buffer.length > 0) {
        backContext.fillText(buffer, x, y);
    }

    // Copy the contents of backContext to frontContext
    frontContext.clearRect(0, 0, frontContext.canvas.width, frontContext.canvas.height);
    frontContext.drawImage(backContext.canvas, 0, 0);
}

/* {{ #/{{ project root }}/scripts/js/canvas/canvas3dRenderCommands.js }} */