Skip to content

B
bit-pm
Unverified 提交 a4ab1a7f authored 作者: Mohamed Aziz Mejri's avatar Mohamed Aziz Mejri 提交者： GitHub
浏览文件
操作

Annotator (#1861)

<!-- 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. -->
上级 86e40057
隐藏空白字符变更
内嵌 并排
正在显示 包含 1734 行增加 和 238 行删除
e2e-tests/annotator.spec.ts 0 → 100644
浏览文件 @ a4ab1a7f
import { testSkipIfWindows } from "./helpers/test_helper";
import { expect } from "@playwright/test";
import fs from "fs";
testSkipIfWindows(
"annotator - capture and submit screenshot",
async ({ po }) => {
await po.setUpDyadPro({ autoApprove: true });
// Create a basic app
await po.sendPrompt("basic");
// Click the annotator button to activate annotator mode
await po.clickPreviewAnnotatorButton();
// Wait for annotator mode to be active
await po.waitForAnnotatorMode();
// Submit the screenshot to chat
await po.clickAnnotatorSubmit();
await expect(po.getChatInput()).toContainText(
"Please update the UI based on these screenshots",
);
// Verify the screenshot was attached to chat context
await po.sendPrompt("[dump]");
// Wait for the LLM response containing the dump path to appear in the UI
// before attempting to extract it from the messages list
await po.page.waitForSelector("text=/\\[\\[dyad-dump-path=.*\\]\\]/");
// Get the dump file path from the messages list
const messagesListText = await po.page
.getByTestId("messages-list")
.textContent();
const dumpPathMatch = messagesListText?.match(
/\[\[dyad-dump-path=([^\]]+)\]\]/,
);
if (!dumpPathMatch) {
throw new Error("No dump path found in messages list");
}
const dumpFilePath = dumpPathMatch[1];
const dumpContent = fs.readFileSync(dumpFilePath, "utf-8");
const parsedDump = JSON.parse(dumpContent);
// Get the last message from the dump
const messages = parsedDump.body.messages;
const lastMessage = messages[messages.length - 1];
expect(lastMessage).toBeTruthy();
expect(lastMessage.content).toBeTruthy();
// The content is an array with text and image parts
expect(Array.isArray(lastMessage.content)).toBe(true);
// Find the text part and verify it mentions the PNG attachment
const textPart = lastMessage.content.find(
(part: any) => part.type === "text",
);
expect(textPart).toBeTruthy();
expect(textPart.text).toMatch(/annotated-screenshot-.*\.png/);
expect(textPart.text).toMatch(/image\/png/);
// Find the image part and verify it has the correct structure
const imagePart = lastMessage.content.find(
(part: any) => part.type === "image_url",
);
expect(imagePart).toBeTruthy();
expect(imagePart.image_url).toBeTruthy();
expect(imagePart.image_url.url).toMatch(/^data:image\/png;base64,/);
},
);
e2e-tests/helpers/test_helper.ts
浏览文件 @ a4ab1a7f
...@@ -553,6 +553,22 @@ export class PageObject { ...@@ -553,6 +553,22 @@ export class PageObject {
await this.page.getByTestId("preview-open-browser-button").click(); await this.page.getByTestId("preview-open-browser-button").click();
} }
async clickPreviewAnnotatorButton() {
await this.page
.getByTestId("preview-annotator-button")
.click({ timeout: Timeout.EXTRA_LONG });
}
async waitForAnnotatorMode() {
// Wait for the annotator toolbar to be visible
await expect(this.page.getByRole("button", { name: "Select" })).toBeVisible(
{ timeout: Timeout.MEDIUM },
);
}
async clickAnnotatorSubmit() {
await this.page.getByRole("button", { name: "Add to Chat" }).click();
}
locateLoadingAppPreview() { locateLoadingAppPreview() {
return this.page.getByText("Preparing app preview..."); return this.page.getByText("Preparing app preview...");
} }
......
forge.config.ts
浏览文件 @ a4ab1a7f
...@@ -32,6 +32,9 @@ const ignore = (file: string) => { ...@@ -32,6 +32,9 @@ const ignore = (file: string) => {
if (file.startsWith("/node_modules/stacktrace-js/dist")) { if (file.startsWith("/node_modules/stacktrace-js/dist")) {
return false; return false;
} }
if (file.startsWith("/node_modules/html-to-image")) {
return false;
}
if (file.startsWith("/node_modules/better-sqlite3")) { if (file.startsWith("/node_modules/better-sqlite3")) {
return false; return false;
} }
......
package-lock.json
浏览文件 @ a4ab1a7f
...@@ -69,17 +69,21 @@ ...@@ -69,17 +69,21 @@
"framer-motion": "^12.6.3", "framer-motion": "^12.6.3",
"geist": "^1.3.1", "geist": "^1.3.1",
"glob": "^11.0.2", "glob": "^11.0.2",
"html-to-image": "^1.11.13",
"isomorphic-git": "^1.30.1", "isomorphic-git": "^1.30.1",
"jotai": "^2.12.2", "jotai": "^2.12.2",
"kill-port": "^2.0.1", "kill-port": "^2.0.1",
"konva": "^10.0.12",
"lexical": "^0.33.1", "lexical": "^0.33.1",
"lexical-beautiful-mentions": "^0.1.47", "lexical-beautiful-mentions": "^0.1.47",
"lucide-react": "^0.487.0", "lucide-react": "^0.487.0",
"monaco-editor": "^0.52.2", "monaco-editor": "^0.52.2",
"openai": "^4.91.1", "openai": "^4.91.1",
"perfect-freehand": "^1.2.2",
"posthog-js": "^1.236.3", "posthog-js": "^1.236.3",
"react": "^19.2.1", "react": "^19.0.0",
"react-dom": "^19.2.1", "react-dom": "^19.0.0",
"react-konva": "^19.2.1",
"react-markdown": "^10.1.0", "react-markdown": "^10.1.0",
"react-resizable-panels": "^2.1.7", "react-resizable-panels": "^2.1.7",
"react-shiki": "^0.9.0", "react-shiki": "^0.9.0",
...@@ -7061,6 +7065,15 @@ ...@@ -7061,6 +7065,15 @@
"@types/react": "^19.0.0" "@types/react": "^19.0.0"
} }
}, },
"node_modules/@types/react-reconciler": {
"version": "0.32.3",
"resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.32.3.tgz",
"integrity": "sha512-cMi5ZrLG7UtbL7LTK6hq9w/EZIRk4Mf1Z5qHoI+qBh7/WkYkFXQ7gOto2yfUvPzF5ERMAhaXS5eTQ2SAnHjLzA==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*"
}
},
"node_modules/@types/responselike": { "node_modules/@types/responselike": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
...@@ -12885,6 +12898,43 @@ ...@@ -12885,6 +12898,43 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/html-dom-parser": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.1.1.tgz",
"integrity": "sha512-+o4Y4Z0CLuyemeccvGN4bAO20aauB2N9tFEAep5x4OW34kV4PTarBHm6RL02afYt2BMKcr0D2Agep8S3nJPIBg==",
"license": "MIT",
"dependencies": {
"domhandler": "5.0.3",
"htmlparser2": "10.0.0"
}
},
"node_modules/html-react-parser": {
"version": "5.2.6",
"resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.2.6.tgz",
"integrity": "sha512-qcpPWLaSvqXi+TndiHbCa+z8qt0tVzjMwFGFBAa41ggC+ZA5BHaMIeMJla9g3VSp4SmiZb9qyQbmbpHYpIfPOg==",
"license": "MIT",
"dependencies": {
"domhandler": "5.0.3",
"html-dom-parser": "5.1.1",
"react-property": "2.0.2",
"style-to-js": "1.1.17"
},
"peerDependencies": {
"@types/react": "0.14 || 15 || 16 || 17 || 18 || 19",
"react": "0.14 || 15 || 16 || 17 || 18 || 19"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/html-to-image": {
"version": "1.11.13",
"resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
"integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
"license": "MIT"
},
"node_modules/html-url-attributes": { "node_modules/html-url-attributes": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz", "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
...@@ -13798,6 +13848,27 @@ ...@@ -13798,6 +13848,27 @@
"url": "https://github.com/sponsors/dmonad" "url": "https://github.com/sponsors/dmonad"
} }
}, },
"node_modules/its-fine": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz",
"integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==",
"license": "MIT",
"dependencies": {
"@types/react-reconciler": "^0.28.9"
},
"peerDependencies": {
"react": "^19.0.0"
}
},
"node_modules/its-fine/node_modules/@types/react-reconciler": {
"version": "0.28.9",
"resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
"integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*"
}
},
"node_modules/jackspeak": { "node_modules/jackspeak": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz",
...@@ -14010,6 +14081,26 @@ ...@@ -14010,6 +14081,26 @@
"integrity": "sha512-jyVd+kU2X+mWKMmGhx4fpWbPsjvD53k9ivqetutVW/BQ+WIZoDoP4d8vUMGezV6saZsiNoW2f9GIhg9Dondohg==", "integrity": "sha512-jyVd+kU2X+mWKMmGhx4fpWbPsjvD53k9ivqetutVW/BQ+WIZoDoP4d8vUMGezV6saZsiNoW2f9GIhg9Dondohg==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/konva": {
"version": "10.0.12",
"resolved": "https://registry.npmjs.org/konva/-/konva-10.0.12.tgz",
"integrity": "sha512-DHmkeG5FbW6tLCkbMQTi1ihWycfzljrn0V7umUUuewxx7aoINcI71ksgBX9fTPNXhlsK4/JoMgKwI/iCde+BRw==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/lavrton"
},
{
"type": "opencollective",
"url": "https://opencollective.com/konva"
},
{
"type": "github",
"url": "https://github.com/sponsors/lavrton"
}
],
"license": "MIT"
},
"node_modules/levn": { "node_modules/levn": {
"version": "0.4.1", "version": "0.4.1",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
...@@ -17170,6 +17261,12 @@ ...@@ -17170,6 +17261,12 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/perfect-freehand": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/perfect-freehand/-/perfect-freehand-1.2.2.tgz",
"integrity": "sha512-eh31l019WICQ03pkF3FSzHxB8n07ItqIQ++G5UV8JX0zVOXzgTGCqnRR0jJ2h9U8/2uW4W4mtGJELt9kEV0CFQ==",
"license": "MIT"
},
"node_modules/pg-int8": { "node_modules/pg-int8": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz", "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
...@@ -17797,6 +17894,37 @@ ...@@ -17797,6 +17894,37 @@
"license": "MIT", "license": "MIT",
"peer": true "peer": true
}, },
"node_modules/react-konva": {
"version": "19.2.1",
"resolved": "https://registry.npmjs.org/react-konva/-/react-konva-19.2.1.tgz",
"integrity": "sha512-sqZWCzQGpdMrU5aeunR0oxUY8UeCPbU8gnAYxMtAn6BT4coeSpiATKOctsoxRu6F56TAcF+s0c6Lul9ansNqQA==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/lavrton"
},
{
"type": "opencollective",
"url": "https://opencollective.com/konva"
},
{
"type": "github",
"url": "https://github.com/sponsors/lavrton"
}
],
"license": "MIT",
"dependencies": {
"@types/react-reconciler": "^0.32.3",
"its-fine": "^2.0.0",
"react-reconciler": "0.33.0",
"scheduler": "0.27.0"
},
"peerDependencies": {
"konva": "^8.0.1 || ^7.2.5 || ^9.0.0 || ^10.0.0",
"react": "^19.2.0",
"react-dom": "^19.2.0"
}
},
"node_modules/react-markdown": { "node_modules/react-markdown": {
"version": "10.1.0", "version": "10.1.0",
"resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz", "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
...@@ -17824,6 +17952,27 @@ ...@@ -17824,6 +17952,27 @@
"react": ">=18" "react": ">=18"
} }
}, },
"node_modules/react-property": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
"integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==",
"license": "MIT"
},
"node_modules/react-reconciler": {
"version": "0.33.0",
"resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.33.0.tgz",
"integrity": "sha512-KetWRytFv1epdpJc3J4G75I4WrplZE5jOL7Yq0p34+OVOKF4Se7WrdIdVC45XsSSmUTlht2FM/fM1FZb1mfQeA==",
"license": "MIT",
"dependencies": {
"scheduler": "^0.27.0"
},
"engines": {
"node": ">=0.10.0"
},
"peerDependencies": {
"react": "^19.2.0"
}
},
"node_modules/react-refresh": { "node_modules/react-refresh": {
"version": "0.17.0", "version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
......
package.json
浏览文件 @ a4ab1a7f
...@@ -145,17 +145,21 @@ ...@@ -145,17 +145,21 @@
"framer-motion": "^12.6.3", "framer-motion": "^12.6.3",
"geist": "^1.3.1", "geist": "^1.3.1",
"glob": "^11.0.2", "glob": "^11.0.2",
"html-to-image": "^1.11.13",
"isomorphic-git": "^1.30.1", "isomorphic-git": "^1.30.1",
"jotai": "^2.12.2", "jotai": "^2.12.2",
"kill-port": "^2.0.1", "kill-port": "^2.0.1",
"konva": "^10.0.12",
"lexical": "^0.33.1", "lexical": "^0.33.1",
"lexical-beautiful-mentions": "^0.1.47", "lexical-beautiful-mentions": "^0.1.47",
"lucide-react": "^0.487.0", "lucide-react": "^0.487.0",
"monaco-editor": "^0.52.2", "monaco-editor": "^0.52.2",
"openai": "^4.91.1", "openai": "^4.91.1",
"perfect-freehand": "^1.2.2",
"posthog-js": "^1.236.3", "posthog-js": "^1.236.3",
"react": "^19.2.1", "react": "^19.0.0",
"react-dom": "^19.2.1", "react-dom": "^19.0.0",
"react-konva": "^19.2.1",
"react-markdown": "^10.1.0", "react-markdown": "^10.1.0",
"react-resizable-panels": "^2.1.7", "react-resizable-panels": "^2.1.7",
"react-shiki": "^0.9.0", "react-shiki": "^0.9.0",
......
src/atoms/chatAtoms.ts
浏览文件 @ a4ab1a7f
import type { Message } from "@/ipc/ipc_types"; import type { FileAttachment, Message } from "@/ipc/ipc_types";
import { atom } from "jotai"; import { atom } from "jotai";
import type { ChatSummary } from "@/lib/schemas"; import type { ChatSummary } from "@/lib/schemas";
...@@ -20,3 +20,5 @@ export const chatsLoadingAtom = atom<boolean>(false); ...@@ -20,3 +20,5 @@ export const chatsLoadingAtom = atom<boolean>(false);
// Used for scrolling to the bottom of the chat messages (per chat) // Used for scrolling to the bottom of the chat messages (per chat)
export const chatStreamCountByIdAtom = atom<Map<number, number>>(new Map()); export const chatStreamCountByIdAtom = atom<Map<number, number>>(new Map());
export const recentStreamChatIdsAtom = atom<Set<number>>(new Set<number>()); export const recentStreamChatIdsAtom = atom<Set<number>>(new Set<number>());
export const attachmentsAtom = atom<FileAttachment[]>([]);
src/atoms/previewAtoms.ts
浏览文件 @ a4ab1a7f
...@@ -15,6 +15,9 @@ export const currentComponentCoordinatesAtom = atom<{ ...@@ -15,6 +15,9 @@ export const currentComponentCoordinatesAtom = atom<{
export const previewIframeRefAtom = atom<HTMLIFrameElement | null>(null); export const previewIframeRefAtom = atom<HTMLIFrameElement | null>(null);
export const annotatorModeAtom = atom<boolean>(false);
export const screenshotDataUrlAtom = atom<string | null>(null);
export const pendingVisualChangesAtom = atom<Map<string, VisualEditingChange>>( export const pendingVisualChangesAtom = atom<Map<string, VisualEditingChange>>(
new Map(), new Map(),
); );
src/components/preview_panel/AnnotatorOnlyForPro.tsx 0 → 100644
浏览文件 @ a4ab1a7f
import { Lock, ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { IpcClient } from "@/ipc/ipc_client";
interface AnnotatorOnlyForProProps {
onGoBack: () => void;
}
export const AnnotatorOnlyForPro = ({ onGoBack }: AnnotatorOnlyForProProps) => {
const handleGetPro = () => {
IpcClient.getInstance().openExternalUrl("https://dyad.sh/pro");
};
return (
<div className="w-full h-full bg-background relative">
{/* Go Back Button */}
<button
onClick={onGoBack}
className="absolute top-4 left-4 p-2 hover:bg-accent rounded-md transition-all z-10 group"
aria-label="Go back"
>
<ArrowLeft
size={20}
className="text-foreground/70 group-hover:text-foreground transition-colors"
/>
</button>
{/* Centered Content */}
<div className="flex flex-col items-center justify-center h-full px-8">
{/* Lock Icon */}
<Lock size={72} className="text-primary/60 dark:text-primary/70 mb-8" />
{/* Message */}
<h2 className="text-3xl font-semibold text-foreground mb-4 text-center">
Annotator is a Pro Feature
</h2>
<p className="text-muted-foreground mb-10 text-center max-w-md text-base leading-relaxed">
Unlock the ability to annotate screenshots and enhance your workflow
with Dyad Pro.
</p>
{/* Get Pro Button */}
<Button
onClick={handleGetPro}
size="lg"
className="px-8 shadow-md hover:shadow-lg transition-all"
>
Get Dyad Pro
</Button>
</div>
</div>
);
};
src/components/preview_panel/AnnotatorToolbar.tsx 0 → 100644
浏览文件 @ a4ab1a7f
import {
MousePointer2,
Pencil,
Type,
Trash2,
Undo,
Redo,
Check,
X,
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { ToolbarColorPicker } from "./ToolbarColorPicker";
interface AnnotatorToolbarProps {
tool: "select" | "draw" | "text";
color: string;
selectedId: string | null;
historyStep: number;
historyLength: number;
onToolChange: (tool: "select" | "draw" | "text") => void;
onColorChange: (color: string) => void;
onDelete: () => void;
onUndo: () => void;
onRedo: () => void;
onSubmit: () => void;
onDeactivate: () => void;
hasSubmitHandler: boolean;
}
export const AnnotatorToolbar = ({
tool,
color,
selectedId,
historyStep,
historyLength,
onToolChange,
onColorChange,
onDelete,
onUndo,
onRedo,
onSubmit,
onDeactivate,
hasSubmitHandler,
}: AnnotatorToolbarProps) => {
return (
<div className="flex items-center justify-center p-2 border-b space-x-2">
<TooltipProvider>
{/* Tool Selection Buttons */}
<div className="flex space-x-1">
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => onToolChange("select")}
aria-label="Select"
className={cn(
"p-1 rounded transition-colors duration-200",
tool === "select"
? "bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700"
: " text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900",
)}
>
<MousePointer2 size={16} />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Select</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => onToolChange("draw")}
aria-label="Draw"
className={cn(
"p-1 rounded transition-colors duration-200",
tool === "draw"
? "bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700"
: " text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900",
)}
>
<Pencil size={16} />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Draw</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => onToolChange("text")}
aria-label="Text"
className={cn(
"p-1 rounded transition-colors duration-200",
tool === "text"
? "bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700"
: "text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900",
)}
>
<Type size={16} />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Text</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<div className="p-1 rounded transition-colors duration-200 hover:bg-purple-200 dark:hover:bg-purple-900">
<ToolbarColorPicker color={color} onChange={onColorChange} />
</div>
</TooltipTrigger>
<TooltipContent>
<p>Color</p>
</TooltipContent>
</Tooltip>
<div className="w-px bg-gray-200 dark:bg-gray-700 h-4" />
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={onDelete}
aria-label="Delete"
className="p-1 rounded transition-colors duration-200 text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900 disabled:opacity-50 disabled:cursor-not-allowed"
disabled={!selectedId}
>
<Trash2 size={16} />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Delete Selected</p>
</TooltipContent>
</Tooltip>
<div className="w-px bg-gray-200 dark:bg-gray-700 h-4" />
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={onUndo}
aria-label="Undo"
className="p-1 rounded transition-colors duration-200 text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900 disabled:opacity-50 disabled:cursor-not-allowed"
disabled={historyStep === 0}
>
<Undo size={16} />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Undo</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={onRedo}
aria-label="Redo"
className="p-1 rounded transition-colors duration-200 text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900 disabled:opacity-50 disabled:cursor-not-allowed"
disabled={historyStep === historyLength - 1}
>
<Redo size={16} />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Redo</p>
</TooltipContent>
</Tooltip>
<div className="w-px bg-gray-200 dark:bg-gray-700 h-4" />
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={onSubmit}
aria-label="Add to Chat"
className="p-1 rounded transition-colors duration-200 text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900 disabled:opacity-50 disabled:cursor-not-allowed"
disabled={!hasSubmitHandler}
>
<Check size={16} />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Add to Chat</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={onDeactivate}
aria-label="Close Annotator"
className="p-1 rounded transition-colors duration-200 text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900"
>
<X size={16} />
</button>
</TooltipTrigger>
<TooltipContent>
<p>Close Annotator</p>
</TooltipContent>
</Tooltip>
</div>
</TooltipProvider>
</div>
);
};
src/components/preview_panel/DraggableTextInput.tsx 0 → 100644
浏览文件 @ a4ab1a7f
import React, { useState, useRef, useEffect } from "react";
import { X } from "lucide-react";
interface DraggableTextInputProps {
input: {
id: string;
x: number;
y: number;
adjustedX: number;
adjustedY: number;
value: string;
};
index: number;
totalInputs: number;
scale: number;
onMove: (
id: string,
x: number,
y: number,
adjustedX: number,
adjustedY: number,
) => void;
onChange: (id: string, value: string) => void;
onKeyDown: (id: string, e: React.KeyboardEvent, index: number) => void;
onRemove: (id: string) => void;
spanRef: React.MutableRefObject<HTMLSpanElement[]>;
inputRef: React.MutableRefObject<HTMLInputElement[]>;
color: string;
}
export const DraggableTextInput = ({
input,
index,
totalInputs,
scale,
onMove,
onChange,
onKeyDown,
onRemove,
spanRef,
inputRef,
color,
}: DraggableTextInputProps) => {
const [isDragging, setIsDragging] = useState(false);
const dragOffset = useRef({ x: 0, y: 0 });
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
if (isDragging) {
const newX = e.clientX - dragOffset.current.x;
const newY = e.clientY - dragOffset.current.y;
// Calculate adjusted coordinates for the canvas
const adjustedX = newX / scale;
const adjustedY = newY / scale;
onMove(input.id, newX, newY, adjustedX, adjustedY);
}
};
const handleMouseUp = () => {
setIsDragging(false);
};
if (isDragging) {
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
return () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
};
}
}, [isDragging, input.id, onMove, scale]);
return (
<div
className="absolute z-[999]"
style={{
left: `${input.x}px`,
top: `${input.y}px`,
}}
>
<div className="relative">
{/* Drag Handle */}
<div
className="absolute left-2 top-1/2 -translate-y-1/2 cursor-move p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors z-10"
onMouseDown={(e) => {
setIsDragging(true);
dragOffset.current = {
x: e.clientX - input.x,
y: e.clientY - input.y,
};
e.preventDefault();
e.stopPropagation();
}}
title="Drag to move"
>
{/* Grip dots icon - smaller and more subtle */}
<svg
width="8"
height="12"
viewBox="0 0 8 12"
fill="currentColor"
className="text-gray-400 dark:text-gray-500"
>
<circle cx="2" cy="2" r="1" />
<circle cx="6" cy="2" r="1" />
<circle cx="2" cy="6" r="1" />
<circle cx="6" cy="6" r="1" />
<circle cx="2" cy="10" r="1" />
<circle cx="6" cy="10" r="1" />
</svg>
</div>
<span
ref={(e) => {
if (e) spanRef.current[index] = e;
}}
className="
absolute
invisible
whitespace-pre
text-base
font-normal
"
></span>
<input
autoFocus={index === totalInputs - 1}
type="text"
value={input.value}
onChange={(e) => onChange(input.id, e.target.value)}
onKeyDown={(e) => onKeyDown(input.id, e, index)}
className="pl-8 pr-8 py-2 bg-[var(--background)] border-2 rounded-md shadow-lg text-gray-900 dark:text-gray-100 focus:outline-none min-w-[200px] cursor-text"
style={{ borderColor: color }}
placeholder="Type text..."
ref={(e) => {
if (e) inputRef.current[index] = e;
}}
/>
{/* Close Button - Rightmost */}
<button
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-red-100 dark:hover:bg-red-900/30 rounded transition-colors z-10 group"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onRemove(input.id);
}}
title="Remove text input"
type="button"
>
<X className="w-3 h-3 text-gray-400 dark:text-gray-500 group-hover:text-red-600 dark:group-hover:text-red-400" />
</button>
</div>
</div>
);
};
src/components/preview_panel/PreviewIframe.tsx
浏览文件 @ a4ab1a7f
...@@ -23,6 +23,7 @@ import { ...@@ -23,6 +23,7 @@ import {
Monitor, Monitor,
Tablet, Tablet,
Smartphone, Smartphone,
Pen,
} from "lucide-react"; } from "lucide-react";
import { selectedChatIdAtom } from "@/atoms/chatAtoms"; import { selectedChatIdAtom } from "@/atoms/chatAtoms";
import { CopyErrorMessage } from "@/components/CopyErrorMessage"; import { CopyErrorMessage } from "@/components/CopyErrorMessage";
...@@ -36,12 +37,13 @@ import { ...@@ -36,12 +37,13 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { useStreamChat } from "@/hooks/useStreamChat"; import { useStreamChat } from "@/hooks/useStreamChat";
import { useUserBudgetInfo } from "@/hooks/useUserBudgetInfo";
import { import {
selectedComponentsPreviewAtom, selectedComponentsPreviewAtom,
visualEditingSelectedComponentAtom, visualEditingSelectedComponentAtom,
currentComponentCoordinatesAtom, currentComponentCoordinatesAtom,
previewIframeRefAtom, previewIframeRefAtom,
annotatorModeAtom,
screenshotDataUrlAtom,
pendingVisualChangesAtom, pendingVisualChangesAtom,
} from "@/atoms/previewAtoms"; } from "@/atoms/previewAtoms";
import { ComponentSelection } from "@/ipc/ipc_types"; import { ComponentSelection } from "@/ipc/ipc_types";
...@@ -61,6 +63,11 @@ import { useRunApp } from "@/hooks/useRunApp"; ...@@ -61,6 +63,11 @@ import { useRunApp } from "@/hooks/useRunApp";
import { useShortcut } from "@/hooks/useShortcut"; import { useShortcut } from "@/hooks/useShortcut";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { normalizePath } from "../../../shared/normalizePath"; import { normalizePath } from "../../../shared/normalizePath";
import { showError } from "@/lib/toast";
import { AnnotatorOnlyForPro } from "./AnnotatorOnlyForPro";
import { useAttachments } from "@/hooks/useAttachments";
import { useUserBudgetInfo } from "@/hooks/useUserBudgetInfo";
import { Annotator } from "@/pro/ui/components/Annotator/Annotator";
import { VisualEditingToolbar } from "./VisualEditingToolbar"; import { VisualEditingToolbar } from "./VisualEditingToolbar";
interface ErrorBannerProps { interface ErrorBannerProps {
...@@ -193,12 +200,32 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { ...@@ -193,12 +200,32 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
const setPreviewIframeRef = useSetAtom(previewIframeRefAtom); const setPreviewIframeRef = useSetAtom(previewIframeRefAtom);
const iframeRef = useRef<HTMLIFrameElement>(null); const iframeRef = useRef<HTMLIFrameElement>(null);
const [isPicking, setIsPicking] = useState(false); const [isPicking, setIsPicking] = useState(false);
const [annotatorMode, setAnnotatorMode] = useAtom(annotatorModeAtom);
const [screenshotDataUrl, setScreenshotDataUrl] = useAtom(
screenshotDataUrlAtom,
);
const { addAttachments } = useAttachments();
const setPendingChanges = useSetAtom(pendingVisualChangesAtom); const setPendingChanges = useSetAtom(pendingVisualChangesAtom);
// AST Analysis State // AST Analysis State
const [isDynamicComponent, setIsDynamicComponent] = useState(false); const [isDynamicComponent, setIsDynamicComponent] = useState(false);
const [hasStaticText, setHasStaticText] = useState(false); const [hasStaticText, setHasStaticText] = useState(false);
// Device mode state
type DeviceMode = "desktop" | "tablet" | "mobile";
const [deviceMode, setDeviceMode] = useState<DeviceMode>("desktop");
const [isDevicePopoverOpen, setIsDevicePopoverOpen] = useState(false);
// Device configurations
const deviceWidthConfig = {
tablet: 768,
mobile: 375,
};
//detect if the user is using Mac
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
const analyzeComponent = async (componentId: string) => { const analyzeComponent = async (componentId: string) => {
if (!componentId || !selectedAppId) return; if (!componentId || !selectedAppId) return;
...@@ -283,21 +310,9 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { ...@@ -283,21 +310,9 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
console.error("Failed to get element styles:", error); console.error("Failed to get element styles:", error);
} }
}; };
useEffect(() => {
// Device mode state setAnnotatorMode(false);
type DeviceMode = "desktop" | "tablet" | "mobile"; }, []);
const [deviceMode, setDeviceMode] = useState<DeviceMode>("desktop");
const [isDevicePopoverOpen, setIsDevicePopoverOpen] = useState(false);
// Device configurations
const deviceWidthConfig = {
tablet: 768,
mobile: 375,
};
//detect if the user is using Mac
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
// Reset visual editing state when app changes or component unmounts // Reset visual editing state when app changes or component unmounts
useEffect(() => { useEffect(() => {
return () => { return () => {
...@@ -423,6 +438,16 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { ...@@ -423,6 +438,16 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
return; return;
} }
if (event.data?.type === "dyad-screenshot-response") {
if (event.data.success && event.data.dataUrl) {
setScreenshotDataUrl(event.data.dataUrl);
setAnnotatorMode(true);
} else {
showError(event.data.error);
}
return;
}
const { type, payload } = event.data as { const { type, payload } = event.data as {
type: type:
| "window-error" | "window-error"
...@@ -558,6 +583,22 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { ...@@ -558,6 +583,22 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
} }
}; };
// Function to handle annotator button click
const handleAnnotatorClick = () => {
if (annotatorMode) {
setAnnotatorMode(false);
return;
}
if (iframeRef.current?.contentWindow) {
iframeRef.current.contentWindow.postMessage(
{
type: "dyad-take-screenshot",
},
"*",
);
}
};
// Activate component selector using a shortcut // Activate component selector using a shortcut
useShortcut( useShortcut(
"c", "c",
...@@ -675,203 +716,239 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { ...@@ -675,203 +716,239 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
{/* Browser-style header */} {/* Browser-style header - hide when annotator is active */}
<div className="flex items-center p-2 border-b space-x-2 "> {!annotatorMode && (
{/* Navigation Buttons */} <div className="flex items-center p-2 border-b space-x-2">
<div className="flex space-x-1"> {/* Navigation Buttons */}
<TooltipProvider> <div className="flex space-x-1">
<Tooltip> <TooltipProvider>
<TooltipTrigger asChild> <Tooltip>
<button <TooltipTrigger asChild>
onClick={handleActivateComponentSelector} <button
className={`p-1 rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${ onClick={handleActivateComponentSelector}
isPicking className={`p-1 rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${
? "bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700" isPicking
: " text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900" ? "bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700"
}`} : " text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900"
disabled={ }`}
loading || !selectedAppId || !isComponentSelectorInitialized disabled={
} loading ||
data-testid="preview-pick-element-button" !selectedAppId ||
> !isComponentSelectorInitialized
<MousePointerClick size={16} /> }
</button> data-testid="preview-pick-element-button"
</TooltipTrigger>
<TooltipContent>
<p>
{isPicking
? "Deactivate component selector"
: "Select component"}
</p>
<p>{isMac ? "⌘ + ⇧ + C" : "Ctrl + ⇧ + C"}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<button
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
disabled={!canGoBack || loading || !selectedAppId}
onClick={handleNavigateBack}
data-testid="preview-navigate-back-button"
>
<ArrowLeft size={16} />
</button>
<button
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
disabled={!canGoForward || loading || !selectedAppId}
onClick={handleNavigateForward}
data-testid="preview-navigate-forward-button"
>
<ArrowRight size={16} />
</button>
<button
onClick={handleReload}
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
disabled={loading || !selectedAppId}
data-testid="preview-refresh-button"
>
<RefreshCw size={16} />
</button>
</div>
{/* Address Bar with Routes Dropdown - using shadcn/ui dropdown-menu */}
<div className="relative flex-grow min-w-20">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="flex items-center justify-between px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded text-sm text-gray-700 dark:text-gray-200 cursor-pointer w-full min-w-0">
<span className="truncate flex-1 mr-2 min-w-0">
{navigationHistory[currentHistoryPosition]
? new URL(navigationHistory[currentHistoryPosition])
.pathname
: "/"}
</span>
<ChevronDown size={14} className="flex-shrink-0" />
</div>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-full">
{availableRoutes.length > 0 ? (
availableRoutes.map((route) => (
<DropdownMenuItem
key={route.path}
onClick={() => navigateToRoute(route.path)}
className="flex justify-between"
> >
<span>{route.label}</span> <MousePointerClick size={16} />
<span className="text-gray-500 dark:text-gray-400 text-xs"> </button>
{route.path} </TooltipTrigger>
</span> <TooltipContent>
</DropdownMenuItem> <p>
)) {isPicking
) : ( ? "Deactivate component selector"
<DropdownMenuItem disabled>Loading routes...</DropdownMenuItem> : "Select component"}
)} </p>
</DropdownMenuContent> <p>{isMac ? "⌘ + ⇧ + C" : "Ctrl + ⇧ + C"}</p>
</DropdownMenu> </TooltipContent>
</div> </Tooltip>
</TooltipProvider>
{/* Action Buttons */} <TooltipProvider>
<div className="flex space-x-1"> <Tooltip>
<button <TooltipTrigger asChild>
onClick={onRestart} <button
className="flex items-center space-x-1 px-3 py-1 rounded-md text-sm hover:bg-[var(--background-darkest)] transition-colors" onClick={handleAnnotatorClick}
title="Restart App" className={`p-1 rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${
> annotatorMode
<Power size={16} /> ? "bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700"
<span>Restart</span> : " text-purple-700 hover:bg-purple-200 dark:text-purple-300 dark:hover:bg-purple-900"
</button> }`}
<button disabled={
data-testid="preview-open-browser-button" loading ||
onClick={() => { !selectedAppId ||
if (originalUrl) { isPicking ||
IpcClient.getInstance().openExternalUrl(originalUrl); !isComponentSelectorInitialized
} }
}} data-testid="preview-annotator-button"
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300" >
> <Pen size={16} />
<ExternalLink size={16} /> </button>
</button> </TooltipTrigger>
<TooltipContent>
<p>
{annotatorMode
? "Annotator mode active"
: "Activate annotator"}
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<button
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
disabled={!canGoBack || loading || !selectedAppId}
onClick={handleNavigateBack}
data-testid="preview-navigate-back-button"
>
<ArrowLeft size={16} />
</button>
<button
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
disabled={!canGoForward || loading || !selectedAppId}
onClick={handleNavigateForward}
data-testid="preview-navigate-forward-button"
>
<ArrowRight size={16} />
</button>
<button
onClick={handleReload}
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
disabled={loading || !selectedAppId}
data-testid="preview-refresh-button"
>
<RefreshCw size={16} />
</button>
</div>
{/* Device Mode Button */} {/* Address Bar with Routes Dropdown - using shadcn/ui dropdown-menu */}
<Popover open={isDevicePopoverOpen} modal={false}> <div className="relative flex-grow min-w-20">
<PopoverTrigger asChild> <DropdownMenu>
<button <DropdownMenuTrigger asChild>
data-testid="device-mode-button" <div className="flex items-center justify-between px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded text-sm text-gray-700 dark:text-gray-200 cursor-pointer w-full min-w-0">
onClick={() => { <span className="truncate flex-1 mr-2 min-w-0">
// Toggle popover open/close {navigationHistory[currentHistoryPosition]
if (isDevicePopoverOpen) setDeviceMode("desktop"); ? new URL(navigationHistory[currentHistoryPosition])
setIsDevicePopoverOpen(!isDevicePopoverOpen); .pathname
}} : "/"}
className={cn( </span>
"p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-gray-300", <ChevronDown size={14} className="flex-shrink-0" />
deviceMode !== "desktop" && "bg-gray-200 dark:bg-gray-700", </div>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-full">
{availableRoutes.length > 0 ? (
availableRoutes.map((route) => (
<DropdownMenuItem
key={route.path}
onClick={() => navigateToRoute(route.path)}
className="flex justify-between"
>
<span>{route.label}</span>
<span className="text-gray-500 dark:text-gray-400 text-xs">
{route.path}
</span>
</DropdownMenuItem>
))
) : (
<DropdownMenuItem disabled>
Loading routes...
</DropdownMenuItem>
)} )}
title="Device Mode" </DropdownMenuContent>
> </DropdownMenu>
<MonitorSmartphone size={16} /> </div>
</button>
</PopoverTrigger> {/* Action Buttons */}
<PopoverContent <div className="flex space-x-1">
className="w-auto p-2" <button
onOpenAutoFocus={(e) => e.preventDefault()} onClick={onRestart}
onInteractOutside={(e) => e.preventDefault()} className="flex items-center space-x-1 px-3 py-1 rounded-md text-sm hover:bg-[var(--background-darkest)] transition-colors"
title="Restart App"
> >
<TooltipProvider> <Power size={16} />
<ToggleGroup <span>Restart</span>
type="single" </button>
value={deviceMode} <button
onValueChange={(value) => { data-testid="preview-open-browser-button"
if (value) { onClick={() => {
setDeviceMode(value as DeviceMode); if (originalUrl) {
setIsDevicePopoverOpen(false); IpcClient.getInstance().openExternalUrl(originalUrl);
} }
}}
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
>
<ExternalLink size={16} />
</button>
{/* Device Mode Button */}
<Popover open={isDevicePopoverOpen} modal={false}>
<PopoverTrigger asChild>
<button
data-testid="device-mode-button"
onClick={() => {
// Toggle popover open/close
if (isDevicePopoverOpen) setDeviceMode("desktop");
setIsDevicePopoverOpen(!isDevicePopoverOpen);
}} }}
variant="outline" className={cn(
"p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-gray-300",
deviceMode !== "desktop" && "bg-gray-200 dark:bg-gray-700",
)}
title="Device Mode"
> >
{/* Tooltips placed inside items instead of wrapping <MonitorSmartphone size={16} />
to avoid asChild prop merging that breaks highlighting */} </button>
<ToggleGroupItem value="desktop" aria-label="Desktop view"> </PopoverTrigger>
<Tooltip> <PopoverContent
<TooltipTrigger asChild> className="w-auto p-2"
<span className="flex items-center justify-center"> onOpenAutoFocus={(e) => e.preventDefault()}
<Monitor size={16} /> onInteractOutside={(e) => e.preventDefault()}
</span> >
</TooltipTrigger> <TooltipProvider>
<TooltipContent> <ToggleGroup
<p>Desktop</p> type="single"
</TooltipContent> value={deviceMode}
</Tooltip> onValueChange={(value) => {
</ToggleGroupItem> if (value) {
<ToggleGroupItem value="tablet" aria-label="Tablet view"> setDeviceMode(value as DeviceMode);
<Tooltip> setIsDevicePopoverOpen(false);
<TooltipTrigger asChild> }
<span className="flex items-center justify-center"> }}
<Tablet size={16} className="scale-x-130" /> variant="outline"
</span> >
</TooltipTrigger> {/* Tooltips placed inside items instead of wrapping
<TooltipContent> to avoid asChild prop merging that breaks highlighting */}
<p>Tablet</p> <ToggleGroupItem value="desktop" aria-label="Desktop view">
</TooltipContent> <Tooltip>
</Tooltip> <TooltipTrigger asChild>
</ToggleGroupItem> <span className="flex items-center justify-center">
<ToggleGroupItem value="mobile" aria-label="Mobile view"> <Monitor size={16} />
<Tooltip> </span>
<TooltipTrigger asChild> </TooltipTrigger>
<span className="flex items-center justify-center"> <TooltipContent>
<Smartphone size={16} /> <p>Desktop</p>
</span> </TooltipContent>
</TooltipTrigger> </Tooltip>
<TooltipContent> </ToggleGroupItem>
<p>Mobile</p> <ToggleGroupItem value="tablet" aria-label="Tablet view">
</TooltipContent> <Tooltip>
</Tooltip> <TooltipTrigger asChild>
</ToggleGroupItem> <span className="flex items-center justify-center">
</ToggleGroup> <Tablet size={16} className="scale-x-130" />
</TooltipProvider> </span>
</PopoverContent> </TooltipTrigger>
</Popover> <TooltipContent>
<p>Tablet</p>
</TooltipContent>
</Tooltip>
</ToggleGroupItem>
<ToggleGroupItem value="mobile" aria-label="Mobile view">
<Tooltip>
<TooltipTrigger asChild>
<span className="flex items-center justify-center">
<Smartphone size={16} />
</span>
</TooltipTrigger>
<TooltipContent>
<p>Mobile</p>
</TooltipContent>
</Tooltip>
</ToggleGroupItem>
</ToggleGroup>
</TooltipProvider>
</PopoverContent>
</Popover>
</div>
</div> </div>
</div> )}
<div className="relative flex-grow "> <div className="relative flex-grow overflow-hidden">
<ErrorBanner <ErrorBanner
error={errorMessage} error={errorMessage}
onDismiss={() => setErrorMessage(undefined)} onDismiss={() => setErrorMessage(undefined)}
...@@ -899,32 +976,59 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { ...@@ -899,32 +976,59 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
deviceMode !== "desktop" && "flex justify-center", deviceMode !== "desktop" && "flex justify-center",
)} )}
> >
<iframe {annotatorMode && screenshotDataUrl ? (
sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-downloads" <div
data-testid="preview-iframe-element" className="w-full h-full bg-white dark:bg-gray-950"
onLoad={() => { style={
setErrorMessage(undefined); deviceMode == "desktop"
}} ? {}
ref={iframeRef} : { width: `${deviceWidthConfig[deviceMode]}px` }
key={reloadKey} }
title={`Preview for App ${selectedAppId}`} >
className="w-full h-full border-none bg-white dark:bg-gray-950" {userBudget ? (
style={ <Annotator
deviceMode == "desktop" screenshotUrl={screenshotDataUrl}
? {} onSubmit={addAttachments}
: { width: `${deviceWidthConfig[deviceMode]}px` } handleAnnotatorClick={handleAnnotatorClick}
} />
src={appUrl} ) : (
allow="clipboard-read; clipboard-write; fullscreen; microphone; camera; display-capture; geolocation; autoplay; picture-in-picture" <AnnotatorOnlyForPro
/> onGoBack={() => setAnnotatorMode(false)}
{/* Visual Editing Toolbar */} />
{isProMode && visualEditingSelectedComponent && selectedAppId && ( )}
<VisualEditingToolbar </div>
selectedComponent={visualEditingSelectedComponent} ) : (
iframeRef={iframeRef} <>
isDynamic={isDynamicComponent} <iframe
hasStaticText={hasStaticText} sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-downloads"
/> data-testid="preview-iframe-element"
onLoad={() => {
setErrorMessage(undefined);
}}
ref={iframeRef}
key={reloadKey}
title={`Preview for App ${selectedAppId}`}
className="w-full h-full border-none bg-white dark:bg-gray-950"
style={
deviceMode == "desktop"
? {}
: { width: `${deviceWidthConfig[deviceMode]}px` }
}
src={appUrl}
allow="clipboard-read; clipboard-write; fullscreen; microphone; camera; display-capture; geolocation; autoplay; picture-in-picture"
/>
{/* Visual Editing Toolbar */}
{isProMode &&
visualEditingSelectedComponent &&
selectedAppId && (
<VisualEditingToolbar
selectedComponent={visualEditingSelectedComponent}
iframeRef={iframeRef}
isDynamic={isDynamicComponent}
hasStaticText={hasStaticText}
/>
)}
</>
)} )}
</div> </div>
)} )}
......
src/components/preview_panel/ToolbarColorPicker.tsx 0 → 100644
浏览文件 @ a4ab1a7f
interface ToolbarColorPickerProps {
color: string;
onChange: (color: string) => void;
}
export const ToolbarColorPicker = ({
color,
onChange,
}: ToolbarColorPickerProps) => {
return (
<label
className="h-[16px] w-[16px] rounded-sm cursor-pointer transition-all overflow-hidden block self-center"
style={{ backgroundColor: color }}
title="Choose color"
>
<input
type="color"
value={color}
onChange={(e) => onChange(e.target.value)}
className="opacity-0 w-full h-full"
aria-label="Choose color"
/>
</label>
);
};
src/hooks/useAttachments.ts
浏览文件 @ a4ab1a7f
import React, { useState, useRef } from "react"; import React, { useRef, useState } from "react";
import type { FileAttachment } from "@/ipc/ipc_types"; import type { FileAttachment } from "@/ipc/ipc_types";
import { useAtom } from "jotai";
import { attachmentsAtom } from "@/atoms/chatAtoms";
export function useAttachments() { export function useAttachments() {
const [attachments, setAttachments] = useState<FileAttachment[]>([]); const [attachments, setAttachments] = useAtom(attachmentsAtom);
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const [isDraggingOver, setIsDraggingOver] = useState(false); const [isDraggingOver, setIsDraggingOver] = useState(false);
...@@ -133,5 +135,6 @@ export function useAttachments() { ...@@ -133,5 +135,6 @@ export function useAttachments() {
handleDrop, handleDrop,
clearAttachments, clearAttachments,
handlePaste, handlePaste,
addAttachments,
}; };
} }
src/pro/ui/components/Annotator/AnnotationCanvas.tsx 0 → 100644
浏览文件 @ a4ab1a7f
import React from "react";
import {
Stage,
Layer,
Image as KonvaImage,
Path,
Text,
Transformer,
} from "react-konva";
import { getStroke } from "perfect-freehand";
// Helper to convert stroke points to SVG path data
function getSvgPathFromStroke(stroke: number[][]) {
if (!stroke.length) return "";
const d = stroke.reduce(
(acc, [x0, y0], i, arr) => {
const [x1, y1] = arr[(i + 1) % arr.length];
acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2);
return acc;
},
["M", ...stroke[0], "Q"],
);
d.push("Z");
return d.join(" ");
}
type Point = [number, number];
type Shape =
| {
id: string;
type: "line";
points: Point[];
color: string;
size: number;
isComplete: boolean;
}
| {
id: string;
type: "text";
x: number;
y: number;
text: string;
fontSize: number;
color: string;
};
interface AnnotationCanvasProps {
image: HTMLImageElement | null;
shapes: Shape[];
selectedId: string | null;
tool: "select" | "draw" | "text";
scale: number;
stageDimensions: { width: number; height: number };
containerSize: { width: number; height: number };
stageRef: React.RefObject<any>;
transformerRef: React.RefObject<any>;
onMouseDown: (e: any) => void;
onMouseMove: (e: any) => void;
onMouseUp: () => void;
onShapeSelect: (id: string) => void;
onShapeDragEnd: (id: string, x: number, y: number) => void;
}
export const AnnotationCanvas = ({
image,
shapes,
selectedId,
tool,
scale,
stageDimensions,
containerSize,
stageRef,
transformerRef,
onMouseDown,
onMouseMove,
onMouseUp,
onShapeSelect,
onShapeDragEnd,
}: AnnotationCanvasProps) => {
if (!image || containerSize.width === 0) {
return null;
}
return (
<div className="w-full h-full">
<Stage
width={stageDimensions.width}
height={stageDimensions.height}
onMouseDown={onMouseDown}
onMouseMove={onMouseMove}
onMouseUp={onMouseUp}
onTouchStart={onMouseDown}
onTouchMove={onMouseMove}
onTouchEnd={onMouseUp}
ref={stageRef}
style={{ touchAction: "none" }}
>
<Layer>
<KonvaImage
image={image}
listening={false}
scaleX={scale}
scaleY={scale}
/>
{shapes.map((shape) => {
if (shape.type === "line") {
const stroke = getStroke(shape.points, {
size: shape.size,
thinning: 0.5,
smoothing: 0.5,
streamline: 0.5,
});
const pathData = getSvgPathFromStroke(stroke);
return (
<Path
key={shape.id}
id={shape.id}
data={pathData}
fill={shape.color}
scaleX={scale}
scaleY={scale}
onClick={() => tool === "select" && onShapeSelect(shape.id)}
onTap={() => tool === "select" && onShapeSelect(shape.id)}
draggable={tool === "select"}
/>
);
} else if (shape.type === "text") {
return (
<Text
key={shape.id}
id={shape.id}
x={shape.x}
y={shape.y}
scaleX={scale}
scaleY={scale}
text={shape.text}
fontSize={shape.fontSize * scale}
fill={shape.color}
draggable={tool === "select"}
onClick={() => tool === "select" && onShapeSelect(shape.id)}
onTap={() => tool === "select" && onShapeSelect(shape.id)}
onDragEnd={(e) => {
const node = e.target;
onShapeDragEnd(shape.id, node.x(), node.y());
}}
/>
);
}
return null;
})}
{selectedId && (
<Transformer
ref={transformerRef}
boundBoxFunc={(oldBox, newBox) => {
// Limit resize if needed
if (newBox.width < 5 || newBox.height < 5) {
return oldBox;
}
return newBox;
}}
/>
)}
</Layer>
</Stage>
</div>
);
};
src/pro/ui/components/Annotator/Annotator.tsx 0 → 100644
浏览文件 @ a4ab1a7f
import React, { useState, useRef, useEffect, useMemo } from "react";
import { AnnotationCanvas } from "./AnnotationCanvas";
import { AnnotatorToolbar } from "@/components/preview_panel/AnnotatorToolbar";
import { DraggableTextInput } from "@/components/preview_panel/DraggableTextInput";
import { useSetAtom } from "jotai";
import { chatInputValueAtom } from "@/atoms/chatAtoms";
// Types
type Point = [number, number];
type Shape =
| {
id: string;
type: "line";
points: Point[];
color: string;
size: number;
isComplete: boolean;
}
| {
id: string;
type: "text";
x: number;
y: number;
text: string;
fontSize: number;
color: string;
};
// Custom Image Hook
const useImage = (url: string) => {
const [image, setImage] = useState<HTMLImageElement | null>(null);
useEffect(() => {
const img = new Image();
img.src = url;
img.onload = () => setImage(img);
}, [url]);
return image;
};
export const Annotator = ({
screenshotUrl,
onSubmit,
handleAnnotatorClick,
}: {
screenshotUrl: string;
onSubmit?: (
file: File[],
type?: "chat-context" | "upload-to-codebase",
) => void;
handleAnnotatorClick: () => void;
}) => {
const image = useImage(screenshotUrl);
const [tool, setTool] = useState<"select" | "draw" | "text">("draw");
const [color, setColor] = useState<string>("#7f22fe");
const [shapes, setShapes] = useState<Shape[]>([]);
const [selectedId, setSelectedId] = useState<string | null>(null);
const [history, setHistory] = useState<Shape[][]>([]);
const [historyStep, setHistoryStep] = useState(0);
const spanRef = useRef<HTMLSpanElement[]>([]);
const inputRef = useRef<HTMLInputElement[]>([]);
const setChatInput = useSetAtom(chatInputValueAtom);
// Text input state - now supports multiple inputs
const [textInputs, setTextInputs] = useState<
Array<{
id: string;
x: number;
y: number;
adjustedX: number;
adjustedY: number;
value: string;
color: string;
}>
>([]);
// Drawing state
const isDrawing = useRef(false);
const stageRef = useRef<any>(null);
const transformerRef = useRef<any>(null);
const containerRef = useRef<HTMLDivElement>(null);
// Container dimensions
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
// Track container size
useEffect(() => {
if (!containerRef.current) return;
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const { width, height } = entry.contentRect;
setContainerSize({ width, height });
}
});
resizeObserver.observe(containerRef.current);
return () => resizeObserver.disconnect();
}, []);
// Initialize history
useEffect(() => {
if (history.length === 0) {
setHistory([[]]);
}
}, []);
// Save history
const saveHistory = (newShapes: Shape[]) => {
const newHistory = history.slice(0, historyStep + 1);
newHistory.push(newShapes);
setHistory(newHistory);
setHistoryStep(newHistory.length - 1);
};
const handleSubmit = async () => {
if (!stageRef.current || !onSubmit) return;
try {
// Auto-submit any pending text inputs
textInputs.forEach((input) => {
if (input.value.trim()) {
const newShape: Shape = {
id: Date.now().toString(),
type: "text",
x: input.x + 32,
y: input.y + 8,
text: input.value,
fontSize: 24,
color: input.color,
};
setShapes((prev) => [...prev, newShape]);
}
});
setTextInputs([]);
// Wait a tick for state to update
await new Promise((resolve) => setTimeout(resolve, 100));
// Export the stage as a blob
const uri = stageRef.current.toDataURL({ pixelRatio: 2 });
// Convert data URL to blob
const response = await fetch(uri);
const blob = await response.blob();
// Create a File from the blob
const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
const file = new File([blob], `annotated-screenshot-${timestamp}.png`, {
type: "image/png",
});
onSubmit([file], "chat-context");
setChatInput("Please update the UI based on these screenshots");
handleAnnotatorClick();
} catch (error) {
console.error("Failed to export annotated image:", error);
}
};
const handleUndo = () => {
if (historyStep > 0) {
setHistoryStep(historyStep - 1);
setShapes(history[historyStep - 1]);
}
};
const handleRedo = () => {
if (historyStep < history.length - 1) {
setHistoryStep(historyStep + 1);
setShapes(history[historyStep + 1]);
}
};
const handleDelete = () => {
if (selectedId) {
const newShapes = shapes.filter((s) => s.id !== selectedId);
setShapes(newShapes);
setSelectedId(null);
saveHistory(newShapes);
}
};
const handleTextInputChange = (inputId: string, value: string) => {
setTextInputs((prev) =>
prev.map((i) => (i.id === inputId ? { ...i, value } : i)),
);
};
const handleTextInputMove = (
inputId: string,
x: number,
y: number,
adjustedX: number,
adjustedY: number,
) => {
setTextInputs((prev) =>
prev.map((i) =>
i.id === inputId ? { ...i, x, y, adjustedX, adjustedY } : i,
),
);
};
const handleTextInputKeyDown = (
inputId: string,
e: React.KeyboardEvent,
index: number,
) => {
if (e.key === "Enter") {
if (!spanRef.current[index] || !inputRef.current[index]) return;
spanRef.current[index].textContent = inputRef.current[index].value || "";
const width = spanRef.current[index].offsetWidth + 8; // padding
inputRef.current[index].style.width = width + "px";
} else if (e.key === "Escape") {
setTextInputs((prev) => prev.filter((i) => i.id !== inputId));
}
};
const handleTextInputRemove = (inputId: string) => {
setTextInputs((prev) => prev.filter((i) => i.id !== inputId));
};
const handleMouseDown = (e: any) => {
if (tool === "select") {
const clickedOnEmpty = e.target === e.target.getStage();
if (clickedOnEmpty) {
setSelectedId(null);
}
return;
}
const pos = e.target.getStage().getPointerPosition();
if (!pos) return;
// Adjust coordinates for scale
const adjustedPos = {
x: pos.x / scale,
y: pos.y / scale,
};
if (tool === "draw") {
isDrawing.current = true;
const id = Date.now().toString();
const newShape: Shape = {
id,
type: "line",
points: [[adjustedPos.x, adjustedPos.y]],
color: color,
size: 6,
isComplete: false,
};
setShapes([...shapes, newShape]);
setSelectedId(null);
} else if (tool === "text") {
const newInput = {
id: Date.now().toString(),
x: pos.x,
y: pos.y,
adjustedX: adjustedPos.x,
adjustedY: adjustedPos.y,
value: "",
color: color,
};
setTextInputs([...textInputs, newInput]);
}
};
const handleMouseMove = (e: any) => {
if (tool !== "draw" || !isDrawing.current) return;
const stage = e.target.getStage();
const point = stage.getPointerPosition();
if (!point) return;
// Adjust coordinates for scale
const adjustedPoint = {
x: point.x / scale,
y: point.y / scale,
};
const lastShape = shapes[shapes.length - 1];
if (lastShape && lastShape.type === "line") {
// Append point
const newPoints = [
...lastShape.points,
[adjustedPoint.x, adjustedPoint.y] as Point,
];
const updatedShape = { ...lastShape, points: newPoints };
// Update shapes without saving history yet (performance)
const newShapes = shapes.slice(0, -1).concat(updatedShape);
setShapes(newShapes);
}
};
const handleMouseUp = () => {
if (tool === "draw" && isDrawing.current) {
isDrawing.current = false;
const lastShape = shapes[shapes.length - 1];
if (lastShape && lastShape.type === "line") {
const completedShape = { ...lastShape, isComplete: true };
const newShapes = shapes.slice(0, -1).concat(completedShape);
setShapes(newShapes);
saveHistory(newShapes);
}
}
};
// Update transformer selection
useEffect(() => {
if (selectedId && transformerRef.current && stageRef.current) {
const node = stageRef.current.findOne("#" + selectedId);
if (node) {
transformerRef.current.nodes([node]);
transformerRef.current.getLayer().batchDraw();
}
}
}, [selectedId, shapes]);
// Calculate scale to fit image in container
const scale = useMemo(() => {
if (!image || containerSize.width === 0 || containerSize.height === 0)
return 1;
const scaleX = containerSize.width / image.width;
// Fit width and allow scrolling for height
return scaleX;
}, [image, containerSize]);
// Calculate actual stage dimensions
const stageDimensions = useMemo(() => {
if (!image)
return {
width: containerSize.width || 800,
height: containerSize.height || 600,
};
return {
width: image.width * scale,
height: image.height * scale,
};
}, [image, scale, containerSize]);
return (
<div className="w-full h-full flex flex-col bg-gray-50 dark:bg-gray-900">
{/* Toolbar */}
<AnnotatorToolbar
tool={tool}
color={color}
selectedId={selectedId}
historyStep={historyStep}
historyLength={history.length}
onToolChange={setTool}
onColorChange={setColor}
onDelete={handleDelete}
onUndo={handleUndo}
onRedo={handleRedo}
onSubmit={handleSubmit}
onDeactivate={handleAnnotatorClick}
hasSubmitHandler={!!onSubmit}
/>
{/* Canvas Container - Scrollable */}
<div ref={containerRef} className="flex-1 relative overflow-auto">
{textInputs.map((input, index) => (
<DraggableTextInput
key={input.id}
input={input}
index={index}
totalInputs={textInputs.length}
scale={scale}
onMove={handleTextInputMove}
onChange={handleTextInputChange}
onKeyDown={handleTextInputKeyDown}
onRemove={handleTextInputRemove}
spanRef={spanRef}
inputRef={inputRef}
color={input.color}
/>
))}
<AnnotationCanvas
image={image}
shapes={shapes}
selectedId={selectedId}
tool={tool}
scale={scale}
stageDimensions={stageDimensions}
containerSize={containerSize}
stageRef={stageRef}
transformerRef={transformerRef}
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
onShapeSelect={setSelectedId}
onShapeDragEnd={(id, x, y) => {
const newShapes = shapes.map((s) =>
s.id === id ? { ...s, x, y } : s,
);
setShapes(newShapes);
saveHistory(newShapes);
}}
/>
</div>
</div>
);
};
worker/dyad-screenshot-client.js 0 → 100644
浏览文件 @ a4ab1a7f
(() => {
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();
}
});
})();
worker/proxy_server.js
浏览文件 @ a4ab1a7f
...@@ -38,7 +38,29 @@ let rememberedOrigin = null; // e.g. "http://localhost:5173" ...@@ -38,7 +38,29 @@ let rememberedOrigin = null; // e.g. "http://localhost:5173"
let stacktraceJsContent = null; let stacktraceJsContent = null;
let dyadShimContent = null; let dyadShimContent = null;
let dyadComponentSelectorClientContent = null; let dyadComponentSelectorClientContent = null;
let dyadScreenshotClientContent = null;
let htmlToImageContent = null;
let dyadVisualEditorClientContent = null; let dyadVisualEditorClientContent = null;
try {
const htmlToImagePath = path.join(
__dirname,
"..",
"node_modules",
"html-to-image",
"dist",
"html-to-image.js",
);
htmlToImageContent = fs.readFileSync(htmlToImagePath, "utf-8");
parentPort?.postMessage(
`[proxy-worker] html-to-image.js loaded from: ${htmlToImagePath}`,
);
} catch (error) {
parentPort?.postMessage(
`[proxy-worker] Failed to read html-to-image.js: ${error.message}`,
);
}
try { try {
const stackTraceLibPath = path.join( const stackTraceLibPath = path.join(
__dirname, __dirname,
...@@ -84,6 +106,22 @@ try { ...@@ -84,6 +106,22 @@ try {
); );
} }
try {
const dyadScreenshotClientPath = path.join(
__dirname,
"dyad-screenshot-client.js",
);
dyadScreenshotClientContent = fs.readFileSync(
dyadScreenshotClientPath,
"utf-8",
);
parentPort?.postMessage("[proxy-worker] dyad-screenshot-client.js loaded.");
} catch (error) {
parentPort?.postMessage(
`[proxy-worker] Failed to read dyad-screenshot-client.js: ${error.message}`,
);
}
try { try {
const dyadVisualEditorClientPath = path.join( const dyadVisualEditorClientPath = path.join(
__dirname, __dirname,
...@@ -143,6 +181,26 @@ function injectHTML(buf) { ...@@ -143,6 +181,26 @@ function injectHTML(buf) {
'<script>console.warn("[proxy-worker] dyad component selector client was not injected.");</script>', '<script>console.warn("[proxy-worker] dyad component selector client was not injected.");</script>',
); );
} }
if (htmlToImageContent) {
scripts.push(`<script>${htmlToImageContent}</script>`);
parentPort?.postMessage(
"[proxy-worker] html-to-image script injected into HTML.",
);
} else {
scripts.push(
'<script>console.error("[proxy-worker] html-to-image was not injected - library not loaded.");</script>',
);
parentPort?.postMessage(
"[proxy-worker] WARNING: html-to-image not injected!",
);
}
if (dyadScreenshotClientContent) {
scripts.push(`<script>${dyadScreenshotClientContent}</script>`);
} else {
scripts.push(
'<script>console.warn("[proxy-worker] dyad screenshot client was not injected.");</script>',
);
}
if (dyadVisualEditorClientContent) { if (dyadVisualEditorClientContent) {
scripts.push(`<script>${dyadVisualEditorClientContent}</script>`); scripts.push(`<script>${dyadVisualEditorClientContent}</script>`);
} else { } else {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论