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

@@ -1,25 +1,8 @@
 @inject IJSRuntime JS
-@inject HttpClient Http
 @using Excubo.Blazor.Canvas.Contexts
 
 <div class="view">
     <div class="toolbar">
-        <MudTooltip Text="Zoom In" role="button" Placement="Placement.Bottom" Color="Color.Info">
-            <button type="button" class="btn btn-secondary action-button" @onclick="ResetView">
-                <i class="mdi mdi-magnify-plus-outline icon-button"></i>
-            </button>
-        </MudTooltip>
-        <MudTooltip Text="Zoom Out" role="button" Placement="Placement.Bottom" Color="Color.Info">
-            <button type="button" class="btn btn-secondary action-button" @onclick="ResetView">
-                <i class="mdi mdi-magnify-minus-outline icon-button"></i>
-            </button>
-        </MudTooltip>
-        <MudTooltip Text="Reset View" role="button" Placement="Placement.Bottom" Color="Color.Info">
-            <button type="button" class="btn btn-secondary action-button" @onclick="ResetView">
-                <i class="mdi mdi-fit-to-screen-outline icon-button"></i>
-            </button>
-        </MudTooltip>
-        <MudSpacer />
         <MudTooltip Text="Start Localization" role="button" Placement="Placement.Bottom" Color="Color.Info">
             <button type="button" class="btn btn-secondary action-button" disabled="@(false)">
                 <i class="mdi mdi-play icon-button"></i>
@@ -30,29 +13,44 @@
                 <i class="mdi mdi-pause icon-button"></i>
             </button>
         </MudTooltip>
-        <MudTooltip Text="Start Mapping" role="button" Placement="Placement.Bottom" Color="Color.Info">
+        <MudTooltip Text="Reset View" role="button" Placement="Placement.Bottom" Color="Color.Info">
-            <button type="button" class="btn btn-secondary action-button" disabled="@(false)">
+            <button type="button" class="btn btn-secondary action-button" @onclick="ResetView">
-                <i class="mdi mdi-play icon-button"></i>
+                <i class="mdi mdi-restore icon-button"></i>
-            </button>
-        </MudTooltip>
-        <MudTooltip Text="Stop Mapping" role="button" Placement="Placement.Bottom" Color="Color.Info">
-            <button type="button" class="btn btn-secondary action-button" disabled="@(true)">
-                <i class="mdi mdi-pause icon-button"></i>
-            </button>
-        </MudTooltip>
-        <MudSpacer />
-        <MudTooltip Text="Reload Map" role="button" Placement="Placement.Bottom" Color="Color.Info">
-            <button type="button" class="btn btn-secondary action-button" @onclick="ReloadMapImage">
-                <i class="mdi mdi-map-outline icon-button"></i>
             </button>
         </MudTooltip>
+        <div class="ms-auto d-flex align-items-center">
+            <div class="zoom-info-container">
+                <small class="zoom-info">
+                    <span class="info-item">
+                        <i class="mdi mdi-magnify"></i>
+                        Zoom: @($"{ZoomScale:F2}x")
+                    </span>
+                    <span class="info-separator">|</span>
+                    <span class="info-item">
+                        <i class="mdi mdi-crosshairs-gps"></i>
+                        Mouse: (@($"{MouseX:F0}"), @($"{MouseY:F0}"))
+                    </span>
+                    <span class="info-separator">|</span>
+                    <span class="info-item">
+                        <i class="mdi mdi-map-marker"></i>
+                        World: (@($"{WorldMouseX:F2}m"), @($"{WorldMouseY:F2}m"))
+                    </span>
+                    <span class="info-separator">|</span>
+                    <span class="info-item">
+                        <i class="mdi mdi-map-marker"></i>
+                        Translate: (@($"{CanvasTranslateX:F2}"), @($"{CanvasTranslateY:F2}"))
+                    </span>
+                </small>
+            </div>
+        </div>
     </div>
-    <div @ref="ViewContainerRef">
+    <div @ref="ViewContainerRef" class="d-flex position-relative w-100 flex-grow-1 overflow-hidden">
         <canvas @ref="CanvasRef"
                 @onwheel="HandleWheel"
                 @onwheel:preventDefault="true"
                 @onmousemove="HandleMouseMove"
-                @onmouseleave="HandleMouseLeave"></canvas>
+                @onmouseleave="HandleMouseLeave"
+                style="display: block; cursor: crosshair; transform: scale(1, -1)"></canvas>
     </div>
 </div>
 
@@ -84,20 +82,6 @@
 
     private const double RulerHeight = 20;
 
