@stevejtrettel/shader-sandbox 0.1.3 → 0.1.4

package/dist-lib/uniforms/UniformControls.js

@@ -0,0 +1,518 @@
+/**
+ * Uniform Controls Component
+ *
+ * Renders UI controls for custom uniforms defined in config.json.
+ * Supports: float, int, bool, vec2 (XY pad), vec3 (color picker or sliders), vec4 (sliders)
+ */
+import './uniform-controls.css';
+import { isArrayUniform, } from '../project/types';
+export class UniformControls {
+    constructor(opts) {
+        this.values = {};
+        this.updaters = new Map();
+        // Track document-level event listeners for cleanup
+        this.documentListeners = [];
+        this.container = opts.container;
+        this.uniforms = opts.uniforms;
+        this.onChange = opts.onChange;
+        // Initialize values
+        for (const [name, def] of Object.entries(this.uniforms)) {
+            if (isArrayUniform(def) || def.hidden)
+                continue;
+            this.values[name] = opts.initialValues?.[name] ?? def.value;
+        }
+        this.render();
+    }
+    /**
+     * Render all uniform controls.
+     */
+    render() {
+        this.container.innerHTML = '';
+        this.container.className = 'uniform-controls';
+        const uniformEntries = Object.entries(this.uniforms);
+        if (uniformEntries.length === 0) {
+            const emptyMsg = document.createElement('div');
+            emptyMsg.className = 'uniform-controls-empty';
+            emptyMsg.textContent = 'No uniforms defined';
+            this.container.appendChild(emptyMsg);
+            return;
+        }
+        // Header with reset button
+        const header = document.createElement('div');
+        header.className = 'uniform-controls-header';
+        const resetButton = document.createElement('button');
+        resetButton.className = 'uniform-controls-reset';
+        resetButton.textContent = 'Reset';
+        resetButton.title = 'Reset all uniforms to defaults';
+        resetButton.addEventListener('click', () => this.resetToDefaults());
+        header.appendChild(resetButton);
+        this.container.appendChild(header);
+        // Control list
+        const controlList = document.createElement('div');
+        controlList.className = 'uniform-controls-list';
+        for (const [name, def] of uniformEntries) {
+            if (isArrayUniform(def) || def.hidden)
+                continue;
+            const result = this.createControl(name, def);
+            if (result) {
+                this.updaters.set(name, result.update);
+                controlList.appendChild(result.element);
+            }
+        }
+        this.container.appendChild(controlList);
+    }
+    /**
+     * Create a control element for a uniform.
+     */
+    createControl(name, def) {
+        if (isArrayUniform(def) || def.hidden)
+            return null;
+        switch (def.type) {
+            case 'float':
+                return this.createFloatSlider(name, def);
+            case 'int':
+                return this.createIntSlider(name, def);
+            case 'bool':
+                return this.createBoolToggle(name, def);
+            case 'vec2':
+                return this.createVec2Pad(name, def);
+            case 'vec3':
+                return def.color ? this.createColorPicker(name, def) : this.createVecSliders(name, def, 3);
+            case 'vec4':
+                return def.color ? this.createColorPicker4(name, def) : this.createVecSliders(name, def, 4);
+            default:
+                console.warn(`Uniform '${name}': unknown type '${def.type}'`);
+                return null;
+        }
+    }
+    // ===========================================================================
+    // Shared Slider Row Helper
+    // ===========================================================================
+    createSliderRow(opts) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'uniform-control-label-row';
+        const labelEl = document.createElement('label');
+        labelEl.className = 'uniform-control-label';
+        labelEl.textContent = opts.label;
+        const valueDisplay = document.createElement('span');
+        valueDisplay.className = 'uniform-control-value';
+        valueDisplay.textContent = opts.format(opts.value);
+        wrapper.appendChild(labelEl);
+        wrapper.appendChild(valueDisplay);
+        const slider = document.createElement('input');
+        slider.type = 'range';
+        slider.className = 'uniform-control-slider';
+        slider.min = String(opts.min);
+        slider.max = String(opts.max);
+        slider.step = String(opts.step);
+        slider.value = String(opts.value);
+        slider.addEventListener('input', () => {
+            const v = parseFloat(slider.value);
+            opts.onInput(v);
+            valueDisplay.textContent = opts.format(v);
+        });
+        const container = document.createElement('div');
+        container.appendChild(wrapper);
+        container.appendChild(slider);
+        const update = (v) => {
+            slider.value = String(v);
+            valueDisplay.textContent = opts.format(v);
+        };
+        return { element: container, update };
+    }
+    // ===========================================================================
+    // Float Slider
+    // ===========================================================================
+    createFloatSlider(name, def) {
+        const step = def.step ?? 0.01;
+        const { element, update: sliderUpdate } = this.createSliderRow({
+            label: def.label ?? name,
+            min: def.min ?? 0,
+            max: def.max ?? 1,
+            step,
+            value: this.values[name],
+            format: (v) => this.formatNumber(v, step),
+            onInput: (v) => {
+                this.values[name] = v;
+                this.onChange(name, v);
+            },
+        });
+        const wrapper = document.createElement('div');
+        wrapper.className = 'uniform-control uniform-control-float';
+        wrapper.appendChild(element);
+        return {
+            element: wrapper,
+            update: (v) => sliderUpdate(v),
+        };
+    }
+    // ===========================================================================
+    // Int Slider
+    // ===========================================================================
+    createIntSlider(name, def) {
+        const { element, update: sliderUpdate } = this.createSliderRow({
+            label: def.label ?? name,
+            min: def.min ?? 0,
+            max: def.max ?? 10,
+            step: def.step ?? 1,
+            value: this.values[name],
+            format: (v) => String(Math.round(v)),
+            onInput: (v) => {
+                const intVal = Math.round(v);
+                this.values[name] = intVal;
+                this.onChange(name, intVal);
+            },
+        });
+        const wrapper = document.createElement('div');
+        wrapper.className = 'uniform-control uniform-control-int';
+        wrapper.appendChild(element);
+        return {
+            element: wrapper,
+            update: (v) => sliderUpdate(v),
+        };
+    }
+    // ===========================================================================
+    // Bool Toggle
+    // ===========================================================================
+    createBoolToggle(name, def) {
+        const value = this.values[name];
+        const label = def.label ?? name;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'uniform-control uniform-control-bool';
+        const labelRow = document.createElement('div');
+        labelRow.className = 'uniform-control-label-row';
+        const labelEl = document.createElement('label');
+        labelEl.className = 'uniform-control-label';
+        labelEl.textContent = label;
+        const toggleWrapper = document.createElement('label');
+        toggleWrapper.className = 'uniform-control-toggle';
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.checked = value;
+        const slider = document.createElement('span');
+        slider.className = 'uniform-control-toggle-slider';
+        checkbox.addEventListener('change', () => {
+            const newValue = checkbox.checked;
+            this.values[name] = newValue;
+            this.onChange(name, newValue);
+        });
+        toggleWrapper.appendChild(checkbox);
+        toggleWrapper.appendChild(slider);
+        labelRow.appendChild(labelEl);
+        labelRow.appendChild(toggleWrapper);
+        wrapper.appendChild(labelRow);
+        return {
+            element: wrapper,
+            update: (v) => { checkbox.checked = v; },
+        };
+    }
+    // ===========================================================================
+    // Vec2 XY Pad
+    // ===========================================================================
+    createVec2Pad(name, def) {
+        const value = this.values[name];
+        const min = def.min ?? [0, 0];
+        const max = def.max ?? [1, 1];
+        const label = def.label ?? name;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'uniform-control uniform-control-vec2';
+        const labelRow = document.createElement('div');
+        labelRow.className = 'uniform-control-label-row';
+        const labelEl = document.createElement('label');
+        labelEl.className = 'uniform-control-label';
+        labelEl.textContent = label;
+        const valueDisplay = document.createElement('span');
+        valueDisplay.className = 'uniform-control-value';
+        valueDisplay.textContent = this.formatVec2(value);
+        labelRow.appendChild(labelEl);
+        labelRow.appendChild(valueDisplay);
+        const padContainer = document.createElement('div');
+        padContainer.className = 'uniform-control-xy-pad';
+        const handle = document.createElement('div');
+        handle.className = 'uniform-control-xy-handle';
+        padContainer.appendChild(handle);
+        const positionHandle = (v) => {
+            const xPercent = ((v[0] - min[0]) / (max[0] - min[0])) * 100;
+            const yPercent = (1 - (v[1] - min[1]) / (max[1] - min[1])) * 100;
+            handle.style.left = `${xPercent}%`;
+            handle.style.top = `${yPercent}%`;
+        };
+        positionHandle(value);
+        let isDragging = false;
+        const updateFromEvent = (e) => {
+            const rect = padContainer.getBoundingClientRect();
+            const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+            const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+            let xPercent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+            let yPercent = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
+            const newX = min[0] + xPercent * (max[0] - min[0]);
+            const newY = min[1] + (1 - yPercent) * (max[1] - min[1]);
+            const newValue = [newX, newY];
+            this.values[name] = newValue;
+            handle.style.left = `${xPercent * 100}%`;
+            handle.style.top = `${yPercent * 100}%`;
+            valueDisplay.textContent = this.formatVec2(newValue);
+            this.onChange(name, newValue);
+        };
+        const onMouseDown = (e) => { isDragging = true; updateFromEvent(e); e.preventDefault(); };
+        const onMouseMove = (e) => { if (isDragging)
+            updateFromEvent(e); };
+        const onMouseUp = () => { isDragging = false; };
+        padContainer.addEventListener('mousedown', onMouseDown);
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+        this.documentListeners.push({ type: 'mousemove', handler: onMouseMove });
+        this.documentListeners.push({ type: 'mouseup', handler: onMouseUp });
+        const onTouchStart = (e) => { isDragging = true; updateFromEvent(e); e.preventDefault(); };
+        const onTouchMove = (e) => { if (isDragging)
+            updateFromEvent(e); };
+        padContainer.addEventListener('touchstart', onTouchStart);
+        document.addEventListener('touchmove', onTouchMove);
+        document.addEventListener('touchend', onMouseUp);
+        this.documentListeners.push({ type: 'touchmove', handler: onTouchMove });
+        this.documentListeners.push({ type: 'touchend', handler: onMouseUp });
+        wrapper.appendChild(labelRow);
+        wrapper.appendChild(padContainer);
+        return {
+            element: wrapper,
+            update: (v) => {
+                const vec = v;
+                positionHandle(vec);
+                valueDisplay.textContent = this.formatVec2(vec);
+            },
+        };
+    }
+    // ===========================================================================
+    // Vec3 Color Picker
+    // ===========================================================================
+    createColorPicker(name, def) {
+        const value = this.values[name];
+        const label = def.label ?? name;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'uniform-control uniform-control-color';
+        const labelRow = document.createElement('div');
+        labelRow.className = 'uniform-control-label-row';
+        const labelEl = document.createElement('label');
+        labelEl.className = 'uniform-control-label';
+        labelEl.textContent = label;
+        const valueDisplay = document.createElement('span');
+        valueDisplay.className = 'uniform-control-value';
+        valueDisplay.textContent = this.rgbToHex(value);
+        labelRow.appendChild(labelEl);
+        labelRow.appendChild(valueDisplay);
+        const colorWrapper = document.createElement('div');
+        colorWrapper.className = 'uniform-control-color-wrapper';
+        const colorInput = document.createElement('input');
+        colorInput.type = 'color';
+        colorInput.className = 'uniform-control-color-input';
+        colorInput.value = this.rgbToHex(value);
+        const swatch = document.createElement('div');
+        swatch.className = 'uniform-control-color-swatch';
+        swatch.style.backgroundColor = this.rgbToHex(value);
+        colorInput.addEventListener('input', () => {
+            const newValue = this.hexToRgb(colorInput.value);
+            this.values[name] = newValue;
+            valueDisplay.textContent = colorInput.value;
+            swatch.style.backgroundColor = colorInput.value;
+            this.onChange(name, newValue);
+        });
+        swatch.addEventListener('click', () => colorInput.click());
+        colorWrapper.appendChild(swatch);
+        colorWrapper.appendChild(colorInput);
+        wrapper.appendChild(labelRow);
+        wrapper.appendChild(colorWrapper);
+        return {
+            element: wrapper,
+            update: (v) => {
+                const hex = this.rgbToHex(v);
+                colorInput.value = hex;
+                swatch.style.backgroundColor = hex;
+                valueDisplay.textContent = hex;
+            },
+        };
+    }
+    // ===========================================================================
+    // Vec4 Color Picker (with alpha)
+    // ===========================================================================
+    createColorPicker4(name, def) {
+        // For vec4 color, use color picker for RGB + a slider for alpha
+        const value = this.values[name];
+        const label = def.label ?? name;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'uniform-control uniform-control-color';
+        // Color picker for RGB
+        const colorResult = this.createColorPicker(name, {
+            type: 'vec3',
+            value: [value[0], value[1], value[2]],
+            color: true,
+            label,
+        });
+        // Alpha slider
+        const alphaStep = def.step?.[3] ?? 0.01;
+        const { element: alphaEl, update: alphaUpdate } = this.createSliderRow({
+            label: 'Alpha',
+            min: def.min?.[3] ?? 0,
+            max: def.max?.[3] ?? 1,
+            step: alphaStep,
+            value: value[3],
+            format: (v) => this.formatNumber(v, alphaStep),
+            onInput: (v) => {
+                const current = this.values[name];
+                current[3] = v;
+                this.onChange(name, [...current]);
+            },
+        });
+        // Override the color picker's onChange to include alpha
+        const origColorInput = colorResult.element.querySelector('.uniform-control-color-input');
+        if (origColorInput) {
+            // Remove old listener by replacing element
+            const newInput = origColorInput.cloneNode(true);
+            origColorInput.parentNode.replaceChild(newInput, origColorInput);
+            const swatch = colorResult.element.querySelector('.uniform-control-color-swatch');
+            const valueDisplay = colorResult.element.querySelector('.uniform-control-value');
+            newInput.addEventListener('input', () => {
+                const rgb = this.hexToRgb(newInput.value);
+                const current = this.values[name];
+                current[0] = rgb[0];
+                current[1] = rgb[1];
+                current[2] = rgb[2];
+                if (valueDisplay)
+                    valueDisplay.textContent = newInput.value;
+                if (swatch)
+                    swatch.style.backgroundColor = newInput.value;
+                this.onChange(name, [...current]);
+            });
+            if (swatch)
+                swatch.addEventListener('click', () => newInput.click());
+        }
+        wrapper.appendChild(colorResult.element.querySelector('.uniform-control-label-row'));
+        wrapper.appendChild(colorResult.element.querySelector('.uniform-control-color-wrapper'));
+        wrapper.appendChild(alphaEl);
+        return {
+            element: wrapper,
+            update: (v) => {
+                const vec = v;
+                colorResult.update([vec[0], vec[1], vec[2]]);
+                alphaUpdate(vec[3]);
+            },
+        };
+    }
+    // ===========================================================================
+    // Vec3/Vec4 Component Sliders
+    // ===========================================================================
+    createVecSliders(name, def, count) {
+        const value = this.values[name];
+        const label = def.label ?? name;
+        const components = count === 3 ? ['X', 'Y', 'Z'] : ['X', 'Y', 'Z', 'W'];
+        const wrapper = document.createElement('div');
+        wrapper.className = `uniform-control uniform-control-vec${count}`;
+        const labelEl = document.createElement('div');
+        labelEl.className = 'uniform-control-label';
+        labelEl.textContent = label;
+        wrapper.appendChild(labelEl);
+        const sliderUpdaters = [];
+        components.forEach((comp, i) => {
+            const step = def.step?.[i] ?? 0.01;
+            const { element: row, update: rowUpdate } = this.createSliderRow({
+                label: comp,
+                min: def.min?.[i] ?? 0,
+                max: def.max?.[i] ?? 1,
+                step,
+                value: value[i],
+                format: (v) => this.formatNumber(v, step),
+                onInput: (v) => {
+                    const currentValue = this.values[name];
+                    currentValue[i] = v;
+                    this.onChange(name, [...currentValue]);
+                },
+            });
+            // Style the row for vec component layout
+            const labelRow = row.querySelector('.uniform-control-label-row');
+            if (labelRow) {
+                labelRow.classList.add('uniform-control-vec-slider-row');
+                const lbl = labelRow.querySelector('.uniform-control-label');
+                if (lbl) {
+                    lbl.classList.add('uniform-control-vec-component');
+                }
+                const val = labelRow.querySelector('.uniform-control-value');
+                if (val) {
+                    val.classList.add('uniform-control-vec-value');
+                }
+            }
+            const slider = row.querySelector('.uniform-control-slider');
+            if (slider) {
+                slider.classList.add('uniform-control-vec-slider');
+            }
+            sliderUpdaters.push(rowUpdate);
+            wrapper.appendChild(row);
+        });
+        return {
+            element: wrapper,
+            update: (v) => {
+                const vec = v;
+                sliderUpdaters.forEach((upd, i) => upd(vec[i]));
+            },
+        };
+    }
+    // ===========================================================================
+    // Utility Methods
+    // ===========================================================================
+    formatNumber(value, step) {
+        const stepStr = String(step);
+        const decimalIndex = stepStr.indexOf('.');
+        const decimals = decimalIndex === -1 ? 0 : stepStr.length - decimalIndex - 1;
+        return value.toFixed(decimals);
+    }
+    formatVec2(value) {
+        return `(${value[0].toFixed(2)}, ${value[1].toFixed(2)})`;
+    }
+    rgbToHex(rgb) {
+        const r = Math.round(rgb[0] * 255);
+        const g = Math.round(rgb[1] * 255);
+        const b = Math.round(rgb[2] * 255);
+        return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        if (!result)
+            return [0, 0, 0];
+        return [
+            parseInt(result[1], 16) / 255,
+            parseInt(result[2], 16) / 255,
+            parseInt(result[3], 16) / 255,
+        ];
+    }
+    // ===========================================================================
+    // Public Methods
+    // ===========================================================================
+    /**
+     * Update a uniform value externally (e.g., from reset).
+     */
+    setValue(name, value) {
+        if (!(name in this.uniforms))
+            return;
+        this.values[name] = value;
+        this.updaters.get(name)?.(value);
+    }
+    /**
+     * Reset all uniforms to their default values.
+     */
+    resetToDefaults() {
+        for (const [name, def] of Object.entries(this.uniforms)) {
+            if (isArrayUniform(def) || def.hidden)
+                continue;
+            this.setValue(name, def.value);
+            this.onChange(name, def.value);
+        }
+    }
+    /**
+     * Destroy the controls and clean up.
+     */
+    destroy() {
+        for (const { type, handler } of this.documentListeners) {
+            document.removeEventListener(type, handler);
+        }
+        this.documentListeners = [];
+        this.container.innerHTML = '';
+        this.updaters.clear();
+    }
+}

package/dist-lib/uniforms/UniformStore.d.ts

@@ -0,0 +1,74 @@
+/**
+ * UniformStore - Simple state manager for custom uniforms
+ *
+ * Encapsulates uniform values and provides clean get/set interface.
+ * Used by the engine to manage uniform state.
+ */
+import { UniformDefinitions, UniformDefinition, UniformValue, UniformValues } from '../project/types';
+export declare class UniformStore {
+    private definitions;
+    private values;
+    constructor(definitions: UniformDefinitions);
+    /**
+     * Initialize all values to their definition defaults.
+     */
+    private initializeDefaults;
+    /**
+     * Clone a value to avoid mutation of arrays.
+     */
+    private cloneValue;
+    /**
+     * Get the definition for a uniform.
+     */
+    getDefinition(name: string): UniformDefinition | undefined;
+    /**
+     * Get all definitions.
+     */
+    getDefinitions(): UniformDefinitions;
+    /**
+     * Check if a uniform exists.
+     */
+    has(name: string): boolean;
+    /**
+     * Get the current value of a uniform.
+     */
+    get(name: string): UniformValue | undefined;
+    /**
+     * Get all current values (returns a shallow copy).
+     */
+    getAll(): UniformValues;
+    /**
+     * Set the value of a uniform.
+     * Returns true if the value was set, false if the uniform doesn't exist.
+     */
+    set(name: string, value: UniformValue): boolean;
+    /**
+     * Set multiple values at once.
+     */
+    setAll(values: Partial<UniformValues>): void;
+    /**
+     * Reset a single uniform to its default value.
+     */
+    reset(name: string): boolean;
+    /**
+     * Reset all uniforms to their default values.
+     */
+    resetAll(): void;
+    /**
+     * Get the default value for a uniform.
+     */
+    getDefault(name: string): UniformValue | undefined;
+    /**
+     * Iterate over all uniforms (name, definition, current value).
+     */
+    entries(): IterableIterator<[string, UniformDefinition, UniformValue]>;
+    /**
+     * Get the number of uniforms.
+     */
+    get size(): number;
+    /**
+     * Check if there are any uniforms.
+     */
+    get isEmpty(): boolean;
+}
+//# sourceMappingURL=UniformStore.d.ts.map

