w1n5t0n/memlnaut-nisps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(freeze-ui): freeze/live param toggle interaction

Browse source 
When frozen, param rows dim to indicate frozen state. Tapping a row
toggles it to "live" (highlighted, receives ML deltas). Unfreezing
clears all visual indicators.
This commit is contained in:
w1n5t0n 2026-04-07 00:00:56 +01:00
parent 8bb965740e
commit 70da83d6dc
2 changed files with 525 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
playground/js/shapeseq/freeze-ui.js Normal file
View file

@ -0,0 +1,159 @@
/**
* Freeze UI — adds freeze/live toggle interaction to chain param rows.
*
* When frozen:
* - Param rows are dimmed by default (frozen state)
* - Tapping a param row toggles it to "live" (highlighted, receives ML deltas)
* - Live params show a secondary indicator (delta range bar) on the slider
*
* When not frozen:
* - All params show normally (no freeze indicators)
*
* @module shapeseq/freeze-ui
*/
// ── Inject styles once ───────────────────────────────────────────────
let stylesInjected = false;
function injectStyles() {
if (stylesInjected) return;
stylesInjected = true;
const css = `
/* ── Freeze UI states ───────────────────────────────────────── */
.param-frozen {
cursor: pointer;
}
.param-frozen .chain-param-slider {
pointer-events: none;
}
.param-live {
cursor: pointer;
}
.param-live .chain-param-slider {
box-shadow: 0 0 0 2px rgba(0, 200, 100, 0.5);
}
`;
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
}
// ── FreezeUI ─────────────────────────────────────────────────────────
export class FreezeUI {
/**
* @param {{ container: HTMLElement, freezeManager: import('./freeze.js').FreezeManager, onToggle: (flatIndex: number) => void }} opts
*/
constructor({ container, freezeManager, onToggle }) {
injectStyles();
this._container = container;
this._fm = freezeManager;
this._onToggle = onToggle;
this._clickHandler = this._handleClick.bind(this);
// Delegate click handling on param rows
this._container.addEventListener('click', this._clickHandler);
}
/**
* Update visual state of all param rows based on freeze state.
* Call this after freeze/unfreeze/toggle.
*/
update() {
if (!this._fm.isFrozen) {
// Remove all freeze styling
this._container.querySelectorAll('.chain-param-row').forEach(row => {
row.classList.remove('param-frozen', 'param-live');
row.style.opacity = '';
});
return;
}
const liveFlags = this._fm.getLiveFlags();
if (!liveFlags) return;
this._container.querySelectorAll('.chain-param-row').forEach(row => {
const idx = parseInt(row.dataset.flatIndex, 10);
if (isNaN(idx) || idx >= liveFlags.length) return;
if (liveFlags[idx]) {
row.classList.add('param-live');
row.classList.remove('param-frozen');
row.style.opacity = '';
} else {
row.classList.add('param-frozen');
row.classList.remove('param-live');
row.style.opacity = '0.4';
}
});
}
/**
* Show delta indicators on live param sliders.
* @param {Float32Array} frozenParams
* @param {Float32Array} effectiveParams
*/
updateDeltaIndicators(frozenParams, effectiveParams) {
if (!this._fm.isFrozen || !frozenParams || !effectiveParams) return;
this._container.querySelectorAll('.chain-param-row.param-live').forEach(row => {
const idx = parseInt(row.dataset.flatIndex, 10);
if (isNaN(idx)) return;
// Show delta as a secondary mark on the slider
let indicator = row.querySelector('.delta-indicator');
if (!indicator) {
indicator = document.createElement('div');
indicator.className = 'delta-indicator';
indicator.style.cssText = 'position:absolute;height:4px;background:rgba(0,140,255,0.6);border-radius:2px;bottom:0;pointer-events:none;transition:left 0.1s,width 0.1s;';
const slider = row.querySelector('.chain-param-slider');
if (slider) {
slider.parentElement.style.position = 'relative';
slider.parentElement.appendChild(indicator);
}
}
// Position indicator between frozen value and effective value
const frozen = frozenParams[idx];
const effective = effectiveParams[idx];
const left = Math.min(frozen, effective) * 100;
const width = Math.abs(effective - frozen) * 100;
indicator.style.left = left + '%';
indicator.style.width = width + '%';
});
}
/**
* @private
*/
_handleClick(e) {
if (!this._fm.isFrozen) return;
const row = e.target.closest('.chain-param-row');
if (!row) return;
// Don't toggle when interacting with the slider itself
if (e.target.closest('.chain-param-slider')) return;
const idx = parseInt(row.dataset.flatIndex, 10);
if (isNaN(idx)) return;
this._onToggle(idx);
this.update();
}
/**
* Cleanup all DOM listeners.
*/
destroy() {
this._container.removeEventListener('click', this._clickHandler);
}
}

366
playground/js/shapeseq/tests/freeze-ui.test.js Normal file
View file

