Update NuGet package version to 1.2.5

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,41 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
+
+**Pull Request**
+- [ ] I would like to do a Pull Request

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Github Discussions
+    url: https://github.com/CropperBlazor/Cropper.Blazor/discussions
+    about: Please ask and answer questions here
+  - name: Telegram
+    url: https://t.me/+dLQD8Al6C9s0ZjMy
+    about: You can also ask and answer questions here

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
+
+**Pull Request**
+- [ ] I would like to do a Pull Request

.github/workflows/cd.yml

@@ -148,4 +148,4 @@ jobs:
 
     - name: DotNet Build Blazor MAUI Demo Project for .net 6
       run: dotnet build --no-restore
-      working-directory: examples\Cropper.Blazor.MAUI.Net6
+      working-directory: examples\Cropper.Blazor.MAUI.Net6

README.md

@@ -6,12 +6,13 @@
     Cropper.Blazor
   </h1>
   <p align="center">
-    <b>Cropper.Blazor</b>  is a component element that wraps around <a href="https://github.com/fengyuanchen/cropperjs"><b>Cropper.js</b></a>
+    <b>Cropper.Blazor</b> is a component that wraps around <a href="https://github.com/fengyuanchen/cropperjs"><b>Cropper.js</b></a> version 1.6.0
   </p>
 </p>
 
 [![Build and run test](https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/ci.yml/badge.svg?event=push)](https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/ci.yml)
 [![Deploy to GitHub Pages](https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/cd.yml/badge.svg?event=push)](https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/cd.yml)