package/dist-lib/uniforms/UniformStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UniformStore.d.ts","sourceRoot":"","sources":["../../src/uniforms/UniformStore.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EAEd,MAAM,kBAAkB,CAAC;AAI1B,qBAAa,YAAY;IACvB,OAAO,CAAC,WAAW,CAAqB;IACxC,OAAO,CAAC,MAAM,CAAqB;gBAEvB,WAAW,EAAE,kBAAkB;IAK3C;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAW1B;;OAEG;IACH,OAAO,CAAC,UAAU;IAKlB;;OAEG;IACH,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,iBAAiB,GAAG,SAAS;IAI1D;;OAEG;IACH,cAAc,IAAI,kBAAkB;IAIpC;;OAEG;IACH,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAI1B;;OAEG;IACH,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS;IAI3C;;OAEG;IACH,MAAM,IAAI,aAAa;IAQvB;;;OAGG;IACH,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,GAAG,OAAO;IAQ/C;;OAEG;IACH,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI;IAQ5C;;OAEG;IACH,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAa5B;;OAEG;IACH,QAAQ,IAAI,IAAI;IAIhB;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS;IAOlD;;OAEG;IACF,OAAO,IAAI,gBAAgB,CAAC,CAAC,MAAM,EAAE,iBAAiB,EAAE,YAAY,CAAC,CAAC;IAMvE;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;CACF"}