DangNV/RobotApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Đăng Nguyễn 2025-10-03 11:37:39 +07:00
parent c5686e4ecf
commit 511614df72
6 changed files with 44 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
RobotApp.Client/Pages/Components/Mapping/MapPreview.razor
View File

@ -1,40 +0,0 @@
@inject HttpClient Http
<div class="d-flex flex-column h-100 w-100">
<span Class="title">@MapName</span>
<div class="d-flex flex-grow-1 w-100 flex-column">
<div class="map-item">
<img src="@imageSrc" alt="map image" onerror="this.onerror=null; this.src='/images/Image-not-found.png';" />
</div>
<MudButton StartIcon="@Icons.Material.Filled.FileDownload" Class="m-2" Size="Size.Small" Variant="Variant.Filled" Color="Color.Primary" Disabled="Disable">
DOWNLOAD
</MudButton>
</div>
</div>
@code {
private bool Disable = true;
private string imageSrc = "/images/Image-not-found.png";
private string MapName = "Map preview";
private Guid MapId = Guid.Empty;
public void SetMapPreview(MapDto? map)
{
if (map is null)
{
Disable = true;
MapName = "Map preview";
imageSrc = "/images/Image-not-found.png";
MapId = Guid.Empty;
}
else
{
imageSrc = $"api/Images/map/{map.Id}?t={DateTime.Now}";
MapName = map.Name;
MapId = map.Id;
Disable = false;
}
StateHasChanged();
}
}

42
RobotApp.Client/Pages/Components/Mapping/MapPreview.razor.css
View File

@ -1,42 +0,0 @@
.map-item {
display: flex;
justify-content: center;
width: 100%;
height: fit-content;
}
.map-item img {
justify-content: center;
width: 95%;
height: 400px;
object-fit: contain;
border-radius: 10px;
image-rendering: pixelated;
}
.title {
display: flex;
height: 77px;
width: 100%;
justify-content: center;
align-content: center;
/*border-bottom: 0.5px solid gray;*/
font-size: 30px;
flex-wrap: wrap;
padding-bottom: .5rem;
}
.map-update-item {
display: flex;
justify-content: center;
width: 100%;
height: fit-content;
}
.map-update-item img {
width: 100%;
height: 400px;
object-fit: contain;
border-radius: 10px;
image-rendering: pixelated;
}

3
RobotApp.Client/Pages/Components/Mapping/MapTable.razor
View File

@ -60,14 +60,11 @@
private List<MapDto> Maps = [];
private List<MapDto> MapsShow = [];
private int selectedRowNumber = -1;
private MapDto MapSelected = new();
private MudTable<MapDto>? Table;
private ElementReference ViewContainerRef;
private ElementReference ToolbarRef;
private MapPreview? MapPreviewRef;
private double TableHeight = 105;
protected override async Task OnAfterRenderAsync(bool firstRender)

81
RobotApp.Client/Pages/Components/Mapping/MapView.razor
View File

