terminal output
}
+ />
+ = ({
className="absolute z-50 flex gap-2 pointer-events-auto"
style={{
...(mmBottom ? { bottom: '1rem' } : { top: '1rem' }),
- ...(mmRight ? { right: !isHorizontal && mmBottom ? 'calc(1rem + 52px)' : '1rem' } : { left: '1rem' }),
+ ...(mmRight ? { right: '1rem' } : { left: '1rem' }),
flexDirection: mmRight ? 'row' : 'row-reverse',
alignItems: mmBottom ? 'flex-end' : 'flex-start',
}}
diff --git a/src/renderer/canvas/Minimap.test.tsx b/src/renderer/canvas/Minimap.test.tsx
index 356a83c10..1f16fa415 100644
--- a/src/renderer/canvas/Minimap.test.tsx
+++ b/src/renderer/canvas/Minimap.test.tsx
@@ -5,7 +5,7 @@ import { PANEL_DEFINITIONS } from '../../shared/panels'
const h = vi.hoisted(() => ({
canvas: {
nodes: {
- one: { id: 'one', origin: { x: 0, y: 0 }, size: { width: 600, height: 400 }, dockLayout: { type: 'tabs', id: 'one', panelIds: ['document'], activeIndex: 0 } },
+ one: { id: 'one', origin: { x: 0, y: 0 }, size: { width: 600, height: 400 }, dockLayout: { type: 'tabs', id: 'one', panelIds: ['editor'], activeIndex: 0 } },
two: { id: 'two', origin: { x: 700, y: 0 }, size: { width: 600, height: 400 }, dockLayout: { type: 'tabs', id: 'two', panelIds: ['review'], activeIndex: 0 } },
},
zoomLevel: 1, containerSize: { width: 1000, height: 800 }, viewportOffset: { x: 0, y: 0 },
@@ -17,7 +17,7 @@ vi.mock('../stores/CanvasStoreContext', () => ({
}))
vi.mock('../stores/appStore', () => ({
useAppStore: (select: any) => select({ selectedWorkspaceId: 'ws' }),
- useWorkspacePanels: () => ({ document: { type: 'document' }, review: { type: 'review' } }),
+ useWorkspacePanels: () => ({ editor: { type: 'editor' }, review: { type: 'review' } }),
}))
vi.mock('../hooks/useAgentPanelInfo', () => ({ useAgentInfoByPanel: () => ({}) }))
vi.mock('./worktree/useWorktreeMembership', () => ({ useWorktreeMembership: () => ({ groups: [] }) }))
@@ -30,7 +30,7 @@ it('uses registered document and review colors in the minimap', () => {
try {
act(() => root.render(('[style]')].map(element => element.style.backgroundColor)
- for (const type of ['document', 'review'] as const) {
+ for (const type of ['editor', 'review'] as const) {
expect(colors).toContain(`var(--panel-${type}, ${PANEL_DEFINITIONS[type].mutedColor})`)
}
} finally { act(() => root.unmount()) }
diff --git a/src/renderer/canvas/RecentScreenshotButton.test.tsx b/src/renderer/canvas/RecentScreenshotButton.test.tsx
index 7e1a1011d..6b0d2fd9b 100644
--- a/src/renderer/canvas/RecentScreenshotButton.test.tsx
+++ b/src/renderer/canvas/RecentScreenshotButton.test.tsx
@@ -73,3 +73,119 @@ it('does not crash the canvas when an older preload lacks screenshot APIs', asyn
vi.unstubAllGlobals()
}
})
+
+it('renders the annotation marker for a saved screenshot', async () => {
+ vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+ const originalAPI = window.electronAPI
+ window.electronAPI = {
+ ...originalAPI,
+ getRecentScreenshot: vi.fn().mockResolvedValue([{
+ id: 'annotated', filePath: '/annotated.png', dataUrl: 'data:image/png;base64,test', annotated: true,
+ }]),
+ onRecentScreenshotChanged: vi.fn(() => () => {}),
+ dragRecentScreenshot: vi.fn().mockResolvedValue(undefined),
+ }
+ const host = document.createElement('div')
+ const root = createRoot(host)
+ try {
+ await act(async () => root.render(('[draggable="true"]')[1]
+ act(() => thumbnail.focus())
+ await act(async () => thumbnail.click())
+ expectOriginal(1)
+ expect(dialog().contains(document.activeElement)).toBe(true)
+ expect(dialog().querySelector('[aria-label="Annotate screenshot"]')).not.toBeNull()
+ nextImageWidth = 4000
+ nextImageHeight = 100
+ await key('ArrowRight')
+ expectOriginal(2)
+ expect(parseFloat((dialog().querySelector('img') as HTMLImageElement).style.height)).toBeCloseTo((window.innerWidth - 96) / 40)
+ expect((dialog().querySelector('img') as HTMLImageElement).style.width).toBe(`${window.innerWidth - 96}px`)
+ nextImageWidth = 800
+ nextImageHeight = window.innerHeight - 160
+ await key('ArrowRight')
+ expectOriginal(0)
+ await key('ArrowLeft')
+ expectOriginal(2)
+ await key('ArrowLeft')
+ expectOriginal(1)
+ await act(async () => (dialog().querySelector('[aria-label="Next screenshot"]') as HTMLButtonElement).click())
+ expectOriginal(2)
+ await act(async () => (dialog().querySelector('[aria-label="Previous screenshot"]') as HTMLButtonElement).click())
+ expectOriginal(1)
+ await key('Tab')
+ expect(document.activeElement?.getAttribute('aria-label')).toBe('Draw with pen')
+ expect(dialog().querySelector('img')?.className).toContain('rounded-xl')
+ expect(window.electronAPI.shellOpenPath).not.toHaveBeenCalled()
+ expect(dialog().querySelector('[aria-label="Annotate screenshot"]')).not.toBeNull()
+ await act(async () => (dialog().querySelector('[aria-label="Add comment"]') as HTMLButtonElement).click())
+ const annotation = dialog().querySelector('[aria-label="Annotate screenshot"]') as SVGSVGElement
+ annotation.getBoundingClientRect = () => ({ x: 0, y: 0, left: 0, top: 0, right: 800, bottom: 600, width: 800, height: 600, toJSON: () => ({}) })
+ await act(async () => annotation.dispatchEvent(new MouseEvent('click', { clientX: 400, clientY: 300, bubbles: true })))
+ const comment = dialog().querySelector('[aria-label="Comment 1"]') as HTMLTextAreaElement
+ expect(comment).not.toBeNull()
+ const caretKey = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true })
+ await act(async () => comment.dispatchEvent(caretKey))
+ expect(caretKey.defaultPrevented).toBe(false)
+ expect(dialog().querySelector('[aria-label="Download screenshot"]')?.getAttribute('href')).toBe('data:image/png;base64,iVBORw==')
+ expect(dialog().querySelector('[aria-label="Download screenshot"]')?.getAttribute('download')).toBe('second.png')
+ await act(async () => (dialog().querySelector('[aria-label="Zoom in"]') as HTMLButtonElement).click())
+ expect(dialog().querySelector('[aria-label="Fit screenshot"]')?.textContent).toBe('120%')
+ await act(async () => (dialog().querySelector('[aria-label="Fit screenshot"]') as HTMLButtonElement).click())
+ expect(dialog().querySelector('[aria-label="Fit screenshot"]')?.textContent).toBe('100%')
+ await key('Escape')
+ expect(dialog()).toBeNull()
+ expect(document.activeElement).toBe(thumbnail)
+ await act(async () => thumbnail.click())
+ await act(async () => (dialog().querySelector('[aria-label="Close screenshot preview"]') as HTMLButtonElement).click())
+ expect(dialog()).toBeNull()
+ await act(async () => thumbnail.dispatchEvent(new Event('dragstart', { bubbles: true, cancelable: true })))
+ await act(async () => thumbnail.click())
+ expect(dialog()).toBeNull()
+ expect(window.electronAPI.dragRecentScreenshot).toHaveBeenCalledWith('second')
+ } finally {
+ act(() => root.unmount())
+ host.remove()
+ window.electronAPI = originalAPI
+ vi.unstubAllGlobals()
+ }
+})
diff --git a/src/renderer/canvas/RecentScreenshotButton.tsx b/src/renderer/canvas/RecentScreenshotButton.tsx
index a74fadf22..eab7f61b7 100644
--- a/src/renderer/canvas/RecentScreenshotButton.tsx
+++ b/src/renderer/canvas/RecentScreenshotButton.tsx
@@ -1,13 +1,176 @@
-import { useEffect, useState } from 'react'
-import { X } from '@phosphor-icons/react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { CaretLeft, CaretRight, DownloadSimple, Minus, PencilSimple, Plus, X } from '@phosphor-icons/react'
import type { RecentScreenshot } from '../../shared/recentScreenshot'
import { Tooltip } from '../ui/Tooltip'
+import { createPortal } from 'react-dom'
+import { ScreenshotDrawing } from './ScreenshotDrawing'
+
+function ScreenshotViewer({ screenshots, initialIndex, onClose, onSaved }: {
+ screenshots: RecentScreenshot[]
+ initialIndex: number
+ onClose: () => void
+ onSaved: (screenshot: RecentScreenshot) => void
+}) {
+ const [index, setIndex] = useState(initialIndex)
+ const [image, setImage] = useState<{ id: string; url: string; width: number; height: number } | null>(null)
+ const [errorId, setErrorId] = useState(null)
+ const [zoom, setZoom] = useState(null)
+ const [viewport, setViewport] = useState({ width: window.innerWidth, height: window.innerHeight })
+ const [drawingToolbarHost, setDrawingToolbarHost] = useState(null)
+ const [direction, setDirection] = useState(1)
+ const scrollRef = useRef(null)
+ useLayoutEffect(() => {
+ if (scrollRef.current) { scrollRef.current.scrollTop = 0; scrollRef.current.scrollLeft = 0 }
+ }, [image?.id])
+ const imageElementRef = useRef(null)
+ const directionRef = useRef(direction)
+ directionRef.current = direction
+ const dialogRef = useRef(null)
+ useEffect(() => {
+ const resize = () => setViewport({ width: window.innerWidth, height: window.innerHeight })
+ window.addEventListener('resize', resize)
+ const previous = document.activeElement
+ dialogRef.current?.focus({ preventScroll: true })
+ return () => {
+ window.removeEventListener('resize', resize)
+ if (previous instanceof HTMLElement && previous.isConnected) previous.focus({ preventScroll: true })
+ }
+ }, [])
+ const screenshot = screenshots[index]
+ useEffect(() => {
+ let active = true
+ setErrorId(null)
+ const readImage = typeof window.electronAPI.readRecentScreenshot === 'function'
+ ? window.electronAPI.readRecentScreenshot(screenshot.id)
+ : window.electronAPI.fsReadBinary(screenshot.filePath).then(bytes => {
+ const data = new Uint8Array(bytes)
+ let binary = ''
+ for (let offset = 0; offset < data.length; offset += 8192) {
+ binary += String.fromCharCode(...data.subarray(offset, offset + 8192))
+ }
+ const extension = screenshot.filePath.split('.').pop()?.toLowerCase()
+ const format = extension === 'jpg' ? 'jpeg' : extension === 'tif' ? 'tiff' : extension
+ return `data:image/${format || 'png'};base64,${btoa(binary)}`
+ })
+ void readImage.then(async url => {
+ if (!active) return
+ const decoded = new Image()
+ decoded.src = url
+ await decoded.decode()
+ if (!active) return
+ const previous = imageElementRef.current
+ if (previous?.animate && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+ const animation = previous.animate([
+ { opacity: 1, transform: 'translateX(0)' },
+ { opacity: 0, transform: `translateX(${-directionRef.current * 28}px)` },
+ ], { duration: 120, easing: 'ease-in', fill: 'forwards' })
+ await animation.finished.catch(() => {})
+ if (!active) { animation.cancel(); return }
+ }
+ setZoom(null)
+ setImage({ id: screenshot.id, url, width: decoded.naturalWidth, height: decoded.naturalHeight })
+ }).catch(() => {
+ if (active) setErrorId(screenshot.id)
+ })
+ return () => {
+ active = false
+ }
+ }, [screenshot.id, screenshot.filePath])
+
+ useEffect(() => {
+ const onKey = (event: KeyboardEvent) => {
+ if (!['ArrowLeft', 'ArrowRight', 'Escape', 'Tab'].includes(event.key)) return
+ const target = event.target
+ const editingText = target instanceof HTMLInputElement
+ || target instanceof HTMLTextAreaElement
+ || (target instanceof HTMLElement && target.isContentEditable)
+ if (editingText && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) return
+ event.preventDefault()
+ event.stopImmediatePropagation()
+ if (event.key === 'Escape') { onClose(); return }
+ if (event.key === 'Tab') {
+ const buttons = Array.from(dialogRef.current?.querySelectorAll('button:not(:disabled), a[href]') ?? [])
+ const current = buttons.indexOf(document.activeElement as HTMLElement)
+ buttons[(current + (event.shiftKey ? -1 : 1) + buttons.length) % buttons.length]?.focus()
+ return
+ }
+ setDirection(event.key === 'ArrowLeft' ? -1 : 1)
+ setIndex(current => (current + (event.key === 'ArrowLeft' ? -1 : 1) + screenshots.length) % screenshots.length)
+ }
+ document.addEventListener('keydown', onKey, true)
+ return () => document.removeEventListener('keydown', onKey, true)
+ }, [screenshots.length, onClose])
+
+ const displayHeight = Math.max(80, viewport.height - 160)
+ const fit = image ? Math.min(1, Math.max(1, viewport.width - 96) / image.width, displayHeight / image.height) : 1
+ const scale = zoom ?? fit
+ const controlClass = 'flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/10 text-white/90 transition-colors hover:bg-white/20 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white disabled:opacity-30'
+
+ return createPortal(
+ ([])
const [dismissed, setDismissed] = useState([])
const [expanded, setExpanded] = useState(false)
const [hoveredId, setHoveredId] = useState(null)
+ const [viewer, setViewer] = useState<{ screenshots: RecentScreenshot[]; initialIndex: number } | null>(null)
+ const dragged = useRef(false)
useEffect(() => {
// Renderer hot reload can run against an older preload bridge until restart.
@@ -34,8 +197,9 @@ export function RecentScreenshotButton({ expandDown = false }: { expandDown?: bo
}, [])
const visible = screenshots.filter(screenshot => !dismissed.includes(screenshot.id))
- if (!visible.length) return null
+ if (!visible.length && !viewer) return null
return (
+ <>
setViewer(null)} onSaved={saved => {
+ setScreenshots(current => [saved, ...current.filter(shot => shot.id !== saved.id)].slice(0, 5))
+ setViewer(null)
+ }} />}
+
)
}
diff --git a/src/renderer/canvas/ScreenshotDrawing.test.tsx b/src/renderer/canvas/ScreenshotDrawing.test.tsx
new file mode 100644
index 000000000..5ebee5e5a
--- /dev/null
+++ b/src/renderer/canvas/ScreenshotDrawing.test.tsx
@@ -0,0 +1,61 @@
+import React, { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { ScreenshotDrawing } from './ScreenshotDrawing'
+
+afterEach(() => vi.unstubAllGlobals())
+
+it('adds an editable speech-bubble comment and composites it into the saved PNG', async () => {
+ vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+ vi.stubGlobal('Image', class { src = ''; decode = async () => {} })
+ const context = {
+ drawImage: vi.fn(), beginPath: vi.fn(), moveTo: vi.fn(), lineTo: vi.fn(), quadraticCurveTo: vi.fn(), closePath: vi.fn(),
+ save: vi.fn(), restore: vi.fn(), translate: vi.fn(), rotate: vi.fn(),
+ fill: vi.fn(), stroke: vi.fn(), measureText: vi.fn(() => ({ width: 40 })), fillText: vi.fn(),
+ set lineCap(_value: string) {}, set lineJoin(_value: string) {}, set strokeStyle(_value: string) {},
+ set fillStyle(_value: string) {}, set lineWidth(_value: number) {}, set font(_value: string) {}, set textBaseline(_value: string) {},
+ }
+ const originalGetContext = HTMLCanvasElement.prototype.getContext
+ const originalToDataURL = HTMLCanvasElement.prototype.toDataURL
+ HTMLCanvasElement.prototype.getContext = vi.fn(() => context) as never
+ HTMLCanvasElement.prototype.toDataURL = vi.fn(() => 'data:image/png;base64,annotated')
+ const originalAPI = window.electronAPI
+ const saved = { id: 'saved', filePath: '/desktop/saved.png', dataUrl: 'data:image/png;base64,thumb', annotated: true }
+ window.electronAPI = { ...originalAPI, saveRecentScreenshot: vi.fn().mockResolvedValue(saved) }
+ const host = document.createElement('div')
+ const toolbar = document.createElement('div')
+ document.body.append(host, toolbar)
+ const root = createRoot(host)
+ const onSaved = vi.fn()
+ try {
+ await act(async () => root.render( {
+ const fontSize = calloutFontSize(imageHeight)
+ const lineHeight = fontSize * 1.25
+ const maxTextWidth = Math.max(80, Math.min(imageWidth * 0.6, 420 * imageHeight / 600))
+ const lines = text.split('\n')
+ const widths = lines.map(line => Math.max(fontSize * 2, line.length * fontSize * 0.58))
+ const wrappedLines = widths.reduce((total, lineWidth) => total + Math.max(1, Math.ceil(lineWidth / maxTextWidth)), 0)
+ return {
+ width: Math.min(imageWidth, Math.max(112, Math.min(maxTextWidth, Math.max(...widths)) + 70)),
+ height: Math.min(imageHeight, Math.max(44, wrappedLines * lineHeight + 20)),
+ }
+}
+
+function bubblePath(context: CanvasRenderingContext2D, callout: Callout, radius: number): void {
+ const { x, y, width, height } = callout
+ context.beginPath()
+ context.moveTo(x + radius, y)
+ context.lineTo(x + width - radius, y)
+ context.quadraticCurveTo(x + width, y, x + width, y + radius)
+ context.lineTo(x + width, y + height - radius)
+ context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
+ context.lineTo(x + radius, y + height)
+ context.quadraticCurveTo(x, y + height, x, y + height - radius)
+ context.lineTo(x, y + radius)
+ context.quadraticCurveTo(x, y, x + radius, y)
+ context.closePath()
+}
+
+function drawCallout(context: CanvasRenderingContext2D, callout: Callout, imageHeight: number): void {
+ const centerX = callout.x + callout.width / 2
+ const centerY = callout.y + callout.height / 2
+ context.save()
+ context.translate(centerX, centerY)
+ context.rotate(callout.rotation * Math.PI / 180)
+ context.translate(-centerX, -centerY)
+ bubblePath(context, callout, Math.min(18, callout.height / 5))
+ context.fillStyle = 'rgba(18,18,18,0.32)'
+ context.fill()
+ context.strokeStyle = 'rgba(255,255,255,0.32)'
+ context.lineWidth = Math.max(1, imageHeight / 900)
+ context.stroke()
+ const fontSize = calloutFontSize(imageHeight)
+ const lineHeight = fontSize * 1.25
+ context.fillStyle = '#ffffff'
+ context.font = `600 ${fontSize}px system-ui, sans-serif`
+ context.textBaseline = 'top'
+ const maxWidth = callout.width - 28
+ const lines: string[] = []
+ for (const paragraph of callout.text.trim().split('\n')) {
+ const paragraphLines: string[] = []
+ for (const word of paragraph.split(/\s+/)) {
+ const candidate = paragraphLines.length ? `${paragraphLines[paragraphLines.length - 1]} ${word}` : word
+ if (paragraphLines.length && context.measureText(candidate).width > maxWidth) paragraphLines.push(word)
+ else if (paragraphLines.length) paragraphLines[paragraphLines.length - 1] = candidate
+ else paragraphLines.push(candidate)
+ }
+ lines.push(...(paragraphLines.length ? paragraphLines : ['']))
+ }
+ lines.slice(0, Math.max(1, Math.floor((callout.height - 24) / lineHeight))).forEach((line, index) => {
+ context.fillText(line, callout.x + 14, callout.y + 12 + index * lineHeight, maxWidth)
+ })
+ context.restore()
+}
+
+export function ScreenshotDrawing({ id, url, width, height, toolbarHost, onClose, onSaved }: {
+ id: string; url: string; width: number; height: number; toolbarHost: HTMLElement | null; onClose: () => void; onSaved: (screenshot: RecentScreenshot, url: string) => void
+}) {
+ const [strokes, setStrokes] = useState([])
+ const [callouts, setCallouts] = useState([])
+ const [tool, setTool] = useState('pen')
+ const [color, setColor] = useState('#ff453a')
+ const [brush, setBrush] = useState(4)
+ const [saving, setSaving] = useState(false)
+ const [message, setMessage] = useState('')
+ const activePointer = useRef(null)
+ const calloutDrag = useRef<{ id: string; pointerId: number; point: Point; x: number; y: number } | null>(null)
+ const calloutResize = useRef<{ id: string; pointerId: number; point: Point; x: number; y: number; width: number; height: number; rotation: number; edges: ResizeEdges } | null>(null)
+ const calloutRotation = useRef<{ id: string; pointerId: number; center: Point; angle: number; rotation: number } | null>(null)
+ const svgRef = useRef(null)
+ const point = (event: { clientX: number; clientY: number }): Point => {
+ const bounds = svgRef.current?.getBoundingClientRect()
+ if (!bounds) return { x: 0, y: 0 }
+ return {
+ x: Math.max(0, Math.min(width, (event.clientX - bounds.left) * width / bounds.width)),
+ y: Math.max(0, Math.min(height, (event.clientY - bounds.top) * height / bounds.height)),
+ }
+ }
+ const save = async () => {
+ setSaving(true)
+ setMessage('')
+ try {
+ const original = new Image()
+ original.src = url
+ await original.decode()
+ const canvas = document.createElement('canvas')
+ canvas.width = width
+ canvas.height = height
+ const context = canvas.getContext('2d')
+ if (!context) throw new Error('Drawing is unavailable.')
+ context.drawImage(original, 0, 0, width, height)
+ context.lineCap = 'round'
+ context.lineJoin = 'round'
+ for (const stroke of strokes) {
+ context.strokeStyle = stroke.color
+ context.lineWidth = stroke.width
+ context.beginPath()
+ context.moveTo(stroke.points[0].x, stroke.points[0].y)
+ for (const p of stroke.points.slice(1)) context.lineTo(p.x, p.y)
+ context.stroke()
+ }
+ for (const callout of callouts) {
+ if (callout.text.trim()) drawCallout(context, callout, height)
+ }
+ const dataUrl = canvas.toDataURL('image/png')
+ if (typeof window.electronAPI.saveRecentScreenshot !== 'function') {
+ setMessage('Restart Cate to enable saving to the screenshot stack. Your drawing is still here.')
+ return
+ }
+ const saved = await window.electronAPI.saveRecentScreenshot(id, dataUrl)
+ onSaved(saved, dataUrl)
+ } catch (error) {
+ console.error('Could not save annotated screenshot', error)
+ setMessage('Could not save. Your drawing is still here; try again.')
+ } finally {
+ setSaving(false)
+ }
+ }
+ const buttonClass = 'flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-full px-3 text-xs font-medium text-white/80 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-30 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white'
+ return <>
+
event.stopPropagation()} onPointerMove={event => event.stopPropagation()}
+ onMouseDown={event => event.stopPropagation()} onMouseMove={event => event.stopPropagation()}
+ onWheel={event => event.stopPropagation()}>
+
,
+ document.body,
+ )
+}
export function RecentScreenshotButton({ expandDown = false }: { expandDown?: boolean }) {
const [screenshots, setScreenshots] = useState
+
+
+
+
+
+
+
+
+ {errorId === screenshot.id ? (
+
+ Could not load the original screenshot.
+ ) : image ? ( + 0 ? 'screenshot-slide-from-right' : 'screenshot-slide-from-left' }}>
+ 
shot.id === image.id) + 1} of ${screenshots.length}`}
+ onClick={event => event.stopPropagation()} onError={() => setErrorId(screenshot.id)} draggable={false}
+ style={{ width: image.width * scale, height: image.height * scale }}
+ className="block max-w-none rounded-xl shadow-2xl" />
+ onSaved(saved)} />
+
+ ) : Loading screenshot...
} +
+
+ event.stopPropagation()}>
+
+ {index + 1} / {screenshots.length}
+
+
+ event.stopPropagation()}>
+
+
+
+
+
-
+
+ {screenshot.annotated &&
+
+ {viewer &&