@stevejtrettel/shader-sandbox 0.1.2 → 0.1.4

package/dist-lib/uniforms/UniformStore.js

@@ -0,0 +1,145 @@
+/**
+ * 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 { isArrayUniform, } from '../project/types';
+import { tightFloatCount } from '../engine/std140';
+export class UniformStore {
+    constructor(definitions) {
+        this.values = {};
+        this.definitions = definitions;
+        this.initializeDefaults();
+    }
+    /**
+     * Initialize all values to their definition defaults.
+     */
+    initializeDefaults() {
+        for (const [name, def] of Object.entries(this.definitions)) {
+            if (isArrayUniform(def)) {
+                // Array uniforms initialize to zeroed Float32Array
+                this.values[name] = new Float32Array(tightFloatCount(def.type, def.count));
+            }
+            else {
+                this.values[name] = this.cloneValue(def.value);
+            }
+        }
+    }
+    /**
+     * Clone a value to avoid mutation of arrays.
+     */
+    cloneValue(value) {
+        if (value instanceof Float32Array)
+            return value.slice();
+        return Array.isArray(value) ? [...value] : value;
+    }
+    /**
+     * Get the definition for a uniform.
+     */
+    getDefinition(name) {
+        return this.definitions[name];
+    }
+    /**
+     * Get all definitions.
+     */
+    getDefinitions() {
+        return this.definitions;
+    }
+    /**
+     * Check if a uniform exists.
+     */
+    has(name) {
+        return name in this.definitions;
+    }
+    /**
+     * Get the current value of a uniform.
+     */
+    get(name) {
+        return this.values[name];
+    }
+    /**
+     * Get all current values (returns a shallow copy).
+     */
+    getAll() {
+        const result = {};
+        for (const [name, value] of Object.entries(this.values)) {
+            result[name] = this.cloneValue(value);
+        }
+        return result;
+    }
+    /**
+     * Set the value of a uniform.
+     * Returns true if the value was set, false if the uniform doesn't exist.
+     */
+    set(name, value) {
+        if (!this.has(name)) {
+            return false;
+        }
+        this.values[name] = this.cloneValue(value);
+        return true;
+    }
+    /**
+     * Set multiple values at once.
+     */
+    setAll(values) {
+        for (const [name, value] of Object.entries(values)) {
+            if (value !== undefined) {
+                this.set(name, value);
+            }
+        }
+    }
+    /**
+     * Reset a single uniform to its default value.
+     */
+    reset(name) {
+        const def = this.definitions[name];
+        if (!def) {
+            return false;
+        }
+        if (isArrayUniform(def)) {
+            this.values[name] = new Float32Array(tightFloatCount(def.type, def.count));
+        }
+        else {
+            this.values[name] = this.cloneValue(def.value);
+        }
+        return true;
+    }
+    /**
+     * Reset all uniforms to their default values.
+     */
+    resetAll() {
+        this.initializeDefaults();
+    }
+    /**
+     * Get the default value for a uniform.
+     */
+    getDefault(name) {
+        const def = this.definitions[name];
+        if (!def)
+            return undefined;
+        if (isArrayUniform(def))
+            return new Float32Array(tightFloatCount(def.type, def.count));
+        return this.cloneValue(def.value);
+    }
+    /**
+     * Iterate over all uniforms (name, definition, current value).
+     */
+    *entries() {
+        for (const [name, def] of Object.entries(this.definitions)) {
+            yield [name, def, this.values[name]];
+        }
+    }
+    /**
+     * Get the number of uniforms.
+     */
+    get size() {
+        return Object.keys(this.definitions).length;
+    }
+    /**
+     * Check if there are any uniforms.
+     */
+    get isEmpty() {
+        return this.size === 0;
+    }
+}

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

