Skip to content

feat(core): add freeform image cropping to inspector#228

Open
thisiselijah wants to merge 2 commits into
1weiho:mainfrom
thisiselijah:feat/freeform-crop
Open

feat(core): add freeform image cropping to inspector#228
thisiselijah wants to merge 2 commits into
1weiho:mainfrom
thisiselijah:feat/freeform-crop

Conversation

@thisiselijah

@thisiselijah thisiselijah commented Jun 11, 2026

Copy link
Copy Markdown

What does this PR do?

As an open-slide user, I found the crop feature a bit inconvenient during my workflow, so I created this PR.
This PR adds a new "Freeform" crop mode to the inspector's image crop dialog. Users can now freely crop images on their slides without having the crop box forced to match the aspect ratio of the underlying image element.

This allows users to have more flexibility when adjusting image compositions on slides.

image

Key Changes

  • Freeform Cropping: Added a freeform fit option in ImageCropDialog that disables the aspect ratio constraint in .
  • Smart Detection: When re-opening the crop dialog on an already cropped image, the component now automatically calculates the aspect ratio of the existing object-view-box . If it differs from the element's layout aspect ratio, it defaults to the "Freeform" mode, preventing destructive auto-snapping of the user's previous crop.
  • Localization: Added translations for the new "Freeform" toggle ( cropFitFreeform ) in English, Japanese, Simplified Chinese, and Traditional Chinese.
  • Changeset: Included a minor changeset for @open-slide/core .

How to test

  1. Run pnpm dev in the root directory.
  2. Open the demo app and press i to enter inspector mode.
  3. Click an image and select the Crop tool.
  4. Verify the new "Freeform" option works, allowing for unrestricted crop dimensions.
  5. Apply the crop, close the dialog, and re-open it to ensure your freeform crop bounds and toggle state are correctly restored.

Summary by CodeRabbit

  • New Features
    • Added a "Freeform" image cropping mode to the crop inspector dialog, allowing unrestricted aspect-ratio adjustments when editing images.
    • Applying a freeform edit produces a normalized rectangular crop for consistent output.
    • Included localization support for the new freeform crop option across English, Japanese, Simplified Chinese, and Traditional Chinese.

@vercel

vercel Bot commented Jun 11, 2026

Copy link
Copy Markdown

@thisiselijah is attempting to deploy a commit to the Yiwei Ho Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Jun 11, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 25b351be-51a9-4126-8980-ed265f843f51

📥 Commits

Reviewing files that changed from the base of the PR and between 3850c21 and 2be3dc0.

📒 Files selected for processing (1)
  • packages/core/src/app/components/inspector/image-crop-dialog.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/core/src/app/components/inspector/image-crop-dialog.tsx

Walkthrough

This PR adds freeform image cropping capability to the image crop dialog. A new fit mode allows users to crop without aspect-ratio constraints. The implementation includes localized UI labels across English, Japanese, Simplified Chinese, and Traditional Chinese, plus refactored initialization logic and output normalization.

Changes

Freeform Image Crop Feature

Layer / File(s) Summary
Locale type schema extension
packages/core/src/locale/types.ts
Added cropFitFreeform string key to Locale['inspector'] type definition, establishing the contract for localization implementations.
Localized freeform crop labels
packages/core/src/locale/en.ts, packages/core/src/locale/ja.ts, packages/core/src/locale/zh-cn.ts, packages/core/src/locale/zh-tw.ts
Implemented cropFitFreeform translations ("Freeform", "自由", "自由裁剪", "自由裁剪") across four language locales.
ImageCropDialog freeform mode support
packages/core/src/app/components/inspector/image-crop-dialog.tsx
Extended component state and initialization to include freeform mode; on image load, aspect ratio of initialRect is compared against target, switching to freeform if threshold exceeded. Refactored initialCrop and makeMaxSizeCrop helpers to accept isFreeform flag: when enabled, crop is returned without aspect clamping and ReactCrop renders without aspect constraint. Added fit mode selection UI (cover, contain, freeform). Output normalization maps freeform crops to cover mode in result contract.
Changelog entry
.changeset/add-freeform-crop.md
Documented minor version bump for @open-slide/core with freeform crop fit option addition to inspector.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A crop mode wild and free,
No aspect chains shall bound thee!
Four tongues now sing its praise,
In freeform's flexible ways—
Upload, adjust, and crop with glee! 🌾

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat(core): add freeform image cropping to inspector' directly and clearly describes the main change: adding a freeform cropping feature to the image crop dialog component.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/core/src/app/components/inspector/image-crop-dialog.tsx`:
- Around line 47-55: The aspect calculation for rectAspect can divide by zero
when initialRect.height or im.naturalHeight are 0, producing NaN/Infinity and
making the comparison fail; update the logic around initialRect && fit ===
'cover' to first check that initialRect.height and im.naturalHeight are truthy
and non-zero and that im.naturalWidth is a finite number, compute rectAspect
only if those guards pass, otherwise treat the rect as degenerate and call
setFit('freeform') and setCrop({ unit: '%', ...initialRect }) (same behavior as
the branch) so setFit, setCrop, rectAspect, aspect, initialRect,
im.naturalWidth, initialRect.height, and im.naturalHeight are all handled
safely.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7145c03c-627f-49b5-8d54-6887c77ce2cc

📥 Commits

Reviewing files that changed from the base of the PR and between d0c2912 and 3850c21.

📒 Files selected for processing (7)
  • .changeset/add-freeform-crop.md
  • packages/core/src/app/components/inspector/image-crop-dialog.tsx
  • packages/core/src/locale/en.ts
  • packages/core/src/locale/ja.ts
  • packages/core/src/locale/types.ts
  • packages/core/src/locale/zh-cn.ts
  • packages/core/src/locale/zh-tw.ts

Comment thread packages/core/src/app/components/inspector/image-crop-dialog.tsx
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