-    private const double RobotWidth = 0.606;
-    private const double RobotLength = 1.106;
-
-    private bool RobotImageLoaded = false;
-    private bool MapImageLoaded = false;
-
-    private const double ImageX = -10;
-    private const double ImageY = -10;
-    private const double ImageResolution = 0.05;
-
-    private double MapImageWidth = 0;
-    private double MapImageHeight = 0;
-    private const string MAP_CACHE_KEY = "map_image";
-
     protected override async Task OnAfterRenderAsync(bool first_render)
     {
         await base.OnAfterRenderAsync(first_render);
@@ -113,316 +97,25 @@
         CanvasTranslateX = CanvasWidth / 2;
         CanvasTranslateY = CanvasHeight / 2;
 
-        await LoadRobotImage();
-        await LoadMapImage();
-
         await DrawCanvas();
     }
 
-    private async Task LoadRobotImage()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("preloadImage", "images/AMR-250.png");
-            RobotImageLoaded = true;
-        }
-        catch
-        {
-            RobotImageLoaded = false;
-        }
-    }
-
-    private async Task LoadMapImage()
-    {
-        try
-        {
-            MapImageLoaded = false;
-            string baseUrl = Http.BaseAddress?.ToString() ?? "";
-            string apiUrl = $"{baseUrl}api/images/map";
-            await JS.InvokeVoidAsync("preloadImageFromUrl", apiUrl, MAP_CACHE_KEY);
-
-            var imageDimensions = await JS.InvokeAsync<ImageDimensions>("getImageDimensions", MAP_CACHE_KEY);
-            MapImageWidth = imageDimensions.Width * ImageResolution;
-            MapImageHeight = imageDimensions.Height * ImageResolution;
-            if (MapImageWidth > 0 && MapImageHeight > 0) MapImageLoaded = true;
-        }
-        catch
-        {
-            MapImageLoaded = false;
-        }
-    }
-
     private async Task DrawCanvas()
     {
         await using var ctx = await JS.GetContext2DAsync(CanvasRef);
 
         await ctx.ClearRectAsync(0, 0, CanvasWidth, CanvasHeight);
 
+        // Draw rulers first (outside transform)
         await DrawRulers(ctx);
 
         await ctx.SaveAsync();
 
         await ctx.TranslateAsync(CanvasTranslateX, CanvasTranslateY);
         await ctx.ScaleAsync(ZoomScale, ZoomScale);
-        
+
-        await DrawMapImage(ctx);
         await DrawGrid(ctx);
         await DrawAxes(ctx);
-        await DrawLaserScannerPoints(ctx);
-        await ctx.RestoreAsync();
-
-        if (IsMouseInCanvas)
-        {
-            await DrawMouseIndicator(ctx);
-        }
-    }
-
-    private async Task DrawMapImage(Context2D ctx)
-    {
-        if (!MapImageLoaded)
-        {
-            return; 
-        }
-
-        await ctx.SaveAsync();
-
-        try
-        {
-
-            double imageWidthCanvas = MapImageWidth * BASE_PIXELS_PER_METER;
-            double imageHeightCanvas = MapImageHeight * BASE_PIXELS_PER_METER;
-
-            double mapCanvasX = ImageX * BASE_PIXELS_PER_METER;
-            double mapCanvasY = (ImageY + MapImageHeight) * BASE_PIXELS_PER_METER;
-
-            bool success = await JS.InvokeAsync<bool>("drawCachedImageOnCanvas", 
-                CanvasRef, 
-                MAP_CACHE_KEY,
-                mapCanvasX,                                    
-                mapCanvasY - imageHeightCanvas,               
-                imageWidthCanvas,                             
-                imageHeightCanvas);   
-        }
-        catch
-        {
-        }
-
-        await ctx.RestoreAsync();
-    }
-
-    private async Task DrawLaserScannerPoints(Context2D ctx)
-    {
-        var scanData = GenerateLaserScanData();
-
-        double robotCanvasX = scanData.RobotX * BASE_PIXELS_PER_METER;
-        double robotCanvasY = scanData.RobotY * BASE_PIXELS_PER_METER;
-
-        await ctx.SaveAsync();
-
-        if (scanData.Points.Count > 0)
-        {
-            await ctx.BeginPathAsync();
-
-            for (int i = 0; i < scanData.Points.Count; i++)
-            {
-                var point = scanData.Points[i];
-                double pointCanvasX = point.X * BASE_PIXELS_PER_METER;
-                double pointCanvasY = point.Y * BASE_PIXELS_PER_METER;
-
-                if (i == 0)
-                {
-                    await ctx.MoveToAsync(pointCanvasX, pointCanvasY);
-                }
-                else
-                {
-                    await ctx.LineToAsync(pointCanvasX, pointCanvasY);
-                }
-            }
-
-            await ctx.StrokeStyleAsync("rgba(255, 100, 100, 0.8)"); 
-            await ctx.LineWidthAsync(2 / ZoomScale);
-            await ctx.StrokeAsync();
-
-            await ctx.LineToAsync(robotCanvasX, robotCanvasY); 
-            await ctx.ClosePathAsync();
-            await ctx.FillStyleAsync("rgba(255, 100, 100, 0.1)"); 
-            await ctx.FillAsync(FillRule.NonZero);
-        }
-
-        await DrawRobotImage(ctx, robotCanvasX, robotCanvasY, scanData.RobotOrientation);
-        await DrawRobotOrientationArrows(ctx, robotCanvasX, robotCanvasY, scanData.RobotOrientation);
-
-        await ctx.RestoreAsync();
-    }
-
-    private async Task DrawRobotImage(Context2D ctx, double robotCanvasX, double robotCanvasY, double robotOrientation)
-    {
-        if (!RobotImageLoaded)
-        {
-            // Fallback to circle if image not loaded
-            await ctx.FillStyleAsync("rgba(0, 255, 0, 0.8)");
-            await ctx.BeginPathAsync();
-            await ctx.ArcAsync(robotCanvasX, robotCanvasY, 8 / ZoomScale, 0, Math.PI * 2);
-            await ctx.FillAsync(FillRule.NonZero);
-            return;
-        }
-
-        await ctx.SaveAsync();
-
-        double robotWidthPixels = RobotWidth * BASE_PIXELS_PER_METER;
-        double robotLengthPixels = RobotLength * BASE_PIXELS_PER_METER;
-
-        double scaledWidth = ZoomScale < 1 ? robotWidthPixels / ZoomScale : robotWidthPixels;
-        double scaledLength = ZoomScale < 1 ? robotLengthPixels / ZoomScale : robotLengthPixels;
-
-        await ctx.TranslateAsync(robotCanvasX, robotCanvasY);
-        await ctx.RotateAsync(robotOrientation);
-
-        try
-        {
-            bool success = await JS.InvokeAsync<bool>("drawImageOnCanvas", 
-                CanvasRef, 
-                "images/AMR-250.png",
-                -scaledLength / 2, 
-                -scaledWidth / 2,  
-                scaledLength,     
-                scaledWidth);      
-
-            if (!success)
-            {
-                await ctx.FillStyleAsync("rgba(0, 255, 0, 0.8)");
-                await ctx.FillRectAsync(-scaledLength / 2, -scaledWidth / 2, scaledLength, scaledWidth);
-            }
-        }
-        catch
-        {
-            await ctx.FillStyleAsync("rgba(0, 255, 0, 0.8)");
-            await ctx.FillRectAsync(-scaledLength / 2, -scaledWidth / 2, scaledLength, scaledWidth);
-        }
-
-        await ctx.RestoreAsync();
-    }
-
-    private async Task DrawRobotOrientationArrows(Context2D ctx, double robotCanvasX, double robotCanvasY, double robotOrientation)
-    {
-        double arrowLength = 30 / ZoomScale;
-        double arrowHeadSize = 10 / ZoomScale;
-
-        await ctx.StrokeStyleAsync("rgba(0, 100, 255, 1.0)"); 
-        await ctx.FillStyleAsync("rgba(0, 100, 255, 1.0)");
-        await ctx.LineWidthAsync(3 / ZoomScale);
-
-        await ctx.BeginPathAsync();
-        await ctx.MoveToAsync(robotCanvasX, robotCanvasY);
-        double xAxisEndX = robotCanvasX + Math.Cos(robotOrientation) * (arrowLength - arrowHeadSize + 1);
-        double xAxisEndY = robotCanvasY + Math.Sin(robotOrientation) * (arrowLength - arrowHeadSize + 1);
-        await ctx.LineToAsync(xAxisEndX, xAxisEndY);
-        await ctx.StrokeAsync();
-
-        await ctx.BeginPathAsync();
-        double xArrowTipX = robotCanvasX + Math.Cos(robotOrientation) * arrowLength;
-        double xArrowTipY = robotCanvasY + Math.Sin(robotOrientation) * arrowLength;
-        await ctx.MoveToAsync(xArrowTipX, xArrowTipY);
-        double xArrowAngle = robotOrientation + Math.PI;
-        await ctx.LineToAsync(xArrowTipX + Math.Cos(xArrowAngle + Math.PI / 6) * arrowHeadSize, xArrowTipY + Math.Sin(xArrowAngle + Math.PI / 6) * arrowHeadSize);
-        await ctx.LineToAsync(xArrowTipX + Math.Cos(xArrowAngle - Math.PI / 6) * arrowHeadSize, xArrowTipY + Math.Sin(xArrowAngle - Math.PI / 6) * arrowHeadSize);
-        await ctx.ClosePathAsync();
-        await ctx.FillAsync(FillRule.NonZero);
-
-        await ctx.StrokeStyleAsync("rgba(255, 50, 50, 1.0)");
-        await ctx.FillStyleAsync("rgba(255, 50, 50, 1.0)");
-        await ctx.LineWidthAsync(3 / ZoomScale);
-
-        double yAxisAngle = robotOrientation + Math.PI / 2;
-
-        await ctx.BeginPathAsync();
-        await ctx.MoveToAsync(robotCanvasX, robotCanvasY);
-        double yAxisEndX = robotCanvasX + Math.Cos(yAxisAngle) * (arrowLength - arrowHeadSize + 1);
-        double yAxisEndY = robotCanvasY + Math.Sin(yAxisAngle) * (arrowLength - arrowHeadSize + 1);
-        await ctx.LineToAsync(yAxisEndX, yAxisEndY);
-        await ctx.StrokeAsync();
-
-        await ctx.BeginPathAsync();
-        double yArrowTipX = robotCanvasX + Math.Cos(yAxisAngle) * arrowLength;
-        double yArrowTipY = robotCanvasY + Math.Sin(yAxisAngle) * arrowLength;
-        await ctx.MoveToAsync(yArrowTipX, yArrowTipY);
-        double yArrowAngle = yAxisAngle + Math.PI;
-        await ctx.LineToAsync(yArrowTipX + Math.Cos(yArrowAngle + Math.PI / 6) * arrowHeadSize, yArrowTipY + Math.Sin(yArrowAngle + Math.PI / 6) * arrowHeadSize);
-        await ctx.LineToAsync(yArrowTipX + Math.Cos(yArrowAngle - Math.PI / 6) * arrowHeadSize, yArrowTipY + Math.Sin(yArrowAngle - Math.PI / 6) * arrowHeadSize);
-        await ctx.ClosePathAsync();
-        await ctx.FillAsync(FillRule.NonZero);
-    }
-
-    private async Task DrawMouseIndicator(Context2D ctx)
-    {
-        await ctx.SaveAsync();
-
-        await ctx.StrokeStyleAsync("rgba(255, 50, 50, 0.8)");
-        await ctx.LineWidthAsync(1);
-        await ctx.SetLineDashAsync(new double[] { 3, 3 });
-
-        await ctx.BeginPathAsync();
-        await ctx.MoveToAsync(MouseX, RulerHeight);
-        await ctx.LineToAsync(MouseX, CanvasHeight);
-        await ctx.StrokeAsync();
-
-        await ctx.BeginPathAsync();
-        await ctx.MoveToAsync(RulerHeight, MouseY);
-        await ctx.LineToAsync(CanvasWidth, MouseY);
-        await ctx.StrokeAsync();
-
-        await ctx.SetLineDashAsync(new double[] { });
-
-        const double labelPadding = 7;
-        const double labelMargin = 8;
-
-        string coordinateText = $"({WorldMouseX:F2}m, {WorldMouseY:F2}m)";
-
-        await ctx.FontAsync("bold 12px Arial");
-        var textMetrics = await ctx.MeasureTextAsync(coordinateText);
-        double textWidth = textMetrics.Width;
-        double textHeight = 16;
-
-        double labelX = MouseX + labelMargin;
-        double labelY = MouseY - textHeight - labelPadding * 2 - labelMargin;
-
-        if (labelX + textWidth + labelPadding * 2 > CanvasWidth)
-        {
-            labelX = MouseX - textWidth - labelPadding * 2 - labelMargin;
-        }
-        if (labelY - textHeight - labelPadding * 2 < RulerHeight)
-        {
-            labelY = MouseY + labelMargin;
-        }
-
-        await ctx.FillStyleAsync("rgba(0, 0, 0, 0.8)");
-        await ctx.FillRectAsync(labelX, labelY, textWidth + labelPadding * 2, textHeight + labelPadding * 2);
-
-        await ctx.StrokeStyleAsync("rgba(255,255,255,0.6)");
-        await ctx.LineWidthAsync(1);
-        await ctx.StrokeRectAsync(labelX, labelY, textWidth + labelPadding * 2, textHeight + labelPadding * 2);
-
-        await ctx.FillStyleAsync("rgba(255, 50, 50, 0.9)");
-        await ctx.BeginPathAsync();
-        await ctx.ArcAsync(MouseX, MouseY, 3, 0, Math.PI * 2);
-        await ctx.FillAsync(FillRule.NonZero);
-
-        await ctx.StrokeStyleAsync("rgba(255, 255, 255, 0.8)");
-        await ctx.LineWidthAsync(2);
-        await ctx.BeginPathAsync();
-        await ctx.ArcAsync(MouseX, MouseY, 6, 0, Math.PI * 2);
-        await ctx.StrokeAsync();
-
-        await ctx.SaveAsync();
-
-        await ctx.TranslateAsync(labelX + labelPadding + textWidth / 2, labelY + textHeight / 2);
-        await ctx.ScaleAsync(1, -1);
-
-        await ctx.FillStyleAsync("white");
-        await ctx.FontAsync("bold 12px Arial");
-        await ctx.TextAlignAsync(TextAlign.Center);
-        await ctx.TextBaseLineAsync(TextBaseLine.Bottom);
-        await ctx.FillTextAsync(coordinateText, 0, 0);
 
         await ctx.RestoreAsync();
     }
