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`, …).
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,25 @@
|
|||
import * as React from 'react';
|
||||
import { KnobContextProvider, type KnobRenderContext } from '../core/context';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
import type { KnobCoreProps } from '../core/types';
|
||||
import { useKnob } from '../hooks/useKnob';
|
||||
import { ValueInput, defaultParseValue } from './ValueInput';
|
||||
|
||||
export interface KnobProps extends KnobCoreProps {
|
||||
/** Square canvas size in px. Default: 80. */
|
||||
size?: number;
|
||||
/**
|
||||
* Color of the keyboard focus ring, or `false` to disable it (only do this
|
||||
* if you render your own focus indicator). Default: a soft blue.
|
||||
* if you render your own focus indicator). Default: the theme's ring.
|
||||
*/
|
||||
focusRing?: string | false;
|
||||
/**
|
||||
* Double-click opens a type-in editor instead of resetting: type an exact
|
||||
* value, Enter/blur commits, Escape cancels. Accepts "1.2k" style input.
|
||||
*/
|
||||
editable?: boolean;
|
||||
/** Custom parser for typed input, e.g. to accept "-6 dB" or "A4". */
|
||||
parseValue?: (text: string) => number | null;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
/** SVG children (Arc, Pointer, Ticks, ...) or a render function receiving the live state. */
|
||||
|
|
@ -26,17 +35,35 @@ export interface KnobProps extends KnobCoreProps {
|
|||
*/
|
||||
export const Knob: React.FC<KnobProps> = ({
|
||||
size = 80,
|
||||
focusRing = 'rgba(130,180,255,0.65)',
|
||||
focusRing,
|
||||
editable = false,
|
||||
parseValue,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
overlay,
|
||||
...core
|
||||
}) => {
|
||||
const theme = useKnobTheme();
|
||||
const ring = focusRing ?? theme.focusRing;
|
||||
const knob = useKnob(core);
|
||||
const [editing, setEditing] = React.useState(false);
|
||||
|
||||
const closeEditor = () => {
|
||||
setEditing(false);
|
||||
knob.ref.current?.focus({ preventScroll: true });
|
||||
};
|
||||
const onDoubleClick = editable
|
||||
? (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setEditing(true);
|
||||
}
|
||||
: knob.bind.onDoubleClick;
|
||||
|
||||
const ctx: KnobRenderContext = {
|
||||
value: knob.value,
|
||||
normalized: knob.normalized,
|
||||
originNormalized: knob.originNormalized,
|
||||
angle: knob.angle,
|
||||
isDragging: knob.isDragging,
|
||||
min: knob.min,
|
||||
|
|
@ -46,12 +73,14 @@ export const Knob: React.FC<KnobProps> = ({
|
|||
angleRange: knob.angleRange,
|
||||
size,
|
||||
center: size / 2,
|
||||
setValue: knob.setValue,
|
||||
};
|
||||
|
||||
return (
|
||||
<KnobContextProvider value={ctx}>
|
||||
<div
|
||||
{...knob.bind}
|
||||
onDoubleClick={onDoubleClick}
|
||||
className={className}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
|
|
@ -59,9 +88,7 @@ export const Knob: React.FC<KnobProps> = ({
|
|||
width: size,
|
||||
height: size,
|
||||
borderRadius: '50%',
|
||||
...(knob.isFocusVisible && focusRing
|
||||
? { boxShadow: `0 0 0 2px ${focusRing}` }
|
||||
: undefined),
|
||||
...(knob.isFocusVisible && ring ? { boxShadow: `0 0 0 2px ${ring}` } : undefined),
|
||||
...knob.bind.style,
|
||||
...style,
|
||||
}}
|
||||
|
|
@ -76,6 +103,17 @@ export const Knob: React.FC<KnobProps> = ({
|
|||
{typeof children === 'function' ? children(ctx) : children}
|
||||
</svg>
|
||||
{typeof overlay === 'function' ? overlay(ctx) : overlay}
|
||||
{editing && (
|
||||
<ValueInput
|
||||
initial={String(knob.value)}
|
||||
onCommit={raw => {
|
||||
const parsed = (parseValue ?? defaultParseValue)(raw);
|
||||
if (parsed !== null && Number.isFinite(parsed)) knob.setValue(parsed);
|
||||
closeEditor();
|
||||
}}
|
||||
onCancel={closeEditor}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</KnobContextProvider>
|
||||
);
|
||||
|
|
|
|||
88
packages/dreamknob/src/components/ValueInput.tsx
Normal file
88
packages/dreamknob/src/components/ValueInput.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import * as React from 'react';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
|
||||
/**
|
||||
* Parse a typed value: accepts "42", "-6.5", ".5", comma decimals ("3,5"),
|
||||
* a k-suffix ("1.2k" -> 1200), and ignores trailing units ("440 Hz").
|
||||
* Returns null when no number can be read.
|
||||
*/
|
||||
export const defaultParseValue = (s: string): number | null => {
|
||||
const m = s
|
||||
.trim()
|
||||
.replace(',', '.')
|
||||
.match(/^([-+]?(?:\d+\.?\d*|\.\d+))\s*([kK])?/);
|
||||
if (!m) return null;
|
||||
const n = parseFloat(m[1]) * (m[2] ? 1000 : 1);
|
||||
return Number.isFinite(n) ? n : null;
|
||||
};
|
||||
|
||||
export interface ValueInputProps {
|
||||
initial: string;
|
||||
onCommit: (raw: string) => void;
|
||||
onCancel: () => void;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* The type-in editor: commits on Enter or blur, cancels on Escape. Stops
|
||||
* pointer/keyboard events from reaching the knob underneath.
|
||||
*/
|
||||
export const ValueInput: React.FC<ValueInputProps> = ({
|
||||
initial,
|
||||
onCommit,
|
||||
onCancel,
|
||||
style,
|
||||
}) => {
|
||||
const theme = useKnobTheme();
|
||||
const ref = React.useRef<HTMLInputElement>(null);
|
||||
const settled = React.useRef(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
ref.current?.select();
|
||||
}, []);
|
||||
|
||||
const commit = (raw: string) => {
|
||||
if (settled.current) return;
|
||||
settled.current = true;
|
||||
onCommit(raw);
|
||||
};
|
||||
|
||||
return (
|
||||
<input
|
||||
ref={ref}
|
||||
autoFocus
|
||||
defaultValue={initial}
|
||||
aria-label="Enter value"
|
||||
onPointerDown={e => e.stopPropagation()}
|
||||
onDoubleClick={e => e.stopPropagation()}
|
||||
onKeyDown={e => {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Enter') commit(e.currentTarget.value);
|
||||
else if (e.key === 'Escape') {
|
||||
settled.current = true;
|
||||
onCancel();
|
||||
}
|
||||
}}
|
||||
onBlur={e => commit(e.currentTarget.value)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '72%',
|
||||
boxSizing: 'border-box',
|
||||
background: 'rgba(8, 9, 12, 0.92)',
|
||||
color: theme.text,
|
||||
border: `1px solid ${theme.focusRing}`,
|
||||
borderRadius: 6,
|
||||
padding: '3px 6px',
|
||||
fontFamily: theme.fontMono,
|
||||
fontSize: 13,
|
||||
textAlign: 'center',
|
||||
outline: 'none',
|
||||
zIndex: 1,
|
||||
...style,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -6,6 +6,8 @@ export interface KnobRenderContext extends KnobState {
|
|||
size: number;
|
||||
/** Center coordinate (size / 2). */
|
||||
center: number;
|
||||
/** Imperatively set the value (snapped + clamped) — for editors and custom UI. */
|
||||
setValue: (value: number) => void;
|
||||
}
|
||||
|
||||
const Ctx = React.createContext<KnobRenderContext | null>(null);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
|
|||
import {
|
||||
angleFromNormalized,
|
||||
angleFromPoint,
|
||||
applyDetents,
|
||||
clamp,
|
||||
decimalsFromStep,
|
||||
describeArc,
|
||||
|
|
@ -128,6 +129,22 @@ describe('angles', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('applyDetents', () => {
|
||||
it('snaps within the radius and releases outside it', () => {
|
||||
expect(applyDetents(0.51, [0.5], 0.025)).toBe(0.5);
|
||||
expect(applyDetents(0.49, [0.5], 0.025)).toBe(0.5);
|
||||
expect(applyDetents(0.54, [0.5], 0.025)).toBe(0.54);
|
||||
expect(applyDetents(0.2, [0.5], 0.025)).toBe(0.2);
|
||||
});
|
||||
it('picks the nearest of several detents', () => {
|
||||
expect(applyDetents(0.26, [0.25, 0.5, 0.75], 0.05)).toBe(0.25);
|
||||
expect(applyDetents(0.72, [0.25, 0.5, 0.75], 0.05)).toBe(0.75);
|
||||
});
|
||||
it('passes through with no detents', () => {
|
||||
expect(applyDetents(0.42, [], 0.05)).toBe(0.42);
|
||||
});
|
||||
});
|
||||
|
||||
describe('describeArc', () => {
|
||||
it('produces a drawable path', () => {
|
||||
const d = describeArc(50, 50, 40, 225, 495);
|
||||
|
|
|
|||
|
|
@ -51,6 +51,27 @@ export const findClosest = (values: readonly number[], value: number): number =>
|
|||
return best;
|
||||
};
|
||||
|
||||
/**
|
||||
* Magnetic detents: snap `n` to the nearest of `detents` (all in normalized
|
||||
* [0, 1] space) when within `radius` of it; otherwise pass `n` through.
|
||||
*/
|
||||
export const applyDetents = (
|
||||
n: number,
|
||||
detents: readonly number[],
|
||||
radius: number,
|
||||
): number => {
|
||||
let best = n;
|
||||
let bestDelta = radius;
|
||||
for (const d of detents) {
|
||||
const delta = Math.abs(n - d);
|
||||
if (delta <= bestDelta) {
|
||||
best = d;
|
||||
bestDelta = delta;
|
||||
}
|
||||
}
|
||||
return best;
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tapers — map between value space and the normalized [0, 1] travel of the
|
||||
// control. Audio parameters are often logarithmic (frequency) or power-law
|
||||
|
|
|
|||
81
packages/dreamknob/src/core/theme.tsx
Normal file
81
packages/dreamknob/src/core/theme.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import * as React from 'react';
|
||||
|
||||
export const MONO_FONT =
|
||||
"'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
|
||||
export const UI_FONT =
|
||||
"'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif";
|
||||
|
||||
/**
|
||||
* Shared design tokens. Every prebuilt skin resolves its color/font defaults
|
||||
* from the active theme, so a single provider can restyle a whole console;
|
||||
* per-instance props always win over the theme.
|
||||
*/
|
||||
export interface KnobTheme {
|
||||
/**
|
||||
* Accent for value arcs, pointers and LEDs. Optional — when unset, each
|
||||
* skin keeps its own signature default color.
|
||||
*/
|
||||
accent?: string;
|
||||
/** Background tracks and rails. */
|
||||
track: string;
|
||||
/** Knob face/body fill for flat skins. */
|
||||
face: string;
|
||||
/** Value readouts. */
|
||||
text: string;
|
||||
/** Captions / parameter names. */
|
||||
label: string;
|
||||
/** Inactive tick marks and printed scales. */
|
||||
ticks: string;
|
||||
/** Keyboard focus ring. */
|
||||
focusRing: string;
|
||||
fontMono: string;
|
||||
fontUI: string;
|
||||
}
|
||||
|
||||
export const darkTheme: KnobTheme = {
|
||||
track: 'rgba(255,255,255,0.12)',
|
||||
face: 'rgba(255,255,255,0.05)',
|
||||
text: 'rgba(255,255,255,0.92)',
|
||||
label: 'rgba(255,255,255,0.45)',
|
||||
ticks: 'rgba(255,255,255,0.18)',
|
||||
focusRing: 'rgba(130,180,255,0.65)',
|
||||
fontMono: MONO_FONT,
|
||||
fontUI: UI_FONT,
|
||||
};
|
||||
|
||||
export const lightTheme: KnobTheme = {
|
||||
track: 'rgba(0,0,0,0.14)',
|
||||
face: 'rgba(0,0,0,0.06)',
|
||||
text: 'rgba(0,0,0,0.85)',
|
||||
label: 'rgba(0,0,0,0.5)',
|
||||
ticks: 'rgba(0,0,0,0.28)',
|
||||
focusRing: 'rgba(0,110,220,0.55)',
|
||||
fontMono: MONO_FONT,
|
||||
fontUI: UI_FONT,
|
||||
};
|
||||
|
||||
const ThemeCtx = React.createContext<KnobTheme>(darkTheme);
|
||||
|
||||
export interface DreamknobProviderProps {
|
||||
/** Base token set to start from. Default: 'dark'. */
|
||||
base?: 'dark' | 'light';
|
||||
/** Token overrides merged over the base. */
|
||||
theme?: Partial<KnobTheme>;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
/** Provides shared design tokens to every dreamknob control below it. */
|
||||
export const DreamknobProvider: React.FC<DreamknobProviderProps> = ({
|
||||
base = 'dark',
|
||||
theme,
|
||||
children,
|
||||
}) => {
|
||||
const value = React.useMemo<KnobTheme>(
|
||||
() => ({ ...(base === 'light' ? lightTheme : darkTheme), ...theme }),
|
||||
[base, theme],
|
||||
);
|
||||
return <ThemeCtx.Provider value={value}>{children}</ThemeCtx.Provider>;
|
||||
};
|
||||
|
||||
/** The active theme (dark tokens when no provider is present). */
|
||||
export const useKnobTheme = (): KnobTheme => React.useContext(ThemeCtx);
|
||||
|
|
@ -37,6 +37,20 @@ export interface KnobCoreProps {
|
|||
steps?: number;
|
||||
/** Travel-to-value curve. Defaults to linear. Use `logTaper` / `powTaper(n)` for audio params. */
|
||||
taper?: Taper;
|
||||
/**
|
||||
* Anchor value for bipolar controls: arcs and fader fills draw from here
|
||||
* instead of from the minimum (e.g. `origin={0}` on a -60..+12 dB gain or a
|
||||
* -50..50 pan). Exposed to custom skins as `originNormalized`.
|
||||
*/
|
||||
origin?: number;
|
||||
/**
|
||||
* Magnetic detent values: while dragging, the control snaps to the nearest
|
||||
* of these when within `detentSize` of it (e.g. `detents={[0]}` for a
|
||||
* center-detented pan). Wheel and keyboard are unaffected.
|
||||
*/
|
||||
detents?: readonly number[];
|
||||
/** Detent capture radius as a fraction of travel. Default: 0.025. */
|
||||
detentSize?: number;
|
||||
/** Drag behaviour. Default: 'rotary'. */
|
||||
interaction?: InteractionMode;
|
||||
/** Pixels of relative drag for full travel in vertical/horizontal modes. Default: 200. */
|
||||
|
|
@ -77,6 +91,8 @@ export interface KnobState {
|
|||
value: number;
|
||||
/** Normalized travel position in [0, 1] (taper space). */
|
||||
normalized: number;
|
||||
/** Normalized position of `origin`, when set — the bipolar fill anchor. */
|
||||
originNormalized?: number;
|
||||
/** Display angle in degrees clockwise from 12 o'clock. */
|
||||
angle: number;
|
||||
isDragging: boolean;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import * as React from 'react';
|
|||
import {
|
||||
angleFromNormalized,
|
||||
angleFromPoint,
|
||||
applyDetents,
|
||||
clamp,
|
||||
decimalsFromStep,
|
||||
findClosest,
|
||||
|
|
@ -75,6 +76,9 @@ export function useKnob(props: KnobCoreProps): UseKnobResult {
|
|||
interaction = 'rotary',
|
||||
dragSensitivity = 200,
|
||||
trackInset = 0,
|
||||
origin,
|
||||
detents,
|
||||
detentSize = 0.025,
|
||||
fineMultiplier = 0.1,
|
||||
angleOffset = 225,
|
||||
angleRange = 270,
|
||||
|
|
@ -153,6 +157,18 @@ export function useKnob(props: KnobCoreProps): UseKnobResult {
|
|||
[emit, taper, min, max],
|
||||
);
|
||||
|
||||
// Detent positions in normalized space, applied only during pointer drags.
|
||||
const detentsN = React.useMemo(
|
||||
() =>
|
||||
detents?.map(d => clamp(taper.toNormalized(clamp(d, min, max), min, max), 0, 1)),
|
||||
[detents, taper, min, max],
|
||||
);
|
||||
const setFromDrag = React.useCallback(
|
||||
(n: number) =>
|
||||
setFromNormalized(detentsN ? applyDetents(n, detentsN, detentSize) : n),
|
||||
[setFromNormalized, detentsN, detentSize],
|
||||
);
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Pointer dragging
|
||||
// -------------------------------------------------------------------------
|
||||
|
|
@ -166,19 +182,19 @@ export function useKnob(props: KnobCoreProps): UseKnobResult {
|
|||
switch (interaction) {
|
||||
case 'rotary': {
|
||||
const angle = angleFromPoint(clientX, clientY, s.centerX, s.centerY);
|
||||
setFromNormalized(normalizedFromAngle(angle, angleOffset % 360, angleRange));
|
||||
setFromDrag(normalizedFromAngle(angle, angleOffset % 360, angleRange));
|
||||
break;
|
||||
}
|
||||
case 'track-vertical': {
|
||||
const travel = s.rect.height - trackInset * 2;
|
||||
if (travel <= 0) break;
|
||||
setFromNormalized((s.rect.bottom - trackInset - clientY) / travel);
|
||||
setFromDrag((s.rect.bottom - trackInset - clientY) / travel);
|
||||
break;
|
||||
}
|
||||
case 'track-horizontal': {
|
||||
const travel = s.rect.width - trackInset * 2;
|
||||
if (travel <= 0) break;
|
||||
setFromNormalized((clientX - s.rect.left - trackInset) / travel);
|
||||
setFromDrag((clientX - s.rect.left - trackInset) / travel);
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
|
|
@ -188,14 +204,15 @@ export function useKnob(props: KnobCoreProps): UseKnobResult {
|
|||
dn += (s.lastY - clientY) * scale;
|
||||
if (interaction === 'horizontal' || interaction === 'both')
|
||||
dn += (clientX - s.lastX) * scale;
|
||||
// s.n stays continuous so magnetic detents release cleanly.
|
||||
s.n = clamp(s.n + dn, 0, 1);
|
||||
setFromNormalized(s.n);
|
||||
setFromDrag(s.n);
|
||||
}
|
||||
}
|
||||
s.lastX = clientX;
|
||||
s.lastY = clientY;
|
||||
},
|
||||
[interaction, angleOffset, angleRange, dragSensitivity, trackInset, fineMultiplier, setFromNormalized],
|
||||
[interaction, angleOffset, angleRange, dragSensitivity, trackInset, fineMultiplier, setFromDrag],
|
||||
);
|
||||
|
||||
const onPointerDown = React.useCallback(
|
||||
|
|
@ -409,10 +426,15 @@ export function useKnob(props: KnobCoreProps): UseKnobResult {
|
|||
|
||||
const normalized = clamp(taper.toNormalized(value, min, max), 0, 1);
|
||||
const angle = angleFromNormalized(normalized, angleOffset, angleRange);
|
||||
const originNormalized =
|
||||
origin === undefined
|
||||
? undefined
|
||||
: clamp(taper.toNormalized(clamp(origin, min, max), min, max), 0, 1);
|
||||
|
||||
return {
|
||||
value,
|
||||
normalized,
|
||||
originNormalized,
|
||||
angle,
|
||||
isDragging,
|
||||
isFocusVisible,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,16 @@
|
|||
export { useKnob, type UseKnobResult } from './hooks/useKnob';
|
||||
export { Knob, type KnobProps } from './components/Knob';
|
||||
export { useKnobContext, type KnobRenderContext } from './core/context';
|
||||
export {
|
||||
DreamknobProvider,
|
||||
useKnobTheme,
|
||||
darkTheme,
|
||||
lightTheme,
|
||||
MONO_FONT,
|
||||
UI_FONT,
|
||||
type KnobTheme,
|
||||
type DreamknobProviderProps,
|
||||
} from './core/theme';
|
||||
export type { KnobCoreProps, KnobState, InteractionMode } from './core/types';
|
||||
export {
|
||||
clamp,
|
||||
|
|
@ -9,6 +19,7 @@ export {
|
|||
snapToStep,
|
||||
decimalsFromStep,
|
||||
findClosest,
|
||||
applyDetents,
|
||||
linearTaper,
|
||||
logTaper,
|
||||
powTaper,
|
||||
|
|
@ -31,6 +42,9 @@ export { KnobValue, KnobLabel, type KnobValueProps, type KnobLabelProps } from '
|
|||
// Digital
|
||||
export { SegmentDisplay, type SegmentDisplayProps } from './digital/SegmentDisplay';
|
||||
|
||||
// Value editing
|
||||
export { defaultParseValue, ValueInput, type ValueInputProps } from './components/ValueInput';
|
||||
|
||||
// Prebuilt skins
|
||||
export type { SkinProps } from './skins/shared';
|
||||
export { FlatKnob, type FlatKnobProps } from './skins/FlatKnob';
|
||||
|
|
@ -42,4 +56,5 @@ export { NeonKnob, type NeonKnobProps } from './skins/NeonKnob';
|
|||
export { SteppedKnob, type SteppedKnobProps } from './skins/SteppedKnob';
|
||||
export { Fader, type FaderProps } from './skins/Fader';
|
||||
export { LEDFader, type LEDFaderProps, type LEDFaderZone } from './skins/LEDFader';
|
||||
export { ImageKnob, type ImageKnobProps } from './skins/ImageKnob';
|
||||
export { GlowFilter, type GlowFilterProps } from './primitives/GlowFilter';
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@ export interface ArcProps {
|
|||
color?: string;
|
||||
/** Background track color. Omit to skip the track. */
|
||||
trackColor?: string;
|
||||
/** Draw the value arc from the minimum ('min') or from the travel center ('center', pan-style). */
|
||||
/**
|
||||
* Draw the value arc from the minimum ('min') or from the anchor ('center',
|
||||
* pan-style). The anchor is the knob's `origin` value when set, otherwise
|
||||
* the travel midpoint.
|
||||
*/
|
||||
from?: 'min' | 'center';
|
||||
cap?: 'butt' | 'round';
|
||||
/** Extra SVG props for the value arc path (e.g. filter for glow). */
|
||||
|
|
@ -29,16 +33,17 @@ export const Arc: React.FC<ArcProps> = ({
|
|||
arcProps,
|
||||
opacity,
|
||||
}) => {
|
||||
const { size, center, normalized, angleOffset, angleRange } = useKnobContext();
|
||||
const { size, center, normalized, originNormalized, angleOffset, angleRange } =
|
||||
useKnobContext();
|
||||
const r = radius ?? (size - thickness) / 2;
|
||||
|
||||
let start: number;
|
||||
let end: number;
|
||||
if (from === 'center') {
|
||||
const mid = angleOffset + angleRange / 2;
|
||||
const anchor = angleOffset + (originNormalized ?? 0.5) * angleRange;
|
||||
const now = angleOffset + normalized * angleRange;
|
||||
start = Math.min(mid, now);
|
||||
end = Math.max(mid, now);
|
||||
start = Math.min(anchor, now);
|
||||
end = Math.max(anchor, now);
|
||||
} else {
|
||||
start = angleOffset;
|
||||
end = angleOffset + normalized * angleRange;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import { useKnob } from '../hooks/useKnob';
|
||||
import type { KnobCoreProps } from '../core/types';
|
||||
import { MONO_FONT, UI_FONT } from './shared';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
import { ValueInput, defaultParseValue } from '../components/ValueInput';
|
||||
|
||||
export interface FaderProps extends Omit<KnobCoreProps, 'interaction'> {
|
||||
orientation?: 'vertical' | 'horizontal';
|
||||
|
|
@ -23,6 +24,10 @@ export interface FaderProps extends Omit<KnobCoreProps, 'interaction'> {
|
|||
format?: (value: number) => string;
|
||||
textColor?: string;
|
||||
labelColor?: string;
|
||||
/** Click the readout to type an exact value. */
|
||||
editable?: boolean;
|
||||
/** Custom parser for typed input. */
|
||||
parseValue?: (text: string) => number | null;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
|
@ -30,24 +35,32 @@ export interface FaderProps extends Omit<KnobCoreProps, 'interaction'> {
|
|||
/** Studio channel fader: absolute-position linear control with a cap handle. */
|
||||
export const Fader: React.FC<FaderProps> = ({
|
||||
orientation = 'vertical',
|
||||
focusRing = 'rgba(130,180,255,0.65)',
|
||||
focusRing,
|
||||
length = 160,
|
||||
breadth = 44,
|
||||
color = '#4cc2ff',
|
||||
trackColor = 'rgba(255,255,255,0.12)',
|
||||
color: colorProp,
|
||||
trackColor,
|
||||
showFill = true,
|
||||
tickCount = 9,
|
||||
tickColor = 'rgba(255,255,255,0.15)',
|
||||
tickColor,
|
||||
label,
|
||||
showValue = true,
|
||||
unit,
|
||||
format,
|
||||
textColor = 'rgba(255,255,255,0.92)',
|
||||
labelColor = 'rgba(255,255,255,0.45)',
|
||||
textColor,
|
||||
labelColor,
|
||||
editable = false,
|
||||
parseValue,
|
||||
className,
|
||||
style,
|
||||
...core
|
||||
}) => {
|
||||
const [editing, setEditing] = React.useState(false);
|
||||
const theme = useKnobTheme();
|
||||
const color = colorProp ?? theme.accent ?? '#4cc2ff';
|
||||
const ring = focusRing ?? theme.focusRing;
|
||||
const resolvedTrack = trackColor ?? theme.track;
|
||||
const resolvedTicks = tickColor ?? theme.ticks;
|
||||
const vertical = orientation === 'vertical';
|
||||
const capMain = 20; // handle size along the travel axis
|
||||
const knob = useKnob({
|
||||
|
|
@ -67,9 +80,13 @@ export const Fader: React.FC<FaderProps> = ({
|
|||
|
||||
// Handle center position along the travel axis.
|
||||
const travel = length - capMain;
|
||||
const pos = vertical
|
||||
? length - capMain / 2 - knob.normalized * travel
|
||||
: capMain / 2 + knob.normalized * travel;
|
||||
const toPos = (n: number) =>
|
||||
vertical ? length - capMain / 2 - n * travel : capMain / 2 + n * travel;
|
||||
const pos = toPos(knob.normalized);
|
||||
// Bipolar controls fill from the origin; unipolar from the start of travel.
|
||||
const originPos = toPos(knob.originNormalized ?? 0);
|
||||
const fillStart = Math.min(pos, originPos);
|
||||
const fillLength = Math.abs(pos - originPos);
|
||||
|
||||
const fixed = knob.value.toFixed(knob.decimals);
|
||||
const trimmed = fixed.includes('.') ? fixed.replace(/0+$/, '').replace(/\.$/, '') : fixed;
|
||||
|
|
@ -82,13 +99,13 @@ export const Fader: React.FC<FaderProps> = ({
|
|||
ticks.push(
|
||||
vertical ? (
|
||||
<React.Fragment key={i}>
|
||||
<line x1={mid - breadth * 0.36} y1={p} x2={mid - breadth * 0.24} y2={p} stroke={tickColor} strokeWidth="1.4" />
|
||||
<line x1={mid + breadth * 0.24} y1={p} x2={mid + breadth * 0.36} y2={p} stroke={tickColor} strokeWidth="1.4" />
|
||||
<line x1={mid - breadth * 0.36} y1={p} x2={mid - breadth * 0.24} y2={p} stroke={resolvedTicks} strokeWidth="1.4" />
|
||||
<line x1={mid + breadth * 0.24} y1={p} x2={mid + breadth * 0.36} y2={p} stroke={resolvedTicks} strokeWidth="1.4" />
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<React.Fragment key={i}>
|
||||
<line x1={p} y1={mid - breadth * 0.36} x2={p} y2={mid - breadth * 0.24} stroke={tickColor} strokeWidth="1.4" />
|
||||
<line x1={p} y1={mid + breadth * 0.24} x2={p} y2={mid + breadth * 0.36} stroke={tickColor} strokeWidth="1.4" />
|
||||
<line x1={p} y1={mid - breadth * 0.36} x2={p} y2={mid - breadth * 0.24} stroke={resolvedTicks} strokeWidth="1.4" />
|
||||
<line x1={p} y1={mid + breadth * 0.24} x2={p} y2={mid + breadth * 0.36} stroke={resolvedTicks} strokeWidth="1.4" />
|
||||
</React.Fragment>
|
||||
),
|
||||
);
|
||||
|
|
@ -109,19 +126,43 @@ export const Fader: React.FC<FaderProps> = ({
|
|||
}}
|
||||
>
|
||||
{showValue && (
|
||||
<div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: MONO_FONT,
|
||||
fontSize: 12,
|
||||
color: textColor,
|
||||
minHeight: '1.2em',
|
||||
whiteSpace: 'nowrap',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
minHeight: '1.4em',
|
||||
}}
|
||||
>
|
||||
{editing ? (
|
||||
<ValueInput
|
||||
initial={String(knob.value)}
|
||||
onCommit={raw => {
|
||||
const parsed = (parseValue ?? defaultParseValue)(raw);
|
||||
if (parsed !== null && Number.isFinite(parsed)) knob.setValue(parsed);
|
||||
setEditing(false);
|
||||
}}
|
||||
onCancel={() => setEditing(false)}
|
||||
style={{ position: 'static', transform: 'none', width: '100%', fontSize: 12 }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={editable ? () => setEditing(true) : undefined}
|
||||
title={editable ? 'Click to type a value' : undefined}
|
||||
style={{
|
||||
fontFamily: theme.fontMono,
|
||||
fontSize: 12,
|
||||
color: textColor ?? theme.text,
|
||||
minHeight: '1.2em',
|
||||
whiteSpace: 'nowrap',
|
||||
pointerEvents: editable ? 'auto' : 'none',
|
||||
cursor: editable ? 'text' : undefined,
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
|
|
@ -132,9 +173,7 @@ export const Fader: React.FC<FaderProps> = ({
|
|||
height: h,
|
||||
display: 'inline-flex',
|
||||
borderRadius: 8,
|
||||
...(knob.isFocusVisible && focusRing
|
||||
? { boxShadow: `0 0 0 2px ${focusRing}` }
|
||||
: undefined),
|
||||
...(knob.isFocusVisible && ring ? { boxShadow: `0 0 0 2px ${ring}` } : undefined),
|
||||
}}
|
||||
>
|
||||
<svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }} aria-hidden="true">
|
||||
|
|
@ -150,9 +189,9 @@ export const Fader: React.FC<FaderProps> = ({
|
|||
{ticks}
|
||||
{vertical ? (
|
||||
<>
|
||||
<rect x={mid - trackW / 2} y={capMain / 2} width={trackW} height={travel} rx={trackW / 2} fill={trackColor} />
|
||||
{showFill && (
|
||||
<rect x={mid - trackW / 2} y={pos} width={trackW} height={length - capMain / 2 - pos} rx={trackW / 2} fill={color} />
|
||||
<rect x={mid - trackW / 2} y={capMain / 2} width={trackW} height={travel} rx={trackW / 2} fill={resolvedTrack} />
|
||||
{showFill && fillLength > 0 && (
|
||||
<rect x={mid - trackW / 2} y={fillStart} width={trackW} height={fillLength} rx={trackW / 2} fill={color} />
|
||||
)}
|
||||
<g style={{ transition: knob.isDragging ? undefined : 'transform 40ms linear' }}>
|
||||
<rect
|
||||
|
|
@ -169,9 +208,9 @@ export const Fader: React.FC<FaderProps> = ({
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
<rect x={capMain / 2} y={mid - trackW / 2} width={travel} height={trackW} rx={trackW / 2} fill={trackColor} />
|
||||
{showFill && (
|
||||
<rect x={capMain / 2} y={mid - trackW / 2} width={pos - capMain / 2} height={trackW} rx={trackW / 2} fill={color} />
|
||||
<rect x={capMain / 2} y={mid - trackW / 2} width={travel} height={trackW} rx={trackW / 2} fill={resolvedTrack} />
|
||||
{showFill && fillLength > 0 && (
|
||||
<rect x={fillStart} y={mid - trackW / 2} width={fillLength} height={trackW} rx={trackW / 2} fill={color} />
|
||||
)}
|
||||
<g>
|
||||
<rect
|
||||
|
|
@ -193,11 +232,11 @@ export const Fader: React.FC<FaderProps> = ({
|
|||
<div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: UI_FONT,
|
||||
fontFamily: theme.fontUI,
|
||||
fontSize: 11,
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
color: labelColor,
|
||||
color: labelColor ?? theme.label,
|
||||
whiteSpace: 'nowrap',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import * as React from 'react';
|
||||
import { Knob } from '../components/Knob';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
import { Arc } from '../primitives/Arc';
|
||||
import { Face } from '../primitives/Face';
|
||||
import { Pointer } from '../primitives/Pointer';
|
||||
import { KnobLabel, KnobValue } from '../primitives/Text';
|
||||
import { MONO_FONT, UI_FONT, type SkinProps } from './shared';
|
||||
import type { SkinProps } from './shared';
|
||||
|
||||
export interface FlatKnobProps extends SkinProps {
|
||||
/** Accent color for the value arc and pointer. */
|
||||
|
|
@ -14,7 +15,7 @@ export interface FlatKnobProps extends SkinProps {
|
|||
pointerColor?: string;
|
||||
textColor?: string;
|
||||
labelColor?: string;
|
||||
/** Draw the value arc from 'min' or from 'center' (pan-style). */
|
||||
/** Draw the value arc from 'min' or from the anchor ('center', pan-style). */
|
||||
arcFrom?: 'min' | 'center';
|
||||
arcThickness?: number;
|
||||
}
|
||||
|
|
@ -22,45 +23,64 @@ export interface FlatKnobProps extends SkinProps {
|
|||
/** Clean 2D knob — the modern DAW/plugin look. */
|
||||
export const FlatKnob: React.FC<FlatKnobProps> = ({
|
||||
size = 80,
|
||||
color = '#4cc2ff',
|
||||
trackColor = 'rgba(255,255,255,0.12)',
|
||||
faceColor = 'rgba(255,255,255,0.05)',
|
||||
color,
|
||||
trackColor,
|
||||
faceColor,
|
||||
pointerColor,
|
||||
textColor = 'rgba(255,255,255,0.92)',
|
||||
labelColor = 'rgba(255,255,255,0.45)',
|
||||
textColor,
|
||||
labelColor,
|
||||
arcFrom = 'min',
|
||||
arcThickness,
|
||||
label,
|
||||
showValue = true,
|
||||
unit,
|
||||
format,
|
||||
focusRing,
|
||||
className,
|
||||
style,
|
||||
...core
|
||||
}) => {
|
||||
const theme = useKnobTheme();
|
||||
const accent = color ?? theme.accent ?? '#4cc2ff';
|
||||
const t = arcThickness ?? Math.max(3, size * 0.055);
|
||||
return (
|
||||
<Knob size={size} className={className} style={style} {...core}>
|
||||
<Arc thickness={t} color={color} trackColor={trackColor} from={arcFrom} />
|
||||
<Face radius={size / 2 - t - 5} fill={faceColor} />
|
||||
<Knob
|
||||
size={size}
|
||||
className={className}
|
||||
style={style}
|
||||
focusRing={focusRing ?? theme.focusRing}
|
||||
{...core}
|
||||
>
|
||||
<Arc
|
||||
thickness={t}
|
||||
color={accent}
|
||||
trackColor={trackColor ?? theme.track}
|
||||
from={arcFrom}
|
||||
/>
|
||||
<Face radius={size / 2 - t - 5} fill={faceColor ?? theme.face} />
|
||||
<Pointer
|
||||
type="line"
|
||||
radius={size / 2 - t - 7}
|
||||
length={size * 0.16}
|
||||
width={Math.max(2.5, size * 0.04)}
|
||||
color={pointerColor ?? color}
|
||||
color={pointerColor ?? accent}
|
||||
/>
|
||||
{showValue && (
|
||||
<KnobValue
|
||||
color={textColor}
|
||||
color={textColor ?? theme.text}
|
||||
unit={unit}
|
||||
format={format}
|
||||
fontSize={size * 0.17}
|
||||
fontFamily={MONO_FONT}
|
||||
fontFamily={theme.fontMono}
|
||||
/>
|
||||
)}
|
||||
{label && (
|
||||
<KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.42} fontSize={size * 0.1}>
|
||||
<KnobLabel
|
||||
color={labelColor ?? theme.label}
|
||||
fontFamily={theme.fontUI}
|
||||
dy={size * 0.42}
|
||||
fontSize={size * 0.1}
|
||||
>
|
||||
{label}
|
||||
</KnobLabel>
|
||||
)}
|
||||
|
|
|
|||
164
packages/dreamknob/src/skins/ImageKnob.tsx
Normal file
164
packages/dreamknob/src/skins/ImageKnob.tsx
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
import * as React from 'react';
|
||||
import { useKnob } from '../hooks/useKnob';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
import type { KnobCoreProps } from '../core/types';
|
||||
import { ValueInput, defaultParseValue } from '../components/ValueInput';
|
||||
|
||||
export interface ImageKnobProps extends KnobCoreProps {
|
||||
/** Film-strip image: every frame is one rotation step, stacked in a strip. */
|
||||
src: string;
|
||||
/** Number of frames in the strip. */
|
||||
frames: number;
|
||||
/** How the frames are stacked in the image. Default: 'vertical'. */
|
||||
stripOrientation?: 'vertical' | 'horizontal';
|
||||
/** Rendered frame size in px (frames are assumed square). Default: 90. */
|
||||
size?: number;
|
||||
label?: string;
|
||||
showValue?: boolean;
|
||||
unit?: string;
|
||||
format?: (value: number) => string;
|
||||
textColor?: string;
|
||||
labelColor?: string;
|
||||
/** Keyboard focus ring color, or false to disable. */
|
||||
focusRing?: string | false;
|
||||
/** Double-click to type an exact value. */
|
||||
editable?: boolean;
|
||||
parseValue?: (text: string) => number | null;
|
||||
/** Extra styles for the image layer (e.g. filter, borderRadius). */
|
||||
imageStyle?: React.CSSProperties;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* Film-strip knob: renders one frame of a sprite strip per value position —
|
||||
* the classic KnobMan / JUCE workflow for photoreal hardware knobs.
|
||||
*/
|
||||
export const ImageKnob: React.FC<ImageKnobProps> = ({
|
||||
src,
|
||||
frames,
|
||||
stripOrientation = 'vertical',
|
||||
size = 90,
|
||||
label,
|
||||
showValue = false,
|
||||
unit,
|
||||
format,
|
||||
textColor,
|
||||
labelColor,
|
||||
focusRing,
|
||||
editable = false,
|
||||
parseValue,
|
||||
imageStyle,
|
||||
className,
|
||||
style,
|
||||
...core
|
||||
}) => {
|
||||
const theme = useKnobTheme();
|
||||
const knob = useKnob(core);
|
||||
const [editing, setEditing] = React.useState(false);
|
||||
const ring = focusRing ?? theme.focusRing;
|
||||
|
||||
const frame = frames > 1 ? Math.round(knob.normalized * (frames - 1)) : 0;
|
||||
const p = frames > 1 ? (frame / (frames - 1)) * 100 : 0;
|
||||
const vertical = stripOrientation === 'vertical';
|
||||
|
||||
const fixed = knob.value.toFixed(knob.decimals);
|
||||
const trimmed = fixed.includes('.') ? fixed.replace(/0+$/, '').replace(/\.$/, '') : fixed;
|
||||
const text = format ? format(knob.value) : `${trimmed}${unit ?? ''}`;
|
||||
|
||||
const closeEditor = () => {
|
||||
setEditing(false);
|
||||
knob.ref.current?.focus({ preventScroll: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
width: size,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
{...knob.bind}
|
||||
onDoubleClick={
|
||||
editable
|
||||
? e => {
|
||||
e.stopPropagation();
|
||||
setEditing(true);
|
||||
}
|
||||
: knob.bind.onDoubleClick
|
||||
}
|
||||
style={{
|
||||
...knob.bind.style,
|
||||
position: 'relative',
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: '50%',
|
||||
...(knob.isFocusVisible && ring ? { boxShadow: `0 0 0 2px ${ring}` } : undefined),
|
||||
}}
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
backgroundImage: `url(${src})`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: vertical ? `100% ${frames * 100}%` : `${frames * 100}% 100%`,
|
||||
backgroundPosition: vertical ? `0% ${p}%` : `${p}% 0%`,
|
||||
pointerEvents: 'none',
|
||||
...imageStyle,
|
||||
}}
|
||||
/>
|
||||
{editing && (
|
||||
<ValueInput
|
||||
initial={String(knob.value)}
|
||||
onCommit={raw => {
|
||||
const parsed = (parseValue ?? defaultParseValue)(raw);
|
||||
if (parsed !== null && Number.isFinite(parsed)) knob.setValue(parsed);
|
||||
closeEditor();
|
||||
}}
|
||||
onCancel={closeEditor}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{showValue && (
|
||||
<div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: theme.fontMono,
|
||||
fontSize: 12,
|
||||
color: textColor ?? theme.text,
|
||||
whiteSpace: 'nowrap',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{label && (
|
||||
<div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: theme.fontUI,
|
||||
fontSize: 11,
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
color: labelColor ?? theme.label,
|
||||
whiteSpace: 'nowrap',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
import * as React from 'react';
|
||||
import { useKnob } from '../hooks/useKnob';
|
||||
import type { KnobCoreProps } from '../core/types';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
import { SegmentDisplay } from '../digital/SegmentDisplay';
|
||||
import { UI_FONT } from './shared';
|
||||
import { ValueInput, defaultParseValue } from '../components/ValueInput';
|
||||
|
||||
export interface LEDFaderZone {
|
||||
/** Upper bound of the zone as a normalized position (0..1]. */
|
||||
|
|
@ -40,6 +41,10 @@ export interface LEDFaderProps extends Omit<KnobCoreProps, 'interaction'> {
|
|||
/** Decimals in the readout (defaults to the control's decimals, capped at 1). */
|
||||
displayDecimals?: number;
|
||||
labelColor?: string;
|
||||
/** Click the readout to type an exact value. */
|
||||
editable?: boolean;
|
||||
/** Custom parser for typed input. */
|
||||
parseValue?: (text: string) => number | null;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
|
@ -50,21 +55,27 @@ export const LEDFader: React.FC<LEDFaderProps> = ({
|
|||
length = 160,
|
||||
breadth = 34,
|
||||
segments = 24,
|
||||
color = '#3df2ad',
|
||||
color: colorProp,
|
||||
zones,
|
||||
offOpacity = 0.13,
|
||||
glow = true,
|
||||
faceColor = '#0b0d0e',
|
||||
focusRing = 'rgba(130,180,255,0.65)',
|
||||
focusRing,
|
||||
label,
|
||||
showValue = true,
|
||||
digits = 4,
|
||||
displayDecimals,
|
||||
labelColor = 'rgba(255,255,255,0.45)',
|
||||
labelColor,
|
||||
editable = false,
|
||||
parseValue,
|
||||
className,
|
||||
style,
|
||||
...core
|
||||
}) => {
|
||||
const [editing, setEditing] = React.useState(false);
|
||||
const theme = useKnobTheme();
|
||||
const color = colorProp ?? theme.accent ?? '#3df2ad';
|
||||
const ring = focusRing ?? theme.focusRing;
|
||||
const vertical = orientation === 'vertical';
|
||||
const pad = 5;
|
||||
const knob = useKnob({
|
||||
|
|
@ -84,14 +95,17 @@ export const LEDFader: React.FC<LEDFaderProps> = ({
|
|||
const zoneFor = (t: number): string =>
|
||||
(zoneList.find(z => t <= z.upTo + 1e-9) ?? zoneList[zoneList.length - 1]).color;
|
||||
|
||||
const lit = Math.round(knob.normalized * segments);
|
||||
// Bipolar controls light the segments between the origin and the value.
|
||||
const originN = knob.originNormalized ?? 0;
|
||||
const litFrom = Math.round(Math.min(knob.normalized, originN) * segments);
|
||||
const litTo = Math.round(Math.max(knob.normalized, originN) * segments);
|
||||
const slot = (length - pad * 2) / segments;
|
||||
const gap = Math.min(3, slot * 0.35);
|
||||
const cross = breadth - pad * 2;
|
||||
|
||||
const leds: React.ReactNode[] = [];
|
||||
for (let i = 0; i < segments; i++) {
|
||||
const on = i < lit;
|
||||
const on = i >= litFrom && i < litTo;
|
||||
const c = zoneFor((i + 1) / segments);
|
||||
const common = {
|
||||
rx: 1.5,
|
||||
|
|
@ -135,16 +149,42 @@ export const LEDFader: React.FC<LEDFaderProps> = ({
|
|||
}}
|
||||
>
|
||||
{showValue && (
|
||||
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', pointerEvents: 'none' }}>
|
||||
<SegmentDisplay
|
||||
value={knob.value}
|
||||
digits={digits}
|
||||
decimals={displayDecimals ?? Math.min(knob.decimals, 1)}
|
||||
height={12}
|
||||
color={zoneFor(knob.normalized)}
|
||||
background="none"
|
||||
ghostOpacity={0.07}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
pointerEvents: editable ? 'auto' : 'none',
|
||||
cursor: editable ? 'text' : undefined,
|
||||
minHeight: 24,
|
||||
alignItems: 'center',
|
||||
}}
|
||||
onClick={editable && !editing ? () => setEditing(true) : undefined}
|
||||
title={editable ? 'Click to type a value' : undefined}
|
||||
>
|
||||
{editing ? (
|
||||
<ValueInput
|
||||
initial={String(knob.value)}
|
||||
onCommit={raw => {
|
||||
const parsed = (parseValue ?? defaultParseValue)(raw);
|
||||
if (parsed !== null && Number.isFinite(parsed)) knob.setValue(parsed);
|
||||
setEditing(false);
|
||||
}}
|
||||
onCancel={() => setEditing(false)}
|
||||
style={{ position: 'static', transform: 'none', width: '100%', fontSize: 12 }}
|
||||
/>
|
||||
) : (
|
||||
<SegmentDisplay
|
||||
value={knob.value}
|
||||
digits={digits}
|
||||
decimals={displayDecimals ?? Math.min(knob.decimals, 1)}
|
||||
height={12}
|
||||
color={zoneFor(knob.normalized)}
|
||||
background="none"
|
||||
ghostOpacity={0.07}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
|
|
@ -155,9 +195,7 @@ export const LEDFader: React.FC<LEDFaderProps> = ({
|
|||
height: h,
|
||||
display: 'inline-flex',
|
||||
borderRadius: 6,
|
||||
...(knob.isFocusVisible && focusRing
|
||||
? { boxShadow: `0 0 0 2px ${focusRing}` }
|
||||
: undefined),
|
||||
...(knob.isFocusVisible && ring ? { boxShadow: `0 0 0 2px ${ring}` } : undefined),
|
||||
}}
|
||||
>
|
||||
<svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }} aria-hidden="true">
|
||||
|
|
@ -193,11 +231,11 @@ export const LEDFader: React.FC<LEDFaderProps> = ({
|
|||
<div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: UI_FONT,
|
||||
fontFamily: theme.fontUI,
|
||||
fontSize: 11,
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
color: labelColor,
|
||||
color: labelColor ?? theme.label,
|
||||
whiteSpace: 'nowrap',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import { KnobLabel } from '../primitives/Text';
|
|||
import { describeArc } from '../core/math';
|
||||
import { useKnobContext } from '../core/context';
|
||||
import { formatForDisplay, renderSegmentText } from '../digital/segments';
|
||||
import { UI_FONT, type SkinProps } from './shared';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
import type { SkinProps } from './shared';
|
||||
|
||||
export interface LEDKnobProps extends SkinProps {
|
||||
/** LED color. */
|
||||
|
|
@ -83,22 +84,25 @@ const CenterDisplay: React.FC<{
|
|||
/** Digital knob: segmented LED ring around a real seven-segment readout. */
|
||||
export const LEDKnob: React.FC<LEDKnobProps> = ({
|
||||
size = 90,
|
||||
color = '#3df2ad',
|
||||
color: colorProp,
|
||||
offColor = 'rgba(255,255,255,0.07)',
|
||||
segments = 24,
|
||||
digits = 3,
|
||||
displayDecimals,
|
||||
labelColor = 'rgba(255,255,255,0.45)',
|
||||
labelColor,
|
||||
faceColor = '#0b0d0e',
|
||||
label,
|
||||
focusRing,
|
||||
className,
|
||||
style,
|
||||
...core
|
||||
}) => {
|
||||
const theme = useKnobTheme();
|
||||
const color = colorProp ?? theme.accent ?? '#3df2ad';
|
||||
const id = React.useId();
|
||||
const glowId = `${id}-glow`;
|
||||
return (
|
||||
<Knob size={size} className={className} style={style} {...core}>
|
||||
<Knob size={size} className={className} style={style} focusRing={focusRing} {...core}>
|
||||
{ctx => (
|
||||
<>
|
||||
<defs>
|
||||
|
|
@ -120,7 +124,12 @@ export const LEDKnob: React.FC<LEDKnobProps> = ({
|
|||
glowId={glowId}
|
||||
/>
|
||||
{label && (
|
||||
<KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.45} fontSize={size * 0.095}>
|
||||
<KnobLabel
|
||||
color={labelColor ?? theme.label}
|
||||
fontFamily={theme.fontUI}
|
||||
dy={size * 0.45}
|
||||
fontSize={size * 0.095}
|
||||
>
|
||||
{label}
|
||||
</KnobLabel>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import { Arc } from '../primitives/Arc';
|
|||
import { Pointer } from '../primitives/Pointer';
|
||||
import { Ticks } from '../primitives/Ticks';
|
||||
import { KnobLabel, KnobValue } from '../primitives/Text';
|
||||
import { MONO_FONT, UI_FONT, type SkinProps } from './shared';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
import type { SkinProps } from './shared';
|
||||
|
||||
export interface MetalKnobProps extends SkinProps {
|
||||
/** Accent color for the active ticks / value arc. */
|
||||
|
|
@ -23,10 +24,10 @@ export interface MetalKnobProps extends SkinProps {
|
|||
/** 3D brushed-aluminum knob with a knurled rim — classic hi-fi hardware. */
|
||||
export const MetalKnob: React.FC<MetalKnobProps> = ({
|
||||
size = 90,
|
||||
color = '#4cc2ff',
|
||||
color: colorProp,
|
||||
tone = 'silver',
|
||||
tickColor = 'rgba(255,255,255,0.18)',
|
||||
labelColor = 'rgba(255,255,255,0.45)',
|
||||
tickColor,
|
||||
labelColor,
|
||||
indicatorColor,
|
||||
textColor,
|
||||
showArc = true,
|
||||
|
|
@ -35,10 +36,13 @@ export const MetalKnob: React.FC<MetalKnobProps> = ({
|
|||
showValue = false,
|
||||
unit,
|
||||
format,
|
||||
focusRing,
|
||||
className,
|
||||
style,
|
||||
...core
|
||||
}) => {
|
||||
const theme = useKnobTheme();
|
||||
const color = colorProp ?? theme.accent ?? '#4cc2ff';
|
||||
const id = React.useId();
|
||||
const rimId = `${id}-rim`;
|
||||
const faceId = `${id}-face`;
|
||||
|
|
@ -57,7 +61,7 @@ export const MetalKnob: React.FC<MetalKnobProps> = ({
|
|||
const indicator = indicatorColor ?? (silver ? '#1b1c21' : color);
|
||||
|
||||
return (
|
||||
<Knob size={size} className={className} style={style} {...core}>
|
||||
<Knob size={size} className={className} style={style} focusRing={focusRing} {...core}>
|
||||
<defs>
|
||||
<linearGradient id={rimId} x1="0" y1="0" x2="0.8" y2="1">
|
||||
<stop offset="0" stopColor={rimStops[0]} />
|
||||
|
|
@ -94,7 +98,7 @@ export const MetalKnob: React.FC<MetalKnobProps> = ({
|
|||
radius={size / 2 - size * 0.055}
|
||||
length={size * 0.05}
|
||||
width={Math.max(1, size * 0.015)}
|
||||
color={tickColor}
|
||||
color={tickColor ?? theme.ticks}
|
||||
activeColor={color}
|
||||
/>
|
||||
|
||||
|
|
@ -124,12 +128,17 @@ export const MetalKnob: React.FC<MetalKnobProps> = ({
|
|||
unit={unit}
|
||||
format={format}
|
||||
fontSize={size * 0.13}
|
||||
fontFamily={MONO_FONT}
|
||||
fontFamily={theme.fontMono}
|
||||
dy={size * 0.09}
|
||||
/>
|
||||
)}
|
||||
{label && (
|
||||
<KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.44} fontSize={size * 0.1}>
|
||||
<KnobLabel
|
||||
color={labelColor ?? theme.label}
|
||||
fontFamily={theme.fontUI}
|
||||
dy={size * 0.44}
|
||||
fontSize={size * 0.1}
|
||||
>
|
||||
{label}
|
||||
</KnobLabel>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ import { Knob } from '../components/Knob';
|
|||
import { Arc } from '../primitives/Arc';
|
||||
import { Pointer } from '../primitives/Pointer';
|
||||
import { KnobLabel, KnobValue } from '../primitives/Text';
|
||||
import { MONO_FONT, UI_FONT, type SkinProps } from './shared';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
import type { SkinProps } from './shared';
|
||||
|
||||
export interface NeonKnobProps extends SkinProps {
|
||||
color?: string;
|
||||
|
|
@ -16,23 +17,26 @@ export interface NeonKnobProps extends SkinProps {
|
|||
/** Minimal glowing arc knob — futuristic / dark-mode DAW style. */
|
||||
export const NeonKnob: React.FC<NeonKnobProps> = ({
|
||||
size = 84,
|
||||
color = '#e44cff',
|
||||
color: colorProp,
|
||||
trackColor = 'rgba(255,255,255,0.06)',
|
||||
textColor,
|
||||
labelColor = 'rgba(255,255,255,0.4)',
|
||||
labelColor,
|
||||
arcFrom = 'min',
|
||||
label,
|
||||
showValue = true,
|
||||
unit,
|
||||
format,
|
||||
focusRing,
|
||||
className,
|
||||
style,
|
||||
...core
|
||||
}) => {
|
||||
const theme = useKnobTheme();
|
||||
const color = colorProp ?? theme.accent ?? '#e44cff';
|
||||
const id = React.useId();
|
||||
const glowId = `${id}-glow`;
|
||||
return (
|
||||
<Knob size={size} className={className} style={style} {...core}>
|
||||
<Knob size={size} className={className} style={style} focusRing={focusRing} {...core}>
|
||||
<defs>
|
||||
<filter
|
||||
id={glowId}
|
||||
|
|
@ -72,12 +76,17 @@ export const NeonKnob: React.FC<NeonKnobProps> = ({
|
|||
unit={unit}
|
||||
format={format}
|
||||
fontSize={size * 0.17}
|
||||
fontFamily={MONO_FONT}
|
||||
fontFamily={theme.fontMono}
|
||||
textProps={{ filter: `url(#${glowId})` }}
|
||||
/>
|
||||
)}
|
||||
{label && (
|
||||
<KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.45} fontSize={size * 0.1}>
|
||||
<KnobLabel
|
||||
color={labelColor ?? theme.label}
|
||||
fontFamily={theme.fontUI}
|
||||
dy={size * 0.45}
|
||||
fontSize={size * 0.1}
|
||||
>
|
||||
{label}
|
||||
</KnobLabel>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import { Arc } from '../primitives/Arc';
|
|||
import { GlowFilter } from '../primitives/GlowFilter';
|
||||
import { Pointer } from '../primitives/Pointer';
|
||||
import { KnobLabel, KnobValue } from '../primitives/Text';
|
||||
import { MONO_FONT, UI_FONT, type SkinProps } from './shared';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
import type { SkinProps } from './shared';
|
||||
|
||||
export interface RubberKnobProps extends SkinProps {
|
||||
/** Glow/accent color. */
|
||||
|
|
@ -18,19 +19,22 @@ export interface RubberKnobProps extends SkinProps {
|
|||
/** Soft-touch rubber knob with a glowing halo — modern synth hardware. */
|
||||
export const RubberKnob: React.FC<RubberKnobProps> = ({
|
||||
size = 90,
|
||||
color = '#ff9640',
|
||||
trackColor = 'rgba(255,255,255,0.08)',
|
||||
textColor = 'rgba(255,255,255,0.92)',
|
||||
labelColor = 'rgba(255,255,255,0.45)',
|
||||
color: colorProp,
|
||||
trackColor,
|
||||
textColor,
|
||||
labelColor,
|
||||
arcFrom = 'min',
|
||||
label,
|
||||
showValue = false,
|
||||
unit,
|
||||
format,
|
||||
focusRing,
|
||||
className,
|
||||
style,
|
||||
...core
|
||||
}) => {
|
||||
const theme = useKnobTheme();
|
||||
const color = colorProp ?? theme.accent ?? '#ff9640';
|
||||
const id = React.useId();
|
||||
const bodyId = `${id}-body`;
|
||||
const glowId = `${id}-glow`;
|
||||
|
|
@ -38,7 +42,7 @@ export const RubberKnob: React.FC<RubberKnobProps> = ({
|
|||
const bodyR = size / 2 - size * 0.17;
|
||||
|
||||
return (
|
||||
<Knob size={size} className={className} style={style} {...core}>
|
||||
<Knob size={size} className={className} style={style} focusRing={focusRing} {...core}>
|
||||
<defs>
|
||||
<radialGradient id={bodyId} cx="0.38" cy="0.3" r="1">
|
||||
<stop offset="0" stopColor="#3a3b41" />
|
||||
|
|
@ -52,7 +56,7 @@ export const RubberKnob: React.FC<RubberKnobProps> = ({
|
|||
radius={size / 2 - size * 0.05}
|
||||
thickness={Math.max(3, size * 0.045)}
|
||||
color={color}
|
||||
trackColor={trackColor}
|
||||
trackColor={trackColor ?? theme.track}
|
||||
from={arcFrom}
|
||||
arcProps={{ filter: `url(#${glowId})` }}
|
||||
/>
|
||||
|
|
@ -86,16 +90,21 @@ export const RubberKnob: React.FC<RubberKnobProps> = ({
|
|||
/>
|
||||
{showValue && (
|
||||
<KnobValue
|
||||
color={textColor}
|
||||
color={textColor ?? theme.text}
|
||||
unit={unit}
|
||||
format={format}
|
||||
fontSize={size * 0.15}
|
||||
fontFamily={MONO_FONT}
|
||||
fontFamily={theme.fontMono}
|
||||
dy={size * 0.02}
|
||||
/>
|
||||
)}
|
||||
{label && (
|
||||
<KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.44} fontSize={size * 0.1}>
|
||||
<KnobLabel
|
||||
color={labelColor ?? theme.label}
|
||||
fontFamily={theme.fontUI}
|
||||
dy={size * 0.44}
|
||||
fontSize={size * 0.1}
|
||||
>
|
||||
{label}
|
||||
</KnobLabel>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ import { Knob } from '../components/Knob';
|
|||
import { Pointer } from '../primitives/Pointer';
|
||||
import { Ticks } from '../primitives/Ticks';
|
||||
import { KnobLabel } from '../primitives/Text';
|
||||
import { MONO_FONT, UI_FONT, type SkinProps } from './shared';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
import type { SkinProps } from './shared';
|
||||
|
||||
export interface SteppedKnobProps extends SkinProps {
|
||||
/** Position names, e.g. ['LP','BP','HP']. Sets the number of detents. */
|
||||
|
|
@ -22,23 +23,35 @@ export const SteppedKnob: React.FC<SteppedKnobProps> = ({
|
|||
size = 90,
|
||||
positions,
|
||||
steps,
|
||||
color = '#ffd23e',
|
||||
tickColor = 'rgba(255,255,255,0.18)',
|
||||
color: colorProp,
|
||||
tickColor,
|
||||
faceColor = '#1c1d22',
|
||||
textColor = 'rgba(255,255,255,0.92)',
|
||||
labelColor = 'rgba(255,255,255,0.45)',
|
||||
textColor,
|
||||
labelColor,
|
||||
label,
|
||||
showValue = true,
|
||||
focusRing,
|
||||
className,
|
||||
style,
|
||||
...core
|
||||
}) => {
|
||||
const theme = useKnobTheme();
|
||||
const color = colorProp ?? theme.accent ?? '#ffd23e';
|
||||
const detents = positions ? positions.length : steps ?? 5;
|
||||
const min = core.min ?? 0;
|
||||
const max = core.max ?? (positions ? positions.length - 1 : 100);
|
||||
|
||||
return (
|
||||
<Knob size={size} className={className} style={style} {...core} min={min} max={max} steps={detents}>
|
||||
<Knob
|
||||
size={size}
|
||||
className={className}
|
||||
style={style}
|
||||
focusRing={focusRing}
|
||||
{...core}
|
||||
min={min}
|
||||
max={max}
|
||||
steps={detents}
|
||||
>
|
||||
{ctx => {
|
||||
const index = Math.round(ctx.normalized * (detents - 1));
|
||||
return (
|
||||
|
|
@ -48,7 +61,7 @@ export const SteppedKnob: React.FC<SteppedKnobProps> = ({
|
|||
radius={size / 2 - 1}
|
||||
length={size * 0.07}
|
||||
width={Math.max(1.5, size * 0.022)}
|
||||
color={tickColor}
|
||||
color={tickColor ?? theme.ticks}
|
||||
getTickProps={i => (i === index ? { stroke: color } : undefined)}
|
||||
/>
|
||||
<circle
|
||||
|
|
@ -73,8 +86,8 @@ export const SteppedKnob: React.FC<SteppedKnobProps> = ({
|
|||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
fontSize={size * (positions ? 0.15 : 0.17)}
|
||||
fill={textColor}
|
||||
fontFamily={MONO_FONT}
|
||||
fill={textColor ?? theme.text}
|
||||
fontFamily={theme.fontMono}
|
||||
fontWeight={600}
|
||||
style={{ pointerEvents: 'none' }}
|
||||
>
|
||||
|
|
@ -82,7 +95,12 @@ export const SteppedKnob: React.FC<SteppedKnobProps> = ({
|
|||
</text>
|
||||
)}
|
||||
{label && (
|
||||
<KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.45} fontSize={size * 0.095}>
|
||||
<KnobLabel
|
||||
color={labelColor ?? theme.label}
|
||||
fontFamily={theme.fontUI}
|
||||
dy={size * 0.45}
|
||||
fontSize={size * 0.095}
|
||||
>
|
||||
{label}
|
||||
</KnobLabel>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import { TickLabels } from '../primitives/TickLabels';
|
|||
import { KnobLabel } from '../primitives/Text';
|
||||
import { polarToCartesian } from '../core/math';
|
||||
import { useKnobContext } from '../core/context';
|
||||
import { UI_FONT, type SkinProps } from './shared';
|
||||
import { useKnobTheme } from '../core/theme';
|
||||
import type { SkinProps } from './shared';
|
||||
|
||||
/** VintageKnob has no numeric readout, so it doesn't accept readout props. */
|
||||
export interface VintageKnobProps extends Omit<SkinProps, 'showValue' | 'unit' | 'format'> {
|
||||
|
|
@ -96,36 +97,46 @@ const ChickenHead: React.FC<{ bodyColor: string; indicatorColor: string }> = ({
|
|||
export const VintageKnob: React.FC<VintageKnobProps> = ({
|
||||
size = 96,
|
||||
bodyColor = '#efe6d0',
|
||||
scaleColor = 'rgba(255,255,255,0.35)',
|
||||
scaleColor,
|
||||
color,
|
||||
labelColor = 'rgba(255,255,255,0.45)',
|
||||
labelColor,
|
||||
scaleLabels,
|
||||
indicatorColor,
|
||||
label,
|
||||
focusRing,
|
||||
className,
|
||||
style,
|
||||
...core
|
||||
}) => (
|
||||
<Knob size={size} className={className} style={style} {...core}>
|
||||
<Ticks
|
||||
count={11}
|
||||
radius={size / 2 - size * (scaleLabels ? 0.1 : 0.04)}
|
||||
length={size * 0.055}
|
||||
width={Math.max(1.2, size * 0.016)}
|
||||
color={scaleColor}
|
||||
activeColor={color ?? scaleColor}
|
||||
/>
|
||||
{scaleLabels && <TickLabels labels={scaleLabels} color={scaleColor} fontFamily={UI_FONT} />}
|
||||
<ChickenHead
|
||||
bodyColor={bodyColor}
|
||||
indicatorColor={
|
||||
indicatorColor ?? (isDarkColor(bodyColor) ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.55)')
|
||||
}
|
||||
/>
|
||||
{label && (
|
||||
<KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.46} fontSize={size * 0.095}>
|
||||
{label}
|
||||
</KnobLabel>
|
||||
)}
|
||||
</Knob>
|
||||
);
|
||||
}) => {
|
||||
const theme = useKnobTheme();
|
||||
const scale = scaleColor ?? theme.ticks;
|
||||
return (
|
||||
<Knob size={size} className={className} style={style} focusRing={focusRing} {...core}>
|
||||
<Ticks
|
||||
count={11}
|
||||
radius={size / 2 - size * (scaleLabels ? 0.1 : 0.04)}
|
||||
length={size * 0.055}
|
||||
width={Math.max(1.2, size * 0.016)}
|
||||
color={scale}
|
||||
activeColor={color ?? scale}
|
||||
/>
|
||||
{scaleLabels && <TickLabels labels={scaleLabels} color={scale} fontFamily={theme.fontUI} />}
|
||||
<ChickenHead
|
||||
bodyColor={bodyColor}
|
||||
indicatorColor={
|
||||
indicatorColor ?? (isDarkColor(bodyColor) ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.55)')
|
||||
}
|
||||
/>
|
||||
{label && (
|
||||
<KnobLabel
|
||||
color={labelColor ?? theme.label}
|
||||
fontFamily={theme.fontUI}
|
||||
dy={size * 0.46}
|
||||
fontSize={size * 0.095}
|
||||
>
|
||||
{label}
|
||||
</KnobLabel>
|
||||
)}
|
||||
</Knob>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import type * as React from 'react';
|
||||
import type { KnobCoreProps } from '../core/types';
|
||||
|
||||
export { MONO_FONT, UI_FONT } from '../core/theme';
|
||||
|
||||
/** Props common to every prebuilt knob skin. */
|
||||
export interface SkinProps extends KnobCoreProps {
|
||||
/** Square canvas size in px. */
|
||||
|
|
@ -13,11 +15,15 @@ export interface SkinProps extends KnobCoreProps {
|
|||
unit?: string;
|
||||
/** Custom readout formatter (takes precedence over unit/decimals). */
|
||||
format?: (value: number) => string;
|
||||
/** Keyboard focus ring color, or false to disable. Defaults to the theme's. */
|
||||
focusRing?: string | false;
|
||||
/**
|
||||
* Type-in editing: double-click (knobs) or click the readout (faders) to
|
||||
* enter an exact value. Enter/blur commits, Escape cancels, "1.2k" works.
|
||||
*/
|
||||
editable?: boolean;
|
||||
/** Custom parser for typed input when `editable` is set. */
|
||||
parseValue?: (text: string) => number | null;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export const MONO_FONT =
|
||||
"'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
|
||||
export const UI_FONT =
|
||||
"'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue