fix(preview): enable text element dragging in preview panel

[nino-chavez]

Summary

Fixes the issue where text elements could not be dragged/repositioned in the video preview panel.

Root cause: After the preview was refactored to canvas-based rendering for performance, text elements were only drawn on canvas with no DOM elements to capture mouse events. The drag handlers existed but had nothing to attach to.

Solution: Added an invisible DOM overlay layer that:

• Renders a transparent div positioned over each text element
• Uses the same positioning formula as the canvas renderer
• Captures mouse events to trigger the existing drag handlers
• Allows users to click and drag text to reposition it

Related Issue

Fixes #614

Technical Details

• Overlay divs are invisible (opacity: 0) - canvas still renders the actual text
• Position calculated using: posX = previewWidth/2 + text.x * scaleX
• Hit area sized based on font size and text content length
• Drag state management was already implemented, just needed DOM binding

Test plan

• Add default text to timeline
• In preview panel, hover over text - cursor shows grab icon
• Click and drag text - it moves to new position
• Release mouse - text stays at new position
• Position persists when seeking timeline

🤖 Generated with Claude Code

[vercel]

@nino-chavez is attempting to deploy a commit to the OpenCut OSS Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

👷 Deploy request for appcut pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	ae1846b

[coderabbitai]

Warning

Rate limit exceeded

@nino-chavez has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 16 minutes and 13 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

---

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 and usage tips.}