Blob: docs/deferred/free-form-crop.md
Deferred: true free-form crop, layers, text, drawing
Goal
Let users drag crop-box corners to any rectangle (independent width and height), and eventually add overlays: text, shapes, stickers, brush/mask drawing.
Why it is not in the current build
react-easy-crop was chosen because cropping and templates are the core feature and it gives a polished, tiny crop UI quickly. But it is aspect-based and has no resizable crop box. The current app exposes aspect presets plus an "Original" (source-ratio) mode; it cannot do arbitrary corner-drag cropping, and it has no overlay/drawing layer.
Recommended approach
Move the interactive canvas to react-konva (Konva) when this ambition is wanted. Konva gives layers, a draggable/resizable Transformer (free crop), text nodes, shapes, and a drawing surface.
Migration notes:
- Replace EditorCanvas's Cropper with a Konva Stage that draws the image and a Transformer-bound crop rectangle. Keep the same EditorState reducer shape where possible; the crop rect becomes free (x, y, width, height) rather than aspect + pan + zoom.
- The export worker already takes a PixelRect crop and an output size, so most of layer 2/3 is reusable. The change is mainly how the crop rect is produced.
- Overlays (text/shapes) would need to be rasterized into the export. Either render the Konva stage region to a canvas and hand that to the worker, or pass overlay descriptors to the worker to draw. Rendering the composited stage to a bitmap on the main thread and transferring it is simplest.
Trade-offs
- Bundle size and complexity go up notably versus react-easy-crop (~5 kB).
- The clean separation (worker does pure pixel ops from a rect) blurs once overlays exist, because overlays are produced on the main thread.
Effort
Medium for free-form crop alone; large once text/drawing/layers are included.
Acceptance checks
- A crop rectangle can be resized by corners to any aspect, and the export matches the rectangle exactly.
- If overlays are added: text/shapes appear in the export at the right position and resolution.