Step 15 - images

1 min czytania

Implement the 'image' element type.

Upload: toolbar image button + paste-from-clipboard + drag-and-drop onto the canvas. Client-side validation: file.type must start with image/, max 5 MB. Upload to Storage at boards/{boardId}/{uid}-{timestamp}.{ext}; storage rules allow writes for signed-in org members only (guests cannot upload), images only, under 5 MB. Store the download URL in el.src and size the element to the natural aspect ratio scaled into the current view.

Rendering:

maintain a decoded-image cache (Map from src to HTMLImageElement) so the render loop never re-decodes; load with crossOrigin='anonymous' so future canvas exports stay untainted; schedule a render when a load completes. Draw honoring el.rotation (degrees) around the element center.

Manipulation:

  • Selection frame that rotates with the image: corner resize handles + a rotate knob above the top edge.
  • Map pointer coords into the image's un-rotated local frame for handle hit-testing (toImageLocal helper in the util module, with a spec).
  • Corner resize preserves aspect ratio; rotation snaps to 15-degree steps while shift is held.

Acceptance: upload, paste and drop all work; a rotated image resizes correctly from its corners; a guest sees uploads live but cannot upload; images survive reload via their Storage URLs.

Dyskusja

Komentarze: 0

Brak komentarzy. Rozpocznij dyskusję.