Skip to content

feat(ui): crop tool #8562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 34 commits into from
Sep 17, 2025
Merged

feat(ui): crop tool #8562

merged 34 commits into from
Sep 17, 2025

Conversation

psychedelicious
Copy link
Collaborator

@psychedelicious psychedelicious commented Sep 12, 2025 •
edited
Loading

Summary

  • Add crop tool
  • Enabled only on Video tab

Related Issues / Discussions

n/a

QA Instructions

It's only on the video tab and only partially integrated.

Merge Plan

n/a

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • ❗Changes to a redux slice have a corresponding migration
  • Documentation added / updated (if applicable)
  • Updated What's New copy (if doing a release after this PR)

@github-actions github-actions bot added the frontend PRs that change frontend files label Sep 12, 2025
@psychedelicious psychedelicious force-pushed the maryhipp/starting-frame-crop branch from 7d98d66 to e9a79ae Compare September 15, 2025 10:03
@psychedelicious psychedelicious marked this pull request as ready for review September 15, 2025 13:03
@psychedelicious psychedelicious enabled auto-merge (rebase) September 16, 2025 08:24
@psychedelicious psychedelicious force-pushed the maryhipp/starting-frame-crop branch from 4ceeaa2 to c2683b2 Compare September 16, 2025 08:24
@psychedelicious psychedelicious changed the title feat(ui): mini image editor (crop only) feat(ui): crop tool Sep 16, 2025
@psychedelicious psychedelicious force-pushed the maryhipp/starting-frame-crop branch 3 times, most recently from 312695e to 2a42a9c Compare September 17, 2025 03:34
@psychedelicious
Copy link
Collaborator Author

Add support for cropping global ref images. This requires quite a few changes scattered around. Thankfully, it's mostly TS whack-a-mole.

This means we are changing the zod schema for ref images (from zImageWithDims to zCroppableImageWithDims). Without care, this would break metadata recall and loading/rehydrating persisted client state. The simplest way I could figure out to handle this is to use zod's "preprocess" API to migrate. See comments for zCroppableImageWithDims for details.

I tested this strategy for both metadata recall and rehydrating client state and it works fine.

Mary Hipp and others added 15 commits September 17, 2025 13:39
@psychedelicious
show warning state with tooltip if starting frame image aspect ratio …
1f6a9a9 
…does not match the video output aspect ratio'
@psychedelicious
create editImageModal that takes an imageDTO, loads blob onto canvas,…
a266ce5 
… and allows cropping. cropped blob is uploaded as new asset
@psychedelicious
chore(ui): lint
7dda6c8
@psychedelicious
tidy(ui): editor cleanup
1d7ca99
@psychedelicious
tidy(ui): editor component cleanup
01ae8bc
@psychedelicious
feat(ui): tweak editor konva styles
625ff1f
@psychedelicious
feat(ui): image editor bg checkerboard pattern
3b27902
@psychedelicious
tidy(ui): lint/react conventions for editor component
5bdb854
@psychedelicious
feat(ui): type narrowing for editor output types
9575a55
@psychedelicious
feat(ui): misc iterate on editor
33dcb34
@psychedelicious
tidy(ui): cleanup
0fcd2bd
@psychedelicious
feat(ui): crop doesn't hide outside cropped region
2ef777c
@psychedelicious
feat(ui): do not clear crop when canceling
03a6ddc
@psychedelicious
chore(ui): lint
e310346
@psychedelicious
refactor(ui): editor init
8058431
@psychedelicious
refactor(ui): editor (wip)
320a601
@psychedelicious
refactor(ui): editor (wip)
d702958
@psychedelicious
refactor(ui): editor (wip)
583140b
@psychedelicious
feat(ui): clean up editor
fb78067
@psychedelicious
feat(ui): extract config to own obj
4105612
@psychedelicious
refactor(ui): simplify crop constraints
436de45
@psychedelicious
tidy(ui): editor listeners
2d56bb6
@psychedelicious
tidy(ui): editor misc
68924e6
@psychedelicious
docs(ui): add comments to editor
3503231
@psychedelicious
feat(ui): add concept for editable image state
00f34a0
@psychedelicious
feat(ui): make the editor components not care about the image
e8eee55
@psychedelicious
docs(ui): add comments to startingframeimage
410e68a
@psychedelicious
fix(ui): video graphs
0d21715
@psychedelicious
refactor(ui): remove "apply", "start" and "cancel" concepts from editor
aa8f028
@psychedelicious
feat(ui): revert to original image when crop discarded
6e33657
@psychedelicious
fix(ui): store floats for box
6442461
@psychedelicious
tidy(ui): rename from "editor" to "cropper", minor cleanup
c4e8175
@psychedelicious
fix(ui): issue w/ setting initial aspect ratio in cropper
c8211eb
@psychedelicious
feat(ui): make ref images croppable
2c3d60c
@psychedelicious psychedelicious force-pushed the maryhipp/starting-frame-crop branch from 2a42a9c to 2c3d60c Compare September 17, 2025 03:39
@psychedelicious psychedelicious enabled auto-merge (rebase) September 17, 2025 03:39
@psychedelicious psychedelicious merged commit e0d7a40 into main Sep 17, 2025
13 checks passed
@psychedelicious psychedelicious deleted the maryhipp/starting-frame-crop branch September 17, 2025 03:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@hipsterusername hipsterusername hipsterusername approved these changes

@blessedcoolant blessedcoolant Awaiting requested review from blessedcoolant blessedcoolant is a code owner

@maryhipp maryhipp Awaiting requested review from maryhipp maryhipp is a code owner

Assignees
No one assigned
Labels
frontend PRs that change frontend files
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@psychedelicious @hipsterusername