@stevejtrettel/shader-sandbox 0.1.3 → 0.1.4

package/src/uniforms/UniformStore.ts

@@ -0,0 +1,166 @@
+/**
+ * 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,
+  isArrayUniform,
+} from '../project/types';
+
+import { tightFloatCount } from '../engine/std140';
+
+export class UniformStore {
+  private definitions: UniformDefinitions;
+  private values: UniformValues = {};
+
+  constructor(definitions: UniformDefinitions) {
+    this.definitions = definitions;
+    this.initializeDefaults();
+  }
+
+  /**
+   * Initialize all values to their definition defaults.
+   */
+  private initializeDefaults(): void {
+    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 as { value: UniformValue }).value);
+      }
+    }
+  }
+
+  /**
+   * Clone a value to avoid mutation of arrays.
+   */
+  private cloneValue(value: UniformValue): UniformValue {
+    if (value instanceof Float32Array) return value.slice();
+    return Array.isArray(value) ? [...value] : value;
+  }
+
+  /**
+   * Get the definition for a uniform.
+   */
+  getDefinition(name: string): UniformDefinition | undefined {
+    return this.definitions[name];
+  }
+
+  /**
+   * Get all definitions.
+   */
+  getDefinitions(): UniformDefinitions {
+    return this.definitions;
+  }
+
+  /**
+   * Check if a uniform exists.
+   */
+  has(name: string): boolean {
+    return name in this.definitions;
+  }
+
+  /**
+   * Get the current value of a uniform.
+   */
+  get(name: string): UniformValue | undefined {
+    return this.values[name];
+  }
+
+  /**
+   * Get all current values (returns a shallow copy).
+   */
+  getAll(): UniformValues {
+    const result: UniformValues = {};
+    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: string, value: UniformValue): boolean {
+    if (!this.has(name)) {
+      return false;
+    }
+    this.values[name] = this.cloneValue(value);
+    return true;
+  }
+
+  /**
+   * Set multiple values at once.
+   */
+  setAll(values: Partial<UniformValues>): void {
+    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: string): boolean {
+    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(): void {
+    this.initializeDefaults();
+  }
+
+  /**
+   * Get the default value for a uniform.
+   */
+  getDefault(name: string): UniformValue | undefined {
+    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(): IterableIterator<[string, UniformDefinition, UniformValue]> {
+    for (const [name, def] of Object.entries(this.definitions)) {
+      yield [name, def, this.values[name]];
+    }
+  }
+
+  /**
+   * Get the number of uniforms.
+   */
+  get size(): number {
+    return Object.keys(this.definitions).length;
+  }
+
+  /**
+   * Check if there are any uniforms.
+   */
+  get isEmpty(): boolean {
+    return this.size === 0;
+  }
+}

package/src/uniforms/UniformsPanel.ts

@@ -0,0 +1,163 @@
+/**
+ * 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, hasUIControl } from '../project/types';
+import { UniformControls } from './UniformControls';
+
+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 class UniformsPanel {
+  private wrapper: HTMLElement;
+  private panel: HTMLElement;
+  private toggleButton: HTMLElement;
+  private controls: UniformControls | null = null;
+  private isOpen: boolean;
+
+  constructor(opts: UniformsPanelOptions) {
+    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: string, value: UniformValue): void {
+    this.controls?.setValue(name, value);
+  }
+
+  /**
+   * Show the panel.
+   */
+  show(): void {
+    this.isOpen = true;
+    this.toggleButton.classList.add('hidden');
+    this.panel.classList.remove('closed');
+  }
+
+  /**
+   * Hide the panel.
+   */
+  hide(): void {
+    this.isOpen = false;
+    this.panel.classList.add('closed');
+    this.toggleButton.classList.remove('hidden');
+  }
+
+  /**
+   * Toggle panel visibility.
+   */
+  toggle(): void {
+    if (this.isOpen) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  /**
+   * Check if panel is visible.
+   */
+  isVisible(): boolean {
+    return this.isOpen;
+  }
+
+  /**
+   * Destroy the panel.
+   */
+  destroy(): void {
+    this.controls?.destroy();
+    this.wrapper.remove();
+  }
+}

package/src/uniforms/index.ts

@@ -0,0 +1,13 @@
+/**
+ * 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';

package/src/uniforms/uniform-controls.css

@@ -0,0 +1,342 @@
+/**
+ * Uniform Controls Styles
+ * Theme-aware styling for uniform sliders and controls
+ */
+
+.uniform-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  height: 100%;
+  overflow-y: auto;
+  background: var(--bg-secondary);
+}
+
+.uniform-controls-empty {
+  color: var(--text-muted);
+  font-size: 13px;
+  text-align: center;
+  padding: 20px;
+}
+
+/* Header with reset button */
+.uniform-controls-header {
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-primary);
+  margin-bottom: 8px;
+}
+
+.uniform-controls-reset {
+  font-family: inherit;
+  font-size: 11px;
+  padding: 4px 10px;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.uniform-controls-reset:hover {
+  background: var(--border-primary);
+  color: var(--text-primary);
+}
+
+.uniform-controls-reset:active {
+  transform: translateY(1px);
+}
+
+/* Control list container */
+.uniform-controls-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Individual control wrapper */
+.uniform-control {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Label row with name and value */
+.uniform-control-label-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.uniform-control-label {
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.uniform-control-value {
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--bg-tertiary);
+  padding: 2px 6px;
+  border-radius: 3px;
+  min-width: 50px;
+  text-align: right;
+}
+
+/* Slider styling */
+.uniform-control-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background: var(--border-primary);
+  border-radius: 3px;
+  outline: none;
+  cursor: pointer;
+}
+
+/* Slider track - WebKit */
+.uniform-control-slider::-webkit-slider-runnable-track {
+  height: 6px;
+  background: var(--border-primary);
+  border-radius: 3px;
+}
+
+/* Slider thumb - WebKit */
+.uniform-control-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: var(--accent-primary);
+  border-radius: 50%;
+  cursor: pointer;
+  margin-top: -4px;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.uniform-control-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.uniform-control-slider::-webkit-slider-thumb:active {
+  transform: scale(0.95);
+}
+
+/* Slider track - Firefox */
+.uniform-control-slider::-moz-range-track {
+  height: 6px;
+  background: var(--border-primary);
+  border-radius: 3px;
+}
+
+/* Slider thumb - Firefox */
+.uniform-control-slider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: var(--accent-primary);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.uniform-control-slider::-moz-range-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.uniform-control-slider::-moz-range-thumb:active {
+  transform: scale(0.95);
+}
+
+/* Focus state */
+.uniform-control-slider:focus {
+  outline: none;
+}
+
+.uniform-control-slider:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px var(--code-selection);
+}
+
+.uniform-control-slider:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 3px var(--code-selection);
+}
+
+/* ===========================================================================
+ * Bool Toggle Switch
+ * =========================================================================== */
+
+.uniform-control-toggle {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+  cursor: pointer;
+}
+
+.uniform-control-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.uniform-control-toggle-slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--border-primary);
+  border-radius: 22px;
+  transition: background 0.2s ease;
+}
+
+.uniform-control-toggle-slider::before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 3px;
+  bottom: 3px;
+  background: var(--text-muted);
+  border-radius: 50%;
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.uniform-control-toggle input:checked + .uniform-control-toggle-slider {
+  background: var(--accent-primary);
+}
+
+.uniform-control-toggle input:checked + .uniform-control-toggle-slider::before {
+  transform: translateX(18px);
+  background: white;
+}
+
+.uniform-control-toggle input:focus + .uniform-control-toggle-slider {
+  box-shadow: 0 0 0 2px var(--code-selection);
+}
+
+/* ===========================================================================
+ * Vec2 XY Pad
+ * =========================================================================== */
+
+.uniform-control-xy-pad {
+  position: relative;
+  width: 100%;
+  height: 120px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  cursor: crosshair;
+  overflow: hidden;
+}
+
+/* Grid lines */
+.uniform-control-xy-pad::before,
+.uniform-control-xy-pad::after {
+  content: '';
+  position: absolute;
+  background: var(--border-primary);
+  opacity: 0.5;
+}
+
+.uniform-control-xy-pad::before {
+  /* Vertical center line */
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+}
+
+.uniform-control-xy-pad::after {
+  /* Horizontal center line */
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+}
+
+.uniform-control-xy-handle {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  background: var(--accent-primary);
+  border: 2px solid white;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* ===========================================================================
+ * Vec3 Color Picker
+ * =========================================================================== */
+
+.uniform-control-color-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.uniform-control-color-swatch {
+  width: 100%;
+  height: 32px;
+  border-radius: 4px;
+  border: 1px solid var(--border-primary);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+}
+
+.uniform-control-color-swatch:hover {
+  box-shadow: 0 0 0 2px var(--accent-primary);
+}
+
+.uniform-control-color-input {
+  /* Hide the native input but keep it functional */
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ===========================================================================
+ * Vec3 Sliders (non-color)
+ * =========================================================================== */
+
+.uniform-control-vec3 {
+  gap: 6px;
+}
+
+.uniform-control-vec-slider-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.uniform-control-vec-component {
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  width: 14px;
+  text-align: center;
+}
+
+.uniform-control-vec-slider {
+  flex: 1;
+}
+
+.uniform-control-vec-value {
+  min-width: 40px;
+  font-size: 10px;
+}