@ -0,0 +1,366 @@
import { describe, it, beforeEach } from 'node:test';
import { strict as assert } from 'node:assert';
// ---------------------------------------------------------------------------
// Minimal DOM stubs — just enough for FreezeUI's DOM operations
// ---------------------------------------------------------------------------
class StubClassList {
constructor() { this._set = new Set(); }
add(...names) { names.forEach(n => this._set.add(n)); }
remove(...names) { names.forEach(n => this._set.delete(n)); }
contains(name) { return this._set.has(name); }
}
class StubStyle {
constructor() {
this.opacity = '';
this.position = '';
this.cssText = '';
this.left = '';
this.width = '';
}
}
class StubElement {
constructor(tag) {
this.tagName = tag.toUpperCase();
this._className = '';
this.textContent = '';
this.type = '';
this.dataset = {};
this.classList = new StubClassList();
this.style = new StubStyle();
this.children = [];
this.parentElement = null;
this._listeners = {};
}
get className() { return this._className; }
set className(val) {
this._className = val;
// Sync classList with className string
this.classList._set.clear();
val.split(/\s+/).filter(Boolean).forEach(c => this.classList._set.add(c));
}
appendChild(child) {
child.parentElement = this;
this.children.push(child);
return child;
}
querySelector(sel) {
return this._queryAll(sel)[0] || null;
}
querySelectorAll(sel) {
return this._queryAll(sel);
}
_queryAll(sel) {
const results = [];
this._walk(el => {
if (matchesSelector(el, sel)) results.push(el);
});
return results;
}
_walk(fn) {
for (const child of this.children) {
fn(child);
child._walk(fn);
}
}
closest(sel) {
let cur = this;
while (cur) {
if (matchesSelector(cur, sel)) return cur;
cur = cur.parentElement;
}
return null;
}
addEventListener(type, fn) {
if (!this._listeners[type]) this._listeners[type] = [];
this._listeners[type].push(fn);
}
removeEventListener(type, fn) {
if (!this._listeners[type]) return;
this._listeners[type] = this._listeners[type].filter(f => f !== fn);
}
dispatchEvent(evt) {
const handlers = this._listeners[evt.type] || [];
for (const h of handlers) h(evt);
// Bubble
if (evt.bubbles && this.parentElement) {
this.parentElement.dispatchEvent(evt);
}
}
}
/**
* Very basic selector matching: handles .class, .class1.class2, tag selectors
*/
function matchesSelector(el, sel) {
// Handle compound selectors like ".chain-param-row.param-live"
const parts = sel.split('.');
const tagPart = parts[0]; // empty string if selector starts with '.'
const classParts = parts.slice(1);
if (tagPart && el.tagName !== tagPart.toUpperCase()) return false;
for (const cls of classParts) {
if (!el.classList.contains(cls)) return false;
}
// If selector is just a tag with no classes
if (classParts.length === 0 && tagPart) {
return el.tagName === tagPart.toUpperCase();
}
return classParts.length > 0 || tagPart !== '';
}
function createElement(tag) {
return new StubElement(tag);
}
// Stub out globalThis.document so injectStyles() doesn't crash
globalThis.document = {
createElement,
head: { appendChild() {} },
};
// ---------------------------------------------------------------------------
// Minimal FreezeManager stub
// ---------------------------------------------------------------------------
class StubFreezeManager {
constructor() {
this._frozen = false;
this._liveFlags = null;
}
get isFrozen() { return this._frozen; }
freeze(paramCount) {
this._frozen = true;
this._liveFlags = new Uint8Array(paramCount);
}
unfreeze() {
this._frozen = false;
this._liveFlags = null;
}
getLiveFlags() { return this._liveFlags; }
toggleParam(idx) {
if (!this._frozen) throw new Error('not frozen');
this._liveFlags[idx] = this._liveFlags[idx] ? 0 : 1;
}
}
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
function buildContainer(paramCount) {
const container = createElement('div');
for (let i = 0; i < paramCount; i++) {
const row = createElement('div');
row.classList.add('chain-param-row');
row.dataset.flatIndex = String(i);
const label = createElement('span');
label.classList.add('chain-param-label');
label.textContent = 'p' + i;
row.appendChild(label);
const slider = createElement('input');
slider.type = 'range';
slider.classList.add('chain-param-slider');
slider.dataset.flatIndex = String(i);
row.appendChild(slider);
container.appendChild(row);
}
return container;
}
function makeClickEvent(bubbles = true) {
return { type: 'click', bubbles, target: null };
}
// ---------------------------------------------------------------------------
// Tests
// ---------------------------------------------------------------------------
describe('FreezeUI', () => {
let FreezeUI;
let freezeUI;
let container;
let fm;
let toggleLog;
beforeEach(async () => {
if (!FreezeUI) {
const mod = await import('../freeze-ui.js');
FreezeUI = mod.FreezeUI;
}
container = buildContainer(4);
fm = new StubFreezeManager();
toggleLog = [];
freezeUI = new FreezeUI({
container,
freezeManager: fm,
onToggle: (idx) => toggleLog.push(idx),
});
});
// ── Construction ──────────────────────────────────────────────────
it('can be constructed', () => {
assert.ok(freezeUI, 'FreezeUI instance should exist');
assert.ok(freezeUI._container === container, 'container reference stored');
});
// ── update() when frozen ──────────────────────────────────────────
it('update() adds param-frozen class to all rows when frozen', () => {
fm.freeze(4);
freezeUI.update();
const rows = container.querySelectorAll('.chain-param-row');
for (const row of rows) {
assert.ok(row.classList.contains('param-frozen'),
'row ' + row.dataset.flatIndex + ' should have param-frozen');
assert.ok(!row.classList.contains('param-live'),
'row ' + row.dataset.flatIndex + ' should NOT have param-live');
assert.strictEqual(row.style.opacity, '0.4',
'frozen row should be dimmed');
}
});
it('update() adds param-live class for live params when frozen', () => {
fm.freeze(4);
fm.toggleParam(1);
fm.toggleParam(3);
freezeUI.update();
const rows = container.querySelectorAll('.chain-param-row');
// Row 0: frozen
assert.ok(rows[0].classList.contains('param-frozen'));
assert.ok(!rows[0].classList.contains('param-live'));
assert.strictEqual(rows[0].style.opacity, '0.4');
// Row 1: live
assert.ok(rows[1].classList.contains('param-live'));
assert.ok(!rows[1].classList.contains('param-frozen'));
assert.notStrictEqual(rows[1].style.opacity, '0.4');
// Row 2: frozen
assert.ok(rows[2].classList.contains('param-frozen'));
// Row 3: live
assert.ok(rows[3].classList.contains('param-live'));
});
// ── update() when NOT frozen ──────────────────────────────────────
it('update() removes freeze styling when not frozen', () => {
fm.freeze(4);
fm.toggleParam(1);
freezeUI.update();
// Now unfreeze
fm.unfreeze();
freezeUI.update();
const rows = container.querySelectorAll('.chain-param-row');
for (const row of rows) {
assert.ok(!row.classList.contains('param-frozen'),
'row should NOT have param-frozen after unfreeze');
assert.ok(!row.classList.contains('param-live'),
'row should NOT have param-live after unfreeze');
assert.strictEqual(row.style.opacity, '',
'opacity should be cleared');
}
});
// ── Click toggle ──────────────────────────────────────────────────
it('clicking a param row label calls onToggle with the flat index', () => {
fm.freeze(4);
freezeUI.update();
// Click on the label of row 2
const row2 = container.querySelectorAll('.chain-param-row')[2];
const label = row2.querySelector('.chain-param-label');
const evt = makeClickEvent();
evt.target = label;
label.dispatchEvent(evt);
assert.deepStrictEqual(toggleLog, [2], 'onToggle should be called with index 2');
});
it('clicking does nothing when not frozen', () => {
const row0 = container.querySelectorAll('.chain-param-row')[0];
const label = row0.querySelector('.chain-param-label');
const evt = makeClickEvent();
evt.target = label;
label.dispatchEvent(evt);
assert.deepStrictEqual(toggleLog, [], 'no toggle when not frozen');
});
it('clicking the slider itself does not toggle', () => {
fm.freeze(4);
freezeUI.update();
const row1 = container.querySelectorAll('.chain-param-row')[1];
const slider = row1.querySelector('.chain-param-slider');
const evt = makeClickEvent();
evt.target = slider;
slider.dispatchEvent(evt);
assert.deepStrictEqual(toggleLog, [], 'slider click should not trigger toggle');
});
// ── destroy() ─────────────────────────────────────────────────────
it('destroy() removes the click listener', () => {
fm.freeze(4);
freezeUI.update();
freezeUI.destroy();
const row0 = container.querySelectorAll('.chain-param-row')[0];
const label = row0.querySelector('.chain-param-label');
const evt = makeClickEvent();
evt.target = label;
label.dispatchEvent(evt);
assert.deepStrictEqual(toggleLog, [], 'no toggle after destroy');
});
// ── updateDeltaIndicators() ───────────────────────────────────────
it('updateDeltaIndicators() creates delta-indicator elements on live rows', () => {
fm.freeze(4);
fm.toggleParam(1);
freezeUI.update();
const frozenParams = new Float32Array([0.3, 0.5, 0.7, 0.2]);
const effectiveParams = new Float32Array([0.3, 0.8, 0.7, 0.2]);
freezeUI.updateDeltaIndicators(frozenParams, effectiveParams);
// Row 1 is live — should have a delta indicator
const row1 = container.querySelectorAll('.chain-param-row')[1];
const indicator = row1.querySelector('.delta-indicator');
assert.ok(indicator, 'live row should have a delta-indicator');
});
it('updateDeltaIndicators() does nothing when not frozen', () => {
const frozenParams = new Float32Array([0.3, 0.5, 0.7, 0.2]);
const effectiveParams = new Float32Array([0.3, 0.8, 0.7, 0.2]);
freezeUI.updateDeltaIndicators(frozenParams, effectiveParams);
const indicators = container.querySelectorAll('.delta-indicator');
assert.strictEqual(indicators.length, 0, 'no indicators when not frozen');
});
});