a4ab1a7f84
<!-- This is an auto-generated description by cubic. --> ## Summary by cubic Adds an in-app screenshot annotator to the Preview panel for Pro users so you can capture the current app view, draw or add text, and submit an annotated image to chat. - **New Features** - Pen button in PreviewIframe to toggle annotator; captures a screenshot via worker messaging and displays it in a Konva canvas. - Tools: select, freehand draw, and draggable text; supports undo/redo, delete, and resizing with Transformer. Canvas scales to the container. Includes a color picker. - Submit exports a PNG and attaches it to the chat via useAttachments; prefills the chat input; annotator auto-closes after submit. - Pro-only: non-Pro users see an upsell screen. - State atoms added: annotatorModeAtom, screenshotDataUrlAtom, attachmentsAtom; PreviewIframe now handles dyad-screenshot-response messages. - **Dependencies** - Added konva, react-konva, perfect-freehand, and html-to-image. - Proxy now injects html-to-image and the new dyad-screenshot-client.js for screenshot capture. <sup>Written for commit 580aca271c5993a0dc7426e36e34393e073bd67b. Summary will update automatically on new commits.</sup> <!-- End of auto-generated description by cubic. -->
57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
(() => {
|
|
async function captureScreenshot() {
|
|
try {
|
|
// Use html-to-image if available
|
|
if (typeof htmlToImage !== "undefined") {
|
|
return await htmlToImage.toPng(document.body, {
|
|
width: document.documentElement.scrollWidth,
|
|
height: document.documentElement.scrollHeight,
|
|
});
|
|
}
|
|
throw new Error("html-to-image library not found");
|
|
} catch (error) {
|
|
console.error("[dyad-screenshot] Failed to capture screenshot:", error);
|
|
throw error;
|
|
}
|
|
}
|
|
async function handleScreenshotRequest() {
|
|
try {
|
|
console.debug("[dyad-screenshot] Capturing screenshot...");
|
|
|
|
const dataUrl = await captureScreenshot();
|
|
|
|
console.debug("[dyad-screenshot] Screenshot captured successfully");
|
|
|
|
// Send success response to parent
|
|
window.parent.postMessage(
|
|
{
|
|
type: "dyad-screenshot-response",
|
|
success: true,
|
|
dataUrl: dataUrl,
|
|
},
|
|
"*",
|
|
);
|
|
} catch (error) {
|
|
console.error("[dyad-screenshot] Screenshot capture failed:", error);
|
|
|
|
// Send error response to parent
|
|
window.parent.postMessage(
|
|
{
|
|
type: "dyad-screenshot-response",
|
|
success: false,
|
|
error: error.message,
|
|
},
|
|
"*",
|
|
);
|
|
}
|
|
}
|
|
|
|
window.addEventListener("message", (event) => {
|
|
if (event.source !== window.parent) return;
|
|
|
|
if (event.data.type === "dyad-take-screenshot") {
|
|
handleScreenshotRequest();
|
|
}
|
|
});
|
|
})();
|