feat: add live mouse coordinate display on canvas

[Copilot]

Adds real-time coordinate tracking that displays mouse position ( x , y ) when hovering over image canvas, positioned above the image size indicator.

Changes

Template & Styling (imgkit/index.html, imgkit/imgpanel.css)

• Added coord-text element positioned at bottom: 36px (24px above image size display)
• Displays ( - , - ) when mouse is not over canvas

Event Handler (imgkit/features/image_layer_events.js)

• New setupCoordinateDisplay() method tracks mousemove events
• Calculates pixel coordinates relative to canvas origin (top-left = 0,0)
• Resets on mouseleave

Layer Reference (imgkit/core/image_layer.js)

• Added coordText DOM reference in createPanelFromTemplate()

Example

setupCoordinateDisplay() {
  this.layer.canvas.addEventListener("mousemove", (e) => {
    const rect = this.layer.canvas.getBoundingClientRect();
    const x = Math.floor(e.clientX - rect.left);
    const y = Math.floor(e.clientY - rect.top);
    this.layer.coordText.textContent = `( ${x} , ${y} )`;
  });
  
  this.layer.canvas.addEventListener("mouseleave", () => {
    this.layer.coordText.textContent = "( - , - )";
  });
}

Screenshots

Default state:

Live tracking at (200, 150):

Different position (100, 50):

Original prompt

---

This section details on the original issue you should resolve

<issue_title>feat: display image coordinates</issue_title>
<issue_description>- live coordinate display of mouse moving on the canvas

• display on left to image size display
• display style is ( x , y )</issue_description>

<agent_instructions>Clear and intuitive coding</agent_instructions>

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

• Fixes feat: display image coordinates #68

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[volta2030]

Very good