InputEditor Class Reference

Public Member Functions
	constructor ()
	Class to create an an editor to add / modify metadata attributes for inputs.
	hexToRgb (hex)
	Helper function to convert hex to RGB.
	rgbToHex (r, g, b)
	Helper function to convert RGB to hex.
	createRow (data, index, auto_assign_default=true)
	Function to create a row per input with columns for each metadata attribute as applicable.
	populateContainer (sampleData, auto_assign_default=true)
	Function to populate the input container with sample data We make it so that the rows can be reordered using SortableJS.
	readData ()
	Function to read the data from the input fields and return an array of objects containing the metadata for each input.

Detailed Description

Definition at line 1 of file JsPublishInputs.js.

Member Function Documentation

constructor()

InputEditor::constructor

(

)

Class to create an an editor to add / modify metadata attributes for inputs.

Definition at line 6 of file JsPublishInputs.js.

                  {        
        this.sortable = null;
    }

createRow()

InputEditor::createRow	(		data,
			index,
			auto_assign_default = true )

Function to create a row per input with columns for each metadata attribute as applicable.

Parameters

{Object}	data - Object containing the metadata attributes for the input
{Number}	index - Row number

Definition at line 42 of file JsPublishInputs.js.

                                                       {
 
        //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;
    }

hexToRgb()

InputEditor::hexToRgb

(

hex

)

Helper function to convert hex to RGB.

Definition at line 13 of file JsPublishInputs.js.

                  {
        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];
    }

populateContainer()

InputEditor::populateContainer	(		sampleData,
			auto_assign_default = true )

Function to populate the input container with sample data We make it so that the rows can be reordered using SortableJS.

Definition at line 184 of file JsPublishInputs.js.

                                                              {
        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()

InputEditor::readData

(

)

Function to read the data from the input fields and return an array of objects containing the metadata for each input.

Definition at line 214 of file JsPublishInputs.js.

               {
        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;
    }

rgbToHex()

InputEditor::rgbToHex	(		r,
			g,
			b )

Helper function to convert RGB to hex.

Definition at line 33 of file JsPublishInputs.js.

                      {
        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
    }

---

The documentation for this class was generated from the following file:

• JsPublishInputs.js