@@ -444,14 +137,14 @@
     {
         double pixelsPerMeter = BASE_PIXELS_PER_METER * ZoomScale;
 
-        if (pixelsPerMeter >= 400) return 0.1;
+        if (pixelsPerMeter >= 400) return 0.1;    
         else if (pixelsPerMeter >= 200) return 0.2;
         else if (pixelsPerMeter >= 100) return 0.5;
         else if (pixelsPerMeter >= 50) return 1.0;
         else if (pixelsPerMeter >= 25) return 2.0;
         else if (pixelsPerMeter >= 12) return 5.0;
         else if (pixelsPerMeter >= 6) return 10.0;
-        else return 20.0;
+        else return 20.0;                           
     }
 
     private async Task DrawXRuler(Context2D ctx, double rulerHeight, double visibleWorldLeft, double visibleWorldRight, double scaleInterval)
@@ -491,17 +184,17 @@
             if (isMajorTick && canvasX >= -20 && canvasX <= CanvasWidth + 20)
             {
                 await ctx.SaveAsync();
-
+                
                 await ctx.TranslateAsync(canvasX, rulerHeight - tickHeight - 8);
-                await ctx.ScaleAsync(1, -1);
+                await ctx.ScaleAsync(1, -1); 
-
+                
                 await ctx.FillStyleAsync("blue");
                 await ctx.FontAsync("bold 10px Arial");
                 await ctx.TextAlignAsync(TextAlign.Center);
 
                 string labelText = FormatRulerLabel(worldX, scaleInterval);
                 await ctx.FillTextAsync(labelText, 0, 0);
-
+                
                 await ctx.RestoreAsync();
             }
         }
