JsPublishInputs.js

Go to the documentation of this file.

class InputEditor {
    constructor() {        
        this.sortable = null;
    }
 
    hexToRgb(hex) {
        let r = 0, g = 0, b = 0;
        // 3 digits
        if (hex.length === 4) {
            r = parseInt(hex[1] + hex[1], 16);
            g = parseInt(hex[2] + hex[2], 16);
            b = parseInt(hex[3] + hex[3], 16);
        }
        // 6 digits
        else if (hex.length === 7) {
            r = parseInt(hex[1] + hex[2], 16);
            g = parseInt(hex[3] + hex[4], 16);
            b = parseInt(hex[5] + hex[6], 16);
        }
        return [r, g, b];
    }
 
    rgbToHex(r, g, b) {
        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
    }
 
    createRow(data, index, auto_assign_default = true) {
 
        //console.log('------- Creating row for data:', data);
 
        let boxStyle = "width: 100%; font-size: 12px; border:solid thin lightskyblue; background-color: #000000"
 
        // Create a new div with class "row"
        let row = document.createElement("div");
        row.classList.add("row", "row_hover", "pb-2", "pt-2", 'g-1');
 
        // String Name Column (col)
        let nameCol = document.createElement("div");
        nameCol.classList.add("col-sm-2", "text-start");
        let nameLabel = document.createElement("label");
        nameLabel.textContent = data.name;
        nameLabel.classList.add("form-label");
        nameCol.appendChild(nameLabel);
        row.appendChild(nameCol);
 
        // Type Column (Read-only) (col)
        let typeCol = document.createElement("div");
        typeCol.classList.add("col-sm-2");
        let typeLabel = document.createElement("label");
        typeLabel.textContent = data.type;
        typeLabel.classList.add("form-label");
        typeCol.setAttribute("data-type", data.type); // Add type to the element's data attributes
        typeCol.appendChild(typeLabel);
        row.appendChild(typeCol);
 
        // UI Name Column (Editable) (col)
        let uinameCol = document.createElement("div");
        uinameCol.classList.add("col-sm");
        let uinameInput = document.createElement("input");
        uinameInput.type = "text";
        uinameInput.style = boxStyle;
        uinameInput.classList.add("form-control", "form-control-sm");
        uinameInput.value = data.uiname || "";
        uinameInput.setAttribute("data-ui-name", "true");  // Set data attribute for identification
        uinameCol.appendChild(uinameInput);
        row.appendChild(uinameCol);
 
        // UI group Column (Editable) (col)
        let uifolderCol = document.createElement("div");
        uifolderCol.classList.add("col-sm");
        let uifolderInput = document.createElement("input");
        uifolderInput.type = "text";
        uifolderInput.style = boxStyle;
        uifolderInput.classList.add("form-control", "form-control-sm");
        uifolderInput.value = data.uifolder || ""
        uifolderInput.setAttribute("data-ui-group", "true");  // Set data attribute for identification
        uifolderCol.appendChild(uifolderInput);
        row.appendChild(uifolderCol);
 
        // Add uimin, uimax, uistep for vectors, integers and floats
        // Make list for data.uimin, data.uimax, data.uistep
        let ui_items = [data.uimin, data.uimax, data.uistep, data.uisoftmin, data.uisoftmax];
        let ui_item_ids = ['data-ui-min', 'data-ui-max', 'data-ui-step', 'data-ui-softmin', 'data-ui-softmax'];
 
        for (let u = 0; u < 5; u++) {
 
            // Input Column (dynamically filled based on type) (col)
            let inputCol = document.createElement("div");
            inputCol.classList.add("col-sm");
 
            let ui_item = ui_items[u];
            let ui_item_id = ui_item_ids[u];
            let ui_default = 0;
            if (u == 1 || u == 4) {
                if (data.type === 'integer')
                    ui_default = 10
                else
                    ui_default = 1;
            }
            else if (u == 2) {
                if (data.type === 'integer')
                    ui_default = 1
                else
                    ui_default = 0.01;
            }
 
            if (data.type === "float" || data.type == "integer") {
                // Single input for int and float type
                let input = document.createElement("input");
                input.setAttribute(ui_item_id, "true");  // Set data attribute for identification
                input.type = "number";
                input.style = boxStyle;
                input.classList.add("form-control", "form-control-sm");
                if (ui_item != undefined)
                    input.value = ui_item
                else                
                    input.value = (auto_assign_default ? ui_default : null);
                inputCol.appendChild(input);
            }
            else if (data.type === "vector2" || data.type == "vector3" || data.type == "vector4") {
                let count = 0;
                if (data.type === "vector2") {
                    count = 2;
                }
                else if (data.type === "vector3") {
                    count = 3;
                }
                else if (data.type === "vector4") {
                    count = 4;
                }
 
                // Add a div container for all the vector inputs
                let container = document.createElement("div");
                container.classList.add("container", "p-2", "rounded-2");
                // Add a border
                container.style.border = "1px solid #f0f0f0";
 
                for (let i = 0; i < count; i++) {
 
                    let input = document.createElement("input");
                    input.type = "number";
                    input.style = boxStyle;
                    input.classList.add("form-control", "form-control-sm", "me-2", "mb-2");
                    if (ui_item && ui_item[i] != undefined)
                    {
                        //console.log('ui_item[i]', ui_item[i], i);
                        input.value = ui_item[i]
                    }
                    else
                    {
                        //console.log('ui_default', ui_default);
                        input.value = (auto_assign_default ? ui_default : null);
                    }
                    input.setAttribute(ui_item_id, "true");  // Set data attribute for identification
 
                    container.appendChild(input);
                }
                inputCol.appendChild(container);
            }
            row.appendChild(inputCol);
        }
        return row;
    }
 
