feat: Enable image replacement via drag and drop

[Copilot]

Overview

This PR enables users to replace existing images by dragging and dropping new images onto them, improving the workflow for editing and updating images in the application.

Problem

Previously, the drag-and-drop functionality only worked on empty/default canvas panels. When users tried to drag and drop a new image onto a canvas that already contained an image, nothing would happen. The only way to replace an image was to delete the existing layer and create a new one, which was inefficient.

Solution

Modified the drop event handler in imgkit/index.js to:

1. Accept drops on all canvas states (both empty and full)
2. Load the dropped image into the target canvas, replacing any existing image
3. Only create a new empty layer when dropping on an empty canvas (preserving the original behavior)

Technical Changes

File Modified: imgkit/index.js (lines 348-383)

The key change was restructuring the drop event listener:

• Before: Wrapped all logic in if (this.canvas.id !== "full") which blocked drops on existing images
• After: Moved createDefaultImage() call inside a conditional check, allowing drops on all canvases while only creating new layers when appropriate

Behavior

Before

• ✅ Drop on empty canvas → loads image, creates new layer
• ❌ Drop on existing image → blocked, nothing happens

After

• ✅ Drop on empty canvas → loads image, creates new layer (unchanged)
• ✅ Drop on existing image → replaces image, no new layer created (new feature)

Testing

• ✅ Build completes successfully with no errors
• ✅ Syntax validated
• ✅ No breaking changes to existing functionality
• ✅ Both file path and ArrayBuffer-based drops supported

This change provides a more intuitive user experience by allowing quick image replacement through drag and drop, reducing the number of steps needed to update an image in the workspace.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>feat: Enable image replacement via drag and drop</issue_title>
<issue_description></issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #48

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[volta2030]

LGTM