The original prototype used react-image-crop for the cropping library. We decided that the zoom-crop interaction was more important, so we went with react-easy-crop instead. It seemed like it would be easier to add freeform crop to the zoom-crop library than add zoom crop to the freeform library.
After we landed the feature, we found a bug involving rotation+zoom. I gave it a go and quickly realized that fixing that would fundamentally change how the zoom-crop mechanism worked.
The current workaround is to rotate the image with a canvas element. Ideally this would be removed and we wouldn't have to do any canvas manipulation.
I started working out some of the math in a fresh branch, but dropped it before finishing. There's also an incomplete demo of it hosted on GitHub pages. In the demo when sraightening (mislabeled as skewing) the image, notice that the image is also zooming in. A zoom level of 1 should always fill the crop area.
Once the math is worked out, it can be incorporated into react-easy-crop or used in a new library built specifically for WordPress/Gutenberg.
I cannot speak for Valentin, but he seemed open to improvements like freeform crop in his cropping library. Getting freeform crop in there would make it the only open-source React library that has freeform zoom crop. Obviously, open an issue on react-easy-crop first and discuss with him on how he'd like to see it implemented.
It may be helpful to fix the aforementioned bug before starting freeform crop because calculating the bounds for a freeform crop would probably use the same or similar math.
If we were to build a new cropper from scratch these are the existing features that we'd need to reach parity with what we're using with react-easy-crop.
- Scroll for zooming in and out
- Drag image for positioning
- Rotation in 90deg intervals
- Touch events (pinch to zoom, rotate, etc.)
- Common, fixed aspect ratios
- Generate REST API params for
/wp/v2/media/${ id }/edit(dimensions as percentages, angles as degrees, see discussion) - Rule of thirds guides
Then there are the features that I'd like to keep in mind as we're building it.
- Freeform crop (obviously)
- Animated transitions
- Image straighten (rotation in arbitrary angles)
- Image flip/mirror horizontal and vertical
- Perspective crop (would also need an update to WP_Image_Editor, may not be possible with GD)
- Additional grids/guidelines (golden rule, diagonal, etc.)
And as far as implementation
- Use the recently merged REST API that I've been working on. It's set up to be extensible for future types of edits and for doing multiple of the same edit in different orders.
- I would go with CSS transformation for the preview like react-easy-crop does—all features are supported—but using canvas would be a viable alternative. I think it would be easier to get animations when using CSS.
- A public API for the component that can't result in an infinite update loop