chore: RadialKnob control

2026-06-15 23:26:11 -04:00
parent b7bd6ba04f
commit 22c2ae5ecb
1 changed files with 225 additions and 0 deletions
@@ -0,0 +1,225 @@
+@using System.Globalization
+
+<!-- Global mouse capture container when dragging -->
+@if (_isDragging)
+{
+    <div style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; cursor: ns-resize;"
+         @onmousemove="@OnGlobalMouseMove" @onmouseup="@OnGlobalMouseUp">
+    </div>
+}
+
+<div class="radial-knob" style="width: @(Size)px; height: @(Size)px; display: inline-block; position: relative;"
+     @onmousedown="@OnMouseDown">
+
+    <!-- SVG Knob -->
+    <svg width="@Size" height="@Size" viewBox="0 0 100 100">
+        <!-- Background track (270 degree arc) -->
+        <circle cx="50" cy="50" r="35" fill="none"
+                stroke="var(--mud-palette-surface-variant)"
+                stroke-width="6"
+                stroke-dasharray="@GetBackgroundStrokeDashArray()"
+                stroke-dashoffset="0"
+                transform="rotate(-225 50 50)" />
+
+        <!-- Value arc -->
+        <circle cx="50" cy="50" r="35" fill="none"
+                stroke="@GetKnobColor()"
+                stroke-width="6"
+                stroke-linecap="round"
+                stroke-dasharray="@GetStrokeDashArray()"
+                stroke-dashoffset="@GetStrokeDashOffset()"
+                transform="rotate(-225 50 50)" />
+
+        <!-- Center circle -->
+        <circle cx="50" cy="50" r="8" fill="var(--mud-palette-surface)" stroke="@GetKnobColor()" stroke-width="2" />
+
+        <!-- Pointer line -->
+        <line x1="50" y1="50"
+              x2="@GetPointerX()" y2="@GetPointerY()"
+              stroke="@GetKnobColor()"
+              stroke-width="3"
+              stroke-linecap="round" />
+
+        <!-- Value label inside SVG (moved down 8px from center) -->
+        <text x="50" y="100" text-anchor="middle"
+              font-size="22px" font-weight="bold"
+              fill="var(--mud-palette-text-primary)">
+            @GetDisplayLabel()
+        </text>
+    </svg>
+</div>
+
+<style>
+    .radial-knob {
+        cursor: pointer;
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+    }
+
+    .radial-knob:hover svg circle:nth-child(2) {
+        stroke-width: 7;
+    }
+
+    .radial-knob:active svg circle:nth-child(2) {
+        stroke-width: 8;
+    }
+</style>
+
+@code {
+    [Parameter] public double Value { get; set; }
+    [Parameter] public EventCallback<double> ValueChanged { get; set; }
+    [Parameter] public double Min { get; set; } = 0;
+    [Parameter] public double Max { get; set; } = 100;
+    [Parameter] public double Step { get; set; } = 1;
+    [Parameter] public string Label { get; set; } = "";
+    [Parameter] public int Size { get; set; } = 50;
+    [Parameter] public MudBlazor.Color Color { get; set; } = MudBlazor.Color.Primary;
+    [Parameter] public bool HoldValue { get; set; } = false;
+
+    private bool _isDragging = false;
+    private double _lastMouseY = 0;
+    private double _dragValue = 0;
+
+    private double GetNormalizedValue()
+    {
+        // Use drag value during dragging if HoldValue is enabled, otherwise use current Value
+        double currentValue = (_isDragging && HoldValue) ? _dragValue : Value;
+        return Math.Max(0, Math.Min(1, (currentValue - Min) / (Max - Min)));
+    }
+
+    private string GetDisplayLabel()
+    {
+        // Show drag value during dragging if HoldValue is enabled, otherwise use provided Label
+        if (_isDragging && HoldValue)
+        {
+            return _dragValue.ToString("F0");
+        }
+        return Label;
+    }
+
+    private string GetKnobColor()
+    {
+        return Color switch
+        {
+            MudBlazor.Color.Primary => "var(--mud-palette-primary)",
+            MudBlazor.Color.Secondary => "var(--mud-palette-secondary)",
+            MudBlazor.Color.Success => "var(--mud-palette-success)",
+            MudBlazor.Color.Warning => "var(--mud-palette-warning)",
+            MudBlazor.Color.Error => "var(--mud-palette-error)",
+            MudBlazor.Color.Info => "var(--mud-palette-info)",
+            _ => "var(--mud-palette-primary)"
+        };
+    }
+
+    private string GetBackgroundStrokeDashArray()
+    {
+        double circumference = 2 * Math.PI * 35; // radius = 35
+        double maxArc = circumference * 0.75; // 270 degrees
+        return $"{maxArc} {circumference}";
+    }
+
+    private string GetStrokeDashArray()
+    {
+        double circumference = 2 * Math.PI * 35; // radius = 35
+        double maxArc = circumference * 0.75; // 270 degrees
+        double valueArc = maxArc * GetNormalizedValue();
+        return $"{valueArc} {circumference}";
+    }
+
+    private string GetStrokeDashOffset()
+    {
+        // No offset needed - arc should start from the beginning and grow
+        return "0";
+    }
+
+    private string GetPointerX()
+    {
+        double angle = -225 + (270 * GetNormalizedValue()); // -225 to +45 degrees (centered on vertical)
+        double radians = angle * Math.PI / 180;
+        double x = 50 + (25 * Math.Cos(radians)); // radius = 25 for pointer
+        return x.ToString("F1", CultureInfo.InvariantCulture);
+    }
+
+    private string GetPointerY()
+    {
+        double angle = -225 + (270 * GetNormalizedValue());
+        double radians = angle * Math.PI / 180;
+        double y = 50 + (25 * Math.Sin(radians));
+        return y.ToString("F1", CultureInfo.InvariantCulture);
+    }
+
+    private async Task OnMouseDown(MouseEventArgs e)
+    {
+        _isDragging = true;
+        _lastMouseY = e.ClientY;
+        _dragValue = Value; // Initialize drag value with current value
+
+        // Add global mouse event handlers using Blazor's event handling
+        StateHasChanged();
+    }
+
+    private async Task OnGlobalMouseMove(MouseEventArgs e)
+    {
+        if (_isDragging)
+        {
+            await UpdateValueFromMouse(e);
+        }
+    }
+
+    private async Task OnGlobalMouseUp(MouseEventArgs e)
+    {
+        if (_isDragging && HoldValue)
+        {
+            // If HoldValue is enabled, emit the final value now
+            if (Math.Abs(_dragValue - Value) > 0.001)
+            {
+                await ValueChanged.InvokeAsync(_dragValue);
+            }
+        }
+
+        _isDragging = false;
+        StateHasChanged();
+    }
+
+    private async Task UpdateValueFromMouse(MouseEventArgs e)
+    {
+        // Calculate vertical delta from last mouse position
+        double deltaY = _lastMouseY - e.ClientY; // Inverted: up = positive, down = negative
+        _lastMouseY = e.ClientY;
+
+        // Sensitivity factor (pixels to move for full range)
+        double sensitivity = 100.0;
+
+        // Calculate change in normalized value based on vertical movement
+        double normalizedDelta = deltaY / sensitivity;
+        double currentNormalized = GetNormalizedValue();
+        double newNormalized = Math.Max(0, Math.Min(1, currentNormalized + normalizedDelta));
+
+        // Convert to actual value
+        double newValue = Min + (newNormalized * (Max - Min));
+
+        // Apply step
+        if (Step > 0)
+        {
+            newValue = Math.Round(newValue / Step) * Step;
+        }
+
+        if (Math.Abs(newValue - (HoldValue ? _dragValue : Value)) > 0.001) // Avoid unnecessary updates
+        {
+            if (HoldValue)
+            {
+                // Update drag value only, don't emit ValueChanged yet
+                _dragValue = newValue;
+                StateHasChanged(); // Update visual only
+            }
+            else
+            {
+                // Original behavior - emit ValueChanged immediately
+                Value = newValue;
+                await ValueChanged.InvokeAsync(Value);
+            }
+        }
+    }
+}