fix(manifold): slider fill tracks value; hide noise-cap rings
- mf-slider-input fill used calc(var(--mf-pct)*100%) but three consumers (OutputControlRow held slider, OutputEditor, shared-ui Field) never set --mf-pct, so the coloured track-fill stayed empty while only the native thumb moved. Set --mf-pct inline on all three; harden the base class (appearance:none + transparent bg + --mf-pct fallback + moz-range-progress). - hide the two concentric noise-cap exploration rings around the input dot.
This commit is contained in:
parent
cb28facc65
commit
30fc44ba1e
5 changed files with 26 additions and 21 deletions
|
|
@ -285,22 +285,8 @@ export function Manifold({
|
|||
ctx.stroke();
|
||||
}
|
||||
|
||||
if (nc > 0.001) {
|
||||
const breathe = 1 + Math.sin(now / 600) * 0.06;
|
||||
const rCap = nc * Math.min(W, H) * 0.5 * breathe;
|
||||
const rCur = rCap * 0.55;
|
||||
ctx.setLineDash([4, 5]);
|
||||
ctx.strokeStyle = 'rgba(255,106,0,0.4)';
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.beginPath();
|
||||
ctx.arc(px, py, rCap, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = 'rgba(255,106,0,0.7)';
|
||||
ctx.beginPath();
|
||||
ctx.arc(px, py, rCur, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
// Noise-cap exploration rings hidden for now (kept for possible later use).
|
||||
void nc;
|
||||
|
||||
ctx.shadowColor = fz ? cyan : accent;
|
||||
ctx.shadowBlur = 18;
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ function MiniSlider({
|
|||
disabled={disabled}
|
||||
onChange={(e) => onChange(parseFloat(e.target.value))}
|
||||
className="mf-slider-input"
|
||||
style={{ width: '100%' }}
|
||||
style={{ width: '100%', ['--mf-pct' as string]: `${Math.max(0, Math.min(1, value))}` } as CSSProperties}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -163,7 +163,13 @@ export function CompactAxis({
|
|||
value={value}
|
||||
onChange={(e) => onChange(parseFloat(e.target.value))}
|
||||
className="mf-slider-input"
|
||||
style={{ width: 120, ['--mf-axis-accent' as string]: accent } as CSSProperties}
|
||||
style={
|
||||
{
|
||||
width: 120,
|
||||
['--mf-axis-accent' as string]: accent,
|
||||
['--mf-pct' as string]: `${Math.max(0, Math.min(1, value))}`,
|
||||
} as CSSProperties
|
||||
}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
* (ConsoleApp owns it) — never a second data path (dock-spec §3.2, §8).
|
||||
*/
|
||||
import { useRef } from 'react';
|
||||
import type { PointerEvent as ReactPointerEvent } from 'react';
|
||||
import type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';
|
||||
import type { MFParam, ParamStatus } from '../console/model';
|
||||
import { CurvePad } from '../console/CurvePad';
|
||||
|
||||
|
|
@ -288,7 +288,7 @@ export function OutputControlRow({ param, value, onChange, showCurve = false }:
|
|||
value={param.val}
|
||||
onChange={(e) => onChange({ val: parseFloat(e.target.value) })}
|
||||
className="mf-slider-input"
|
||||
style={{ flex: 1 }}
|
||||
style={{ flex: 1, ['--mf-pct' as string]: `${Math.max(0, Math.min(1, param.val))}` } as CSSProperties}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -13,13 +13,21 @@
|
|||
*/
|
||||
|
||||
/* ---- Slider (.mf-slider-input) ---- */
|
||||
/* Base reset so the custom track/thumb styling applies even when a consumer
|
||||
doesn't set these inline (e.g. OutputControlRow's held slider). The colored
|
||||
fill tracks `--mf-pct` (0..1); it falls back to 0 if a consumer forgets it. */
|
||||
.mf-slider-input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
.mf-slider-input::-webkit-slider-runnable-track {
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--accent) 0%,
|
||||
var(--accent) calc(var(--mf-pct) * 100%),
|
||||
var(--accent) calc(var(--mf-pct, 0) * 100%),
|
||||
var(--bg-3) 0%
|
||||
);
|
||||
}
|
||||
|
|
@ -28,6 +36,11 @@
|
|||
border-radius: 999px;
|
||||
background: var(--bg-3);
|
||||
}
|
||||
.mf-slider-input::-moz-range-progress {
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
}
|
||||
.mf-slider-input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
|
|
|||
Loading…
Reference in a new issue