@@ -0,0 +1,53 @@
+/**
+ * Uniforms Panel - Floating overlay for uniform controls
+ *
+ * A compact panel that floats on the right side of the canvas.
+ * Includes a toggle button to show/hide. Starts closed by default.
+ */
+import './uniforms-panel.css';
+import { UniformDefinitions, UniformValue, UniformValues } from '../project/types';
+export interface UniformsPanelOptions {
+    /** Parent container to attach the panel to */
+    container: HTMLElement;
+    /** Uniform definitions from project */
+    uniforms: UniformDefinitions;
+    /** Callback when uniform value changes */
+    onChange: (name: string, value: UniformValue) => void;
+    /** Initial values (optional) */
+    initialValues?: UniformValues;
+    /** Start with panel open (default: false) */
+    startOpen?: boolean;
+}
+export declare class UniformsPanel {
+    private wrapper;
+    private panel;
+    private toggleButton;
+    private controls;
+    private isOpen;
+    constructor(opts: UniformsPanelOptions);
+    /**
+     * Update a uniform value from external source.
+     */
+    setValue(name: string, value: UniformValue): void;
+    /**
+     * Show the panel.
+     */
+    show(): void;
+    /**
+     * Hide the panel.
+     */
+    hide(): void;
+    /**
+     * Toggle panel visibility.
+     */
+    toggle(): void;
+    /**
+     * Check if panel is visible.
+     */
+    isVisible(): boolean;
+    /**
+     * Destroy the panel.
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=UniformsPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UniformsPanel.d.ts","sourceRoot":"","sources":["../../src/uniforms/UniformsPanel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,aAAa,EAAgB,MAAM,kBAAkB,CAAC;AAGjG,MAAM,WAAW,oBAAoB;IACnC,8CAA8C;IAC9C,SAAS,EAAE,WAAW,CAAC;IACvB,uCAAuC;IACvC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,0CAA0C;IAC1C,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACtD,gCAAgC;IAChC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,qBAAa,aAAa;IACxB,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,MAAM,CAAU;gBAEZ,IAAI,EAAE,oBAAoB;IAgFtC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,GAAG,IAAI;IAIjD;;OAEG;IACH,IAAI,IAAI,IAAI;IAMZ;;OAEG;IACH,IAAI,IAAI,IAAI;IAMZ;;OAEG;IACH,MAAM,IAAI,IAAI;IAQd;;OAEG;IACH,SAAS,IAAI,OAAO;IAIpB;;OAEG;IACH,OAAO,IAAI,IAAI;CAIhB"}

package/dist-lib/uniforms/UniformsPanel.js

@@ -0,0 +1,124 @@
+/**
+ * Uniforms Panel - Floating overlay for uniform controls
+ *
+ * A compact panel that floats on the right side of the canvas.
+ * Includes a toggle button to show/hide. Starts closed by default.
+ */
+import './uniforms-panel.css';
+import { hasUIControl } from '../project/types';
+import { UniformControls } from './UniformControls';
+export class UniformsPanel {
+    constructor(opts) {
+        this.controls = null;
+        this.isOpen = opts.startOpen ?? false;
+        // Create wrapper for both toggle button and panel
+        this.wrapper = document.createElement('div');
+        this.wrapper.className = 'uniforms-panel-wrapper';
+        // Create toggle button (always visible)
+        this.toggleButton = document.createElement('button');
+        this.toggleButton.className = 'uniforms-toggle-button';
+        this.toggleButton.title = 'Toggle Uniforms Panel';
+        this.toggleButton.innerHTML = `
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1="4" y1="21" x2="4" y2="14"></line>
+        <line x1="4" y1="10" x2="4" y2="3"></line>
+        <line x1="12" y1="21" x2="12" y2="12"></line>
+        <line x1="12" y1="8" x2="12" y2="3"></line>
+        <line x1="20" y1="21" x2="20" y2="16"></line>
+        <line x1="20" y1="12" x2="20" y2="3"></line>
+        <line x1="1" y1="14" x2="7" y2="14"></line>
+        <line x1="9" y1="8" x2="15" y2="8"></line>
+        <line x1="17" y1="16" x2="23" y2="16"></line>
+      </svg>
+    `;
+        this.toggleButton.addEventListener('click', () => this.toggle());
+        this.wrapper.appendChild(this.toggleButton);
+        // Create panel element
+        this.panel = document.createElement('div');
+        this.panel.className = 'uniforms-panel';
+        // Only create content if there are visible uniforms
+        const hasVisible = Object.values(opts.uniforms).some(def => hasUIControl(def));
+        if (!hasVisible) {
+            this.wrapper.style.display = 'none';
+            opts.container.appendChild(this.wrapper);
+            return;
+        }
+        // Header with close button
+        const header = document.createElement('div');
+        header.className = 'uniforms-panel-header';
+        const title = document.createElement('span');
+        title.textContent = 'Uniforms';
+        header.appendChild(title);
+        const closeButton = document.createElement('button');
+        closeButton.className = 'uniforms-panel-close';
+        closeButton.innerHTML = '&times;';
+        closeButton.title = 'Close';
+        closeButton.addEventListener('click', () => this.hide());
+        header.appendChild(closeButton);
+        this.panel.appendChild(header);
+        // Content area for controls
+        const content = document.createElement('div');
+        content.className = 'uniforms-panel-content';
+        this.panel.appendChild(content);
+        // Create uniform controls
+        this.controls = new UniformControls({
+            container: content,
+            uniforms: opts.uniforms,
+            initialValues: opts.initialValues,
+            onChange: opts.onChange,
+        });
+        this.wrapper.appendChild(this.panel);
+        // Set initial state
+        if (!this.isOpen) {
+            this.panel.classList.add('closed');
+        }
+        // Append to container
+        opts.container.appendChild(this.wrapper);
+    }
+    /**
+     * Update a uniform value from external source.
+     */
+    setValue(name, value) {
+        this.controls?.setValue(name, value);
+    }
+    /**
+     * Show the panel.
+     */
+    show() {
+        this.isOpen = true;
+        this.toggleButton.classList.add('hidden');
+        this.panel.classList.remove('closed');
+    }
+    /**
+     * Hide the panel.
+     */
+    hide() {
+        this.isOpen = false;
+        this.panel.classList.add('closed');
+        this.toggleButton.classList.remove('hidden');
+    }
+    /**
+     * Toggle panel visibility.
+     */
+    toggle() {
+        if (this.isOpen) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    /**
+     * Check if panel is visible.
+     */
+    isVisible() {
+        return this.isOpen;
+    }
+    /**
+     * Destroy the panel.
+     */
+    destroy() {
+        this.controls?.destroy();
+        this.wrapper.remove();
+    }
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Uniform Controls Module
+ *
+ * UI components and state management for custom uniforms.
+ */
+export { UniformControls } from './UniformControls';
+export type { UniformControlsOptions } from './UniformControls';
+export { UniformsPanel } from './UniformsPanel';
+export type { UniformsPanelOptions } from './UniformsPanel';
+export { UniformStore } from './UniformStore';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/uniforms/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist-lib/uniforms/index.js

@@ -0,0 +1,8 @@
+/**
+ * Uniform Controls Module
+ *
+ * UI components and state management for custom uniforms.
+ */
+export { UniformControls } from './UniformControls';
+export { UniformsPanel } from './UniformsPanel';
+export { UniformStore } from './UniformStore';

package/package.json

@@ -1,7 +1,22 @@
 {
   "name": "@stevejtrettel/shader-sandbox",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Local Shadertoy-compatible GLSL shader development environment with live editing",
+  "author": "Steve Trettel",
+  "license": "MIT",
+  "homepage": "https://github.com/stevejtrettel/shader-sandbox",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stevejtrettel/shader-sandbox.git"
+  },
+  "keywords": [
+    "shader",
+    "glsl",
+    "shadertoy",
+    "webgl",
+    "graphics",
+    "creative-coding"
+  ],
   "type": "module",
   "main": "./dist-lib/index.js",
   "types": "./dist-lib/index.d.ts",