Feature/update nuget 1 2 1

examples/Cropper.Blazor.MAUI.Net6/Cropper.Blazor.MAUI.Net6.csproj

@@ -50,7 +50,7 @@
     </ItemGroup>
 
     <ItemGroup>
-      <PackageReference Include="MudBlazor" Version="6.2.2" />
+      <PackageReference Include="MudBlazor" Version="6.4.1" />
     </ItemGroup>
 
     <ItemGroup>

examples/Cropper.Blazor.MAUI.Net7/Cropper.Blazor.MAUI.Net7.csproj

@@ -51,7 +51,7 @@
 
     <ItemGroup>
         <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="7.0.0" />
-        <PackageReference Include="MudBlazor" Version="6.2.2" />
+        <PackageReference Include="MudBlazor" Version="6.4.1" />
     </ItemGroup>
 
     <ItemGroup>

examples/Cropper.Blazor.Server.Net6/Cropper.Blazor.Server.Net6.csproj

@@ -7,7 +7,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="MudBlazor" Version="6.2.2" />
+    <PackageReference Include="MudBlazor" Version="6.4.1" />
   </ItemGroup>
 
   <ItemGroup>

examples/Cropper.Blazor.Server.Net7/Cropper.Blazor.Server.Net7.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <TargetFramework>net7.0</TargetFramework>
@@ -7,7 +7,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="MudBlazor" Version="6.2.2" />
+    <PackageReference Include="MudBlazor" Version="6.4.1" />
   </ItemGroup>
 
   <ItemGroup>

examples/Cropper.MVC.With.Blazor.Server.Net7/Cropper.MVC.With.Blazor.Server.Net7.csproj

@@ -9,7 +9,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
-		<PackageReference Include="MudBlazor" Version="6.2.2" />
+		<PackageReference Include="MudBlazor" Version="6.4.1" />
 	</ItemGroup>
 
 </Project>

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

@@ -0,0 +1,19 @@
+<MudCard Class="d-flex justify-space-between flex-column mb-6">
+    <MudCardContent>
+        <MudText>Aspect Ratio Settings (only for FREE aspect ratio)</MudText>
+        <MudNumericField @bind-Value="MinAspectRatio"
+                         Label="Min aspect ratio"
+                         Disabled="!IsEnableAspectRatioSettings"
+                         Min="0"
+                         Max="MaxAspectRatio">
+        </MudNumericField>
+        <MudNumericField @bind-Value="MaxAspectRatio"
+                         Label="Max aspect ratio"
+                         Disabled="!IsEnableAspectRatioSettings"
+                         Min="MinAspectRatio ?? 0">
+        </MudNumericField>
+        <MudText Class="mt-4">
+            Current aspect ratio: @AspectRatio
+        </MudText>
+    </MudCardContent>
+</MudCard>

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

@@ -0,0 +1,89 @@
+using System.ComponentModel.DataAnnotations;
+using Cropper.Blazor.Client.Pages;
+using Cropper.Blazor.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace Cropper.Blazor.Client.Components
+{
+    public partial class AspectRatioSettings
+    {
+        private decimal? maxAspectRatio;
+        private decimal? minAspectRatio;
+        private bool isEnableAspectRatioSettings;
+
+        public decimal? MaxAspectRatio
+        {
+            get => maxAspectRatio;
+            set
+            {
+                maxAspectRatio = value;
+                ApplyAspectRatioRulesForCropperAsync();
+            }
+        }
+
+        public decimal? MinAspectRatio
+        {
+            get => minAspectRatio;
+            set
+            {
+                minAspectRatio = value;
+                ApplyAspectRatioRulesForCropperAsync();
+            }
+        }
+
+        [CascadingParameter(Name = "AspectRatio"), Required]
+        private decimal? AspectRatio { get; set; }
+
+        [CascadingParameter(Name = "CropperDemo"), Required]
+        private CropperDemo CropperDemo { get; set; } = null!;
+
+        [CascadingParameter(Name = "IsEnableAspectRatioSettings"), Required]
+        private bool IsEnableAspectRatioSettings
+        {
+            get => isEnableAspectRatioSettings;
+            set
+            {
+                if (!value)
+                {
+                    minAspectRatio = null;
+                    maxAspectRatio = null;
+                }
+
+                isEnableAspectRatioSettings = value;
+            }
+        }
+
+        public async Task ApplyAspectRatioRulesForCropperAsync()
+        {
+            if (minAspectRatio is not null || maxAspectRatio is not null)
+            {
+                ContainerData containerData = await CropperDemo.CropperComponent!.GetContainerDataAsync();
+                CropBoxData cropBoxData = await CropperDemo.CropperComponent!.GetCropBoxDataAsync();
+
+                if (cropBoxData.Height != 0)
+                {
+                    decimal aspectRatio = cropBoxData.Width / cropBoxData.Height;
+
+                    if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio)
+                    {
+                        decimal? newCropBoxWidth = cropBoxData.Height * ((minAspectRatio + maxAspectRatio) / 2);
+
+                        CropperDemo.CropperComponent!.SetCropBoxData(new SetCropBoxDataOptions
+                        {
+                            Left = (containerData.Width - newCropBoxWidth) / 2,
+                            Width = newCropBoxWidth,
+                        });
+                    }
+
+                    SetUpAspectRatio(aspectRatio);
+                }
+            }
+        }
+
+        public void SetUpAspectRatio(decimal? aspectRatio)
+        {
+            AspectRatio = aspectRatio;
+            StateHasChanged();
+        }
+    }
+}