@@ -547,9 +240,9 @@
 
                 await ctx.TranslateAsync(rulerWidth - tickWidth - 2, canvasY);
                 await ctx.ScaleAsync(1, -1);
-                await ctx.RotateAsync(-Math.PI / 2);
+                await ctx.RotateAsync(-Math.PI / 2); 
 
-                await ctx.FillStyleAsync("blue");
+                await ctx.FillStyleAsync("blue"); 
                 await ctx.FontAsync("bold 10px Arial");
                 await ctx.TextAlignAsync(TextAlign.Center);
 
@@ -571,7 +264,18 @@
 
     private string FormatRulerLabel(double worldValue, double scaleInterval)
     {
-        return scaleInterval < 1.0 ? $"{worldValue:F1}m" : $"{worldValue:F0}m";
+        if (scaleInterval < 1.0)
+        {
+            return $"{worldValue:F1}m"; 
+        }
+        else if (scaleInterval < 10.0)
+        {
+            return $"{worldValue:F0}m"; 
+        }
+        else
+        {
+            return $"{worldValue:F0}m";
+        }
     }
 
     private async Task DrawAxes(Context2D ctx)
@@ -581,9 +285,23 @@
 
         await ctx.FillStyleAsync("red");
         await ctx.BeginPathAsync();
