Skip to content

custom freeform cropper#76516

Closed
ramonjd wants to merge 3 commits intoWordPress:trunkfrom
ramonjd:ramonjd/custom-freeform-cropper
Closed

custom freeform cropper#76516
ramonjd wants to merge 3 commits intoWordPress:trunkfrom
ramonjd:ramonjd/custom-freeform-cropper

Conversation

@ramonjd
Copy link
Copy Markdown
Member

@ramonjd ramonjd commented Mar 15, 2026

Kapture.2026-03-16.at.10.48.34.mp4

What?

Closes

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Before After

Use of AI Tools

ramonjd and others added 3 commits March 16, 2026 09:47
…/screen separation

Replace hand-rolled trigonometry with gl-matrix mat2d and introduce a
world/camera/screen coordinate system for the image cropper.

- Add gl-matrix dependency, core/camera.ts module
- Implement createCamera, worldToScreen, screenToWorld, restrictPanZoom
- Implement createExportCamera for canvas export
- Remove freeform/polygon code (deferred from MVP)
- Migrate all hooks to use camera abstraction
- CSS matrix() transform from camera mat2d
- Fix pan restriction at non-zero rotation (visual aspect ratio bug)
- Add image-cropper-next to storybook config and root tsconfig
- 134 tests passing

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The crop rect lives in visual-normalized space where width and height
are fractions of different pixel dimensions (visualW vs visualH).
Aspect ratio comparisons must account for this.

- rectangle-stencil: compare pixel aspect ratio during drag resize
- story: use rotation-dependent visual aspect ratio (not natural)
  when computing crop rect for selected aspect ratio

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When aspectRatio is set on the Cropper component:
- Only corner handles are shown (edge handles hidden)
- Dragging a corner preserves the aspect ratio — the larger pixel
  delta drives, the other axis follows from the ratio
- The opposite corner stays anchored
- The crop rect is clamped to [0,1] bounds while maintaining ratio

Also:
- Add aspectRatio to StencilProps so it flows through the Cropper
- Wire aspectRatio from Cropper to stencil component
- Story passes aspectRatio to Cropper when a ratio is selected

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@ramonjd ramonjd closed this Mar 18, 2026
@ramonjd ramonjd deleted the ramonjd/custom-freeform-cropper branch March 18, 2026 05:19
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