feat(ImageImageCropper): add Preview parameter

[ArgoZhang]

Link issues

fixes #457

Summary By Copilot

Regression?

• Yes
• No

Risk

• High
• Medium
• Low

Verification

• Manual (required)
• Automated

Packaging changes reviewed?

• Yes
• No
• N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Merge the latest code from the main branch

Summary by Sourcery

Enable image preview support by adding a configurable Preview selector and related CSS classes, and streamline round cropping configuration by deprecating the CropperShape parameter

New Features:

• Add Preview parameter to ImageCropperOption for specifying a preview element selector

Enhancements:

• Introduce CSS utility classes for image cropper preview sizes and round styling
• Deprecate the CropperShape parameter in favor of the Options.IsRound property

[sourcery-ai]

Reviewer's Guide

This PR extends the ImageCropper component by introducing a new Preview option (with accompanying CSS for sizing and shape), and deprecates the old CropperShape parameter in favor of using the Options.IsRound flag.

Sequence Diagram: Image Cropper Preview Functionality

sequenceDiagram
    actor User/Page
    participant IC as "ImageCropper Component"
    participant CropperJsLib as "Cropper.js Library"
    participant PreviewEl as "Preview DOM Element"

    User/Page->>IC: Initialize with Options (including Preview selector)
    activate IC
    IC->>CropperJsLib: Instantiate cropper (with preview selector from Options)
    activate CropperJsLib
    CropperJsLib->>PreviewEl: Attach as preview target
    activate PreviewEl
    deactivate PreviewEl
    loop On crop event
        CropperJsLib->>PreviewEl: Update preview content
    end
    CropperJsLib-->>IC: Cropped data / Event
    deactivate CropperJsLib
    IC-->>User/Page: Notify crop event
    deactivate IC

Loading

Class Diagram: ImageCropper Component Structure Update

classDiagram
  class ImageCropper {
    +ImageCropperShape CropperShape
    +ImageCropperOption Options
    -string ClassString
  }
  ImageCropper --o ImageCropperOption : uses

Loading

File-Level Changes

Change	Details	Files
Add Preview support to ImageCropper	Introduced Preview property with JSON ignore attribute in ImageCropperOption Added .bb-cropper-preview and size/shape modifiers in cropper.bundle.css	ImageCropperOption.cs cropper.bundle.css
Deprecate CropperShape parameter	Marked CropperShape [Parameter] as [Obsolete] Updated class builder to use Options.IsRound instead of CropperShape	ImageCropper.razor.cs

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#457	Add a Preview parameter to the ImageCropper component.	✅

Possibly linked issues

• feat(ImageCropper): add Preview parameter #457: The PR adds the requested Preview parameter to the ImageCropperOption class and relevant CSS styles.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @ArgoZhang - I've reviewed your changes and they look great!

Here's what I looked at during the review

• 🟡 General issues: 3 issues found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}