-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/update nuget to 1 2 7 (#257)
## Target <!-- Why are you making this change? --> Update nuget to 1 2 7 #### 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 - [x] I have commented my code, particularly in hard-to-understand areas - [x] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] New dependencies added - [x] 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
Showing
142 changed files
with
3,700 additions
and
539 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -42,9 +42,9 @@ jobs: | |
| working-directory: src/Cropper.Blazor/Cropper.Blazor.UnitTests | ||
|
|
||
| - name: Coverage | ||
| uses: codecov/[email protected].1 | ||
| uses: codecov/[email protected].4 | ||
| with: | ||
| file: coverage.net6.0.cobertura.xml | ||
| files: coverage.net6.0.cobertura.xml, coverage.net7.0.cobertura.xml | ||
| fail_ci_if_error: true | ||
| verbose: true | ||
|
|
||
|
|
@@ -107,9 +107,25 @@ jobs: | |
| folder: release/wwwroot | ||
| repository-name: CropperBlazor/CropperBlazor.github.io | ||
|
|
||
| install-maui-workloads: | ||
| name: Install MAUI Workloads | ||
| runs-on: windows-latest | ||
|
|
||
| steps: | ||
| - uses: actions/checkout@v3 | ||
|
|
||
| - name: Install MAUI Workloads | ||
| run: | | ||
| dotnet workload install maui --ignore-failed-sources | ||
| demo-projects-build: | ||
| name: Build Demo Projects | ||
| runs-on: windows-latest | ||
| needs: install-maui-workloads | ||
|
|
||
| strategy: | ||
| matrix: | ||
| dotnet-version: ['6.0.x', '7.0.x'] | ||
|
|
||
| steps: | ||
| - uses: actions/checkout@v3 | ||
|
|
@@ -118,34 +134,33 @@ jobs: | |
| - name: Setup .NET 7, 6 | ||
| uses: actions/setup-dotnet@v3 | ||
| with: | ||
| dotnet-version: | | ||
| 6.0.x | ||
| 7.0.x | ||
| - name: Install MAUI Workloads | ||
| run: | | ||
| dotnet workload install maui --ignore-failed-sources | ||
| dotnet-version: ${{ matrix.dotnet-version }} | ||
|
|
||
| - name: Restore dependencies for Cropper.Blazor.Demo | ||
| run: dotnet restore | ||
| working-directory: examples | ||
|
|
||
| - name: DotNet Build MVC with Blazor Server Demo Project for .net 7 | ||
| - name: DotNet Build MVC with Blazor Server Demo Project | ||
| run: dotnet build --no-restore | ||
| working-directory: examples\Cropper.MVC.With.Blazor.Server.Net7 | ||
| if: matrix.dotnet-version == '7.0.x' | ||
|
|
||
| - name: DotNet Build Blazor Server Demo Project for .net 7 | ||
| - name: DotNet Build Blazor Server Demo Project | ||
| run: dotnet build --no-restore | ||
| working-directory: examples\Cropper.Blazor.Server.Net7 | ||
| if: matrix.dotnet-version == '7.0.x' | ||
|
|
||
| - name: DotNet Build Blazor MAUI Demo Project for .net 7 | ||
| - name: DotNet Build Blazor MAUI Demo Project | ||
| run: dotnet build --no-restore | ||
| working-directory: examples\Cropper.Blazor.MAUI.Net7 | ||
| if: matrix.dotnet-version == '7.0.x' | ||
|
|
||
| - name: DotNet Build Blazor Server Demo Project for .net 6 | ||
| - name: DotNet Build Blazor Server Demo Project | ||
| run: dotnet build --no-restore | ||
| working-directory: examples\Cropper.Blazor.Server.Net6 | ||
| if: matrix.dotnet-version == '6.0.x' | ||
|
|
||
| - name: DotNet Build Blazor MAUI Demo Project for .net 6 | ||
| - name: DotNet Build Blazor MAUI Demo Project | ||
| run: dotnet build --no-restore | ||
| working-directory: examples\Cropper.Blazor.MAUI.Net6 | ||
| if: matrix.dotnet-version == '6.0.x' | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -43,9 +43,9 @@ jobs: | |
| working-directory: src/Cropper.Blazor/Cropper.Blazor.UnitTests | ||
|
|
||
| - name: Coverage | ||
| uses: codecov/[email protected].1 | ||
| uses: codecov/[email protected].4 | ||
| with: | ||
| file: coverage.net6.0.cobertura.xml | ||
| files: coverage.net6.0.cobertura.xml, coverage.net7.0.cobertura.xml | ||
| fail_ci_if_error: true | ||
| verbose: true | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,199 @@ | ||
| ## Cropper.Blazor is a component that wraps around Cropper.js version 1.6.1 | ||
|
|
||
| [](https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/ci.yml) | ||
| [](https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/cd.yml) | ||
| [](https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/release.yml) | ||
| [](https://codecov.io/github/CropperBlazor/Cropper.Blazor) | ||
| [](https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/LICENSE) | ||
| [](https://github.com/CropperBlazor/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) | ||
|
|
||
| ## API | ||
| - [CropperBlazor.github.io/api](https://cropperblazor.github.io/api) | ||
|
|
||
| ## Examples | ||
| - [CropperBlazor.github.io/examples/cropperusage](https://cropperblazor.github.io/examples/cropperusage) | ||
|
|
||
| ## Prerequisites | ||
| | Cropper.Blazor | .NET | Support | | ||
| | :--- | :---: | :---: | | ||
| | - | .NET 3.1 | Not supported | | ||
| | - | .NET 5 | Not supported | | ||
| | 1.1.x | [.NET 6](https://dotnet.microsoft.com/download/dotnet/6.0) | :heavy_check_mark: | | ||
| | 1.2.x | [.NET 6](https://dotnet.microsoft.com/download/dotnet/6.0) & [.NET 7](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) | :heavy_check_mark: | | ||
|
|
||
| - Supported .NET 7.0, .NET 6.0 versions for these web platforms: | ||
| - Blazor WebAssembly | ||
| - 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 | ||
|
|
||
| ``` | ||
| dotnet add package Cropper.Blazor | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| Import Custom Element: | ||
|
|
||
| ```razor | ||
| @using Cropper.Blazor.Components | ||
| ``` | ||
|
|
||
|
|
||
| Add the following to `index.html` (client-side — Blazor Webassembly, Blazor MAUI) or `_Host.cshtml` (server-side — Blazor Server, MVC with Blazor Server) in the `head` | ||
| ```razor | ||
| <link href="_content/Cropper.Blazor/cropper.min.css" rel="stylesheet" /> | ||
| ``` | ||
|
|
||
| Add the following to `index.html` or `_Host.cshtml` in the `body` | ||
| ```razor | ||
| <script src="_content/Cropper.Blazor/cropper.min.js"></script> | ||
| ``` | ||
|
|
||
|
|
||
| Add the following to the relevant sections of `Program.cs` | ||
| ```c# | ||
| using Cropper.Blazor.Extensions; | ||
| ``` | ||
| ```c# | ||
| builder.Services.AddCropper(); | ||
| ``` | ||
|
|
||
| In addition, you can change the path to the CropperJSInterop.min.js module if for some reason it is located outside the server root folder as follows: | ||
| - Override internal path to CropperJSInterop.min.js module: | ||
| ```c# | ||
| builder.Services.AddCropper(new CropperJsInteropOptions() | ||
| { | ||
| DefaultInternalPathToCropperModule = "<YourPath>/_content/Cropper.Blazor/cropperJsInterop.min.js" | ||
| }) | ||
| ``` | ||
| - Override full global path to CropperJSInterop.min.js module: | ||
| ```c# | ||
| builder.Services.AddCropper(new CropperJsInteropOptions() | ||
| { | ||
| IsActiveGlobalPath = true, | ||
| GlobalPathToCropperModule = "<StartUrlWithPath>/_content/Cropper.Blazor/cropperJsInterop.min.js" | ||
| }) | ||
| ``` | ||
|
|
||
| Also for server-side (Blazor Server or MVC with Blazor Server) you need add configuration SignalR, increase MaximumReceiveMessageSize of a single incoming hub message (default is 32KB) and map SignalR to your path. [For example](https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/examples/Cropper.Blazor.Server.Net7/Program.cs): | ||
| ```c# | ||
| builder.Services.AddServerSideBlazor() | ||
| .AddHubOptions(options => | ||
| { | ||
| options.MaximumReceiveMessageSize = 32 * 1024 * 100; | ||
| }); | ||
| ``` | ||
| ```c# | ||
| app.MapBlazorHub(); | ||
| ``` | ||
|
|
||
|
|
||
| And then use it in Razor file ([for example](https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/src/Cropper.Blazor/Client/Pages/CropperDemo.razor)): | ||
|
|
||
| ```razor | ||
| <CropperComponent | ||
| Class="cropper-container" | ||
| ErrorLoadImageClass="cropper-error-load" | ||
| @ref="CropperComponent" | ||
| OnCropStartEvent="OnCropStartEvent" | ||
| OnCropEndEvent="OnCropEndEvent" | ||
| OnCropEvent="OnCropEvent" | ||
| OnZoomEvent="OnZoomEvent" | ||
| OnCropMoveEvent="OnCropMoveEvent" | ||
| OnReadyEvent="OnCropReadyEvent" | ||
| OnLoadImageEvent="OnLoadImageEvent" | ||
| Src="@Src" | ||
| InputAttributes="@InputAttributes" | ||
| ErrorLoadImageSrc="@_errorLoadImageSrc" | ||
| IsErrorLoadImage="@IsErrorLoadImage" | ||
| OnErrorLoadImageEvent="OnErrorLoadImageEvent" | ||
| Options="Options" | ||
| IsAvailableInitCropper="IsAvailableInitCropper"> | ||
| </CropperComponent> | ||
| ``` | ||
|
|
||
| And then use it in [*.razor.cs file](https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs) | ||
|
|
||
| You may override Cropper JavaScript module with execution script which can replace 6 event handlers (onReady, onCropStart, onCropMove, onCropEnd, onCrop, onZoom), such as overriding the onZoom callback in JavaScript: | ||
| ```js | ||
| window.overrideOnZoomCropperEvent = (minZoomRatio, maxZoomRatio) => { | ||
| window.cropper.onZoom = function (imageObject, event, correlationId) { | ||
| const jSEventData = this.getJSEventData(event, correlationId); | ||
|
|
||
| const isApplyPreventZoomMinRatio = (minZoomRatio != null) && (minZoomRatio > event.detail.ratio); | ||
| const isApplyPreventZoomMaxRatio = (maxZoomRatio != null) && (event.detail.ratio > maxZoomRatio); | ||
|
|
||
| if (isApplyPreventZoomMinRatio || isApplyPreventZoomMaxRatio) { | ||
| event.preventDefault(); | ||
| } | ||
| else { | ||
| imageObject.invokeMethodAsync('CropperIsZoomed', jSEventData); | ||
| } | ||
| }; | ||
| }; | ||
| ``` | ||
|
|
||
| Analysis of the signature onReady, onCropStart, onCropMove, onCropEnd, onCrop, onZoom event handlers: | ||
| ### imageObject | ||
|
|
||
| - Type: `Object` | ||
|
|
||
| Reference to base cropper component. | ||
|
|
||
| ### event | ||
|
|
||
| - Type: `CustomEvent` | ||
|
|
||
| Represent Cropper Event. | ||
|
|
||
| ### correlationId | ||
|
|
||
| - Type: `String` | ||
| - Default: `Cropper.Blazor` | ||
|
|
||
| A Correlation ID is a unique identifier that is added to the very first interaction(incoming request) | ||
| to identify the context and is passed to all components that are involved in the transaction flow. | ||
|
|
||
| Definitely need to tell these rules in Blazor: | ||
| ```c# | ||
| await JSRuntime!.InvokeVoidAsync("window.overrideCropperJsInteropModule", MinZoomRatio, MaxZoomRatio); | ||
| ``` | ||
|
|
||
| ## Contributing | ||
|
|
||
| 1. Fork it! | ||
| 2. Create your feature branch: `git checkout -b feature/<my-new-feature>` | ||
| 3. Commit your changes: `git commit -m 'Add some feature'` | ||
| 4. Push to the branch: `git push origin feature/<my-new-feature>` | ||
| 5. Submit a pull request :D |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.