@ -164,23 +164,23 @@
{
const double zoomFactor = 0.15;
double oldZoom = ZoomScale;
ZoomScale = Math.Min(MAX_ZOOM, ZoomScale * (1 + zoomFactor));
if (Math.Abs(ZoomScale - oldZoom) < 0.001) return;
await ZoomAtCenter(oldZoom);
}
private async Task ZoomOut()
{
const double zoomFactor = 0.15;
const double zoomFactor = 0.15;
double oldZoom = ZoomScale;
ZoomScale = Math.Max(MIN_ZOOM, ZoomScale * (1 - zoomFactor));
if (Math.Abs(ZoomScale - oldZoom) < 0.001) return;
await ZoomAtCenter(oldZoom);
}
@ -188,22 +188,22 @@
{
double centerX = CanvasWidth / 2;
double centerY = CanvasHeight / 2;
double centerWorldX = (centerX - CanvasTranslateX) / oldZoom / BASE_PIXELS_PER_METER - OriginX;
double centerWorldY = (centerY - CanvasTranslateY) / oldZoom / BASE_PIXELS_PER_METER - OriginY;
double newCenterCanvasX = (centerWorldX + OriginX) * BASE_PIXELS_PER_METER * ZoomScale;
double newCenterCanvasY = (centerWorldY + OriginY) * BASE_PIXELS_PER_METER * ZoomScale;
CanvasTranslateX = centerX - newCenterCanvasX;
CanvasTranslateY = centerY - newCenterCanvasY;
if (IsMouseInCanvas)
{
WorldMouseX = CanvasToWorldX(MouseX);
WorldMouseY = CanvasToWorldY(MouseY);
}
StateHasChanged();
await DrawCanvas();
}
@ -268,23 +268,26 @@
private async Task HandleTouchMove(TouchEventArgs e)
{
if (e.Touches.Length == 1)
if (IsTouching)
{
await HandleSingleTouchMove(e.Touches[0]);
if (e.Touches.Length == 1)
{
await HandleSingleTouchMove(e.Touches[0]);
}
else if (e.Touches.Length == 2)
{
await HandlePinchZoom(e.Touches[0], e.Touches[1]);
}
StateHasChanged();
await DrawCanvas();
}
else if (e.Touches.Length == 2)
{
await HandlePinchZoom(e.Touches[0], e.Touches[1]);
}
StateHasChanged();
await DrawCanvas();
}
private void HandleTouchStart(TouchEventArgs e)
{
IsTouching = true;
if (e.Touches.Length == 1)
{
LastTouchPoint = new TouchPoint
@ -305,7 +308,7 @@
X = e.Touches[1].ClientX,
Y = e.Touches[1].ClientY
};
LastTouchDistance = CalculateTouchDistance(LastTouchPoint, LastSecondTouchPoint);
}
}
@ -321,26 +324,26 @@
private async Task HandleSingleTouchMove(Microsoft.AspNetCore.Components.Web.TouchPoint touch)
{
if (LastTouchPoint == null) return;
var currentPoint = new TouchPoint
{
X = touch.ClientX,
Y = touch.ClientY
};
double deltaX = currentPoint.X - LastTouchPoint.X;
double deltaY = currentPoint.Y - LastTouchPoint.Y;
CanvasTranslateX += deltaX;
CanvasTranslateY += deltaY;
LastTouchPoint = currentPoint;
var canvasRect = await JS.InvokeAsync<DomRect>("getElementBoundingRect", CanvasRef);
MouseX = currentPoint.X - canvasRect.X;
MouseY = currentPoint.Y - canvasRect.Y;
IsMouseInCanvas = true;
WorldMouseX = CanvasToWorldX(MouseX);
WorldMouseY = CanvasToWorldY(MouseY);
}
@ -348,32 +351,32 @@
private async Task HandlePinchZoom(Microsoft.AspNetCore.Components.Web.TouchPoint touch1, Microsoft.AspNetCore.Components.Web.TouchPoint touch2)
{
if (LastTouchPoint == null || LastSecondTouchPoint == null) return;
var currentTouch1 = new TouchPoint { X = touch1.ClientX, Y = touch1.ClientY };
var currentTouch2 = new TouchPoint { X = touch2.ClientX, Y = touch2.ClientY };
double currentDistance = CalculateTouchDistance(currentTouch1, currentTouch2);
if (LastTouchDistance > 0)
{
double distanceRatio = currentDistance / LastTouchDistance;
double oldZoom = ZoomScale;
ZoomScale = Math.Max(MIN_ZOOM, Math.Min(MAX_ZOOM, ZoomScale * distanceRatio));
if (Math.Abs(ZoomScale - oldZoom) > 0.001)
{
double centerX = (currentTouch1.X + currentTouch2.X) / 2;
double centerY = (currentTouch1.Y + currentTouch2.Y) / 2;
var canvasRect = await JS.InvokeAsync<DomRect>("getElementBoundingRect", CanvasRef);
double canvasCenterX = centerX - canvasRect.X;
double canvasCenterY = centerY - canvasRect.Y;
ZoomAtPoint(oldZoom, canvasCenterX, canvasCenterY);
}
}
LastTouchDistance = currentDistance;
LastTouchPoint = currentTouch1;
LastSecondTouchPoint = currentTouch2;
@ -390,10 +393,10 @@
{
double pointWorldX = (pointX - CanvasTranslateX) / oldZoom / BASE_PIXELS_PER_METER - OriginX;
double pointWorldY = (pointY - CanvasTranslateY) / oldZoom / BASE_PIXELS_PER_METER - OriginY;
double newPointCanvasX = (pointWorldX + OriginX) * BASE_PIXELS_PER_METER * ZoomScale;
double newPointCanvasY = (pointWorldY + OriginY) * BASE_PIXELS_PER_METER * ZoomScale;
CanvasTranslateX = pointX - newPointCanvasX;
CanvasTranslateY = pointY - newPointCanvasY;
}

1
RobotApp.Client/Pages/Components/Mapping/RobotInfomation.razor
View File

@ -1,4 +1,5 @@
<div class="view">
<h4>Infomations</h4>
</div>
@code {

1
RobotApp.Client/Pages/Components/Mapping/RobotInfomation.razor.css
View File

@ -9,4 +9,5 @@
border-radius: var(--mud-default-borderradius);
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
box-shadow: var(--mud-elevation-10);
padding: 15px;
}