collage-maker/web/index.js

"use strict";

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

/** @type {HTMLButtonElement} */
let snapButton

/** @type {HTMLDivElement} */
let collageDiv

/** @type {HTMLSelectElement} */
let pageSizeSelect

/** @type {HTMLAnchorElement} */
let collageUrlA

// collage state

let crops = [];
let pageSize = "letter-landscape";
let imageUrls = [
    , // images start with index 1
    "images/img1.jpg",
    "images/img2.jpg",
    "images/img3.jpg",
    "images/img4.jpg",
    "images/img5.jpg",
    "images/img6.jpg",
    "images/img7.jpg",
]


function main() {
    snapButton = document.getElementById("snapper")
    collageDiv = document.getElementById("collage")
    pageSizeSelect = document.getElementById("page_size_selector")
    collageUrlA = document.getElementById("collage-url")

    snapButton.onclick = () => snap()
    pageSizeSelect.onchange  = () => pageSizeChange()

    for(const tmpl of document.getElementsByClassName("template")) {
        tmpl.onclick = () => applyTemplate(tmpl)
    }
    const queryUrls = loadImageUrlsFromQuery()
    imageUrls = [,].concat(queryUrls)

    applyTemplate(document.getElementById("default_template"))
}

/** 
 * @param {HTMLDivElement} elem 
 * @param {string} imgUrl
 */
function makeCroppieElem(elem, imgUrl) {
    const cpie = new Croppie(elem, {
        viewport: {
            width: elem.clientWidth,
            height: elem.clientHeight,
            type: 'square'
        },
        showZoomer: false,
    });

    cpie.bind({
        url: imgUrl
    });

    return cpie
}


function initCollage() {
    for(const cpie of crops) {
        cpie.destroy()
    }
    crops = []

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

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() {
    const col = collageDiv.offsetLeft;
    const cot = collageDiv.offsetTop;
    const req = {
        background_image: "",
        aspect: {
            width: pageSizes[pageSize]["width"],
            height: pageSizes[pageSize]["height"],
        },
        dimension: {
            width: collageDiv.clientWidth,
            height: collageDiv.clientHeight,
        },
        photos: [],
    };

    for(const elem of collageDiv.getElementsByClassName("img")) {
        const cpie = crops[elem.dataset.collageCropieIndex]
        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)
    }

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

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

/** 
 * @param {HTMLDivElement} templateDiv 
 */
function applyTemplate(templateDiv) {
    document.getElementsByClassName("template-selected").item(0)?.classList.remove("template-selected")
    /** @type {HTMLDivElement} */
    const templateClone = templateDiv.cloneNode(true)
    templateDiv.classList.add("template-selected")
    for (const index in imageUrls) {
        const url = imageUrls[index]
        const imgClass = `img${index}`

        const [imgDiv] = templateClone.getElementsByClassName(imgClass)
        if(imgDiv === undefined) {
            break;
        }
        imgDiv.dataset.collageImageUrl = url;
    }
    collageDiv.replaceChildren(...templateClone.children)
    collageDiv.classList.remove(collageDiv.dataset.collageTemplate)
    collageDiv.classList.add(templateDiv.dataset.collageTemplate)
    collageDiv.dataset.collageTemplate = templateDiv.dataset.collageTemplate
    initCollage()
}

function loadImageUrlsFromQuery() {
    const params = new URLSearchParams(window.location.search)
    const urlsstr = params.get('urls')
    return JSON.parse(urlsstr)
}

main()