+[![Deploy to NuGet](https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/release.yml/badge.svg?event=push)](https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/release.yml)
 [![coverage](https://codecov.io/github/CropperBlazor/Cropper.Blazor/branch/dev/graph/badge.svg?token=39M66DO85T)](https://codecov.io/github/CropperBlazor/Cropper.Blazor)
 [![GitHub](https://img.shields.io/github/license/CropperBlazor/Cropper.Blazor?color=ff5c9b)](https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/LICENSE)
 [![GitHub](https://img.shields.io/github/last-commit/CropperBlazor/Cropper.Blazor?color=009DEA)](https://github.com/CropperBlazor/Cropper.Blazor)
@@ -20,6 +21,9 @@
 ## Demo
 - [CropperBlazor.github.io/demo](https://CropperBlazor.github.io/demo)
 
+## API
+- [https://cropperblazor.github.io/api](https://cropperblazor.github.io/api)
+
 ## Prerequisites
 - Supported .NET 7.0, .NET 6.0 versions for these web platforms:
   - Blazor WebAssembly

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

@@ -1,19 +1,29 @@
-<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">
+<MudCard Class="mud-height-full">
+    <MudCardHeader Class="border-solid border-b mud-border-lines-default">
+        <CardHeaderContent>
+            <div class="d-flex flex-column gap-2">
+                <MudText Typo="Typo.h5">Aspect Ratio Settings</MudText>
+                <MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" Dense="true">
+                    This option work's only for <b>FREE</b> aspect ratio mode!
+                </MudAlert>
+            </div>
+        </CardHeaderContent>
+    </MudCardHeader>
+    <MudCardContent Class="mud-height-full pt-0">
+        <MudNumericField @bind-Value="MinAspectRatio" Label="Min aspect ratio"
+                         Disabled="!IsFreeAspectRatioEnabled"
+                         Min="0" Max="MaxAspectRatio">
         </MudNumericField>
-        <MudNumericField @bind-Value="MaxAspectRatio"
-                         Label="Max aspect ratio"
-                         Disabled="!IsEnableAspectRatioSettings"
+        <MudNumericField @bind-Value="MaxAspectRatio" Label="Max aspect ratio"
+                         Disabled="!IsFreeAspectRatioEnabled"
                          Min="MinAspectRatio ?? 0">
         </MudNumericField>
-        <MudText Class="mt-4">
-            Current aspect ratio: @AspectRatio
-        </MudText>
+        <div class="d-flex gap-x-6 align-end">
+            <MudChip Variant="Variant.Outlined" Color="Color.Primary" Class="flex-1 ma-0 mt-4">
+                Current aspect ratio:
+            </MudChip>
+            <MudNumericField @bind-Value="AspectRatio" Format="N4" Variant="Variant.Text"
+                             HideSpinButtons="true" ReadOnly="true" Class="flex-1" />
+        </div>
     </MudCardContent>
 </MudCard>

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

@@ -1,5 +1,5 @@
 using System.ComponentModel.DataAnnotations;
-using Cropper.Blazor.Client.Pages;
+using Cropper.Blazor.Components;
 using Cropper.Blazor.Models;
 using Microsoft.AspNetCore.Components;
 
@@ -17,7 +17,7 @@ public decimal? MaxAspectRatio
             set
             {
                 maxAspectRatio = value;
-                ApplyAspectRatioRulesForCropperAsync();
+                InvokeAsync(ApplyAspectRatioRulesForCropperAsync);
             }
         }
 
@@ -27,18 +27,18 @@ public decimal? MinAspectRatio
             set
             {
                 minAspectRatio = value;
-                ApplyAspectRatioRulesForCropperAsync();
+                InvokeAsync(ApplyAspectRatioRulesForCropperAsync);
             }
         }
 
         [CascadingParameter(Name = "AspectRatio"), Required]
         private decimal? AspectRatio { get; set; }
 
-        [CascadingParameter(Name = "CropperDemo"), Required]
-        private CropperDemo CropperDemo { get; set; } = null!;
+        [CascadingParameter(Name = "CropperComponent"), Required]
+        private CropperComponent CropperComponent { get; set; } = null!;
 
-        [CascadingParameter(Name = "IsEnableAspectRatioSettings"), Required]
-        private bool IsEnableAspectRatioSettings
+        [CascadingParameter(Name = "IsFreeAspectRatioEnabled"), Required]
+        private bool IsFreeAspectRatioEnabled
         {
             get => isEnableAspectRatioSettings;
             set
@@ -57,8 +57,8 @@ 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();
+                ContainerData containerData = await CropperComponent!.GetContainerDataAsync();
+                CropBoxData cropBoxData = await CropperComponent!.GetCropBoxDataAsync();
 
                 if (cropBoxData.Height != 0)
                 {
@@ -67,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;
 
-                        CropperDemo.CropperComponent!.SetCropBoxData(new SetCropBoxDataOptions
+                        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/CroppedDimensionsSettings.razor

@@ -1,26 +1,32 @@
-<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">
+<MudCard Class="mud-height-full">
+    <MudCardHeader Class="border-solid border-b mud-border-lines-default">
+        <CardHeaderContent>
+            <div class="d-flex flex-column gap-2">
+                <MudText Typo="Typo.h5">Dimensions Settings</MudText>
+                <MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" Dense="true">
+                    <b>This setting may not work with a specific aspect ratio.</b>
+                    It is recommended to use a <b>FREE</b> aspect ratio for this
+                    option or calculate the valid values yourself.
+                </MudAlert>
+            </div>
+        </CardHeaderContent>
+    </MudCardHeader>
+    <MudCardContent Class="mud-height-full pt-0">
+        <div class="d-flex gap-x-6 flex-wrap flex-sm-nowrap">
+            <MudNumericField @bind-Value="MinimumHeight" Label="Minimum Height" Min="0" Max="MaximumHeight"
+                             Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary">
         </MudNumericField>
-        <MudNumericField @bind-Value="MaximumWidth"
-                         Label="Maximum Width"
-                         Min="MinimumWidth ?? 0">
+            <MudNumericField @bind-Value="MinimumWidth" Label="Minimum Width" Min="0" Max="MaximumWidth"
+                             Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary">
         </MudNumericField>
-        <MudNumericField @bind-Value="MinimumHeight"
-                         Label="Minimum Height"
-                         Min="0"
-                         Max="MaximumHeight">
+        </div>
+        <div class="d-flex gap-x-6 flex-wrap flex-sm-nowrap">
+            <MudNumericField @bind-Value="MaximumHeight" Label="Maximum Height" Min="MinimumHeight ?? 0"
+                             Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary">
         </MudNumericField>
-        <MudNumericField @bind-Value="MaximumHeight"
-                         Label="Maximum Height"
-                         Min="MinimumHeight ?? 0">
+            <MudNumericField @bind-Value="MaximumWidth" Label="Maximum Width" Min="MinimumWidth ?? 0"
+                             Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary">
         </MudNumericField>
+        </div>
     </MudCardContent>
 </MudCard>

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

@@ -1,11 +1,11 @@
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="X" Step=".2M" Label="X" Variant="Variant.Text"
-                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" />
+                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="Y" Label="Y" Step=".2M" Variant="Variant.Text"
-                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" />
+                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="Width" Label="Width" Step=".2M" Variant="Variant.Text"
-                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" />
+                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="Height" Label="Height" Step=".2M" Variant="Variant.Text"
-                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" />
+                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="Rotate" Label="Rotate" Step=".2M" Variant="Variant.Text"
                  Adornment="Adornment.End" AdornmentText="deg" AdornmentColor="Color.Primary" Margin="Margin.Dense" />
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="ScaleX" Label="ScaleX" Variant="Variant.Text" Step=".2M" />

src/Cropper.Blazor/Client/Components/Docs/ApiLink.cs

@@ -0,0 +1,29 @@
+using Cropper.Blazor.Components;
+
+namespace Cropper.Blazor.Client.Components.Docs
+{
+    public static class ApiLink
+    {
+        private static Dictionary<Type, string> SpecialCaseComponents =
+           new()
+           {
+               [typeof(CropperComponent)] = "cropper-component"
+           };
+
+        public static string GetComponentLinkFor(Type type)
+        {
+            return $"components/{GetComponentName(type)}";
+        }
+
+        private static string GetComponentName(Type type)
+        {
+            if (!SpecialCaseComponents.TryGetValue(type, out var component))
+            {
+                component = new string(type.ToString().Replace("Cropper.Blazor", "").TakeWhile(c => c != '`').ToArray())
+                    .ToLowerInvariant();
+            }
+
+            return component;
+        }
+    }
+}

src/Cropper.Blazor/Client/Components/Docs/ApiMethod.cs

@@ -0,0 +1,13 @@
+using System.Reflection;
+
+namespace Cropper.Blazor.Client.Components.Docs
+{
+    public class ApiMethod
+    {
+        public string Signature { get; set; }
+        public ParameterInfo Return { get; set; }
+        public string Documentation { get; set; }
+        public MethodInfo MethodInfo { get; set; }
+        public ParameterInfo[] Parameters { get; set; }
+    }
+}

src/Cropper.Blazor/Client/Components/Docs/ApiProperty.cs

@@ -0,0 +1,14 @@
+using System.Reflection;
+
+namespace Cropper.Blazor.Client.Components.Docs
+{
+    public class ApiProperty
+    {
+        public string Name { get; set; }
+        public Type Type { get; set; }
+        public PropertyInfo PropertyInfo { get; set; }
+        public string Description { get; set; }
+        public object Default { get; set; }
+        public bool IsTwoWay { get; set; }
+    }
+}