-        await ctx.ArcAsync(originCanvasX, originCanvasY, 8 / ZoomScale, 0, Math.PI * 2);
+        await ctx.ArcAsync(originCanvasX, originCanvasY, 10 / ZoomScale, 0, Math.PI * 2);
         await ctx.FillAsync(FillRule.NonZero);
 
+        await ctx.LineWidthAsync(2 / ZoomScale);
+
+        await ctx.StrokeStyleAsync("blue");
+        await ctx.BeginPathAsync();
+        await ctx.MoveToAsync(-CanvasWidth / ZoomScale, originCanvasY);
+        await ctx.LineToAsync(CanvasWidth / ZoomScale, originCanvasY);
+        await ctx.StrokeAsync();
+
+        await ctx.StrokeStyleAsync("red");
+        await ctx.BeginPathAsync();
+        await ctx.MoveToAsync(originCanvasX, -CanvasHeight / ZoomScale);
+        await ctx.LineToAsync(originCanvasX, CanvasHeight / ZoomScale);
+        await ctx.StrokeAsync();
+
         double gridSpacingMeters = GetGridSpacingMeters();
         double arrowLength = gridSpacingMeters * BASE_PIXELS_PER_METER;
         double arrowHeadSize = 16 / ZoomScale;
@@ -594,15 +312,13 @@
 
         await ctx.BeginPathAsync();
         await ctx.MoveToAsync(originCanvasX, originCanvasY);
-        await ctx.LineToAsync(originCanvasX + arrowLength - arrowHeadSize, originCanvasY);
+        await ctx.LineToAsync(originCanvasX + arrowLength, originCanvasY);
         await ctx.StrokeAsync();
 
         await ctx.BeginPathAsync();
-        double xArrowTipX = originCanvasX + arrowLength;
+        await ctx.MoveToAsync(originCanvasX + arrowLength, originCanvasY);
-        double xArrowTipY = originCanvasY;
+        await ctx.LineToAsync(originCanvasX + arrowLength - arrowHeadSize, originCanvasY - arrowHeadSize / 2);
-        await ctx.MoveToAsync(xArrowTipX, xArrowTipY);
+        await ctx.LineToAsync(originCanvasX + arrowLength - arrowHeadSize, originCanvasY + arrowHeadSize / 2);
-        await ctx.LineToAsync(xArrowTipX - arrowHeadSize, xArrowTipY - arrowHeadSize / 2);
-        await ctx.LineToAsync(xArrowTipX - arrowHeadSize, xArrowTipY + arrowHeadSize / 2);
         await ctx.ClosePathAsync();
         await ctx.FillAsync(FillRule.NonZero);
 
