feat: drag and drop images onto canvas

[leowla]

Issue

Drag and drop is a generally expected feature

Solution

Add drag and drop

Risk

Low

Checklist

• Acceptance criteria met
• Continuous integration build passing

Summary by CodeRabbit

• New Features
  • Added drag-and-drop image uploads directly onto the canvas.
  • Displays an upload prompt while files are dragged over the canvas.
  • Supports multiple image drops with positioning offsets.
  • Preserves image proportions, centers images, and scales oversized images to fit the canvas.
  • Shows upload progress and handles invalid file types with notifications.

[linear]

VPS-179

[coderabbitai]

Warning

Review limit reached

Next included review available in 3 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Team

Run ID: 3f7c2622-b0fe-475d-8f84-0e876d68e216

📥 Commits

Reviewing files that changed from the base of the PR and between ca5ed48 and fdea184.

📒 Files selected for processing (1)

• frontend/src/features/authoring/useImageDrop.ts

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Team

Run ID: 934be4d2-2e40-477b-972e-f6464f22e72c

📥 Commits

Reviewing files that changed from the base of the PR and between 4137fc5 and ca5ed48.

📒 Files selected for processing (4)

• frontend/src/features/authoring/ImageCreateMenu.tsx
• frontend/src/features/authoring/canvas/Canvas.tsx
• frontend/src/features/authoring/images.ts
• frontend/src/features/authoring/useImageDrop.ts

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

Image creation logic now resides in shared image helpers. The canvas supports drag-and-drop uploads with file filtering, drop-position placement, upload progress, placeholder handoff, scene updates, and cleanup.

Changes

Image authoring

Layer / File(s)	Summary
Image upload and scene lifecycle frontend/src/features/authoring/images.ts	Shared helpers define accepted MIME types, create bounded image geometry, manage previews and uploads, preload results, update the originating scene, and clean up temporary resources.
Canvas drop handling frontend/src/features/authoring/useImageDrop.ts	The new hook tracks drag state, rejects unsupported files, converts drop coordinates, and starts cascading uploads for accepted files.
Canvas and menu integration frontend/src/features/authoring/canvas/Canvas.tsx, frontend/src/features/authoring/ImageCreateMenu.tsx	The canvas wires the drop handlers and status overlay. The menu imports shared image operations and constants. Estimated code review effort: 4 (Complex)

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Canvas
  participant useImageDrop
  participant addNewImage
  participant OriginScene
  User->>Canvas: Drop image files
  Canvas->>useImageDrop: Handle drop event
  useImageDrop->>addNewImage: Upload accepted files at drop coordinates
  addNewImage->>OriginScene: Add uploaded image and update scene
  OriginScene-->>Canvas: Render image in scene

Loading

Suggested reviewers: harbassan, rgin216

Merge Risk: 🟡 Moderate · up to ca5ed

Bulk image drops can start an unbounded number of uploads, and a failure after upload may leave files without a corresponding scene reference. Add admission limits and reliable cleanup or recovery, or obtain explicit owner acceptance before merging.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 15.79% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 19 functions across 4 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding drag-and-drop image support to the canvas.
Description check	✅ Passed	The description includes the required Issue, Solution, Risk, and Checklist sections. It confirms acceptance criteria and continuous integration status. The Wiki documentation, unit test, and integrati…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Description check

Explanation

The description includes the required Issue, Solution, Risk, and Checklist sections. It confirms acceptance criteria and continuous integration status. The Wiki documentation, unit test, and integration test checklist items are not addressed, but the description is otherwise complete and relevant.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}