src/Cropper.Blazor/Client/Components/CroppedDimensionsSettings.razor

@@ -0,0 +1,26 @@
+<MudCard Class="d-flex justify-space-between flex-column mb-6">
+    <MudCardContent>
+        <MudText>
+            Dimensions Settings
+            <h6>This option may not work with arbitrary 'Aspect Ratios' images, it is recommended to use a free Aspect Ratio for this option or calculate the allowed values yourself</h6>
+        </MudText>
+        <MudNumericField @bind-Value="MinimumWidth"
+                         Label="Minimum Width"
+                         Min="0"
+                         Max="MaximumWidth">
+        </MudNumericField>
+        <MudNumericField @bind-Value="MaximumWidth"
+                         Label="Maximum Width"
+                         Min="MinimumWidth ?? 0">
+        </MudNumericField>
+        <MudNumericField @bind-Value="MinimumHeight"
+                         Label="Minimum Height"
+                         Min="0"
+                         Max="MaximumHeight">
+        </MudNumericField>
+        <MudNumericField @bind-Value="MaximumHeight"
+                         Label="Maximum Height"
+                         Min="MinimumHeight ?? 0">
+        </MudNumericField>
+    </MudCardContent>
+</MudCard>

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

@@ -0,0 +1,21 @@
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Components;
+
+namespace Cropper.Blazor.Client.Components
+{
+    public partial class CroppedDimensionsSettings
+    {
+        private decimal? minimumWidth = null;
+        private decimal? maximumWidth = null;
+        private decimal? minimumHeight = null;
+        private decimal? maximumHeight = null;
+
+        [CascadingParameter(Name = "ResetCropperAction"), Required]
+        public Action ResetCropperAction { get; set; } = null!;
+
+        public decimal? MinimumWidth { get => minimumWidth; set { minimumWidth = value; ResetCropperAction.Invoke(); } }
+        public decimal? MaximumWidth { get => maximumWidth; set { maximumWidth = value; ResetCropperAction.Invoke(); } }
+        public decimal? MinimumHeight { get => minimumHeight; set { minimumHeight = value; ResetCropperAction.Invoke(); } }
+        public decimal? MaximumHeight { get => maximumHeight; set { maximumHeight = value; ResetCropperAction.Invoke(); } }
+    }
+}

src/Cropper.Blazor/Client/Components/GetSetCropperData.razor

@@ -1,8 +1,10 @@
 @using Cropper.Blazor.Models
 
-@*//---Cropper Data---//*@
 <MudItem xxl="3" xl="3" lg="3" md="3" sm="12" xs="12">
-    <MudCard>
+    @*//---Enable setup minimum and maximum cropped dimensions---//*@
+    <CroppedDimensionsSettings @ref="CroppedDimensionsSettings" />
+    @*//---Cropper Data---//*@
+    <MudCard Class="d-flex justify-space-between flex-column">
         <MudCardContent @key="CropperData">
             <MudText>Cropper Data</MudText>
             <MudNumericField Class="mb-2" HideSpinButtons="true" @bind-Value="CropperData.X" Label="X, px" Variant="Variant.Text" Step=".2M" />
@@ -70,8 +72,9 @@
 </MudItem>
 @*//---Image Data---//*@
 <MudItem xxl="3" xl="3" lg="3" md="3" sm="12" xs="12">
+    <AspectRatioSettings @ref="AspectRatioSettings" />
     <MudCard>