    populateContainer(sampleData, auto_assign_default = true) {
        const inputContainer = document.getElementById("input-container");
 
        if (this.sortable)
        {
            this.sortable.destroy();
            this.sortable = null;
        }
 
        // Remove all children from the container
        inputContainer.innerHTML = "";
 
        sampleData.forEach((data, index) => {
            let row = this.createRow(data, index, auto_assign_default);
            inputContainer.appendChild(row);
        });
 
        // Initialize SortableJS for reordering rows
        this.sortable = new Sortable(inputContainer, {
            animation: 150,
            ghostClass: "sortable-ghost", // Class name for the drop placeholder
            chosenClass: "sortable-ghost" // Class name for the dragged element
        });
    }
 
    readData() {
        const rows = document.querySelectorAll("#input-container .row");
        const extractedData = [];
 
        rows.forEach(row => {
            const name = row.querySelector("label").textContent;
            const uiname = row.querySelector("input[data-ui-name]").value;
            const uifolder = row.querySelector("input[data-ui-group]").value;
            const type = row.querySelector("[data-type]").textContent;
 
            let uimin = null;
            let uimax = null;
            let uistep = null;
            let uisoftmin = null;
            let uisoftmax = null;
            if (type === "integer" || type === "float" || type === "vector2" || type === "vector3" || type == "vector4") {
                let inputs = row.querySelectorAll("input[data-ui-min]");
                uimin = Array.from(inputs).map(input => input.value && input.value !== '' ? parseFloat(input.value) : null);
                if (uimin.some(value => value === null)) {
                    uimin = null;
                }
                //Array.from(inputs).map(input => console.log('ui min value:', uimin)); 
 
                inputs = row.querySelectorAll("input[data-ui-max]");
                uimax = Array.from(inputs).map(input => input.value && input.value !== '' ? parseFloat(input.value) : null);
                if (uimax.some(value => value === null)) {
                    uimax = null;
                }
 
                inputs = row.querySelectorAll("input[data-ui-step]");
                uistep = Array.from(inputs).map(input => input.value && input.value !== ''  ? parseFloat(input.value) : null);
                if (uistep.some(value => value === null)) {
                    uistep = null;
                }
                
                inputs = row.querySelectorAll("input[data-ui-softmin]");
                uisoftmin = Array.from(inputs).map(input => input.value && input.value !== '' ? parseFloat(input.value) : null);
                if (uisoftmin.some(value => value === null)) {
                    uisoftmin = null;
                }
 
                inputs = row.querySelectorAll("input[data-ui-softmax]");
                uisoftmax = Array.from(inputs).map(input => input.value && input.value !== ''  ? parseFloat(input.value) : null);
                if (uisoftmax.some(value => value === null)) {
                    uisoftmax = null;
                }
            }
            extractedData.push({ name, type, uiname, uifolder, uimin, uimax, uistep, uisoftmin, uisoftmax });
        });
 
        return extractedData;
    }
 
}