chore: RadialKnob control
This commit is contained in:
daniel-c-harvey
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user