Sindbad~EG File Manager

document.addEventListener("DOMContentLoaded", function () {
    document.body.addEventListener("contextmenu", function (event) {
        console.log("in contextmenu.js with", event.target.tagName);
        if (event.target.tagName === "path") {
            event.preventDefault(); // Prevent the default browser menu
            showContextMenu(event, event.target);
        }
    });
});

function showContextMenu(event, pathElement) {
    document.getElementById("customContextMenu")?.remove();

    let menu = document.createElement("div");
    menu.id = "customContextMenu";
    Object.assign(menu.style, {
        position: "absolute",
        left: `${event.pageX}px`,
        top: `${event.pageY}px`,
        background: "white",
        border: "1px solid black",
        padding: "10px",
        boxShadow: "2px 2px 5px rgba(0,0,0,0.2)",
        fontSize: "14px",
        zIndex: "10000",
    });

    let title = document.createElement("div");
    title.textContent = "Graph Line Thickness";
    title.style.fontWeight = "bold";
    title.style.marginBottom = "5px";
    menu.appendChild(title);

    let options = [
        { id: "thinLine", text: "Thin", value: "1" },
        { id: "mediumLine", text: "Medium", value: "2" },
        { id: "thickLine", text: "Thick", value: "3" }
    ];

    options.forEach(option => {
        let item = document.createElement("div");
        item.id = option.id;
        item.textContent = option.text;
        Object.assign(item.style, {
            cursor: "pointer",
            padding: "5px"
        });
        item.addEventListener("click", () => {
            updateLineThickness(option.value);
            document.getElementById("customContextMenu")?.remove();
        });
        menu.appendChild(item);
    });

    document.body.appendChild(menu);
    document.addEventListener("click", () => menu.remove(), { once: true });
}

function updateLineThickness(thickness) {
    let form = document.createElement("form");
    form.method = "POST";
    form.action = window.location.href;

    let input = document.createElement("input");
    input.type = "hidden";
    input.name = "newStrokeWidth";
    input.value = thickness;

    form.appendChild(input);
    document.body.appendChild(form);
    form.submit();
}