update

RobotApp.Client/Pages/Components/Mapping/MapPreview.razor

@@ -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();
-    }
-}

RobotApp.Client/Pages/Components/Mapping/MapPreview.razor.css

@@ -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;
-    }

RobotApp.Client/Pages/Components/Mapping/MapTable.razor

@@ -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)

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<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;
     }

RobotApp.Client/Pages/Components/Mapping/RobotInfomation.razor

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

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;
 }