Skip to content
File

Blob: docs/deferred/free-form-crop.md

Markdown51 lines

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.