210 lines
9.8 KiB
Plaintext
210 lines
9.8 KiB
Plaintext
@inject IJSRuntime JSRuntime
|
|
@inject NavigationManager Nav
|
|
|
|
<div class="control-toolbar">
|
|
<div class="check-box">
|
|
<div class="form-check me-2">
|
|
<input class="form-check-input" type="checkbox" id="showname" @bind="@ShowName" @bind:after="ShowNameChanged">
|
|
<label class="form-check-label" for="showname">
|
|
Name
|
|
</label>
|
|
</div>
|
|
<div class="form-check me-2">
|
|
<input class="form-check-input" type="checkbox" id="showgrid" @bind="@ShowGrid" @bind:after="ShowGridChanged">
|
|
<label class="form-check-label" for="showgrid">
|
|
Grid
|
|
</label>
|
|
</div>
|
|
<div class="form-check me-2">
|
|
<input class="form-check-input" type="checkbox" id="showslammap" @bind="@ShowMapSlam" @bind:after="ShowSlamMapChanged">
|
|
<label class="form-check-label" for="showslammap">
|
|
Slam Map
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-button">
|
|
<div class="extension">
|
|
<MudTooltip Text="Exit" Placement="Placement.Bottom" Color="Color.Info">
|
|
<button type="button" class="btn btn-primary button" @onclick="@(() => Nav.NavigateTo($"/navigation-maps"))">
|
|
<i class="mdi mdi-keyboard-return icon"></i>
|
|
</button>
|
|
</MudTooltip>
|
|
<MudMenu AnchorOrigin="Origin.BottomRight" Variant="Variant.Filled" ListClass="overflow-x-hidden">
|
|
<ActivatorContent>
|
|
<button type="button" class="btn btn-primary button-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="mdi mdi-dots-vertical icon"></i>
|
|
</button>
|
|
</ActivatorContent>
|
|
<ChildContent>
|
|
<MudSlider Class="mx-4 my-2" T="double" Style="width:95%" Value="EdgeWidth" Min="0.01" Max="0.5" Color="Color.Info" Step="0.01" ValueChanged="EdgeWidthChanged" ValueLabel="true" Variant="Variant.Filled">
|
|
Edge Width
|
|
</MudSlider>
|
|
<MudSlider Class="mx-4 my-2" T="double" Style="width:95%" Value="EdgeDirectionWidth" Min="0.05" Max="0.8" Color="Color.Info" Step="0.01" ValueChanged="EdgeDirectionWidthChanged" ValueLabel="true" Variant="Variant.Filled">
|
|
Edge Direction Width
|
|
</MudSlider>
|
|
<MudSlider Class="mx-4 my-2" T="double" Style="width:95%" Value="NodeRadius" Min="0.01" Max="0.25" Color="Color.Info" Step="0.01" ValueChanged="NodeRadiusChanged" ValueLabel="true" Variant="Variant.Filled">
|
|
Node Radius
|
|
</MudSlider>
|
|
<MudSlider Class="mx-4 my-2" T="double" Style="width:95%" Value="OriginVectorWidth" Min="0.1" Max="1" Color="Color.Info" Step="0.05" ValueChanged="OriginVectorWidthChanged" ValueLabel="true" Variant="Variant.Filled">
|
|
Origin Width
|
|
</MudSlider>
|
|
</ChildContent>
|
|
</MudMenu>
|
|
<MudTooltip Text="Delete" role="button" Placement="Placement.Bottom" Color="Color.Info">
|
|
<button type="button" class="btn btn-danger button" disabled="@(MapIsActive || (!MultiSelectedEdge && !ZoneSelected))" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.Delete))">
|
|
<i class="mdi mdi-trash-can-outline icon"></i>
|
|
</button>
|
|
</MudTooltip>
|
|
<MudTooltip Text="Undo" role="button" Placement="Placement.Bottom" Color="Color.Info">
|
|
<button type="button" class="btn btn-primary button" disabled="@(MapIsActive || !NodesUndoable)" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.Undo))">
|
|
<i class="mdi mdi-undo-variant icon"></i>
|
|
</button>
|
|
</MudTooltip>
|
|
<MudTooltip Text="Save" role="button" Placement="Placement.Bottom" Color="Color.Info">
|
|
<button type="button" class="btn btn-primary button" disabled="@(MapIsActive || !NodesUndoable)" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.Save))">
|
|
<i class="mdi mdi-content-save icon"></i>
|
|
</button>
|
|
</MudTooltip>
|
|
<MudTooltip Text="Checking Map" role="button" Placement="Placement.Bottom" Color="Color.Info">
|
|
<button type="button" class="btn btn-primary button" disabled="@(MapIsActive)" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.CheckMap))">
|
|
<i class="mdi mdi mdi-alert-circle icon"></i>
|
|
</button>
|
|
</MudTooltip>
|
|
</div>
|
|
<div class="scale-map">
|
|
<MudTooltip Text="Scale Fit" role="button" Placement="Placement.Bottom" Color="Color.Info">
|
|
<button type="button" class="btn btn-primary button" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.FitScreen))">
|
|
<i class="mdi mdi-fit-to-screen icon"></i>
|
|
</button>
|
|
</MudTooltip>
|
|
<MudTooltip Text="Zoom In" role="button" Placement="Placement.Bottom" Color="Color.Info">
|
|
<button type="button" class="btn btn-primary button" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.ZoomIn))">
|
|
<i class="mdi mdi-magnify-plus-outline icon"></i>
|
|
</button>
|
|
</MudTooltip>
|
|
<MudTooltip Text="Zoom Out" role="button" Placement="Placement.Bottom" Color="Color.Info">
|
|
<button type="button" class="btn btn-primary button" @onclick="@(async () => await ControlStateClick.InvokeAsync(ControlState.ZoomOut))">
|
|
<i class="mdi mdi-magnify-minus-outline icon"></i>
|
|
</button>
|
|
</MudTooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
[Parameter]
|
|
public EventCallback<ControlState> ControlStateClick { get; set; }
|
|
|
|
[Parameter]
|
|
public EventCallback<(ControlState, bool)> EditorExtensionChanged { get; set; }
|
|
|
|
[CascadingParameter]
|
|
public bool MapIsActive { get; set; }
|
|
|
|
[Parameter]
|
|
public bool ShowGrid { get; set; }
|
|
|
|
[Parameter]
|
|
public bool ShowName { get; set; }
|
|
|
|
[Parameter]
|
|
public bool ShowMapSlam { get; set; }
|
|
|
|
[Parameter]
|
|
public bool NodesUndoable { get; set; }
|
|
|
|
[Parameter]
|
|
public bool MultiSelectedEdge { get; set; }
|
|
|
|
[Parameter]
|
|
public bool ZoneSelected { get; set; }
|
|
|
|
private double EdgeWidth = 0.15;
|
|
private double EdgeDirectionWidth = 0.3;
|
|
private double NodeRadius = 0.1;
|
|
private double OriginVectorWidth = 0.35;
|
|
|
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
{
|
|
await base.OnAfterRenderAsync(firstRender);
|
|
if (!firstRender) return;
|
|
|
|
var width = await JSRuntime.InvokeAsync<string>("getCssVariable", "--edge-stroke-width");
|
|
if (!string.IsNullOrEmpty(width))
|
|
{
|
|
if (double.TryParse(width.Replace("px", ""), out double edgewidth))
|
|
{
|
|
EdgeWidth = edgewidth;
|
|
}
|
|
}
|
|
else await JSRuntime.InvokeVoidAsync("setCssVariable", "--edge-stroke-width", $"{EdgeWidth}px");
|
|
|
|
var directionwidth = await JSRuntime.InvokeAsync<string>("getCssVariable", "--edge-direction-stroke-width");
|
|
if (!string.IsNullOrEmpty(directionwidth))
|
|
{
|
|
if (double.TryParse(directionwidth.Replace("px", ""), out double edgedirectionwidth))
|
|
{
|
|
EdgeDirectionWidth = edgedirectionwidth;
|
|
}
|
|
}
|
|
else await JSRuntime.InvokeVoidAsync("setCssVariable", "--edge-direction-stroke-width", $"{EdgeDirectionWidth}px");
|
|
|
|
var radius = await JSRuntime.InvokeAsync<string>("getCssVariable", "--node-r");
|
|
if (!string.IsNullOrEmpty(radius))
|
|
{
|
|
if (double.TryParse(radius.Replace("px", ""), out double noderadius))
|
|
{
|
|
NodeRadius = noderadius;
|
|
}
|
|
}
|
|
else await JSRuntime.InvokeVoidAsync("setCssVariable", "--node-r", $"{NodeRadius}px");
|
|
|
|
var originwidth = await JSRuntime.InvokeAsync<string>("getCssVariable", "--origin-vector-stroke-width");
|
|
if (!string.IsNullOrEmpty(originwidth))
|
|
{
|
|
if (double.TryParse(originwidth.Replace("px", ""), out double originVectorWidth))
|
|
{
|
|
OriginVectorWidth = originVectorWidth;
|
|
}
|
|
}
|
|
else await JSRuntime.InvokeVoidAsync("setCssVariable", "--origin-vector-stroke-width", $"{OriginVectorWidth}px");
|
|
StateHasChanged();
|
|
}
|
|
|
|
private async Task ShowNameChanged() => await EditorExtensionChanged.InvokeAsync((ControlState.ShowName, ShowName));
|
|
|
|
private async Task ShowGridChanged() => await EditorExtensionChanged.InvokeAsync((ControlState.ShowGrid, ShowGrid));
|
|
|
|
private async Task ShowSlamMapChanged() => await EditorExtensionChanged.InvokeAsync((ControlState.ShowMapSlam, ShowMapSlam));
|
|
|
|
private async Task EdgeWidthChanged(double value)
|
|
{
|
|
EdgeWidth = value;
|
|
var width = $"{EdgeWidth}px";
|
|
await JSRuntime.InvokeVoidAsync("setCssVariable", "--edge-stroke-width", width);
|
|
}
|
|
|
|
private async Task EdgeDirectionWidthChanged(double value)
|
|
{
|
|
EdgeDirectionWidth = value;
|
|
var width = $"{EdgeDirectionWidth}px";
|
|
await JSRuntime.InvokeVoidAsync("setCssVariable", "--edge-direction-stroke-width", width);
|
|
}
|
|
|
|
private async Task NodeRadiusChanged(double value)
|
|
{
|
|
NodeRadius = value;
|
|
var width = $"{NodeRadius}px";
|
|
await JSRuntime.InvokeVoidAsync("setCssVariable", "--node-r", width);
|
|
}
|
|
|
|
private async Task OriginVectorWidthChanged(double value)
|
|
{
|
|
OriginVectorWidth = value;
|
|
var width = $"{OriginVectorWidth}px";
|
|
await JSRuntime.InvokeVoidAsync("setCssVariable", "--origin-vector-stroke-width", width);
|
|
}
|
|
|
|
}
|