891 lines
24 KiB
JavaScript
891 lines
24 KiB
JavaScript
|
// Control Surface UI — DOM for compound axes + settings drawer
|
||
|
|
// Renders 3 compact sliders on the floating bar and a gear-icon settings drawer.
|
||
|
|
//
|
||
|
|
// Usage:
|
||
|
|
// import { initControlSurfaceUI } from './ui/control-surface-ui.js';
|
||
|
|
// const { surface, destroy } = initControlSurfaceUI();
|
||
|
|
// // surface is the ControlSurface instance
|
||
|
|
|
||
|
|
import { ControlSurface, CONTROL_PRESETS, PARAM_DEFAULTS, PARAM_RANGES, LOG_SCALE_PARAMS } from './control-surface.js';
|
||
|
|
|
||
|
|
// ---- Parameter metadata for the drawer ----
|
||
|
|
|
||
|
|
const SECTIONS = [
|
||
|
|
{
|
||
|
|
id: 'input',
|
||
|
|
label: 'Input',
|
||
|
|
params: [
|
||
|
|
{ name: 'zoom', label: 'Zoom', log: true },
|
||
|
|
{ name: 'deadzone', label: 'Deadzone' },
|
||
|
|
{ name: 'inputCurve', label: 'Curve' },
|
||
|
|
{ name: 'smoothing', label: 'Smoothing' },
|
||
|
|
{ name: 'momentumZoom', label: 'Momentum', type: 'select', options: ['off', 'gentle', 'strong'] },
|
||
|
|
{ name: 'invertX', label: 'Invert X', type: 'toggle' },
|
||
|
|
{ name: 'invertY', label: 'Invert Y', type: 'toggle' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'training',
|
||
|
|
label: 'Training',
|
||
|
|
params: [
|
||
|
|
{ name: 'learningRate', label: 'Learning Rate', log: true },
|
||
|
|
{ name: 'maxIterations', label: 'Max Iterations' },
|
||
|
|
{ name: 'convergenceThreshold', label: 'Convergence', log: true },
|
||
|
|
{ name: 'rlTrainIntensity', label: 'RL Intensity' },
|
||
|
|
{ name: 'maxExamples', label: 'Max Examples' },
|
||
|
|
{ name: 'exampleDecay', label: 'Example Decay' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'exploration',
|
||
|
|
label: 'Exploration',
|
||
|
|
params: [
|
||
|
|
{ name: 'spread', label: 'Spread' },
|
||
|
|
{ name: 'noiseFloor', label: 'Noise Floor' },
|
||
|
|
{ name: 'noiseCap', label: 'Noise Cap' },
|
||
|
|
{ name: 'noiseGrowth', label: 'Noise Growth' },
|
||
|
|
{ name: 'noiseDecay', label: 'Noise Decay' },
|
||
|
|
{ name: 'weightDecay', label: 'Weight Decay' },
|
||
|
|
{ name: 'noiseDistribution', label: 'Distribution', type: 'select', options: ['gaussian', 'cauchy'] },
|
||
|
|
{ name: 'layerAwareNoise', label: 'Layer-Aware', type: 'toggle' },
|
||
|
|
{ name: 'zoomAwareFeedback', label: 'Zoom-Aware FB', type: 'toggle' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'output',
|
||
|
|
label: 'Output',
|
||
|
|
params: [
|
||
|
|
{ name: 'outputSmoothing', label: 'Smoothing' },
|
||
|
|
{ name: 'outputSlewRate', label: 'Slew Rate' },
|
||
|
|
{ name: 'tame', label: 'Tame' },
|
||
|
|
{ name: 'globalCurve', label: 'Global Curve' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
// ---- Utility: log-scale slider helpers ----
|
||
|
|
|
||
|
|
function toLogSlider(value, min, max) {
|
||
|
|
// Map a log-scale value to 0-1 slider position
|
||
|
|
const logMin = Math.log(min);
|
||
|
|
const logMax = Math.log(max);
|
||
|
|
return (Math.log(Math.max(value, min)) - logMin) / (logMax - logMin);
|
||
|
|
}
|
||
|
|
|
||
|
|
function fromLogSlider(sliderPos, min, max) {
|
||
|
|
const logMin = Math.log(min);
|
||
|
|
const logMax = Math.log(max);
|
||
|
|
return Math.exp(logMin + sliderPos * (logMax - logMin));
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatValue(name, value) {
|
||
|
|
if (typeof value === 'boolean') return value ? 'On' : 'Off';
|
||
|
|
if (typeof value === 'string') return value;
|
||
|
|
if (typeof value !== 'number') return String(value);
|
||
|
|
// Convergence threshold: scientific notation
|
||
|
|
if (name === 'convergenceThreshold') return value.toExponential(1);
|
||
|
|
// Integers
|
||
|
|
if (name === 'maxExamples' || name === 'maxIterations') return Math.round(value).toString();
|
||
|
|
// Small decimals
|
||
|
|
if (Math.abs(value) < 0.01 && value !== 0) return value.toExponential(1);
|
||
|
|
if (Math.abs(value) < 1) return value.toFixed(3);
|
||
|
|
return value.toFixed(2);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---- Build DOM ----
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Initialize the control surface UI.
|
||
|
|
* Inserts compound axis sliders into the floating bar and creates the settings drawer.
|
||
|
|
* Returns { surface, destroy }.
|
||
|
|
*/
|
||
|
|
export function initControlSurfaceUI() {
|
||
|
|
const surface = new ControlSurface();
|
||
|
|
|
||
|
|
// Apply default preset
|
||
|
|
surface.applyPreset('default');
|
||
|
|
|
||
|
|
// --- Floating bar: compound axis sliders ---
|
||
|
|
const $floatingBar = document.getElementById('floating-bar');
|
||
|
|
const axisContainer = document.createElement('div');
|
||
|
|
axisContainer.className = 'cs-axes';
|
||
|
|
axisContainer.innerHTML = `
|
||
|
|
<div class="cs-axis" data-axis="boldness">
|
||
|
|
<label class="cs-axis-label">Bold</label>
|
||
|
|
<input type="range" class="cs-axis-slider" min="0" max="1" step="0.01" value="0.5">
|
||
|
|
</div>
|
||
|
|
<div class="cs-axis" data-axis="memory">
|
||
|
|
<label class="cs-axis-label">Mem</label>
|
||
|
|
<input type="range" class="cs-axis-slider" min="0" max="1" step="0.01" value="0.5">
|
||
|
|
</div>
|
||
|
|
<div class="cs-axis" data-axis="precision">
|
||
|
|
<label class="cs-axis-label">Prec</label>
|
||
|
|
<input type="range" class="cs-axis-slider" min="0" max="1" step="0.01" value="0.3">
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
// Insert before the chevron button
|
||
|
|
const $chevron = document.getElementById('chevron-btn');
|
||
|
|
if ($chevron) {
|
||
|
|
$floatingBar.insertBefore(axisContainer, $chevron);
|
||
|
|
} else {
|
||
|
|
$floatingBar.appendChild(axisContainer);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Wire axis sliders
|
||
|
|
const axisSliders = {};
|
||
|
|
for (const axisEl of axisContainer.querySelectorAll('.cs-axis')) {
|
||
|
|
const axisName = axisEl.dataset.axis;
|
||
|
|
const slider = axisEl.querySelector('.cs-axis-slider');
|
||
|
|
axisSliders[axisName] = slider;
|
||
|
|
|
||
|
|
slider.addEventListener('input', () => {
|
||
|
|
const val = parseFloat(slider.value);
|
||
|
|
if (axisName === 'boldness') surface.setBoldness(val);
|
||
|
|
else if (axisName === 'memory') surface.setMemory(val);
|
||
|
|
else if (axisName === 'precision') surface.setPrecision(val);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Double-tap to clear all overrides for this axis
|
||
|
|
let lastTap = 0;
|
||
|
|
slider.addEventListener('pointerdown', () => {
|
||
|
|
const now = Date.now();
|
||
|
|
if (now - lastTap < 350) {
|
||
|
|
surface.clearAllOverrides();
|
||
|
|
syncDrawerValues();
|
||
|
|
}
|
||
|
|
lastTap = now;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// --- Gear button (settings drawer toggle) ---
|
||
|
|
const gearBtn = document.createElement('button');
|
||
|
|
gearBtn.className = 'cs-gear-btn';
|
||
|
|
gearBtn.title = 'Control surface settings';
|
||
|
|
gearBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<circle cx="8" cy="8" r="2.5"/>
|
||
|
|
<path d="M13.3 9.5a1.2 1.2 0 00.24 1.32l.04.04a1.45 1.45 0 11-2.05 2.05l-.04-.04a1.2 1.2 0 00-1.32-.24 1.2 1.2 0 00-.73 1.1v.12a1.45 1.45 0 11-2.9 0v-.06a1.2 1.2 0 00-.78-1.1 1.2 1.2 0 00-1.32.24l-.04.04a1.45 1.45 0 11-2.05-2.05l.04-.04a1.2 1.2 0 00.24-1.32 1.2 1.2 0 00-1.1-.73h-.12a1.45 1.45 0 110-2.9h.06a1.2 1.2 0 001.1-.78 1.2 1.2 0 00-.24-1.32l-.04-.04A1.45 1.45 0 114.38 1.68l.04.04a1.2 1.2 0 001.32.24h.06a1.2 1.2 0 00.73-1.1V.74a1.45 1.45 0 112.9 0v.06a1.2 1.2 0 00.73 1.1 1.2 1.2 0 001.32-.24l.04-.04a1.45 1.45 0 112.05 2.05l-.04.04a1.2 1.2 0 00-.24 1.32v.06a1.2 1.2 0 001.1.73h.12a1.45 1.45 0 110 2.9h-.06a1.2 1.2 0 00-1.1.73z"/>
|
||
|
|
</svg>`;
|
||
|
|
|
||
|
|
// Place gear button near the help button (top-right area)
|
||
|
|
const $helpBtn = document.getElementById('help-btn');
|
||
|
|
if ($helpBtn && $helpBtn.parentNode) {
|
||
|
|
$helpBtn.parentNode.insertBefore(gearBtn, $helpBtn);
|
||
|
|
} else {
|
||
|
|
document.body.appendChild(gearBtn);
|
||
|
|
}
|
||
|
|
|
||
|
|
// --- Settings drawer ---
|
||
|
|
const overlay = document.createElement('div');
|
||
|
|
overlay.className = 'cs-drawer-overlay hidden';
|
||
|
|
|
||
|
|
const drawer = document.createElement('div');
|
||
|
|
drawer.className = 'cs-drawer';
|
||
|
|
|
||
|
|
// Build drawer content
|
||
|
|
drawer.innerHTML = buildDrawerHTML();
|
||
|
|
overlay.appendChild(drawer);
|
||
|
|
document.body.appendChild(overlay);
|
||
|
|
|
||
|
|
// --- Wire drawer interactions ---
|
||
|
|
|
||
|
|
let drawerOpen = false;
|
||
|
|
|
||
|
|
function openDrawer() {
|
||
|
|
drawerOpen = true;
|
||
|
|
overlay.classList.remove('hidden');
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
overlay.classList.add('open');
|
||
|
|
drawer.classList.add('open');
|
||
|
|
});
|
||
|
|
syncDrawerValues();
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeDrawer() {
|
||
|
|
drawerOpen = false;
|
||
|
|
overlay.classList.remove('open');
|
||
|
|
drawer.classList.remove('open');
|
||
|
|
setTimeout(() => {
|
||
|
|
if (!drawerOpen) overlay.classList.add('hidden');
|
||
|
|
}, 220);
|
||
|
|
}
|
||
|
|
|
||
|
|
gearBtn.addEventListener('click', () => {
|
||
|
|
if (drawerOpen) closeDrawer();
|
||
|
|
else openDrawer();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Close on overlay click (outside drawer)
|
||
|
|
overlay.addEventListener('click', (e) => {
|
||
|
|
if (e.target === overlay) closeDrawer();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Close button inside drawer
|
||
|
|
const closeBtn = drawer.querySelector('.cs-drawer-close');
|
||
|
|
if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
|
||
|
|
|
||
|
|
// Preset dropdown
|
||
|
|
const presetSelect = drawer.querySelector('#cs-preset-select');
|
||
|
|
if (presetSelect) {
|
||
|
|
presetSelect.addEventListener('change', () => {
|
||
|
|
const id = presetSelect.value;
|
||
|
|
if (id && CONTROL_PRESETS[id]) {
|
||
|
|
surface.applyPreset(id);
|
||
|
|
// Sync axis sliders
|
||
|
|
axisSliders.boldness.value = surface.getBoldness();
|
||
|
|
axisSliders.memory.value = surface.getMemory();
|
||
|
|
axisSliders.precision.value = surface.getPrecision();
|
||
|
|
syncDrawerValues();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Reset button
|
||
|
|
const resetBtn = drawer.querySelector('#cs-reset-preset');
|
||
|
|
if (resetBtn) {
|
||
|
|
resetBtn.addEventListener('click', () => {
|
||
|
|
const id = presetSelect?.value || 'default';
|
||
|
|
surface.applyPreset(id);
|
||
|
|
axisSliders.boldness.value = surface.getBoldness();
|
||
|
|
axisSliders.memory.value = surface.getMemory();
|
||
|
|
axisSliders.precision.value = surface.getPrecision();
|
||
|
|
syncDrawerValues();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Section expand/collapse
|
||
|
|
for (const header of drawer.querySelectorAll('.cs-section-header')) {
|
||
|
|
header.addEventListener('click', () => {
|
||
|
|
const section = header.parentElement;
|
||
|
|
section.classList.toggle('collapsed');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Wire individual parameter controls
|
||
|
|
wireParamControls(drawer, surface, () => syncDrawerValues());
|
||
|
|
|
||
|
|
// --- Sync drawer values from surface state ---
|
||
|
|
|
||
|
|
function syncDrawerValues() {
|
||
|
|
const params = surface.getParams();
|
||
|
|
for (const section of SECTIONS) {
|
||
|
|
for (const p of section.params) {
|
||
|
|
const val = params[p.name];
|
||
|
|
const el = drawer.querySelector(`[data-param="${p.name}"]`);
|
||
|
|
if (!el) continue;
|
||
|
|
|
||
|
|
const range = PARAM_RANGES[p.name];
|
||
|
|
|
||
|
|
if (p.type === 'toggle') {
|
||
|
|
const checkbox = el.querySelector('input[type="checkbox"]');
|
||
|
|
if (checkbox) checkbox.checked = !!val;
|
||
|
|
} else if (p.type === 'select') {
|
||
|
|
const select = el.querySelector('select');
|
||
|
|
if (select) select.value = val;
|
||
|
|
} else if (range) {
|
||
|
|
const slider = el.querySelector('input[type="range"]');
|
||
|
|
const valueSpan = el.querySelector('.cs-param-value');
|
||
|
|
if (slider) {
|
||
|
|
if (p.log || LOG_SCALE_PARAMS.has(p.name)) {
|
||
|
|
slider.value = toLogSlider(val, range[0], range[1]);
|
||
|
|
} else {
|
||
|
|
slider.value = val;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (valueSpan) valueSpan.textContent = formatValue(p.name, val);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Show override indicator
|
||
|
|
const overrideIndicator = el.querySelector('.cs-override-dot');
|
||
|
|
if (overrideIndicator) {
|
||
|
|
overrideIndicator.classList.toggle('active', surface.hasOverride(p.name));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Listen for external changes to the surface (e.g. from app code)
|
||
|
|
surface.onChange(() => {
|
||
|
|
if (drawerOpen) syncDrawerValues();
|
||
|
|
});
|
||
|
|
|
||
|
|
// --- Inject styles ---
|
||
|
|
injectStyles();
|
||
|
|
|
||
|
|
// --- Cleanup function ---
|
||
|
|
function destroy() {
|
||
|
|
axisContainer.remove();
|
||
|
|
gearBtn.remove();
|
||
|
|
overlay.remove();
|
||
|
|
const styleEl = document.getElementById('cs-styles');
|
||
|
|
if (styleEl) styleEl.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
return { surface, destroy };
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// ---- Build drawer HTML ----
|
||
|
|
|
||
|
|
function buildDrawerHTML() {
|
||
|
|
let html = `
|
||
|
|
<div class="cs-drawer-header">
|
||
|
|
<span class="cs-drawer-title">Control Surface</span>
|
||
|
|
<button class="cs-drawer-close">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="cs-drawer-body">
|
||
|
|
<div class="cs-preset-row">
|
||
|
|
<label class="cs-preset-label">Preset</label>
|
||
|
|
<select id="cs-preset-select" class="cs-preset-select">
|
||
|
|
${Object.keys(CONTROL_PRESETS).map(id =>
|
||
|
|
`<option value="${id}">${id.replace(/-/g, ' ')}</option>`
|
||
|
|
).join('')}
|
||
|
|
</select>
|
||
|
|
<button id="cs-reset-preset" class="cs-reset-btn" title="Reset to preset">Reset</button>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
for (const section of SECTIONS) {
|
||
|
|
html += `
|
||
|
|
<div class="cs-section" data-section="${section.id}">
|
||
|
|
<div class="cs-section-header">
|
||
|
|
<span>${section.label}</span>
|
||
|
|
<span class="cs-section-chevron">▼</span>
|
||
|
|
</div>
|
||
|
|
<div class="cs-section-body">
|
||
|
|
`;
|
||
|
|
|
||
|
|
for (const p of section.params) {
|
||
|
|
html += buildParamRow(p);
|
||
|
|
}
|
||
|
|
|
||
|
|
html += `
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
html += `</div>`;
|
||
|
|
return html;
|
||
|
|
}
|
||
|
|
|
||
|
|
function buildParamRow(p) {
|
||
|
|
const range = PARAM_RANGES[p.name];
|
||
|
|
|
||
|
|
if (p.type === 'toggle') {
|
||
|
|
return `
|
||
|
|
<div class="cs-param-row" data-param="${p.name}">
|
||
|
|
<label class="cs-param-label">
|
||
|
|
<span class="cs-override-dot"></span>
|
||
|
|
${p.label}
|
||
|
|
</label>
|
||
|
|
<input type="checkbox" class="cs-toggle" ${PARAM_DEFAULTS[p.name] ? 'checked' : ''}>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (p.type === 'select') {
|
||
|
|
const options = p.options || [];
|
||
|
|
return `
|
||
|
|
<div class="cs-param-row" data-param="${p.name}">
|
||
|
|
<label class="cs-param-label">
|
||
|
|
<span class="cs-override-dot"></span>
|
||
|
|
${p.label}
|
||
|
|
</label>
|
||
|
|
<select class="cs-select">
|
||
|
|
${options.map(o => `<option value="${o}">${o}</option>`).join('')}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Numeric slider
|
||
|
|
const isLog = p.log || LOG_SCALE_PARAMS.has(p.name);
|
||
|
|
const min = range ? range[0] : 0;
|
||
|
|
const max = range ? range[1] : 1;
|
||
|
|
const step = isLog ? 0.001 : (range ? (range[2] || 0.01) : 0.01);
|
||
|
|
const sliderMin = isLog ? 0 : min;
|
||
|
|
const sliderMax = isLog ? 1 : max;
|
||
|
|
const defaultVal = PARAM_DEFAULTS[p.name] ?? 0.5;
|
||
|
|
const sliderDefault = isLog ? toLogSlider(defaultVal, min, max) : defaultVal;
|
||
|
|
|
||
|
|
return `
|
||
|
|
<div class="cs-param-row" data-param="${p.name}">
|
||
|
|
<label class="cs-param-label">
|
||
|
|
<span class="cs-override-dot"></span>
|
||
|
|
${p.label}
|
||
|
|
</label>
|
||
|
|
<div class="cs-slider-row">
|
||
|
|
<input type="range" class="cs-slider" min="${sliderMin}" max="${sliderMax}" step="${step}" value="${sliderDefault}">
|
||
|
|
<span class="cs-param-value">${formatValue(p.name, defaultVal)}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// ---- Wire parameter controls ----
|
||
|
|
|
||
|
|
function wireParamControls(drawer, surface, syncFn) {
|
||
|
|
for (const section of SECTIONS) {
|
||
|
|
for (const p of section.params) {
|
||
|
|
const el = drawer.querySelector(`[data-param="${p.name}"]`);
|
||
|
|
if (!el) continue;
|
||
|
|
|
||
|
|
const range = PARAM_RANGES[p.name];
|
||
|
|
|
||
|
|
if (p.type === 'toggle') {
|
||
|
|
const checkbox = el.querySelector('input[type="checkbox"]');
|
||
|
|
if (checkbox) {
|
||
|
|
checkbox.addEventListener('change', () => {
|
||
|
|
surface.setOverride(p.name, checkbox.checked);
|
||
|
|
syncFn();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else if (p.type === 'select') {
|
||
|
|
const select = el.querySelector('select');
|
||
|
|
if (select) {
|
||
|
|
select.addEventListener('change', () => {
|
||
|
|
surface.setOverride(p.name, select.value);
|
||
|
|
syncFn();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else if (range) {
|
||
|
|
const slider = el.querySelector('input[type="range"]');
|
||
|
|
const valueSpan = el.querySelector('.cs-param-value');
|
||
|
|
const isLog = p.log || LOG_SCALE_PARAMS.has(p.name);
|
||
|
|
|
||
|
|
if (slider) {
|
||
|
|
slider.addEventListener('input', () => {
|
||
|
|
let val;
|
||
|
|
if (isLog) {
|
||
|
|
val = fromLogSlider(parseFloat(slider.value), range[0], range[1]);
|
||
|
|
} else {
|
||
|
|
val = parseFloat(slider.value);
|
||
|
|
}
|
||
|
|
surface.setOverride(p.name, val);
|
||
|
|
if (valueSpan) valueSpan.textContent = formatValue(p.name, val);
|
||
|
|
// Update override dot
|
||
|
|
const dot = el.querySelector('.cs-override-dot');
|
||
|
|
if (dot) dot.classList.add('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Double-tap slider to clear override for this param
|
||
|
|
let lastTap = 0;
|
||
|
|
slider.addEventListener('pointerdown', () => {
|
||
|
|
const now = Date.now();
|
||
|
|
if (now - lastTap < 350) {
|
||
|
|
surface.clearOverride(p.name);
|
||
|
|
syncFn();
|
||
|
|
}
|
||
|
|
lastTap = now;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// ---- CSS injection ----
|
||
|
|
|
||
|
|
function injectStyles() {
|
||
|
|
if (document.getElementById('cs-styles')) return;
|
||
|
|
|
||
|
|
const style = document.createElement('style');
|
||
|
|
style.id = 'cs-styles';
|
||
|
|
style.textContent = `
|
||
|
|
/* ---- Control Surface: Compound Axes (floating bar) ---- */
|
||
|
|
.cs-axes {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
margin: 0 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-axis {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-axis-label {
|
||
|
|
font-size: 9px;
|
||
|
|
color: rgba(255, 255, 255, 0.45);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
white-space: nowrap;
|
||
|
|
cursor: default;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-axis-slider {
|
||
|
|
width: 48px;
|
||
|
|
height: 3px;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
background: rgba(255, 255, 255, 0.12);
|
||
|
|
border-radius: 2px;
|
||
|
|
outline: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-axis-slider::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--accent, #ff6a00);
|
||
|
|
cursor: pointer;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-axis-slider::-moz-range-thumb {
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--accent, #ff6a00);
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Gear button ---- */
|
||
|
|
.cs-gear-btn {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 96px;
|
||
|
|
right: 50px;
|
||
|
|
z-index: 45;
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
|
||
|
|
background: var(--glass-bg, rgba(13, 13, 13, 0.65));
|
||
|
|
backdrop-filter: blur(16px);
|
||
|
|
-webkit-backdrop-filter: blur(16px);
|
||
|
|
color: var(--text-dim, #888);
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
transition: all 0.15s;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-gear-btn:hover,
|
||
|
|
.cs-gear-btn:active {
|
||
|
|
border-color: var(--accent, #ff6a00);
|
||
|
|
color: var(--accent, #ff6a00);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Drawer overlay ---- */
|
||
|
|
.cs-drawer-overlay {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
z-index: 90;
|
||
|
|
background: rgba(0, 0, 0, 0);
|
||
|
|
transition: background 0.2s ease;
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-drawer-overlay.hidden {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-drawer-overlay.open {
|
||
|
|
background: rgba(0, 0, 0, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Drawer panel ---- */
|
||
|
|
.cs-drawer {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
right: -320px;
|
||
|
|
width: 300px;
|
||
|
|
height: 100%;
|
||
|
|
z-index: 91;
|
||
|
|
background: rgba(0, 0, 0, 0.88);
|
||
|
|
backdrop-filter: blur(24px);
|
||
|
|
-webkit-backdrop-filter: blur(24px);
|
||
|
|
border-left: 1px solid rgba(255, 255, 255, 0.08);
|
||
|
|
overflow-y: auto;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
transition: right 0.2s ease;
|
||
|
|
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-drawer.open {
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Drawer header ---- */
|
||
|
|
.cs-drawer-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 14px 16px 10px;
|
||
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-drawer-title {
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: rgba(255, 255, 255, 0.8);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-drawer-close {
|
||
|
|
width: 28px;
|
||
|
|
height: 28px;
|
||
|
|
border-radius: 4px;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
|
|
background: rgba(255, 255, 255, 0.04);
|
||
|
|
color: rgba(255, 255, 255, 0.5);
|
||
|
|
font-size: 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
transition: all 0.15s;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-drawer-close:hover {
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Drawer body ---- */
|
||
|
|
.cs-drawer-body {
|
||
|
|
padding: 0 0 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Preset row ---- */
|
||
|
|
.cs-preset-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
padding: 10px 16px;
|
||
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-preset-label {
|
||
|
|
font-size: 10px;
|
||
|
|
color: rgba(255, 255, 255, 0.4);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-preset-select {
|
||
|
|
flex: 1;
|
||
|
|
height: 28px;
|
||
|
|
padding: 0 8px;
|
||
|
|
border-radius: 4px;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
|
|
background: rgba(255, 255, 255, 0.04);
|
||
|
|
color: var(--text, #e0e0e0);
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: 11px;
|
||
|
|
cursor: pointer;
|
||
|
|
appearance: none;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-preset-select option {
|
||
|
|
background: #1a1a1a;
|
||
|
|
color: var(--text, #e0e0e0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-reset-btn {
|
||
|
|
height: 28px;
|
||
|
|
padding: 0 10px;
|
||
|
|
border-radius: 4px;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
|
|
background: rgba(255, 255, 255, 0.04);
|
||
|
|
color: rgba(255, 255, 255, 0.5);
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.15s;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-reset-btn:hover {
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Sections ---- */
|
||
|
|
.cs-section {
|
||
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-section-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 10px 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
user-select: none;
|
||
|
|
transition: background 0.15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-section-header:hover {
|
||
|
|
background: rgba(255, 255, 255, 0.03);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-section-header span:first-child {
|
||
|
|
font-size: 10px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: rgba(255, 255, 255, 0.5);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-section-chevron {
|
||
|
|
font-size: 8px;
|
||
|
|
color: rgba(255, 255, 255, 0.3);
|
||
|
|
transition: transform 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-section.collapsed .cs-section-chevron {
|
||
|
|
transform: rotate(-90deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-section-body {
|
||
|
|
padding: 0 16px 8px;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: max-height 0.2s ease, padding 0.2s ease;
|
||
|
|
max-height: 600px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-section.collapsed .cs-section-body {
|
||
|
|
max-height: 0;
|
||
|
|
padding-top: 0;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Parameter rows ---- */
|
||
|
|
.cs-param-row {
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-param-label {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
font-size: 10px;
|
||
|
|
color: rgba(255, 255, 255, 0.45);
|
||
|
|
margin-bottom: 3px;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Override dot: shows when param has a manual offset */
|
||
|
|
.cs-override-dot {
|
||
|
|
width: 5px;
|
||
|
|
height: 5px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: transparent;
|
||
|
|
flex-shrink: 0;
|
||
|
|
transition: background 0.15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-override-dot.active {
|
||
|
|
background: var(--accent, #ff6a00);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Slider row ---- */
|
||
|
|
.cs-slider-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-slider {
|
||
|
|
flex: 1;
|
||
|
|
height: 3px;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
border-radius: 2px;
|
||
|
|
outline: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-slider::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--accent, #ff6a00);
|
||
|
|
cursor: pointer;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-slider::-moz-range-thumb {
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--accent, #ff6a00);
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-param-value {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 9px;
|
||
|
|
color: rgba(255, 255, 255, 0.5);
|
||
|
|
min-width: 36px;
|
||
|
|
text-align: right;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Toggle (checkbox) ---- */
|
||
|
|
.cs-toggle {
|
||
|
|
accent-color: var(--accent, #ff6a00);
|
||
|
|
cursor: pointer;
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Select ---- */
|
||
|
|
.cs-select {
|
||
|
|
height: 24px;
|
||
|
|
padding: 0 8px;
|
||
|
|
border-radius: 4px;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
|
|
background: rgba(255, 255, 255, 0.04);
|
||
|
|
color: var(--text, #e0e0e0);
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
appearance: none;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cs-select option {
|
||
|
|
background: #1a1a1a;
|
||
|
|
color: var(--text, #e0e0e0);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Responsive: shrink axes on narrow screens ---- */
|
||
|
|
@media (max-width: 600px) {
|
||
|
|
.cs-axes {
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
.cs-axis-slider {
|
||
|
|
width: 36px;
|
||
|
|
}
|
||
|
|
.cs-axis-label {
|
||
|
|
font-size: 8px;
|
||
|
|
}
|
||
|
|
.cs-drawer {
|
||
|
|
width: 280px;
|
||
|
|
right: -300px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
document.head.appendChild(style);
|
||
|
|
}
|