Add image paste and drag-drop support to replace default "R" box

[Copilot]

The default "R" box visualization is now replaceable. Users can paste images from clipboard (Ctrl/Cmd+V) or drag-drop image files onto the canvas. Images respond to affine transformations identically to the original box.

Changes

Canvas state management:

• Added customImage: HTMLImageElement | null to store loaded images
• New setCustomImage(dataUrl: string) method handles image loading with error fallback

Event handling:

• Window-level paste listener processes ClipboardEvent for image items
• Canvas drag-drop listeners prevent default behavior and handle file drops
• loadImageFromFile() converts File objects to data URLs via FileReader

Rendering logic:

• Modified drawRect() to check for custom image before rendering default "R" text
• Images drawn via ctx.drawImage() into the same 100×100 rectangle

private drawRect(x: number, y: number, width: number, height: number, fill: string) {
  // ... rect drawing code ...
  
  if (this.customImage) {
    ctx.drawImage(this.customImage, x, y, width, height)
  } else if (this.fontsReady) {
    // Default "R" text
  }
}

Screenshots

Default state:

After pasting SVG:

Multiple pastes replace (blue square replaces red circle):

Transforms apply correctly (2x horizontal scale):

PNG support:

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Allow pasting in svgs or images</issue_title>
<issue_description>The box with an R doesn't really make sense as the only thing you can use in the app. You should be able to past in svgs or other images and have them respond to the different affine transforms. Ideally you can paste or drag/drop the file onto the page to replace the R box. Images shouldn't stack, they will just replace the last thing that was pasted in.</issue_description>

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

• Fixes Allow pasting in svgs or images #11

---

💡 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.