perfect-gui 5.1.2 → 6.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "perfect-gui",
   "type": "module",
-  "version": "5.1.2",
+  "version": "6.0.0",
   "description": "GUI for JavaScript",
   "main": "dist/perfect-gui.js",
   "module": "dist/perfect-gui.js",
@@ -25,6 +25,8 @@
   },
   "homepage": "https://thibka.github.io/perfect-gui/public/",
   "devDependencies": {
-    "vite": "^7.3.1"
+    "eslint": "^9.39.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
   }
-}
+}

package/src/components/{Button.js → Button.ts}

@@ -1,20 +1,34 @@
+import type GUI from '../index.js';
+
+export type Options = {
+    label?: string;
+    tooltip?: string | boolean;
+    color?: string;
+    hoverColor?: string;
+}
+
+type Callback = () => void;
+
 export default class Button {
-    constructor(parent, params = {}) {
+    public parent: GUI;
+    public callback: null | Callback = null;
+    public element: HTMLDivElement;
+
+    constructor(parent: GUI, options: Options = {}) {
         this.parent = parent;
-        this.callback = null;
 
-        if (typeof params !== 'object') {
+        if (typeof options !== 'object') {
             throw Error(
-                `[GUI] button() first parameter must be an object. Received: ${typeof params}.`,
+                `[GUI] button() first parameter must be an object. Received: ${typeof options}.`,
             );
         }
 
-        let label = params.label || ' ';
+        let label = options.label || ' ';
 
         const tooltip =
-            typeof params.tooltip === 'string'
-                ? params.tooltip
-                : params.tooltip === true
+            typeof options.tooltip === 'string'
+                ? options.tooltip
+                : options.tooltip === true
                   ? label
                   : null;
 
@@ -39,11 +53,11 @@ export default class Button {
             }
         });
 
-        if (typeof params.color == 'string') {
-            el.style.setProperty('--color-accent', params.color);
+        if (typeof options.color == 'string') {
+            el.style.setProperty('--color-accent', options.color);
             el.style.setProperty(
                 '--color-accent-hover',
-                params.hoverColor || params.color,
+                options.hoverColor || options.color,
             );
         }
 
@@ -53,7 +67,7 @@ export default class Button {
         this.element = el;
     }
 
-    onClick(callback) {
+    onClick(callback: Callback) {
         this.callback = callback;
         return this;
     }

package/src/components/Color.ts

@@ -0,0 +1,93 @@
+import type GUI from '../index.js';
+
+export type Options = {
+    label?: string;
+    tooltip?: string | boolean;
+}
+
+type Callback = (value: string) => void;
+
+export default class Color {
+    private parent: GUI;
+    private callback: null | Callback = null;
+    public element: HTMLDivElement;
+
+    constructor(
+        parent: GUI,
+        obj: any,
+        prop: string,
+        params: Options = {}
+    ) {
+        this.parent = parent;
+
+        if (typeof obj !== 'object' || typeof prop !== 'string') {
+            throw Error(`[GUI] color() invalid parameters. Expected (object, string, options).`);
+        }
+
+        let label = typeof params.label === 'string' ? params.label || ' ' : ' ';
+        if (label === ' ') {
+            label = prop;
+        }
+
+        const tooltip =
+            typeof params.tooltip === 'string'
+                ? params.tooltip
+                : params.tooltip === true
+                  ? label
+                  : null;
+
+        const propReferenceIndex = this.parent.propReferences.push(obj[prop]) - 1;
+        const value = obj[prop] || '#000000';
+
+        const container = document.createElement('div');
+        container.className = 'p-gui__color';
+        container.textContent = label;
+        if (tooltip) {
+            container.setAttribute('title', tooltip);
+        }
+        this.parent.wrapper.append(container);
+        
+        // Expose the DOM element
+        this.element = container;
+
+        const colorpicker = document.createElement('input');
+        colorpicker.className = 'p-gui__color-picker';
+        colorpicker.setAttribute('type', 'color');
+        colorpicker.value = value;
+        container.append(colorpicker);
+
+        colorpicker.addEventListener('input', () => {
+            obj[prop] = colorpicker.value;
+
+            if (this.parent.onUpdate) {
+                this.parent.onUpdate();
+            } else if (
+                this.parent.isFolder &&
+                this.parent.firstParent.onUpdate
+            ) {
+                this.parent.firstParent.onUpdate();
+            }
+        });
+
+        Object.defineProperty(obj, prop, {
+            set: (val: string) => {
+                this.parent.propReferences[propReferenceIndex] = val;
+
+                colorpicker.value = val;
+
+                if (typeof this.callback === 'function') {
+                    this.callback(val);
+                }
+            },
+            get: () => {
+                return this.parent.propReferences[propReferenceIndex];
+            },
+        });
+    }
+
+    onChange(callback: Callback) {
+        this.callback = callback;
+        return this;
+    }
+}
+

package/src/components/{Image.js → Image.ts}

@@ -1,23 +1,36 @@
+import type GUI from '../index.js';
+
+export type Options = {
+    label?: string;
+    tooltip?: string | boolean;
+    selected?: boolean;
+    selectionBorder?: boolean;
+    width?: number | string;
+    height?: number | string;
+}
+
+type Callback = ({path, text}: {path: string, text: string}) => void;
+
 export default class Image {
-    constructor(parent, params = {}) {
+    public parent: GUI;
+
+    private callback: null | Callback = null;
+
+    private element: HTMLElement;
+
+    constructor(parent: GUI, path: string, params: Options = {}) {
         this.parent = parent;
-        this.callback = null;
 
-        if (typeof params != 'object') {
-            throw Error(
-                `[GUI] image() first parameter must be an object. Received: ${typeof params}.`,
-            );
+        if (path === undefined) {
+            throw Error(`[GUI] image() path must be provided.`);
+        } else if (typeof path !== 'string') {
+            throw Error(`[GUI] image() path must be a string.`);
         }
 
-        let path;
-        if (typeof params.path == 'string') {
-            path = params.path;
-        } else {
-            if (typeof params.path == undefined) {
-                throw Error(`[GUI] image() path must be provided.`);
-            } else {
-                throw Error(`[GUI] image() path must be a string.`);
-            }
+        if (typeof params !== 'object') {
+            throw Error(
+                `[GUI] image() second parameter must be an object. Received: ${typeof params}.`,
+            );
         }
         let filename = path.replace(/^.*[\\\/]/, '');
         let label;
@@ -40,17 +53,19 @@ export default class Image {
         // width & height options
         let inline_styles = '';
         if (params.width) {
-            if (typeof params.width == 'number') {
-                params.width += 'px';
+            let width = params.width;
+            if (typeof width === 'number') {
+                width = `${width}px`;
             }
-            inline_styles += `flex: 0 0 calc(${params.width} - 5px); `;
+            inline_styles += `flex: 0 0 calc(${width} - 5px); `;
         }
 
         if (params.height) {
-            if (typeof params.height == 'number') {
-                params.height += 'px';
+            let height = params.height;
+            if (typeof height == 'number') {
+                height = `${height}px`;
             }
-            inline_styles += `height: ${params.height}; `;
+            inline_styles += `height: ${height}; `;
         }
 
         // Image button
@@ -60,7 +75,7 @@ export default class Image {
         if (tooltip) {
             image.setAttribute('title', tooltip);
         }
-        this.parent.imageContainer.append(image);
+        this.parent.imageContainer!.append(image);
         
         // Expose the DOM element
         this.element = image;
@@ -76,9 +91,9 @@ export default class Image {
         image.append(text);
 
         image.addEventListener('click', () => {
-            let selected_items = image.parentElement.querySelectorAll(
+            let selected_items = image.parentElement?.querySelectorAll(
                 '.p-gui__image--selected',
-            );
+            ) || [];
             for (let i = 0; i < selected_items.length; i++) {
                 selected_items[i].classList.remove('p-gui__image--selected');
             }
@@ -99,7 +114,7 @@ export default class Image {
         });
     }
 
-    onClick(callback) {
+    onClick(callback: Callback) {
         this.callback = callback;
         return this;
     }

package/src/components/List.ts

@@ -0,0 +1,173 @@
+import type GUI from '../index.js';
+
+type ValueObjectItem = { label: string; value: string | number };
+export type Values = (string | number)[] | ValueObjectItem[];
+
+export type Options = {
+    label?: string;
+    tooltip?: string;
+}
+
+type Callback = ((value: string | number | ValueObjectItem, index: number) => void) | null;
+
+export default class List {
+    private callback: Callback;
+
+    public element: HTMLElement;
+
+    constructor(private parent: GUI, obj: any, prop: string, valuesArg: Values, options: Options = {}) {
+        this.callback = null;
+
+        if (!obj || typeof obj !== 'object' || typeof prop !== 'string') {
+            throw Error(`[GUI] list() invalid parameters.`);
+        }
+
+        let label = typeof options.label === 'string' ? options.label : prop;
+        let values = Array.isArray(valuesArg) ? valuesArg : null;
+        if (!values) {
+            throw Error(`[GUI] list() Third argument must be an array.`);
+        }
+
+        let valuesIsObject =
+            values && values.length > 0 && typeof values[0] === 'object';
+        const tooltip =
+            typeof options.tooltip === 'string'
+                ? options.tooltip
+                : options.tooltip === true
+                  ? label
+                  : null;
+
+        let value = (() => {
+            if (!values) {
+                return null;
+            }
+            if (typeof obj[prop] === 'string') {
+                if (!valuesIsObject) {
+                    // values is an array of strings
+                    return (values as (string | number)[]).indexOf(obj[prop]);
+                } else {
+                    // values is an array of objects
+                    return (values as ValueObjectItem[]).find((item) => item.value === obj[prop])
+                        ?.value;
+                }
+            }
+            if (typeof obj[prop] == 'number') {
+                if (!valuesIsObject) {
+                    // values is an array of strings
+                    return obj[prop];
+                } else {
+                    // values is an array of objects
+                    return (values as ValueObjectItem[]).find((item) => item.value === obj[prop])
+                        ?.value;
+                }
+            }
+        })();
+
+        const propReferenceIndex = this.parent.propReferences.push(obj[prop]) - 1;
+
+        let container = document.createElement('div');
+        container.className = 'p-gui__list';
+        container.textContent = label;
+        if (tooltip) {
+            container.setAttribute('title', tooltip);
+        }
+        this.parent.wrapper.append(container);
+
+        // Expose the DOM element
+        this.element = container;
+
+        let select = document.createElement('select');
+        container.append(select);
+        select.className = 'p-gui__list-dropdown';
+        select.addEventListener('change', (ev) => {
+            obj[prop] = (ev.target as HTMLSelectElement).value;
+
+            if (this.parent.onUpdate) {
+                this.parent.onUpdate();
+            } else if (
+                this.parent.isFolder &&
+                this.parent.firstParent.onUpdate
+            ) {
+                this.parent.firstParent.onUpdate();
+            }
+        });
+
+        if (values) {
+            values.forEach((item, index) => {
+                const optionName = valuesIsObject ? (item as ValueObjectItem).label : item;
+                const optionValue = valuesIsObject ? (item as ValueObjectItem).value : item;
+                let option = document.createElement('option');
+                option.setAttribute('value', String(optionValue));
+                option.textContent = String(optionName);
+                select.append(option);
+
+                if (
+                    (!valuesIsObject && value == index) ||
+                    (valuesIsObject && value == optionValue)
+                ) {
+                    option.setAttribute('selected', '');
+                }
+            });
+        }
+
+        Object.defineProperty(obj, prop, {
+            set: (val) => {
+                let newIndex, newValue, newObj;
+                if (valuesIsObject) {
+                    newObj = values?.find((item) => {
+                        return (item as ValueObjectItem).value == val;
+                    });
+                    if (!newObj) {
+                        console.error(`[GUI] list() value ${val} not found in values`);
+                        return;
+                    }
+                    newValue = (newObj as ValueObjectItem)?.value || (values[0] as ValueObjectItem).value;
+                    newIndex = (values as ValueObjectItem[]).indexOf(newObj as ValueObjectItem);
+                } 
+                else {
+                    if (typeof val == 'string') {
+                        newIndex = (values as (string | number)[]).indexOf(val);
+                        newValue = val;
+                    }
+                    if (typeof val == 'number') {
+                        newIndex = val;
+                        newValue = values[val];
+                    }
+                }
+
+                if (newIndex === undefined || newValue === undefined) {
+                    console.error('[GUI] list() newIndex or newValue is undefined');
+                    return;
+                }
+
+                this.parent.propReferences[propReferenceIndex] =
+                    valuesIsObject ? newValue : val;
+
+                const previousSelection =
+                    select.querySelector('[selected]');
+                if (previousSelection) {
+                    previousSelection.removeAttribute('selected');
+                }
+                select
+                    .querySelectorAll('option')
+                    [newIndex].setAttribute('selected', '');
+
+                if (typeof this.callback == 'function') {
+                    if (valuesIsObject && newObj) {
+                        this.callback(newObj, newIndex);
+                    } else {
+                        this.callback(newValue, newIndex);
+                    }
+                }
+            },
+            get: () => {
+                return this.parent.propReferences[propReferenceIndex];
+            },
+        });
+    }
+
+    onChange(callback: Callback) {
+        this.callback = callback;
+        return this;
+    }
+}