diff --git a/RobotApp.Client/Pages/Components/Mapping/MapPreview.razor b/RobotApp.Client/Pages/Components/Mapping/MapPreview.razor deleted file mode 100644 index e66b320..0000000 --- a/RobotApp.Client/Pages/Components/Mapping/MapPreview.razor +++ /dev/null @@ -1,40 +0,0 @@ -@inject HttpClient Http - -
- @MapName -
-
- map image -
- - DOWNLOAD - -
-
- -@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(); - } -} diff --git a/RobotApp.Client/Pages/Components/Mapping/MapPreview.razor.css b/RobotApp.Client/Pages/Components/Mapping/MapPreview.razor.css deleted file mode 100644 index ac1ded4..0000000 --- a/RobotApp.Client/Pages/Components/Mapping/MapPreview.razor.css +++ /dev/null @@ -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; - } diff --git a/RobotApp.Client/Pages/Components/Mapping/MapTable.razor b/RobotApp.Client/Pages/Components/Mapping/MapTable.razor index 01b8555..3a12476 100644 --- a/RobotApp.Client/Pages/Components/Mapping/MapTable.razor +++ b/RobotApp.Client/Pages/Components/Mapping/MapTable.razor @@ -60,14 +60,11 @@ private List Maps = []; private List MapsShow = []; - private int selectedRowNumber = -1; private MapDto MapSelected = new(); private MudTable? Table; private ElementReference ViewContainerRef; - private ElementReference ToolbarRef; - private MapPreview? MapPreviewRef; private double TableHeight = 105; protected override async Task OnAfterRenderAsync(bool firstRender) diff --git a/RobotApp.Client/Pages/Components/Mapping/MapView.razor b/RobotApp.Client/Pages/Components/Mapping/MapView.razor index 9009314..bd46dff 100644 --- a/RobotApp.Client/Pages/Components/Mapping/MapView.razor +++ b/RobotApp.Client/Pages/Components/Mapping/MapView.razor @@ -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("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("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; } diff --git a/RobotApp.Client/Pages/Components/Mapping/RobotInfomation.razor b/RobotApp.Client/Pages/Components/Mapping/RobotInfomation.razor index c99dada..699c3e6 100644 --- a/RobotApp.Client/Pages/Components/Mapping/RobotInfomation.razor +++ b/RobotApp.Client/Pages/Components/Mapping/RobotInfomation.razor @@ -1,4 +1,5 @@ 
+

Infomations

@code { diff --git a/RobotApp.Client/Pages/Components/Mapping/RobotInfomation.razor.css b/RobotApp.Client/Pages/Components/Mapping/RobotInfomation.razor.css index 0099b24..350005c 100644 --- a/RobotApp.Client/Pages/Components/Mapping/RobotInfomation.razor.css +++ b/RobotApp.Client/Pages/Components/Mapping/RobotInfomation.razor.css @@ -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; }