fix UI bugs (#200)

## Target
<!--
  Why are you making this change?
 -->

#### Open Questions
<!-- OPTIONAL
- [ ] Use the GitHub checklists to spark discussion on issues that may
arise from your approach. Please tick the box and explain your answer.
-->

## Checklist
<!--
It serves as a gentle reminder for common tasks. Confirm it's done and
check everything that applies.
-->
- [ ] Documentation updated
- [ ] Tests cover new or modified code
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] New dependencies added
- [ ] Includes breaking changes
- [ ] Version bumped

## Visuals
<!-- OPTIONAL
Show results both before and after this change. When the output changes,
it can be a screenshot of a trace, metric, or log illustrating the
change.
-->

Author: MaxymGorn

src/Cropper.Blazor/Client/Components/AspectRatioSettings.razor.cs

@@ -1,5 +1,4 @@
 using System.ComponentModel.DataAnnotations;
-using Cropper.Blazor.Client.Pages;
 using Cropper.Blazor.Components;
 using Cropper.Blazor.Models;
 using Microsoft.AspNetCore.Components;
@@ -18,7 +17,7 @@ public decimal? MaxAspectRatio
             set
             {
                 maxAspectRatio = value;
-                ApplyAspectRatioRulesForCropperAsync();
+                InvokeAsync(ApplyAspectRatioRulesForCropperAsync);
             }
         }
 
@@ -28,7 +27,7 @@ public decimal? MinAspectRatio
             set
             {
                 minAspectRatio = value;
-                ApplyAspectRatioRulesForCropperAsync();
+                InvokeAsync(ApplyAspectRatioRulesForCropperAsync);
             }
         }
 
@@ -68,12 +67,16 @@ public async Task ApplyAspectRatioRulesForCropperAsync()
                     if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio)
                     {
                         decimal? newCropBoxWidth = cropBoxData.Height * ((minAspectRatio + maxAspectRatio) / 2);
+                        decimal? left = (containerData.Width - newCropBoxWidth) / 2;
 
                         CropperComponent!.SetCropBoxData(new SetCropBoxDataOptions
                         {
-                            Left = (containerData.Width - newCropBoxWidth) / 2,
+                            Left = left,
                             Width = newCropBoxWidth,
                         });
+
+                        cropBoxData = await CropperComponent!.GetCropBoxDataAsync();
+                        aspectRatio = cropBoxData.Width / cropBoxData.Height;
                     }
 
                     SetUpAspectRatio(aspectRatio);

src/Cropper.Blazor/Client/Components/Docs/SectionContent.razor.cs

@@ -2,15 +2,14 @@
 using Cropper.Blazor.Client.Models;
 using Microsoft.AspNetCore.Components;
 using MudBlazor;
-using MudBlazor.Services;
 using MudBlazor.Utilities;
 
 namespace Cropper.Blazor.Client.Components.Docs;
 
-public partial class SectionContent
+public partial class SectionContent : IBrowserViewportObserver
 {
     [Inject] protected IJsApiService? JsApiService { get; set; }
-    [Inject] IBreakpointService BreakpointService { get; set; } = null!;
+    [Inject] IBrowserViewportService BreakpointService { get; set; } = null!;
 
     protected string Classname =>
         new CssBuilder("docs-section-content")
@@ -41,28 +40,30 @@ public partial class SectionContent
             .AddClass("show-code", HasCode && ShowCode)
             .Build();
 
-    [Parameter] public string Class { get; set; }
+    [Parameter] public string Class { get; set; } = string.Empty;
     [Parameter] public bool DarkenBackground { get; set; }
     [Parameter] public bool Outlined { get; set; } = true;
     [Parameter] public bool ShowCode { get; set; } = true;
     [Parameter] public bool Block { get; set; }
     [Parameter] public bool FullWidth { get; set; }
-    [Parameter] public string Code { get; set; }
-    [Parameter] public string HighLight { get; set; }
-    [Parameter] public IEnumerable<CodeFile> Codes { get; set; }
-    [Parameter] public RenderFragment ChildContent { get; set; }
+    [Parameter] public string Code { get; set; } = string.Empty;
+    [Parameter] public string HighLight { get; set; } = string.Empty;
+    [Parameter] public IEnumerable<CodeFile>? Codes { get; set; } = null;
+    [Parameter] public RenderFragment ChildContent { get; set; } = null!;
 
     private bool HasCode;
-    public string ActiveCode;
+    public string ActiveCode = string.Empty;
 
     private bool IsVerticalAlign = false;
 
+    Guid IBrowserViewportObserver.Id { get; } = Guid.NewGuid();
+
     protected override void OnParametersSet()
     {
         if (Codes != null)
         {
             HasCode = true;
-            ActiveCode = Codes.FirstOrDefault().code;
+            ActiveCode = Codes.First().code;
         }
         else if (!string.IsNullOrWhiteSpace(Code))
         {
@@ -75,11 +76,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            await BreakpointService!.SubscribeAsync((br) =>
-            {
-                IsVerticalAlign = BreakpointService!.IsMediaSize(br, Breakpoint.Xs);
-                InvokeAsync(StateHasChanged);
-            });
+            await BreakpointService!.SubscribeAsync(this, fireImmediately: true);
         }
 
         await base.OnAfterRenderAsync(firstRender);
@@ -116,35 +113,49 @@ RenderFragment CodeComponent(string code) => builder =>
     {
         try
         {
-            var key = typeof(SectionContent).Assembly.GetManifestResourceNames().FirstOrDefault(x => x.Contains($".{code}Code.html"));
-            using (var stream = typeof(SectionContent).Assembly.GetManifestResourceStream(key))
-            using (var reader = new StreamReader(stream))
-            {
-                var read = reader.ReadToEnd();
+            string? key = typeof(SectionContent).Assembly.GetManifestResourceNames().FirstOrDefault(x => x.Contains($".{code}Code.html"));
+            using var stream = typeof(SectionContent).Assembly.GetManifestResourceStream(key!);
+            using var reader = new StreamReader(stream!);
+            var read = reader.ReadToEnd();
 
-                if (!string.IsNullOrEmpty(HighLight))
+            if (!string.IsNullOrEmpty(HighLight))
+            {
+                if (HighLight.Contains(','))
                 {
-                    if (HighLight.Contains(","))
-                    {
-                        var highlights = HighLight.Split(",");
+                    var highlights = HighLight.Split(",");
 
-                        foreach (var value in highlights)
-                        {
-                            read = Regex.Replace(read, $"{value}(?=\\s|\")", $"<mark>$&</mark>");
-                        }
-                    }
-                    else
+                    foreach (var value in highlights)
                     {
-                        read = Regex.Replace(read, $"{HighLight}(?=\\s|\")", $"<mark>$&</mark>");
+                        read = Regex.Replace(read, $"{value}(?=\\s|\")", $"<mark>$&</mark>");
                     }
                 }
-
-                builder.AddMarkupContent(0, read);
+                else
+                {
+                    read = Regex.Replace(read, $"{HighLight}(?=\\s|\")", $"<mark>$&</mark>");
+                }
             }
+
+            builder.AddMarkupContent(0, read);
         }
         catch (Exception ex)
         {
-            Console.WriteLine(ex.Message);
+            Console.WriteLine(ex.StackTrace);
         }
     };
+
+    public async Task NotifyBrowserViewportChangeAsync(BrowserViewportEventArgs browserViewportEventArgs)
+    {
+        if (browserViewportEventArgs.BrowserWindowSize.Width < 600)
+        {
+            IsVerticalAlign = true;
+        }
+        else
+        {
+            IsVerticalAlign = false;
+        }
+
+        await InvokeAsync(StateHasChanged);
+    }
+
+    public async ValueTask DisposeAsync() => await BreakpointService.UnsubscribeAsync(this);
 }

src/Cropper.Blazor/Client/Components/ZoomRatioSettings.razor.cs

@@ -1,9 +1,9 @@
-using Cropper.Blazor.Components;
+using System.ComponentModel.DataAnnotations;
+using Cropper.Blazor.Components;
 using Cropper.Blazor.Events.ZoomEvent;
 using Cropper.Blazor.Models;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
-using System.ComponentModel.DataAnnotations;
 
 namespace Cropper.Blazor.Client.Components
 {
@@ -18,7 +18,7 @@ private decimal? MinZoomRatio
             set
             {
                 minZoomRatio = value;
-                ApplyZoomRulesForCropperAsync();
+                InvokeAsync(ApplyZoomRulesForCropperAsync);
             }
         }
         private decimal? MaxZoomRatio
@@ -27,7 +27,7 @@ private decimal? MaxZoomRatio
             set
             {
                 maxZoomRatio = value;
-                ApplyZoomRulesForCropperAsync();
+                InvokeAsync(ApplyZoomRulesForCropperAsync);
             }
         }
         [Inject] private IJSRuntime? JSRuntime { get; set; }

src/Cropper.Blazor/Client/Pages/CropperDemo.razor

@@ -117,10 +117,10 @@
 
                                     <MudButtonGroup Color="Color.Primary" Variant="Variant.Filled">
                                         <MudTooltip Text="cropper.scaleX(-1)">
-                                            <MudIconButton Icon="@Icons.Material.Filled.SwapHoriz" OnClick="@(()=>ScaleX(-1m*ScaleXValue))" Title="Flip Horizontal" />
+                                            <MudIconButton Icon="@Icons.Material.Filled.SwapHoriz" OnClick="@(()=>ScaleX(-1m * ScaleXValue))" Title="Flip Horizontal" />
                                         </MudTooltip>
                                         <MudTooltip Text="cropper.scaleY(-1)">
-                                            <MudIconButton Icon="@Icons.Material.Filled.SwapVert" OnClick="@(()=>ScaleY(-1m*ScaleYValue))" Title="Flip Vertical" />
+                                            <MudIconButton Icon="@Icons.Material.Filled.SwapVert" OnClick="@(()=>ScaleY(-1m * ScaleYValue))" Title="Flip Vertical" />
                                         </MudTooltip>
                                     </MudButtonGroup>
 

src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs

@@ -82,6 +82,9 @@ public async void OnCropEvent(JSEventData<CropEvent> cropJSEvent)
         {
             if (cropJSEvent?.Detail is not null)
             {
+                ScaleXValue = cropJSEvent.Detail.ScaleX;
+                ScaleYValue = cropJSEvent.Detail.ScaleY;
+
                 decimal width = Math.Round(cropJSEvent.Detail.Width ?? 0);
                 decimal height = Math.Round(cropJSEvent.Detail.Height ?? 0);
 

src/Cropper.Blazor/Client/Pages/Index.razor

@@ -22,7 +22,7 @@
         </MudItem>
 
         <MudItem xl="12" lg="12" md="12" sm="12" xs="12" Class="d-flex justify-center">
-            <MudText Typo="Typo.h3" Align="Align.Center" Class="pa-0 ma-0 text-gradient">Cropper.Blazor</MudText>
+            <MudText Typo="Typo.h3" Style="word-break: break-all;" Align="Align.Center" Class="pa-0 ma-0 text-gradient">Cropper.Blazor</MudText>
         </MudItem>
 
 
@@ -42,12 +42,12 @@
 
         <MudItem xl="12" lg="12" md="12" sm="12" xs="12" Class="d-flex justify-center gap-4 pb-8">
             <MudButton Color="Color.Primary" Variant="Variant.Filled" DisableElevation="true"
-                       Class="button-gradient" Size="Size.Large" Href="/demo">
-                View Demo
+                       Class="button-gradient" Size="Size.Large" Href="/demo">             
+                <MudText Align="Align.Center">View Demo</MudText>
             </MudButton>
             <MudButton Color="Color.Default" Variant="Variant.Outlined" StartIcon="@Icons.Custom.Brands.GitHub"
                        Size="Size.Large" Class="ms-4" Href="https://github.com/CropperBlazor/Cropper.Blazor" Target="_blank">
-                Star on GitHub
+                <MudText Align="Align.Center">Star on GitHub</MudText>
             </MudButton>
         </MudItem>
         <p align="center">

src/Cropper.Blazor/Cropper.Blazor.Client.Compiler/CodeSnippetsCompiler.cs

@@ -6,9 +6,9 @@
 
 namespace Cropper.Blazor.Client.Compiler;
 
-public class CodeSnippetsCompiler
+public partial class CodeSnippetsCompiler
 {
-    public bool Execute()
+    public static bool Execute()
     {
         var paths = new Paths();
         var success = true;
@@ -61,7 +61,10 @@ public bool Execute()
     private static string EscapeComponentSource(string path)
     {
         var source = File.ReadAllText(path, Encoding.UTF8);
-        source = Regex.Replace(source, "@(namespace|layout|page) .+?\n", string.Empty);
+        source = EscapeComponentSourceRegex().Replace(source, string.Empty);
         return source.Replace("\"", "\"\"").Trim();
     }
+
+    [GeneratedRegex("@(namespace|layout|page) .+?\n")]
+    private static partial Regex EscapeComponentSourceRegex();
 }

src/Cropper.Blazor/Cropper.Blazor.Client.Compiler/Program.cs

@@ -8,8 +8,7 @@ public class Program
         public static int Main()
         {
             var stopWatch = Stopwatch.StartNew();
-            var success =
-                new CodeSnippetsCompiler().Execute();
+            var success = CodeSnippetsCompiler.Execute();
 
             Console.WriteLine($"Docs.Compiler completed in {stopWatch.ElapsedMilliseconds} msecs");
             return success ? 0 : 1;