Skip to content

Commit

Permalink
Update cropper js to 1.6.1, update dependencies (#233)
Browse files Browse the repository at this point in the history
## Target
<!--
  Why are you making this change?
 -->
Update cropper js to 1.6.1, update dependencies
#### 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.
-->
- [x] Documentation updated
- [x] 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
- [x] 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.
-->
  • Loading branch information
MaxymGorn authored Oct 8, 2023
1 parent abb9722 commit 0ef800e
Show file tree
Hide file tree
Showing 15 changed files with 86 additions and 33 deletions.
26 changes: 25 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
Cropper.Blazor
</h1>
<p align="center">
<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
<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.1
</p>
</p>

Expand All @@ -18,6 +18,11 @@
[![GitHub](https://img.shields.io/github/last-commit/CropperBlazor/Cropper.Blazor?color=009DEA)](https://github.com/CropperBlazor/Cropper.Blazor)
[![NuGet Badge](https://buildstats.info/nuget/Cropper.Blazor)](https://www.nuget.org/packages/Cropper.Blazor/)

The most powerful image cropping tool for Blazor WebAssembly / Server, Hybrid with MAUI, MVC and
other frameworks.

Cropper.Blazor is an essential component for building interactive image cropping and manipulation features in Blazor web applications. This versatile Blazor library empowers developers to integrate intuitive image cropping functionality directly into their Blazor projects, offering users a seamless and responsive image editing experience.

## Demo
- [CropperBlazor.github.io/demo](https://CropperBlazor.github.io/demo)

Expand All @@ -30,6 +35,25 @@
- Blazor Server
- Blazor Server Hybrid with MVC
- MAUI Blazor Hybrid

Note: if you have problem with MAUI project dependencies:
- `dotnet workload update` + rebuilt the project. If that doesn't help, try the step below about override package
- override package, for example: `<PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" />`

## Key features and aspects of the Cropper.Blazor package include

- Blazor Integration: Cropper.Blazor is specifically designed for Blazor applications, allowing developers to effortlessly incorporate image cropping capabilities into their Blazor components and pages.
- Drag-and-Resize Interaction: Users can easily drag and resize the cropping area to precisely select the desired portion of an image. This intuitive interaction method ensures accurate and efficient cropping.
- Rotation Support: Cropper.Blazor includes the ability to rotate the selected image area, giving users full control over the orientation of their cropped content.
- Aspect Ratio Control: Developers can define custom aspect ratios for cropping, ensuring that the resulting image maintains specific proportions. This is particularly valuable for applications that require standardized image dimensions.
- Zoom Functionality: Cropper.Blazor allows users to zoom in and out of the image to fine-tune their cropping selection, guaranteeing precise results.
- Data Retrieval: The library provides methods to retrieve detailed information about the cropped area, such as coordinates and dimensions. This data can be easily captured and utilized for further processing or image uploads.
- Customization: Cropper.Blazor offers a wide range of configuration options, enabling developers to tailor the cropping experience to match the visual style and user interface of their Blazor applications.
- Cross-Browser Compatibility: The package is compatible with various modern web browsers, ensuring consistent functionality and user experience across different platforms.
- Documentation: Cropper.Blazor is accompanied by comprehensive documentation and practical examples, simplifying the integration process and helping developers make the most of its features.
- Open Source: Cropper.Blazor is open-source software, available for free use in both personal and commercial Blazor projects.

Cropper.Blazor streamlines the implementation of image cropping and editing within Blazor applications, enhancing user engagement and enabling dynamic image manipulation. Whether you are developing a Blazor-based image editor, profile picture uploader, or any other application that requires image cropping, Cropper.Blazor is a valuable package that simplifies the development process and enriches your application's capabilities.

## Installation

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
</ItemGroup>

<ItemGroup>
<PackageReference Include="MudBlazor" Version="6.4.1" />
<PackageReference Include="MudBlazor" Version="6.10.0" />
</ItemGroup>

<ItemGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@

<ItemGroup>
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="7.0.0" />
<PackageReference Include="MudBlazor" Version="6.4.1" />
<PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" Version="7.0.1" />
<PackageReference Include="MudBlazor" Version="6.10.0" />
</ItemGroup>

<ItemGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</PropertyGroup>

<ItemGroup>
<PackageReference Include="MudBlazor" Version="6.4.1" />
<PackageReference Include="MudBlazor" Version="6.10.0" />
</ItemGroup>

<ItemGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</PropertyGroup>

<ItemGroup>
<PackageReference Include="MudBlazor" Version="6.4.1" />
<PackageReference Include="MudBlazor" Version="6.10.0" />
</ItemGroup>

<ItemGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</ItemGroup>

<ItemGroup>
<PackageReference Include="MudBlazor" Version="6.4.1" />
<PackageReference Include="MudBlazor" Version="6.10.0" />
</ItemGroup>

</Project>
8 changes: 4 additions & 4 deletions src/Cropper.Blazor/Client/Cropper.Blazor.Client.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="2.2.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.8" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.8" PrivateAssets="all" />
<PackageReference Include="Blazored.LocalStorage" Version="4.3.0" />
<PackageReference Include="MudBlazor" Version="6.7.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.11" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.11" PrivateAssets="all" />
<PackageReference Include="Blazored.LocalStorage" Version="4.4.0" />
<PackageReference Include="MudBlazor" Version="6.10.0" />
</ItemGroup>

<ItemGroup>
Expand Down
37 changes: 32 additions & 5 deletions src/Cropper.Blazor/Client/Pages/Index.razor
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,13 @@
<a href="https://github.com/fengyuanchen/cropperjs">
<span style="color: var(--mud-palette-secondary)"><b>Cropper.js</b></span>
</a>
version 1.6.0
version 1.6.1
</MudText>
</MudItem>

<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">
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"
Expand Down Expand Up @@ -79,11 +79,38 @@
<MudGrid Class="mt-2" Justify="Justify.Center">

<MudItem xl="12" lg="12" md="12" sm="12" xs="12">

<DocsPageSection>
<SectionHeader Title="Manual Install">
<Description>If you already have a project and want to add Cropper.Blazor to it, either from a default template or a working application.</Description>
<SectionHeader Title="Description">
<Description>
<span style="color: var(--mud-palette-primary)"><b>Cropper.Blazor</b></span> — most powerful image cropping tool for Blazor WebAssembly / Server, Hybrid with MAUI, MVC and other frameworks.

Cropper.Blazor is an essential component for building interactive image cropping and manipulation features in Blazor web applications. This versatile Blazor library empowers developers to integrate intuitive image cropping functionality directly into their Blazor projects, offering users a seamless and responsive image editing experience.
</Description>
</SectionHeader>
<DocsPageSection>
<SectionHeader Title="Key features and aspects of the Cropper.Blazor package include">
<Description>
<MudList>
<MudListItem Text="Blazor Integration: Cropper.Blazor is specifically designed for Blazor applications, allowing developers to effortlessly incorporate image cropping capabilities into their Blazor components and pages." Icon="@Icons.Material.Filled.Circle" />
<MudListItem Text="Drag-and-Resize Interaction: Users can easily drag and resize the cropping area to precisely select the desired portion of an image. This intuitive interaction method ensures accurate and efficient cropping." Icon="@Icons.Material.Filled.Circle" />
<MudListItem Text="Rotation Support: Cropper.Blazor includes the ability to rotate the selected image area, giving users full control over the orientation of their cropped content." Icon="@Icons.Material.Filled.Circle" />
<MudListItem Text="Aspect Ratio Control: Developers can define custom aspect ratios for cropping, ensuring that the resulting image maintains specific proportions. This is particularly valuable for applications that require standardized image dimensions." Icon="@Icons.Material.Filled.Circle" />
<MudListItem Text="Zoom Functionality: Cropper.Blazor allows users to zoom in and out of the image to fine-tune their cropping selection, guaranteeing precise results." Icon="@Icons.Material.Filled.Circle" />
<MudListItem Text="Data Retrieval: The library provides methods to retrieve detailed information about the cropped area, such as coordinates and dimensions. This data can be easily captured and utilized for further processing or image uploads." Icon="@Icons.Material.Filled.Circle" />
<MudListItem Text="Customization: Cropper.Blazor offers a wide range of configuration options, enabling developers to tailor the cropping experience to match the visual style and user interface of their Blazor applications." Icon="@Icons.Material.Filled.Circle" />
<MudListItem Text="Cross-Browser Compatibility: The package is compatible with various modern web browsers, ensuring consistent functionality and user experience across different platforms." Icon="@Icons.Material.Filled.Circle" />
<MudListItem Text="Documentation: Cropper.Blazor is accompanied by comprehensive documentation and practical examples, simplifying the integration process and helping developers make the most of its features." Icon="@Icons.Material.Filled.Circle" />
<MudListItem Text="Open Source: Cropper.Blazor is open-source software, available for free use in both personal and commercial Blazor projects." Icon="@Icons.Material.Filled.Circle" />
<MudListItem Text="Cropper.Blazor streamlines the implementation of image cropping and editing within Blazor applications, enhancing user engagement and enabling dynamic image manipulation. Whether you are developing a Blazor-based image editor, profile picture uploader, or any other application that requires image cropping, Cropper.Blazor is a valuable package that simplifies the development process and enriches your application's capabilities." />
</MudList>
</Description>
</SectionHeader>
</DocsPageSection>
<DocsPageSection>
<SectionHeader Class="mt-1" Title="Manual Install">
<Description>If you already have a project and want to add Cropper.Blazor to it, either from a default template or a working application.</Description>
</SectionHeader>
</DocsPageSection>
<DocsPageSection>
<SectionHeader Title="Install the package">
<Description>Find the package through NuGet Package Manager or install it with following command:</Description>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,7 @@ private static string ConvertSeeTagsForMethod(string doc, string formattedReturn
string result = doc
.Replace("<br />", "")
.Replace("<paramref name=\"scaleX\" />", "scaleX")
.Replace("<see cref=\"T:Microsoft.AspNetCore.Components.ElementReference\" />", "<a target=\"_blank\" style=\"color: var(--mud-palette-primary); \" href=\"https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.elementreference\">ElementReference</a>")
.Replace("<see cref=\"T:Microsoft.AspNetCore.Components.Forms.IBrowserFile\" />", "<a target=\"_blank\" style=\"color: var(--mud-palette-primary); \" href=\"https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.ibrowserfile\">IBrowserFile</a>")
.Replace("<see cref=\"T:Microsoft.JSInterop.DotNetStreamReference\" />", "<a target=\"_blank\" style=\"color: var(--mud-palette-primary); \" href=\"https://learn.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.dotnetstreamreference\">DotNetStreamReference</a>")
.Replace("<see cref=\"T:System.Threading.Tasks.ValueTask\" />", "<a target=\"_blank\" style=\"color: var(--mud-palette-primary); \" href=\"https://learn.microsoft.com/en-us/dotnet/api/system.threading.tasks.valuetask\">ValueTask</a>")
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
</PropertyGroup>

<ItemGroup>
<PackageReference Include="FluentAssertions" Version="6.11.0" />
<PackageReference Include="Moq" Version="4.18.4" />
<PackageReference Include="FluentAssertions" Version="6.12.0" />
<PackageReference Include="Moq" Version="4.20.69" />
</ItemGroup>

<ItemGroup Condition="'$(TargetFramework)' == 'net6.0'">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@

<ItemGroup>
<PackageReference Include="Bogus" Version="34.0.2" />
<PackageReference Include="bunit" Version="1.22.19" />
<PackageReference Include="bunit" Version="1.23.9" />
<PackageReference Include="coverlet.msbuild" Version="6.0.0">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="FluentAssertions" Version="6.11.0" />
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.6.3" />
<PackageReference Include="Moq" Version="4.18.4" />
<PackageReference Include="xunit" Version="2.5.0" />
<PackageReference Include="xunit.runner.visualstudio" Version="2.5.0">
<PackageReference Include="FluentAssertions" Version="6.12.0" />
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.7.2" />
<PackageReference Include="Moq" Version="4.20.69" />
<PackageReference Include="xunit" Version="2.5.1" />
<PackageReference Include="xunit.runner.visualstudio" Version="2.5.1">
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>
Expand All @@ -33,7 +33,7 @@
</ItemGroup>

<ItemGroup Condition="'$(TargetFramework)' == 'net7.0'">
<PackageReference Include="Microsoft.JSInterop" Version="7.0.8" />
<PackageReference Include="Microsoft.JSInterop" Version="7.0.11" />
</ItemGroup>

<ItemGroup>
Expand Down
4 changes: 2 additions & 2 deletions src/Cropper.Blazor/Cropper.Blazor/Cropper.Blazor.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</PropertyGroup>

<PropertyGroup>
<Version>1.2.5</Version>
<Version>1.2.6</Version>
<PackageLicenseFile>LICENSE</PackageLicenseFile>
<PackageIcon>NuGet.png</PackageIcon>
<Company>Cropper.Blazor</Company>
Expand Down Expand Up @@ -110,7 +110,7 @@
</ItemGroup>

<ItemGroup Condition="'$(TargetFramework)' == 'net7.0'">
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.5" />
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.11" />
</ItemGroup>

</Project>
Loading

0 comments on commit 0ef800e

Please sign in to comment.