UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-03-12 06:51:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Second commit for screen cap feature

Browse Source
This commit is contained in:
Ed McConnell 2024-12-05 17:31:47 -05:00
parent 8b7e18e627
commit 7fdab0ad6a
2 changed files with 187 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/components/workbench/Preview.tsx
View File

@ -80,12 +80,17 @@ export const Preview = memo(() => {
)}
<div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
<IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
<IconButton icon="i-ph:selection" onClick={() => setIsSelectionMode(!isSelectionMode)} className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''} />
<IconButton
icon="i-ph:selection"
onClick={() => setIsSelectionMode(!isSelectionMode)}
className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''}
/>
<div
className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive
focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive"
>
<input title='URL'
<input
title="URL"
ref={inputRef}
className="w-full bg-transparent outline-none"
type="text"
@ -119,7 +124,11 @@ export const Preview = memo(() => {
{activePreview ? (
<>
<iframe ref={iframeRef} title="preview" className="border-none w-full h-full bg-white" src={iframeUrl} />
<ScreenshotSelector isSelectionMode={isSelectionMode} setIsSelectionMode={setIsSelectionMode} containerRef={iframeRef} />
<ScreenshotSelector
isSelectionMode={isSelectionMode}
setIsSelectionMode={setIsSelectionMode}
containerRef={iframeRef}
/>
</>
) : (
<div className="flex w-full h-full justify-center items-center bg-white">No preview available</div>

41
app/components/workbench/ScreenshotSelector.tsx
View File

@ -7,7 +7,8 @@ interface ScreenshotSelectorProps {
containerRef: React.RefObject<HTMLElement>;
}
export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, containerRef }: ScreenshotSelectorProps) => {
export const ScreenshotSelector = memo(
({ isSelectionMode, setIsSelectionMode, containerRef }: ScreenshotSelectorProps) => {
const [isCapturing, setIsCapturing] = useState(false);
const [selectionStart, setSelectionStart] = useState<{ x: number; y: number } | null>(null);
const [selectionEnd, setSelectionEnd] = useState<{ x: number; y: number } | null>(null);
@ -30,8 +31,8 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
const stream = await navigator.mediaDevices.getDisplayMedia({
audio: false,
video: {
displaySurface: "window"
}
displaySurface: 'window',
},
} as MediaStreamConstraints);
// Set up video with the stream
@ -39,7 +40,7 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
await video.play();
// Wait for video to be ready
await new Promise(resolve => setTimeout(resolve, 300));
await new Promise((resolve) => setTimeout(resolve, 300));
// Create temporary canvas for full screenshot
const tempCanvas = document.createElement('canvas');
@ -78,17 +79,7 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
}
// Draw the cropped area
ctx.drawImage(
tempCanvas,
scaledX,
scaledY,
scaledWidth,
scaledHeight,
0,
0,
width,
height
);
ctx.drawImage(tempCanvas, scaledX, scaledY, scaledWidth, scaledHeight, 0, 0, width, height);
// Convert to blob
const blob = await new Promise<Blob>((resolve, reject) => {
@ -126,8 +117,7 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
reader.readAsDataURL(blob);
// Stop all tracks
stream.getTracks().forEach(track => track.stop());
stream.getTracks().forEach((track) => track.stop());
} finally {
// Clean up video element
document.body.removeChild(video);
@ -143,7 +133,8 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
}
}, [isSelectionMode, selectionStart, selectionEnd, containerRef, setIsSelectionMode]);
const handleSelectionStart = useCallback((e: React.MouseEvent) => {
const handleSelectionStart = useCallback(
(e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (!isSelectionMode) return;
@ -152,9 +143,12 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
const y = e.clientY - rect.top;
setSelectionStart({ x, y });
setSelectionEnd({ x, y });
}, [isSelectionMode]);
},
[isSelectionMode],
);
const handleSelectionMove = useCallback((e: React.MouseEvent) => {
const handleSelectionMove = useCallback(
(e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (!isSelectionMode || !selectionStart) return;
@ -162,7 +156,9 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
setSelectionEnd({ x, y });
}, [isSelectionMode, selectionStart]);
},
[isSelectionMode, selectionStart],
);
if (!isSelectionMode) return null;
@ -200,4 +196,5 @@ export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, c
)}
</div>
);
});
},
);