Tier 1: origin anchor, detents, theming, type-in editing, ImageKnob
- origin: bipolar anchor value — Arc from=center, Fader fill and LEDFader segments draw from origin instead of min/mid-travel - detents + detentSize: magnetic snap while dragging (normalized space, wheel/keyboard unaffected); applyDetents exported - DreamknobProvider + KnobTheme: accent/track/face/text/label/ticks/ focusRing/fonts tokens with dark and light bases; every skin resolves defaults from the theme, instance props win - editable + parseValue: double-click knobs (or click fader readouts) to type exact values; Enter/blur commits, Esc cancels, 1.2k parses; ValueInput + defaultParseValue exported; setValue added to context - ImageKnob: film-strip sprite knob (KnobMan-style strips), vertical or horizontal, with focus ring, editing, value/label - Docs: LED gallery cards for film-strip/bipolar/editing/theming, playground editable toggle, theming API section, README updates
This commit is contained in:
parent
d8992408fa
commit
804a85cca6
25 changed files with 999 additions and 162 deletions
|
|
@ -45,7 +45,8 @@ Every component shares one core:
|
|||
| `↑ → / ↓ ←` | ± one step (`Shift` = 10×) |
|
||||
| `PageUp/PageDown` | ± 10 % of range |
|
||||
| `Home/End` | min / max |
|
||||
| Double-click | reset to `defaultValue` |
|
||||
| Double-click | reset to `defaultValue` — or open the type-in editor with `editable` |
|
||||
| `Escape` | cancel an in-flight drag, restoring the start value |
|
||||
| Touch / pen | pointer capture, `touch-action: none` |
|
||||
|
||||
All knobs render `role="slider"` with `aria-valuemin/max/now/text`.
|
||||
|
|
@ -59,6 +60,10 @@ All knobs render `role="slider"` with `aria-valuemin/max/now/text`.
|
|||
- `steps={5}` — evenly spaced detents (selector knobs).
|
||||
- `taper` — `linearTaper` (default), `logTaper` (frequencies), `powTaper(n)` (gain),
|
||||
or your own `{ toNormalized, fromNormalized }`.
|
||||
- `origin={0}` — bipolar anchor: arcs/fader fills draw from this value (pan, gain trim).
|
||||
- `detents={[0]}` + `detentSize` — magnetic snap points while dragging.
|
||||
- `editable` — double-click (knobs) or click the readout (faders) to type an exact
|
||||
value; `parseValue` customizes parsing (`"1.2k"` → 1200 out of the box).
|
||||
- `onChange` / `onChangeStart` / `onChangeEnd` — gesture-aware callbacks.
|
||||
|
||||
## Prebuilt skins
|
||||
|
|
@ -74,10 +79,24 @@ import {
|
|||
SteppedKnob, // detented selector (positions={['LP','BP','HP']})
|
||||
Fader, // linear channel fader, vertical or horizontal
|
||||
LEDFader, // segmented LED meter-fader with color zones
|
||||
ImageKnob, // film-strip sprite knob (KnobMan-style PNG strips)
|
||||
SegmentDisplay, // standalone seven-segment numeric display
|
||||
} from 'dreamknob'
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
```tsx
|
||||
import { DreamknobProvider } from 'dreamknob'
|
||||
|
||||
<DreamknobProvider base="dark" theme={{ accent: '#ff4d6b' }}>
|
||||
{/* every control below inherits the tokens; instance props still win */}
|
||||
</DreamknobProvider>
|
||||
```
|
||||
|
||||
`base="light"` swaps in light-background defaults. Tokens: `accent`, `track`, `face`,
|
||||
`text`, `label`, `ticks`, `focusRing`, `fontMono`, `fontUI`.
|
||||
|
||||
Every skin takes the core props plus `size`, `label`, `showValue`, `unit`, `format`,
|
||||
and per-part color props (`color`, `trackColor`, `faceColor`, `bodyColor`, …).
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue