js/interactive_grid.js

const gridSize = 14;
var cellSizeX = null;
var cellSizeY = null;
var inputImage = null;
var image_bef = null;
var image_aft = null;
var canvas_before = null;
var canvas_after = null;
var ctx_bef = null;
var ctx_aft = null;
var canvasBg_bef = null;
var canvasBg_aft = null;
let grid_bef = new Array(gridSize).fill(null).map(() => new Array(gridSize).fill(false));
let grid_aft = new Array(gridSize).fill(null).map(() => new Array(gridSize).fill(false));
var isInitialized_bef = false;
var isInitialized_aft = false;

let selectedCells_bef = 0;
let selectedCells_aft = 0;

function createGridBefore() {
    console.log('createGrid')

    for (let i = 0; i < 196; i++) {
        const div = document.createElement('div');
        div.classList.add('checkbox');
        div.innerHTML = '<input type="checkbox">';
        grid_bef.appendChild(div);
    }
}

function createGridAfter() {
    console.log('createGrid')

    for (let i = 0; i < 196; i++) {
        const div = document.createElement('div');
        div.classList.add('checkbox');
        div.innerHTML = '<input type="checkbox">';
        grid_aft.appendChild(div);
    }
}

function loadImageBefore(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function (e) {
        image_bef.src = e.target.result;
    }
    reader.readAsDataURL(file);
}

function loadImageAfter(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function (e) {
        image_aft.src = e.target.result;
    }
    reader.readAsDataURL(file);
}


function handleMouseDown(event) {
    // console.log("handleMouseDown");
}

function handleMouseMove(event) {
    // console.log("handleMouseMove");
}

function handleMouseUp(event) {
    // console.log("handleMouseUp");
}

function handleMouseLeave(event) {
    // console.log("handleMouseLeave");
}


function drawGridBefore() {
    ctx_bef.clearRect(0, 0, canvas_before.width, canvas_before.height);
    drawBackgroundBefore();
    for (let row = 0; row < gridSize; row++) {
        for (let col = 0; col < gridSize; col++) {
            ctx_bef.beginPath();
            ctx_bef.rect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
            ctx_bef.strokeStyle = 'black';
            ctx_bef.lineWidth = 1;
            ctx_bef.stroke();

            if (grid_bef[row][col]) {
                ctx_bef.fillStyle = 'rgba(0, 255, 0, 0.5)';
                ctx_bef.fillRect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
            }
        }
    }
}



function drawGridAfter() {
    ctx_aft.clearRect(0, 0, canvas_after.width, canvas_after.height);
    drawBackgroundAfter();
    for (let row = 0; row < gridSize; row++) {
        for (let col = 0; col < gridSize; col++) {
            ctx_aft.beginPath();
            ctx_aft.rect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
            ctx_aft.strokeStyle = 'black';
            ctx_aft.lineWidth = 1;
            ctx_aft.stroke();

            if (grid_aft[row][col]) {
                ctx_aft.fillStyle = 'rgba(0, 255, 0, 0.5)';
                ctx_aft.fillRect(col * cellSizeX, row * cellSizeY, cellSizeX, cellSizeY);
            }
        }
    }
}

function initializeEditorBefore() {
    console.log("initializeEditorBefore");

    if (isInitialized_bef) {
        return;
    }
    isInitialized_bef = true;

    image_bef = document.getElementById('image-before');
    canvas_before = document.getElementById('before');
    ctx_bef = canvas_before.getContext('2d');

    // Add click event listener to canvas
    canvas_before.addEventListener('mousedown', handleMouseDown);
    canvas_before.addEventListener('mousemove', handleMouseMove);
    canvas_before.addEventListener('mouseup', handleMouseUp);
    canvas_before.addEventListener('mouseleave', handleMouseLeave);

    cellSizeX = canvas_before.width / gridSize;
    cellSizeY = canvas_before.height / gridSize;

    canvas_before.addEventListener('click', (event) => {
        const rect = canvas_before.getBoundingClientRect();
        const scaleX = canvas_before.width / rect.width;
        const scaleY = canvas_before.height / rect.height;
        const x = (event.clientX - rect.left) * scaleX;
        const y = (event.clientY - rect.top) * scaleY;
        const row = Math.floor(y / cellSizeY);
        const col = Math.floor(x / cellSizeX);

        // If the cell is already selected, it's always allowed to deselect it
        if (grid_bef[row][col]) {
            grid_bef[row][col] = false;
            selectedCells_bef--; // Decrement the selected cell count
        } else {
            // Only select a new cell if less than 50 cells are already selected
            if (selectedCells_bef < 50) {
                grid_bef[row][col] = true;
                selectedCells_bef++; // Increment the selected cell count
            }
        }
        drawGridBefore();
    });

    drawGridBefore();
}


