deepdrft/DeepDrftPublic.Client/Controls/MixVisualizerControls.razor

@namespace DeepDrftPublic.Client.Controls
@using DeepDrftPublic.Client.Services
@inject MixVisualizerControlState ControlState

@* The Mix visualizer controls. SEVEN continuous RadialKnobs — scroll speed, gradient rotation speed,
   lava gravity, lava heat, blob density, collision strength, waveform width — each its own dedicated
   control with a Material-icon caption. Visibility is controlled by Blazor, not CSS: the host page
   renders this component only while the lava-lamp toggle is on (@if-guarded), so when off it is not in
   the DOM at all. There is no collapse/expand animation and no glass surface — the knobs simply appear
   in their own transparent band and disappear when un-rendered.

   It owns NO JS interop: it mutates the shared, session-scoped MixVisualizerControlState and raises its
   Changed event. The backdrop bridge (MixWaveformVisualizer) subscribes to that event and pushes the
   affected dial to the WebGL module. That keeps the JS module handle single-owned by the bridge and
   this component purely presentational. None of these is a seek surface (read-only contract §D).

   RadialKnob has no icon slot (its Label renders as SVG text) and no aria attribute-capture, so each
   control's Material icon rides beside its knob as an adjacent MudIcon caption and the accessible name
   rides on the wrapping group div (§7d). HoldValue stays false so the knobs are live — ValueChanged
   fires continuously during drag, preserving the Changed/NotifyChanged seam. *@

<div class="mix-visualizer-controls-bar">

    <div class="mix-visualizer-control" role="group" aria-label="Waveform scroll speed">
        <RadialKnob Value="@ControlState.ScrollSpeed"
                    ValueChanged="@OnScrollSpeedChanged"
                    Min="0" Max="1" Step="0.001"
                    Size="64"
                    Color="Color.Secondary" />
        <MudIcon Icon="@Icons.Material.Filled.Speed" Size="Size.Small" Class="mix-visualizer-control-icon" />
    </div>

    <div class="mix-visualizer-control" role="group" aria-label="Color gradient rotation speed">
        <RadialKnob Value="@ControlState.GradientRotationSpeed"
                    ValueChanged="@OnGradientRotationSpeedChanged"
                    Min="0" Max="1" Step="0.001"
                    Size="64"
                    Color="Color.Secondary" />
        <MudIcon Icon="@Icons.Material.Filled.Palette" Size="Size.Small" Class="mix-visualizer-control-icon" />
    </div>

    <div class="mix-visualizer-control" role="group" aria-label="Lava gravity">
        <RadialKnob Value="@ControlState.LavaGravity"
                    ValueChanged="@OnLavaGravityChanged"
                    Min="0" Max="1" Step="0.001"
                    Size="64"
                    Color="Color.Secondary" />
        <MudIcon Icon="@Icons.Material.Filled.ArrowDownward" Size="Size.Small" Class="mix-visualizer-control-icon" />
    </div>

    <div class="mix-visualizer-control" role="group" aria-label="Lava heat">
        <RadialKnob Value="@ControlState.LavaHeat"
                    ValueChanged="@OnLavaHeatChanged"
                    Min="0" Max="1" Step="0.001"
                    Size="64"
                    Color="Color.Secondary" />
        <MudIcon Icon="@Icons.Material.Filled.LocalFireDepartment" Size="Size.Small" Class="mix-visualizer-control-icon" />
    </div>

    <div class="mix-visualizer-control" role="group" aria-label="Blob density and size">
        <RadialKnob Value="@ControlState.BlobDensity"
                    ValueChanged="@OnBlobDensityChanged"
                    Min="0" Max="1" Step="0.001"
                    Size="64"
                    Color="Color.Secondary" />
        <MudIcon Icon="@Icons.Material.Filled.BubbleChart" Size="Size.Small" Class="mix-visualizer-control-icon" />
    </div>

    <div class="mix-visualizer-control" role="group" aria-label="Collision strength">
        <RadialKnob Value="@ControlState.CollisionStrength"
                    ValueChanged="@OnCollisionStrengthChanged"
                    Min="0" Max="1" Step="0.001"
                    Size="64"
                    Color="Color.Secondary" />
        <MudIcon Icon="@Icons.Material.Filled.Compress" Size="Size.Small" Class="mix-visualizer-control-icon" />
    </div>

    <div class="mix-visualizer-control" role="group" aria-label="Waveform width">
        <RadialKnob Value="@ControlState.WaveformWidth"
                    ValueChanged="@OnWaveformWidthChanged"
                    Min="0" Max="1" Step="0.001"
                    Size="64"
                    Color="Color.Secondary" />
        <MudIcon Icon="@Icons.Material.Filled.SettingsEthernet" Size="Size.Small" Class="mix-visualizer-control-icon" />
    </div>

</div>

@code {
    // Each handler mutates its own dedicated property then raises Changed — the bridge re-reads and
    // pushes the affected dial. All values are already normalized [0,1]; the bridge maps scroll speed
    // to a visible time-span and routes the rest straight to the lava/colour dials.

    private void OnScrollSpeedChanged(double value)
    {
        ControlState.ScrollSpeed = value;
        ControlState.NotifyChanged();
    }

    private void OnGradientRotationSpeedChanged(double value)
    {
        ControlState.GradientRotationSpeed = value;
        ControlState.NotifyChanged();
    }

    private void OnLavaGravityChanged(double value)
    {
        ControlState.LavaGravity = value;
        ControlState.NotifyChanged();
    }

    private void OnLavaHeatChanged(double value)
    {
        ControlState.LavaHeat = value;
        ControlState.NotifyChanged();
    }

    private void OnBlobDensityChanged(double value)
    {
        ControlState.BlobDensity = value;
        ControlState.NotifyChanged();
    }

    private void OnCollisionStrengthChanged(double value)
    {
        ControlState.CollisionStrength = value;
        ControlState.NotifyChanged();
    }

    private void OnWaveformWidthChanged(double value)
    {
        ControlState.WaveformWidth = value;
        ControlState.NotifyChanged();
    }
}