@@ -612,15 +328,13 @@
 
         await ctx.BeginPathAsync();
         await ctx.MoveToAsync(originCanvasX, originCanvasY);
-        await ctx.LineToAsync(originCanvasX, originCanvasY + arrowLength - arrowHeadSize);
+        await ctx.LineToAsync(originCanvasX, originCanvasY + arrowLength);
         await ctx.StrokeAsync();
 
         await ctx.BeginPathAsync();
-        double yArrowTipX = originCanvasX;
+        await ctx.MoveToAsync(originCanvasX, originCanvasY + arrowLength);
-        double yArrowTipY = originCanvasY + arrowLength;
+        await ctx.LineToAsync(originCanvasX - arrowHeadSize / 2, originCanvasY + arrowLength - arrowHeadSize);
-        await ctx.MoveToAsync(yArrowTipX, yArrowTipY);
+        await ctx.LineToAsync(originCanvasX + arrowHeadSize / 2, originCanvasY + arrowLength - arrowHeadSize);
-        await ctx.LineToAsync(yArrowTipX - arrowHeadSize / 2, yArrowTipY - arrowHeadSize);
-        await ctx.LineToAsync(yArrowTipX + arrowHeadSize / 2, yArrowTipY - arrowHeadSize);
         await ctx.ClosePathAsync();
         await ctx.FillAsync(FillRule.NonZero);
     }
@@ -708,8 +422,8 @@
         {
             CanvasTranslateX += e.MovementX;
             CanvasTranslateY -= e.MovementY;
+            await DrawCanvas();
         }
-        await DrawCanvas();
     }
 
     private async Task HandleMouseLeave(MouseEventArgs e)
@@ -760,100 +474,9 @@
         await DrawCanvas();
     }
 
-    private async Task ReloadMapImage()
-    {
-        MapImageLoaded = false;
-        await LoadMapImage();
-        await DrawCanvas();
-        StateHasChanged();
-    }
-
-    private LaserScanData GenerateLaserScanData()
-    {
-        // Robot position (in world coordinates)
-        double robotX = 2; // Robot at origin for demo
-        double robotY = 2;
-        double robotOrientation = 0; // Robot facing right (0 degrees)
-
-        Random random = new Random(42); // Fixed seed for consistent pattern
-
-        // Laser scanner parameters
-        const double maxRange = 8.0; // meters
-        const double minRange = 0.2; // meters (fix: was 7.0, should be minimum)
-        const int numPoints = 270;   // Number of laser points
-        const double startAngle = -Math.PI / 2 - Math.PI / 4;
-        const double endAngle = Math.PI / 2 + Math.PI / 4;
-
-        double angleStep = (endAngle - startAngle) / (numPoints - 1);
-
-        var scanData = new LaserScanData
-        {
-            RobotX = robotX,
-            RobotY = robotY,
-            RobotOrientation = robotOrientation,
-        };
-
-        // Generate laser points
-        for (int i = 0; i < numPoints; i++)
-        {
-            double angle = startAngle + i * angleStep;
-
-            // Random range with some clustering around obstacles
-            double range;
-            if (random.NextDouble() < 0.3) // 30% chance of obstacles
-            {
-                range = random.NextDouble() * 3.0 + 1.0; // 1-4 meters (obstacles)
-            }
-            else if (random.NextDouble() < 0.1) // 10% chance of very close objects
-            {
-                range = random.NextDouble() * 0.8 + 0.2; // 0.2-1.0 meters
-            }
-            else
-            {
-                range = random.NextDouble() * maxRange * 0.7 + maxRange * 0.3; // Far points
-            }
-
-            // Add some noise to make it realistic
-            range += (random.NextDouble() - 0.5) * 0.1;
-            range = Math.Max(minRange, Math.Min(maxRange, range));
-
-            // Calculate point position relative to robot
-            double pointX = robotX + Math.Cos(angle + robotOrientation) * range;
-            double pointY = robotY + Math.Sin(angle + robotOrientation) * range;
-
-            scanData.Points.Add(new LaserScanPoint
-            {
-                X = pointX,
-                Y = pointY
-            });
-        }
-
-        return scanData;
-    }
-
-    public class LaserScanPoint
-    {
-        public double X { get; set; }
-        public double Y { get; set; }
-    }
-
-    public class LaserScanData
-    {
-        public double RobotX { get; set; }
-        public double RobotY { get; set; }
-        public double RobotOrientation { get; set; }
-        public List<LaserScanPoint> Points { get; set; } = new();
-    }
-
     public class DomRect
     {
         public double Width { get; set; }
         public double Height { get; set; }
     }
-
-    public class ImageDimensions
-    {
-        public double Width { get; set; }
-        public double Height { get; set; }
-    }
 }

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

