feat: add gain responsive
This commit is contained in:
@@ -1,62 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { DSP } from '../../types/types';
|
||||
import Sidebar from './Sidebar/Sidebar';
|
||||
import { InfoIcon, SlidersIcon } from '../../assets/icons/AudioIcons';
|
||||
import ConnectionPanel from './ConnectionPanel';
|
||||
import GainPanel from './GainPanel';
|
||||
import { NotificationType } from '../../types/types';
|
||||
|
||||
function DSPPage({
|
||||
dsp,
|
||||
onConnect,
|
||||
onDisconnect,
|
||||
notify,
|
||||
}: {
|
||||
dsp: DSP;
|
||||
onConnect: () => void;
|
||||
onDisconnect: () => void;
|
||||
notify: (message: string, type?: NotificationType, dspName?: string) => void;
|
||||
}) {
|
||||
const [activeSidebar, setActiveSidebar] = useState('overview');
|
||||
|
||||
const sidebarItems = [
|
||||
{
|
||||
id: 'overview',
|
||||
label: 'Overview',
|
||||
icon: <InfoIcon />,
|
||||
},
|
||||
{
|
||||
id: 'gain',
|
||||
label: 'Gain',
|
||||
icon: <SlidersIcon />,
|
||||
},
|
||||
];
|
||||
|
||||
const renderTab = () => {
|
||||
switch (activeSidebar) {
|
||||
case 'overview':
|
||||
return <ConnectionPanel dsp={dsp} onConnect={onConnect} onDisconnect={onDisconnect} />;
|
||||
|
||||
case 'gain':
|
||||
return <GainPanel dsp={dsp} notify={notify} />;
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dsp-layout">
|
||||
<Sidebar
|
||||
items={sidebarItems}
|
||||
activeId={activeSidebar}
|
||||
onSelect={setActiveSidebar}
|
||||
appName={dsp.name}
|
||||
/>
|
||||
|
||||
<div className="dsp-content">{renderTab()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DSPPage;
|
||||
@@ -1,56 +0,0 @@
|
||||
import VerticalStack from './VerticalStack/VerticalStack';
|
||||
import VerticalSlider from './Slider.tsx/VerticalSlider';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { InputChannel, Channel } from '../../types/dsp408State';
|
||||
import { DSP } from '../../types/types';
|
||||
import { NotificationType } from '../../types/types';
|
||||
|
||||
function GainPanel({
|
||||
dsp,
|
||||
notify,
|
||||
}: {
|
||||
dsp: DSP;
|
||||
notify: (message: string, type?: NotificationType, dspName?: string) => void;
|
||||
}) {
|
||||
const setGain = async (value: number) => {
|
||||
const channel: Channel = {
|
||||
Input: InputChannel.InA,
|
||||
};
|
||||
|
||||
try {
|
||||
const success = await invoke<boolean>('set_channel_gain', {
|
||||
id: dsp.id,
|
||||
channel,
|
||||
db: value,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
notify(`Input A gain set to ${value} dB`, 'success', dsp.name);
|
||||
} else {
|
||||
notify('Failed to set input gain', 'error', dsp.name);
|
||||
}
|
||||
} catch (err) {
|
||||
notify(`Gain update failed: ${String(err)}`, 'error', dsp.name);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<VerticalStack title="In A" titleFontSize={18}>
|
||||
<VerticalSlider
|
||||
min={-60}
|
||||
max={12}
|
||||
step={1}
|
||||
switchStepValue={-10}
|
||||
switchStep={0.1}
|
||||
unit=" dB"
|
||||
onChange={setGain}
|
||||
/>
|
||||
|
||||
<button className="btn btn-ghost">Reset</button>
|
||||
|
||||
<button className="btn btn-primary">Apply</button>
|
||||
</VerticalStack>
|
||||
);
|
||||
}
|
||||
|
||||
export default GainPanel;
|
||||
@@ -0,0 +1,67 @@
|
||||
:root {
|
||||
--gain-section-height: 40vh; /* your fixed % of screen height */
|
||||
}
|
||||
|
||||
.gain-section {
|
||||
position: fixed;
|
||||
left: var(--sidebar-width-collapsed);
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
height: var(--gain-section-height);
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 0 var(--space-4);
|
||||
|
||||
background: var(--bg-void);
|
||||
|
||||
transition: left var(--dur-base) var(--ease-standard);
|
||||
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
/* keep it clear of the sidebar when expanded, without lifting React state */
|
||||
.app-root:has(.sidebar-rail--expanded) .gain-section {
|
||||
left: var(--sidebar-width-expanded);
|
||||
}
|
||||
.gain-panels {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: safe center;
|
||||
gap: var(--space-4);
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-hairline) transparent;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.gain-panels > * {
|
||||
height: 100%;
|
||||
aspect-ratio: 90 / 340; /* your panel's design ratio (title+slider+buttons) — tune */
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.gain-panels::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
.gain-panels::-webkit-scrollbar-thumb {
|
||||
background: var(--border-hairline);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
.gain-panels::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import VerticalStack from '../../VerticalStack/VerticalStack';
|
||||
import VerticalSlider from '../../Slider/VerticalSlider';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State';
|
||||
import { DSP } from '../../../types/types';
|
||||
import { NotificationType } from '../../../types/types';
|
||||
import { useState } from 'react';
|
||||
import Button from '../../Button/Button';
|
||||
import './GainSection.css';
|
||||
|
||||
function GainPanel({
|
||||
dsp,
|
||||
notify,
|
||||
channel,
|
||||
title,
|
||||
}: {
|
||||
dsp: DSP;
|
||||
notify: (message: string, type?: NotificationType, dspName?: string) => void;
|
||||
channel: Channel;
|
||||
title: string;
|
||||
}) {
|
||||
const setGain = async (value: number) => {
|
||||
try {
|
||||
const success = await invoke<boolean>('set_channel_gain', {
|
||||
id: dsp.id,
|
||||
channel,
|
||||
db: value,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
notify(`Input A gain set to ${value} dB`, 'success', dsp.name);
|
||||
} else {
|
||||
notify('Failed to set input gain', 'error', dsp.name);
|
||||
}
|
||||
} catch (err) {
|
||||
notify(`Gain update failed: ${String(err)}`, 'error', dsp.name);
|
||||
}
|
||||
};
|
||||
|
||||
const setMute = async (muted: boolean) => {
|
||||
try {
|
||||
const success = await invoke<boolean>('set_mute', {
|
||||
id: dsp.id,
|
||||
channel,
|
||||
muted,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
notify(`Input A ${muted ? 'muted' : 'unmuted'}`, 'success', dsp.name);
|
||||
} else {
|
||||
notify('Failed to change mute state', 'error', dsp.name);
|
||||
}
|
||||
} catch (err) {
|
||||
notify(`Mute update failed: ${String(err)}`, 'error', dsp.name);
|
||||
}
|
||||
};
|
||||
|
||||
const setInverse = async (inverted: boolean) => {
|
||||
try {
|
||||
const success = await invoke<boolean>('set_channel_inverse_gain', {
|
||||
id: dsp.id,
|
||||
channel,
|
||||
inverted,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
notify(`Input A phase ${inverted ? 'inverted' : 'normal'}`, 'success', dsp.name);
|
||||
} else {
|
||||
notify('Failed to change phase', 'error', dsp.name);
|
||||
}
|
||||
} catch (err) {
|
||||
notify(`Phase update failed: ${String(err)}`, 'error', dsp.name);
|
||||
}
|
||||
};
|
||||
|
||||
const [muted, setMuted] = useState(false);
|
||||
const [inverted, setInverted] = useState(false);
|
||||
|
||||
const toggleMute = async () => {
|
||||
const next = !muted;
|
||||
setMuted(next);
|
||||
await setMute(next);
|
||||
};
|
||||
|
||||
const toggleInverse = async () => {
|
||||
const next = !inverted;
|
||||
setInverted(next);
|
||||
await setInverse(next);
|
||||
};
|
||||
|
||||
return (
|
||||
<VerticalStack title={title}>
|
||||
<VerticalSlider
|
||||
min={-60}
|
||||
max={12}
|
||||
step={0.5}
|
||||
switchStepValue={-10}
|
||||
switchStep={0.1}
|
||||
unit=" dB"
|
||||
onChange={setGain}
|
||||
/>
|
||||
{/* <Button
|
||||
variant="toggle"
|
||||
className={muted ? "active-danger" : ""}
|
||||
onClick={toggleMute}
|
||||
>
|
||||
{muted ? "Muted" : "Mute"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="toggle"
|
||||
className={inverted ? "active-warning" : ""}
|
||||
onClick={toggleInverse}
|
||||
>
|
||||
{inverted ? "Inverted" : "Invert"}
|
||||
</Button> */}
|
||||
</VerticalStack>
|
||||
);
|
||||
}
|
||||
|
||||
function GainSection({
|
||||
dsp,
|
||||
notify,
|
||||
}: {
|
||||
dsp: DSP;
|
||||
notify: (message: string, type?: NotificationType, dspName?: string) => void;
|
||||
}) {
|
||||
const channels: { channel: Channel; title: string }[] = [
|
||||
{ channel: { Input: InputChannel.InA }, title: 'In A' },
|
||||
{ channel: { Input: InputChannel.InB }, title: 'In B' },
|
||||
{ channel: { Input: InputChannel.InC }, title: 'In C' },
|
||||
{ channel: { Input: InputChannel.InD }, title: 'In D' },
|
||||
|
||||
{ channel: { Output: OutputChannel.Out1 }, title: "Out 1" },
|
||||
{ channel: { Output: OutputChannel.Out2 }, title: "Out 2" },
|
||||
{ channel: { Output: OutputChannel.Out3 }, title: "Out 3" },
|
||||
{ channel: { Output: OutputChannel.Out4 }, title: "Out 4" },
|
||||
{ channel: { Output: OutputChannel.Out5 }, title: "Out 5" },
|
||||
{ channel: { Output: OutputChannel.Out6 }, title: "Out 6" },
|
||||
{ channel: { Output: OutputChannel.Out7 }, title: "Out 7" },
|
||||
{ channel: { Output: OutputChannel.Out8 }, title: "Out 8" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="gain-section">
|
||||
<div className="gain-panels">
|
||||
{channels.map(({ channel, title }) => (
|
||||
<GainPanel key={title} dsp={dsp} notify={notify} channel={channel} title={title} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GainSection;
|
||||
@@ -1,268 +0,0 @@
|
||||
/* ---------- Label ---------- */
|
||||
|
||||
.sidebar-label {
|
||||
opacity: 0;
|
||||
max-width: 0;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
transition:
|
||||
opacity var(--dur-fast) var(--ease-standard),
|
||||
max-width var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sidebar-rail--expanded .sidebar-label {
|
||||
opacity: 1;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Icon ---------- */
|
||||
|
||||
.sidebar-icon {
|
||||
width: var(--sidebar-icon-size, 20px);
|
||||
height: var(--sidebar-icon-size, 20px);
|
||||
|
||||
flex-shrink: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.sidebar-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: block;
|
||||
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Item ---------- */
|
||||
|
||||
.sidebar-item {
|
||||
width: var(--sidebar-item-size);
|
||||
height: var(--sidebar-item-size);
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: var(--border-width) solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition:
|
||||
width var(--dur-base) var(--ease-standard),
|
||||
background var(--dur-base) var(--ease-standard),
|
||||
color var(--dur-base) var(--ease-standard),
|
||||
border-color var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded .sidebar-item {
|
||||
width: calc(100% - var(--space-4));
|
||||
gap: var(--sidebar-item-gap);
|
||||
|
||||
justify-content: flex-start;
|
||||
|
||||
padding-left: var(--sidebar-item-padding);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Item States ---------- */
|
||||
|
||||
.sidebar-item:hover {
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-item--active {
|
||||
border-color: var(--accent-brand);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Sidebar ---------- */
|
||||
|
||||
.sidebar-rail {
|
||||
position: fixed;
|
||||
|
||||
top: var(--header-height);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: var(--sidebar-width-collapsed);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background: var(--bg-void);
|
||||
|
||||
border-right: var(--border-width) solid var(--border-hairline);
|
||||
|
||||
z-index: 30;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
transition:
|
||||
width var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded {
|
||||
width: var(--sidebar-width-expanded);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- App name ---------- */
|
||||
|
||||
.sidebar-app-name {
|
||||
position: absolute;
|
||||
|
||||
top: var(--space-3);
|
||||
left: var(--space-4);
|
||||
|
||||
height: var(--sidebar-toggle-size);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: var(--font-size-sm, 13px);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
transition: opacity var(--dur-fast) var(--ease-standard);
|
||||
|
||||
z-index: 31;
|
||||
}
|
||||
|
||||
.sidebar-rail--expanded .sidebar-app-name {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transition-delay: var(--dur-fast);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Scroll ---------- */
|
||||
|
||||
.sidebar-scroll {
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: var(--space-1);
|
||||
|
||||
padding: calc(var(--sidebar-toggle-size) + var(--space-3) * 2) 0 var(--space-3);
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded .sidebar-scroll {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Toggle ---------- */
|
||||
|
||||
.sidebar-toggle {
|
||||
position: absolute;
|
||||
|
||||
top: var(--space-3);
|
||||
left: calc((var(--sidebar-width-collapsed) - var(--sidebar-toggle-size)) / 2);
|
||||
|
||||
width: var(--sidebar-toggle-size);
|
||||
height: var(--sidebar-toggle-size);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--radius-pill);
|
||||
|
||||
background: var(--bg-void);
|
||||
color: var(--text-muted);
|
||||
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
transition:
|
||||
left var(--dur-base) var(--ease-standard),
|
||||
background var(--dur-base) var(--ease-standard),
|
||||
color var(--dur-base) var(--ease-standard),
|
||||
transform var(--dur-fast) var(--ease-standard);
|
||||
|
||||
z-index: 32;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded .sidebar-toggle {
|
||||
left: calc(var(--sidebar-width-expanded) - var(--sidebar-toggle-size) - var(--space-3));
|
||||
}
|
||||
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
background: var(--bg-raised);
|
||||
|
||||
color: var(--text-primary);
|
||||
|
||||
border-color: var(--accent-brand);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-toggle:active {
|
||||
transform: scale(.92);
|
||||
}
|
||||
|
||||
.sidebar-rail--expanded .sidebar-toggle:active {
|
||||
transform: scale(.92);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-toggle-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
transition:
|
||||
transform var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded .sidebar-toggle-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Content ---------- */
|
||||
|
||||
.stage--with-sidebar {
|
||||
margin-left: var(--sidebar-width-collapsed);
|
||||
|
||||
transition:
|
||||
margin-left var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import './Sidebar.css';
|
||||
import { ChevronLeftIcon } from '../../../assets/icons/ChevronLeftIcon';
|
||||
|
||||
export type SidebarItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function Sidebar({
|
||||
items,
|
||||
activeId,
|
||||
onSelect,
|
||||
appName,
|
||||
}: {
|
||||
items: SidebarItem[];
|
||||
activeId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
appName: string;
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<nav className={`sidebar-rail ${expanded ? 'sidebar-rail--expanded' : ''}`}>
|
||||
<span className="sidebar-app-name">{appName}</span>
|
||||
|
||||
<button
|
||||
className="sidebar-toggle"
|
||||
onClick={() => setExpanded((prev) => !prev)}
|
||||
aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'}
|
||||
aria-expanded={expanded}
|
||||
>
|
||||
<ChevronLeftIcon className="sidebar-toggle-icon" />
|
||||
</button>
|
||||
|
||||
<div className="sidebar-scroll">
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onSelect(item.id)}
|
||||
title={item.label}
|
||||
aria-label={item.label}
|
||||
aria-current={activeId === item.id ? 'page' : undefined}
|
||||
className={`sidebar-item ${activeId === item.id ? 'sidebar-item--active' : ''}`}
|
||||
>
|
||||
<span className="sidebar-icon">{item.icon}</span>
|
||||
<span className="sidebar-label">{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,164 +0,0 @@
|
||||
.gauge-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
width: 4.375rem;
|
||||
|
||||
padding-top: var(--space-3);
|
||||
margin: var(--space-3);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.gauge-track {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 13.125rem;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
|
||||
width: 34.3%;
|
||||
height: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.track {
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
top: 0;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
width: 2.86cqw;
|
||||
height: 100%;
|
||||
|
||||
background: var(--border-hairline);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.thumb {
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
|
||||
width: 75%;
|
||||
aspect-ratio: 1;
|
||||
|
||||
transform: translate(-50%, 50%);
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--bg-panel);
|
||||
|
||||
border: var(--border-width-active) solid var(--accent-brand);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
transition:
|
||||
transform var(--transition-fast) var(--ease-standard),
|
||||
box-shadow var(--transition-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ticks span {
|
||||
width: 14.3cqw;
|
||||
height: 2.86cqw;
|
||||
|
||||
background: var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.left {
|
||||
left: 11.4%;
|
||||
}
|
||||
|
||||
.right {
|
||||
right: 11.4%;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: var(--space-2);
|
||||
|
||||
width: 100%;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: var(--space-2);
|
||||
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
color: var(--accent-brand);
|
||||
|
||||
font-size: var(--value-font-size, 16px);
|
||||
|
||||
font-family: var(--font-ui);
|
||||
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
gap: 0.25em;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.value input,
|
||||
.value-unit {
|
||||
font-size: inherit;
|
||||
line-height: 1;
|
||||
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
.value input {
|
||||
height: 1.4em;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
text-align: center;
|
||||
|
||||
flex: 0 1 auto;
|
||||
|
||||
background: transparent;
|
||||
|
||||
border: 1px solid var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
appearance: none;
|
||||
}
|
||||
@@ -1,264 +0,0 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import './VerticalSlider.css';
|
||||
|
||||
type VerticalSliderProps = {
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
|
||||
switchStepValue?: number;
|
||||
switchStep?: number;
|
||||
|
||||
value?: number;
|
||||
onChange?: (value: number) => void;
|
||||
|
||||
unit?: string;
|
||||
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
function getDecimals(n: number) {
|
||||
const s = n.toString();
|
||||
const i = s.indexOf('.');
|
||||
return i === -1 ? 0 : s.length - i - 1;
|
||||
}
|
||||
|
||||
// Measures whatever box the consumer actually rendered — no more
|
||||
// assuming the gauge is always 70px wide.
|
||||
function useElementSize<T extends HTMLElement>() {
|
||||
const ref = useRef<T>(null);
|
||||
const [size, setSize] = useState({ width: 0, height: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const { width, height } = entries[0].contentRect;
|
||||
setSize({ width, height });
|
||||
});
|
||||
|
||||
observer.observe(el);
|
||||
|
||||
const rect = el.getBoundingClientRect();
|
||||
setSize({ width: rect.width, height: rect.height });
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return [ref, size] as const;
|
||||
}
|
||||
|
||||
export default function VerticalSlider({
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
switchStepValue,
|
||||
switchStep,
|
||||
value: controlledValue,
|
||||
onChange,
|
||||
unit = '',
|
||||
className,
|
||||
style,
|
||||
}: VerticalSliderProps) {
|
||||
const [internalValue, setInternalValue] = useState(min);
|
||||
const value = controlledValue ?? internalValue;
|
||||
|
||||
const [editingText, setEditingText] = useState<string | null>(null);
|
||||
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [containerRef, containerSize] = useElementSize<HTMLDivElement>();
|
||||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
const isDragging = useRef(false);
|
||||
const lastValue = useRef(value);
|
||||
const keyboardValue = useRef<number | null>(null);
|
||||
|
||||
const currentStep =
|
||||
switchStepValue !== undefined && switchStep !== undefined && value >= switchStepValue
|
||||
? switchStep
|
||||
: step;
|
||||
|
||||
const decimals = useMemo(
|
||||
() => Math.max(getDecimals(step), switchStep !== undefined ? getDecimals(switchStep) : 0),
|
||||
[step, switchStep]
|
||||
);
|
||||
|
||||
const charWidth = useMemo(
|
||||
() => Math.max(min.toFixed(decimals).length, max.toFixed(decimals).length) + 1,
|
||||
[min, max, decimals]
|
||||
);
|
||||
|
||||
// Same formula as before, just driven by a real measurement
|
||||
// instead of a hardcoded container width.
|
||||
const fontSize = useMemo(() => {
|
||||
if (!containerSize.width) return 18;
|
||||
|
||||
const chars = charWidth + unit.length + 1;
|
||||
|
||||
const available = containerSize.width * 0.9;
|
||||
|
||||
return Math.max(12, Math.min(22, available / chars));
|
||||
}, [containerSize.width, charWidth, unit.length]);
|
||||
|
||||
function normalizeValue(input: number) {
|
||||
const clamped = Math.min(max, Math.max(min, input));
|
||||
const snapped = Math.round(clamped / currentStep) * currentStep;
|
||||
return Number(snapped.toFixed(6));
|
||||
}
|
||||
|
||||
function updateValue(v: number) {
|
||||
const next = normalizeValue(v);
|
||||
|
||||
if (controlledValue === undefined) {
|
||||
setInternalValue(next);
|
||||
}
|
||||
|
||||
lastValue.current = next;
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (
|
||||
e.key !== 'ArrowUp' &&
|
||||
e.key !== 'ArrowDown' &&
|
||||
e.key !== 'ArrowLeft' &&
|
||||
e.key !== 'ArrowRight'
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
let next = value;
|
||||
|
||||
if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
|
||||
next += currentStep;
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
|
||||
next -= currentStep;
|
||||
}
|
||||
|
||||
updateValue(next);
|
||||
|
||||
keyboardValue.current = normalizeValue(next);
|
||||
}
|
||||
|
||||
function handleKeyUp(_e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (keyboardValue.current !== null) {
|
||||
onChange?.(keyboardValue.current);
|
||||
keyboardValue.current = null;
|
||||
}
|
||||
}
|
||||
|
||||
function valueFromPointer(clientY: number) {
|
||||
if (!sliderRef.current) return;
|
||||
|
||||
const rect = sliderRef.current.getBoundingClientRect();
|
||||
const trackHeight = rect.height; // measured, not a constant
|
||||
|
||||
let offset = clientY - rect.top;
|
||||
offset = Math.max(0, Math.min(trackHeight, offset));
|
||||
|
||||
const percent = 1 - offset / trackHeight;
|
||||
const raw = min + percent * (max - min);
|
||||
|
||||
updateValue(raw);
|
||||
}
|
||||
|
||||
function startDrag(e: React.PointerEvent<HTMLDivElement>) {
|
||||
isDragging.current = true;
|
||||
|
||||
valueFromPointer(e.clientY);
|
||||
|
||||
const move = (ev: PointerEvent) => {
|
||||
valueFromPointer(ev.clientY);
|
||||
};
|
||||
|
||||
const up = () => {
|
||||
isDragging.current = false;
|
||||
|
||||
onChange?.(lastValue.current);
|
||||
|
||||
window.removeEventListener('pointermove', move);
|
||||
window.removeEventListener('pointerup', up);
|
||||
};
|
||||
|
||||
window.addEventListener('pointermove', move);
|
||||
window.addEventListener('pointerup', up);
|
||||
}
|
||||
|
||||
function commitEditing() {
|
||||
if (editingText !== null && editingText !== '' && editingText !== '-') {
|
||||
const parsed = Number(editingText);
|
||||
if (!Number.isNaN(parsed)) updateValue(parsed);
|
||||
}
|
||||
setEditingText(null);
|
||||
}
|
||||
|
||||
const percent = (value - min) / (max - min);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={['gauge-container', className].filter(Boolean).join(' ')}
|
||||
style={style}
|
||||
ref={containerRef}
|
||||
>
|
||||
<div className="gauge-track">
|
||||
<div className="ticks left">
|
||||
{Array.from({ length: 15 }).map((_, i) => (
|
||||
<span key={i} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="slider"
|
||||
ref={sliderRef}
|
||||
tabIndex={0}
|
||||
onKeyDown={handleKeyDown}
|
||||
onKeyUp={handleKeyUp}
|
||||
onPointerDown={startDrag}
|
||||
>
|
||||
<div className="track" />
|
||||
<div className="thumb" style={{ bottom: `${percent * 100}%` }} />
|
||||
</div>
|
||||
|
||||
<div className="ticks right">
|
||||
{Array.from({ length: 15 }).map((_, i) => (
|
||||
<span key={i} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="value"
|
||||
style={{ '--value-font-size': `${fontSize}px` } as React.CSSProperties}
|
||||
>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
value={editingText ?? value.toFixed(decimals)}
|
||||
style={{
|
||||
width: `${charWidth}ch`,
|
||||
}}
|
||||
onFocus={() => setEditingText(value.toFixed(decimals))}
|
||||
onChange={(e) => setEditingText(e.target.value)}
|
||||
onBlur={commitEditing}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
setEditingText(null);
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="value-unit">{unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
.vertical-stack {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
border: 1px solid var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* header */
|
||||
|
||||
.vertical-stack__title {
|
||||
|
||||
flex: 0 0 auto;
|
||||
|
||||
padding: var(--space-2);
|
||||
|
||||
text-align: center;
|
||||
|
||||
font-family: var(--font-ui);
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
color: var(--text-primary);
|
||||
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* area containing components */
|
||||
|
||||
.vertical-stack__content {
|
||||
|
||||
flex: 1;
|
||||
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* each component slot */
|
||||
|
||||
.vertical-stack__item {
|
||||
|
||||
flex: 1;
|
||||
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
The child keeps its natural dimensions.
|
||||
Only horizontal scaling happens.
|
||||
*/
|
||||
|
||||
.vertical-stack__scale {
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
|
||||
transform-origin: center;
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
import React, { useLayoutEffect, useRef, useState } from 'react';
|
||||
|
||||
import './VerticalStack.css';
|
||||
|
||||
type VerticalStackProps = {
|
||||
title: string;
|
||||
titleFontSize?: number;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function VerticalStack({ title, titleFontSize = 16, children }: VerticalStackProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const itemRefs = useRef<HTMLDivElement[]>([]);
|
||||
|
||||
const [scales, setScales] = useState<number[]>([]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
function updateScale() {
|
||||
if (!containerRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const availableWidth = containerRef.current.clientWidth;
|
||||
|
||||
const newScales = itemRefs.current.map((item) => {
|
||||
const child = item.firstElementChild as HTMLElement;
|
||||
|
||||
if (!child) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
const width = child.scrollWidth;
|
||||
|
||||
return Math.min(1, availableWidth / width);
|
||||
});
|
||||
|
||||
setScales(newScales);
|
||||
}
|
||||
|
||||
updateScale();
|
||||
|
||||
const observer = new ResizeObserver(updateScale);
|
||||
|
||||
if (containerRef.current) {
|
||||
observer.observe(containerRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [children]);
|
||||
|
||||
return (
|
||||
<div className="vertical-stack" ref={containerRef}>
|
||||
<div
|
||||
className="vertical-stack__title"
|
||||
style={{
|
||||
fontSize: titleFontSize,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
|
||||
<div className="vertical-stack__content">
|
||||
{React.Children.map(children, (child, index) => (
|
||||
<div
|
||||
className="vertical-stack__item"
|
||||
ref={(el) => {
|
||||
if (el) {
|
||||
itemRefs.current[index] = el;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="vertical-stack__scale"
|
||||
style={{
|
||||
transform: `scaleX(${scales[index] ?? 1})`,
|
||||
}}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user