-        <MudCardContent @key="ImageData">
+        <MudCardContent @key="ImageData" Class="d-flex justify-space-between flex-column">
             <MudText>Image Data</MudText>
             <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="ImageData.Height" Label="Height, px" Variant="Variant.Text" Step=".2M" />
             <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="ImageData.Width" Label="Width, px" Variant="Variant.Text" Step=".2M" />
@@ -95,7 +98,7 @@
 </MudItem>
 <MudItem xxl="3" xl="3" lg="3" md="3" sm="12" xs="12">
     @*//---Enable setup max/min zoom ratio---//*@
-    <ZoomRationSettings @ref="ZoomRationSettingszoomRationSettings" />
+    <ZoomRatioSettings @ref="ZoomRatioSettings" />
     @*//---Canvas Data---//*@
     <MudCard Class="d-flex justify-space-between flex-column">
         <MudCardContent @key="CanvasData">

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

@@ -24,12 +24,15 @@ public partial class GetSetCropperData
         [Parameter, Required]
         public Func<ValueTask<CanvasData>> GetCanvasData { get; set; } = null!;
 
+        public AspectRatioSettings AspectRatioSettings = null!;
+
         private CropBoxData CropBoxData = null!;
         private CropperData CropperData = null!;
         private ContainerData ContainerData = null!;
         private ImageData ImageData = null!;
         private CanvasData CanvasData = null!;
-        private ZoomRationSettings ZoomRationSettingszoomRationSettings = null!;
+        private ZoomRatioSettings ZoomRatioSettings = null!;
+        public CroppedDimensionsSettings CroppedDimensionsSettings = null!;
 
         protected override void OnInitialized()
         {
@@ -42,7 +45,7 @@ protected override void OnInitialized()
 
         public void OnZoomEvent(ZoomEvent? zoomEvent)
         {
-            ZoomRationSettingszoomRationSettings!.OnZoomEvent(zoomEvent);
+            ZoomRatioSettings!.OnZoomEvent(zoomEvent);
         }
 
         public void SetCropBoxData(SetCropBoxDataOptions cropBoxDataOptions)

src/Cropper.Blazor/Client/Components/ZoomRationSettings.razor → src/Cropper.Blazor/Client/Components/ZoomRatioSettings.razor

@@ -1,5 +1,6 @@
 <MudCard Class="d-flex justify-space-between flex-column mb-6">
-    <MudCardContent Class="pb-0">
+    <MudCardContent>
+        <MudText>Zoom Ratio Settings</MudText>
         <MudNumericField @bind-Value="MinZoomRatio"
                          Label="Min zoom ratio"
                          Min="0"
@@ -16,12 +17,4 @@
             Zoom event ratio: @Ratio
         </MudText>
     </MudCardContent>
-    <MudCardActions Class="d-flex justify-space-between flex-column mt-0">
-        <MudButton Variant="Variant.Outlined"
-                   Color="Color.Primary"
-                   FullWidth="true"
-                   OnClick="ApplyZoomRulesForCropperAsync">
-            Apply zoom rules for Cropper
-        </MudButton>
-    </MudCardActions>
 </MudCard>

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

@@ -0,0 +1,49 @@
+using Cropper.Blazor.Events.ZoomEvent;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Cropper.Blazor.Client.Components
+{
+    public partial class ZoomRatioSettings
+    {
+        private decimal? minZoomRatio = null;
+        private decimal? maxZoomRatio = null;
+
+        private decimal? MinZoomRatio
+        {
+            get => minZoomRatio;
+            set
+            {
+                minZoomRatio = value;
+                ApplyZoomRulesForCropperAsync();
+            }
+        }
+        private decimal? MaxZoomRatio
+        {
+            get => maxZoomRatio;
+            set
+            {
+                maxZoomRatio = value;
+                ApplyZoomRulesForCropperAsync();
+            }
+        }
+        [Inject] private IJSRuntime? JSRuntime { get; set; }
+
+        private decimal? OldRatio { get; set; } = null;
+
+        private decimal? Ratio { get; set; } = null;
+
+        public void OnZoomEvent(ZoomEvent? zoomEvent)
+        {
+            OldRatio = zoomEvent?.OldRatio;
+            Ratio = zoomEvent?.Ratio;
+
+            StateHasChanged();
+        }
+
+        public async Task ApplyZoomRulesForCropperAsync()
+        {
+            await JSRuntime!.InvokeVoidAsync("window.overrideOnZoomCropperEvent", MinZoomRatio, MaxZoomRatio);
+        }
+    }
+}