@@ -30,41 +30,144 @@
             background-color: var(--bs-gray-200);
         }
 
-            .view .toolbar .action-button:hover {
+        .view .toolbar .action-button:hover {
-                background-color: var(--mud-palette-action-hover);
+            background-color: var(--mud-palette-action-hover);
-                transform: translateY(-1px);
+            transform: translateY(-1px);
-            }
+        }
 
-            .view .toolbar .action-button:disabled {
+        .view .toolbar .action-button:disabled {
-                opacity: 0.6;
+            opacity: 0.6;
-                cursor: not-allowed;
+            cursor: not-allowed;
-            }
+        }
 
-                .view .toolbar .action-button:disabled:hover {
+        .view .toolbar .action-button:disabled:hover {
-                    transform: none;
+            transform: none;
-                    background-color: transparent;
+            background-color: transparent;
-                }
+        }
 
         .view .toolbar .icon-button {
             font-size: 1.2rem;
             color: var(--mud-palette-primary);
         }
 
-
+    .view canvas {
-    .view > div {
+        transition: cursor 0.2s ease;
-        display: flex;
-        position: relative;
-        width: 100%;
-        flex-grow: 1;
-        overflow: hidden;
     }
 
-        .view > div > canvas {
+        .view canvas:hover {
-            transition: cursor 0.2s ease;
+            cursor: crosshair;
-            display: block;
-            transform: scale(1, -1);
         }
 
-            .view > div > canvas:hover {
+/* Enhanced zoom and coordinate info styling */
-                cursor: crosshair;
+.zoom-info-container {
-            }
+    display: flex;
+    align-items: center;
+    background-color: var(--mud-palette-background);
+    border: 1px solid var(--mud-palette-divider);
+    border-radius: 6px;
+    padding: 0.5rem 0.75rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.zoom-info {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 0.8rem;
+    color: var(--mud-palette-text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+}
+
+.info-item {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-weight: 500;
+}
+
+    .info-item i {
+        font-size: 0.9rem;
+        color: var(--mud-palette-primary);
+    }
+
+.info-separator {
+    color: var(--mud-palette-divider);
+    font-weight: 300;
+    margin: 0 0.25rem;
+}
+
+/* Responsive design for info container */
+@media (max-width: 768px) {
+    .zoom-info-container {
+        padding: 0.25rem 0.5rem;
+    }
+    
+    .zoom-info {
+        font-size: 0.7rem;
+        gap: 0.25rem;
+    }
+    
+    .info-item {
+        gap: 0.15rem;
+    }
+    
+    .info-item i {
+        font-size: 0.8rem;
+    }
+}
+
+/* Very small screens - stack vertically */
+@media (max-width: 480px) {
+    .zoom-info {
+        flex-direction: column;
+        gap: 0.15rem;
+        text-align: center;
+    }
+    
+    .info-separator {
+        display: none;
+    }
+    
+    .zoom-info-container {
+        padding: 0.35rem;
+    }
+}
+
+/* Hover effects for info container */
+.zoom-info-container:hover {
+    background-color: var(--mud-palette-action-hover);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+/* Animation for coordinate updates */
+.info-item {
+    transition: color 0.2s ease;
+}
+
+.info-item:hover {
+    color: var(--mud-palette-primary);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .zoom-info-container {
+        border-width: 2px;
+        background-color: var(--mud-palette-surface);
+    }
+    
+    .info-item {
+        font-weight: 600;
+    }
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+    .zoom-info-container {
+        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    }
+    
+    .zoom-info-container:hover {
+        box-shadow: 0 4px 8px rgba(0,0,0,0.4);
+    }
+}

RobotApp.Client/wwwroot/js/canvas.js

@@ -8,94 +8,4 @@
 window.setCanvasSize = (canvas, width, height) => {
     canvas.width = width;
     canvas.height = height;
-}
+}
-
-// Image loading and caching functionality
-window.imageCache = new Map();
-
-window.preloadImage = (imagePath) => {
-    return new Promise((resolve, reject) => {
-        if (window.imageCache.has(imagePath)) {
-            resolve(window.imageCache.get(imagePath));
-            return;
-        }
-
-        const img = new Image();
-        img.onload = () => {
-            window.imageCache.set(imagePath, img);
-            resolve(img);
-        };
-        img.onerror = () => {
-            reject(new Error(`Failed to load image: ${imagePath}`));
-        };
-        img.src = imagePath;
-    });
-};
-
-window.preloadImageFromUrl = (url, cacheKey) => {
-    return new Promise((resolve, reject) => {
-        if (window.imageCache.has(cacheKey)) {
-            resolve(window.imageCache.get(cacheKey));
-            return;
-        }
-
-        const img = new Image();
-        img.onload = () => {
-            window.imageCache.set(cacheKey, img);
-            resolve(img);
-        };
-        img.onerror = (error) => {
-            reject(new Error(`Failed to load image from URL: ${url}`));
-        };
-        
-        // Don't set crossOrigin for same-origin requests
-        // Only set it if you're loading from a different domain
-        // img.crossOrigin = 'anonymous';
-        
-        img.src = url;
-    });
-};
-
-window.getImageDimensions = (cacheKey) => {
-    const img = window.imageCache.get(cacheKey);
-    if (!img) {
-        return { width: 0, height: 0 };
-    }
-    
-    return {
-        width: img.naturalWidth || img.width,
-        height: img.naturalHeight || img.height
-    };
-};
-
-window.drawImageOnCanvas = (canvas, imagePath, x, y, width, height) => {
-    const ctx = canvas.getContext('2d');
-    const img = window.imageCache.get(imagePath);
-    
-    if (!img) {
-        return false;
-    }
-
-    try {
-        ctx.drawImage(img, x, y, width, height);
-        return true;
-    } catch (error) {
-        return false;
-    }
-};
-
-window.drawCachedImageOnCanvas = (canvas, cacheKey, x, y, width, height) => {
-    const ctx = canvas.getContext('2d');
-    const img = window.imageCache.get(cacheKey);
-    
-    if (!img) {
-        return false;
-    }
-
-    try {
-        ctx.drawImage(img, x, y, width, height);
-        return true;
-    } catch (error) {
-        return false;
-    }
-};

RobotApp/Controllers/ImagesController.cs

@@ -1,62 +1,10 @@
-using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
-using Microsoft.AspNetCore.Mvc;
-using RobotApp.Services;
 
-namespace RobotApp.Controllers;
+namespace RobotApp.Controllers
-
-[Route("api/[controller]")]
-[ApiController]
-[AllowAnonymous]
-public class ImagesController(Services.Logger<ImagesController> Logger) : ControllerBase
 {
-    [HttpGet]
+    [Route("api/[controller]")]
-    [Route("map")]
+    [ApiController]
-    public async Task<IActionResult> GetMapImage()
+    public class ImagesController : ControllerBase
     {
-        try
-        {
-            await Task.Delay(1);
-            
-            string fileName = "gara20250309.png";
-            string filePath = Path.Combine("maps", fileName);
-            
-            if (System.IO.File.Exists(filePath))
-            {
-                byte[] imageBytes = await System.IO.File.ReadAllBytesAsync(filePath);
-                return File(imageBytes, "image/png");
-            }
-            else
-            {
-                string mapsDir = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "maps");
-                if (Directory.Exists(mapsDir))
-                {
-                    var pngFiles = Directory.GetFiles(mapsDir, "*.png");
-
-                    return NotFound(new 
-                    { 
-                        error = "Map image not found",
-                        searchPath = filePath,
-                        mapsDirectory = mapsDir,
-                        availableFiles = pngFiles.Select(Path.GetFileName).ToArray(),
-                        baseDirectory = AppDomain.CurrentDomain.BaseDirectory
-                    });
-                }
-                else
-                {
-                    Logger.Warning($"GetMapImage: Maps directory does not exist: {mapsDir}");
-                    return NotFound(new 
-                    { 
-                        error = "Maps directory not found",
-                        searchPath = mapsDir,
-                        baseDirectory = AppDomain.CurrentDomain.BaseDirectory
-                    });
-                }
-            }
-        }
-        catch (Exception ex)
-        {
-            Logger.Warning($"GetMapImage: Exception occurred - {ex.Message}");
-            return StatusCode(500, new { error = "Internal server error", message = ex.Message, stackTrace = ex.StackTrace });
-        }
     }
 }

RobotApp/Program.cs

@@ -22,9 +22,6 @@ builder.Services.AddScoped<AuthenticationStateProvider, IdentityRevalidatingAuth
 builder.Services.AddMudServices();
 builder.Services.AddAuthorization();
 
-// Add Controllers for API endpoints
-builder.Services.AddControllers();
-
 var connectionString = builder.Configuration.GetConnectionString("DefaultConnection") ?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found.");
 Action<DbContextOptionsBuilder> appDbOptions = options => options.UseSqlite(connectionString, b => b.MigrationsAssembly("RobotApp"));
 
@@ -71,10 +68,6 @@ app.UseAuthorization();
 app.UseAntiforgery();
 
 app.MapStaticAssets();
-
-// Map API Controllers
-app.MapControllers();
-
 app.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode()
     .AddInteractiveWebAssemblyRenderMode()

RobotApp/Properties/launchSettings.json

@@ -5,7 +5,6 @@
         "commandName": "Project",
         "dotnetRunMessages": true,
         "launchBrowser": true,
-        "workingDirectory": "$(TargetDir)",
         "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
         "applicationUrl": "http://localhost:5229",
         "environmentVariables": {
@@ -16,7 +15,6 @@
         "commandName": "Project",
         "dotnetRunMessages": true,
         "launchBrowser": true,
-        "workingDirectory": "$(TargetDir)",
         "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
         "applicationUrl": "https://localhost:7150;http://localhost:5229",
         "environmentVariables": {