function initializeEditorAfter() {
    console.log("initializeEditorAfter");

    if (isInitialized_aft) {
        return;
    }
    isInitialized_aft = true;

    image_aft = document.getElementById('image-after');
    canvas_after = document.getElementById('after');
    ctx_aft = canvas_after.getContext('2d');

    // Add click event listener to canvas
    canvas_after.addEventListener('mousedown', handleMouseDown);
    canvas_after.addEventListener('mousemove', handleMouseMove);
    canvas_after.addEventListener('mouseup', handleMouseUp);
    canvas_after.addEventListener('mouseleave', handleMouseLeave);

    cellSizeX = canvas_after.width / gridSize;
    cellSizeY = canvas_after.height / gridSize;

    canvas_after.addEventListener('click', (event) => {
        const rect = canvas_after.getBoundingClientRect();
        const scaleX = canvas_after.width / rect.width;
        const scaleY = canvas_after.height / rect.height;
        const x = (event.clientX - rect.left) * scaleX;
        const y = (event.clientY - rect.top) * scaleY;
        const row = Math.floor(y / cellSizeY);
        const col = Math.floor(x / cellSizeX);

        // If the cell is already selected, it's always allowed to deselect it
        if (grid_aft[row][col]) {
            grid_aft[row][col] = false;
            selectedCells_aft--; // Decrement the selected cell count
        } else {
            // Only select a new cell if less than 50 cells are already selected
            if (selectedCells_aft < 50) {
                grid_aft[row][col] = true;
                selectedCells_aft++; // Increment the selected cell count
            }
        }
        drawGridAfter();
    });

    drawGridAfter();
}


function drawBackgroundBefore() {
    if (canvasBg_bef != null) {
        const canvasWidth = canvas_before.width;
        const canvasHeight = canvas_before.height;

        const bgWidth = canvasBg_bef.width;
        const bgHeight = canvasBg_bef.height;

        const scaleX = canvasWidth / bgWidth;
        const scaleY = canvasHeight / bgHeight;

        const scale = Math.min(scaleX, scaleY);

        const newWidth = bgWidth * scale;
        const newHeight = bgHeight * scale;

        const xOffset = (canvasWidth - newWidth) / 2;
        const yOffset = (canvasHeight - newHeight) / 2;

        ctx_bef.drawImage(canvasBg_bef, 0, 0, bgWidth, bgHeight, xOffset, yOffset, newWidth, newHeight);
    }
}

function drawBackgroundAfter() {
    if (canvasBg_aft != null) {
        const canvasWidth = canvas_after.width;
        const canvasHeight = canvas_after.height;

        const bgWidth = canvasBg_aft.width;
        const bgHeight = canvasBg_aft.height;

        const scaleX = canvasWidth / bgWidth;
        const scaleY = canvasHeight / bgHeight;

        const scale = Math.min(scaleX, scaleY);

        const newWidth = bgWidth * scale;
        const newHeight = bgHeight * scale;

        const xOffset = (canvasWidth - newWidth) / 2;
        const yOffset = (canvasHeight - newHeight) / 2;

        ctx_aft.drawImage(canvasBg_aft, 0, 0, bgWidth, bgHeight, xOffset, yOffset, newWidth, newHeight);
    }
}

function importBackgroundBefore(image_bef) {
    if (image_bef == null) {
        canvasBg_bef = null;
        drawGridBefore();
        return;
    }

    let m = new Image();
    m.src = image_bef;
    m.onload = function () {
        canvasBg_bef = m;
        drawGridBefore();
    }
}


function importBackgroundAfter(image_after) {
    if (image_after == null) {
        canvasBg_aft = null;
        drawGridAfter();
        return;
    }

    let m = new Image();
    m.src = image_after;
    m.onload = function () {
        canvasBg_aft = m;
        drawGridAfter();
    }
}

function read_js_Data() {
    console.log("read_js_Data");
    console.log("read_js_Data");
    console.log("read_js_Data");
    console.log("read_js_Data");
    console.log("read_js_Data");
    return grid;
}


function set_grid_from_data(data) {
    if (data.length !== gridSize || data[0].length !== gridSize) {
        throw new Error('Invalid data dimensions. Expected ' + gridSize + 'x' + gridSize);
    }

    selectedCells = 0; // Reset the selected cell count
    for (let row = 0; row < gridSize; row++) {
        for (let col = 0; col < gridSize; col++) {
            grid[row][col] = data[row][col];
            if (grid[row][col]) {
                selectedCells++; // Count the number of initially selected cells
            }
        }
    }

    drawGrid();
}


function clear_grid() {
    console.log("clearGrid");
    for (let row = 0; row < gridSize; row++) {
        for (let col = 0; col < gridSize; col++) {
            grid[row][col] = false;
        }
    }
    selectedCells = 0; // Reset the selected cell count
    drawGrid();
}