Skip to content

fix(preview): let the preview follow the crop shape - #102

Merged
imerljak merged 1 commit into
mainfrom
fix/preview-follow-crop-shape
Nov 3, 2026
Merged

imerljak merged 1 commit into
mainfrom
fix/preview-follow-crop-shape

Conversation

@imerljak

Copy link
Copy Markdown
Owner

CropperPreview always rendered resize="none", which scales the crop to the box width only. Crops whose aspect ratio differs from the box were clipped (portrait) or letterboxed (landscape).

Changes

  • height is optional. When omitted, the viewer uses resize="vertical" and follows the crop's aspect ratio.
  • shape="circle" without height stays square.
  • New resize prop to override the mode; CropperPreviewResize type exported.
  • README documents the new props and the resize="none" caveat.

Existing width + height usage is unchanged.

Testing

  • Unit tests for default mode, omitted height, explicit resize, circle, and placeholder size.
  • Not yet verified in a real browser (jsdom does no layout).

CropperPreview hardcoded resize="none", which scales the crop to the
box width only, so free-ratio crops were clipped or letterboxed.

height is now optional: when omitted the viewer uses resize="vertical"
and takes the crop's aspect ratio (circles stay square). A resize prop
allows overriding the mode. Existing width + height usage is unchanged.
@codecov

codecov Bot commented Oct 30, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.75%. Comparing base (db95dda) to head (45d6528).

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #102   +/-   ##
=======================================
  Coverage   99.75%   99.75%           
=======================================
  Files           7        7           
  Lines         823      832    +9     
  Branches      140      144    +4     
=======================================
+ Hits          821      830    +9     
  Misses          2        2           
Flag Coverage Δ
unittests 99.75% <100.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@imerljak
imerljak merged commit de65dc7 into main Nov 3, 2026
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant