Fix: Update focus when dragging file over image panel

[Copilot]

Problem

When dragging and dropping an image file onto a specific image panel, the focus was not being updated to that panel before the drop occurred. This made it unclear which panel would receive the dropped file, especially when multiple image panels were present.

Solution

Added a dragenter event listener to the canvas element that automatically updates the focus when a user drags a file over a specific image panel. This provides immediate visual feedback (via the panel border highlight) indicating which panel will receive the file.

Changes

• File: imgkit/index.js
• Location: Added event listener in the build() method of the ImageLayer class

The new event handler:

1. Identifies which image panel is being dragged over
2. Updates Parameter.num to point to that panel
3. Calls updateFocus() to add a visual border to the focused panel
4. Calls updateSio() to ensure UI elements are properly displayed

This follows the same pattern as the existing click event handler, ensuring consistency throughout the codebase.

Benefits

• Better UX: Users can now see which panel will receive their dropped file before releasing the mouse button
• Visual feedback: The focused panel displays a border, making the target clear
• Consistent behavior: Drag-to-focus now works the same way as click-to-focus
• Minimal change: Only 9 lines added, no existing functionality modified

Example

Before: Dragging a file over Panel B while Panel A is focused → file drops on Panel A (confusing)

After: Dragging a file over Panel B → Panel B immediately becomes focused with visible border → file drops on Panel B (intuitive)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Update focus when drag specific image panel</issue_title>
<issue_description>
Before dragging and dropping an image, make sure the image is focused on the drag point.</issue_description>

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

Fixes #45

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[volta2030]

LGTM