collage-maker/web/index.js

const pageSizes = {
    "letter-portrait" : {
        "ap": "85 / 110",
        "width": 3264,
        "height": 4224,
    },
    "letter-landscape" : {
        "ap": "110 / 85",
        "width": 4224,
        "height": 3264,
    },
    "fiveseven-portrait" : {
        "ap": "5 / 7",
        "width": 2250,
        "height": 3150,
    },
    "fiveseven-landscape" : {
        "ap": "7 / 5",
        "width": 3150,
        "height": 2250,
    },
    "foursix-portrait" : {
        "ap": "4 / 6",
        "width": 1800,
        "height": 2700,
    },
    "foursix-landscape" : {
        "ap": "6 / 4",
        "width": 2700,
        "height": 1800,
    },
}

// elements -- dummy createElement for language server type hint
var snapButton     = document.createElement("button")
var collageDiv     = document.createElement("div")
var pageSizeSelect = document.createElement("select")
var collageUrlA    = document.createElement("a");

// collage state
var crops = [];
var pageSize = "letter-landscape";

function main() {
    snapButton = document.getElementById("snapper")
    collageDiv = document.getElementById("collage")
    pageSizeSelect = document.getElementById("page_size_selector")
    collageUrlA = document.getElementById("collage-url")
    initCollage()
    snapButton.onclick = () => snap()
    pageSizeSelect.onchange  = () => pageSizeChange(pageSizeSelect)
}

function makeCroppieElem(elem, imgUrl) {
    cpie = new Croppie(elem, {
        viewport: {
            width: elem.clientWidth,
            height: elem.clientHeight,
            type: 'square'
        },
        showZoomer: false,
    });

    cpie.bind({
        url: imgUrl
    });

    return cpie
}


function initCollage() {
    for(cpie of crops) {
        cpie.destroy()
    }
    crops = []
    for(elem of collageDiv.getElementsByClassName("collage-img")) {
        const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl)
        const lastLen = crops.push(cpie)
        elem.dataset.collageCropieIndex = lastLen - 1
    }
}

function showCrop() {
    for(cpie of crops) {
        console.log(cpie.get())
        console.log(cpie.element.clientWidth)
        console.log(cpie.element.clientHeight)
    }
}

async function makeCollage(req) {
    const resp = await fetch("make-collage", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(req),
    })
    return await resp.text();
}

function snap() {
    col = collageDiv.offsetLeft;
    cot = collageDiv.offsetTop;
    console.log("----------------------")
    req = {
        background_image: "",
        aspect: {
            width: pageSizes[pageSize]["width"],
            height: pageSizes[pageSize]["height"],
        },
        dimension: {
            width: collageDiv.clientWidth,
            height: collageDiv.clientHeight,
        },
        photos: [],
    };

    for(elem of collageDiv.getElementsByClassName("collage-img")) {
        const cpie = crops[elem.dataset.collageCropieIndex]
        // console.log(cpie.get().points)
        // console.log(elem.offsetLeft - col)
        // console.log(elem.offsetTop - cot)
        // console.log(elem.clientWidth)
        // console.log(elem.clientHeight)
        const fsx = elem.offsetLeft - col
        const fsy = elem.offsetTop - cot
        const [sx, sy, ex, ey] = cpie.get().points;
        const photo = {
            image: elem.dataset.collageImageUrl.slice("images/".length),
            crop: {
                start: {
                    x: parseInt(sx),
                    y: parseInt(sy),
                },
                end: {
                    x: parseInt(ex),
                    y: parseInt(ey),
                },
            },
            frame: {
                start: {
                    x: fsx,
                    y: fsy,
                },
                end: {
                    x: fsx + elem.clientWidth,
                    y: fsy + elem.clientHeight,
                },
            },
        };
        req.photos.push(photo)
    }

    console.log(JSON.stringify(req));
    (async () => {
        collagFile = await makeCollage(req)
        collageUrlA.href = `collages/${collagFile}`;
        collageUrlA.text = `${collagFile} generated`;
    })();
}

function pageSizeChange(selectElem) {
    document.getElementById("collage").style.setProperty('--collage-ap', pageSizes[selectElem.value]["ap"])
    pageSize = selectElem.value
    initCollage()
}

main()