1import { useEffect, useRef } from "react";
2import type { RawImage } from "../imageConvert.ts";
3import { drawRawToCanvas, rawToDataUrl } from "../imageLoad.ts";
5interface Props {
6 title: string;
7 image: RawImage | null;
8 placeholder?: string;
9 /** When set, shows a download link for the image (PNG). */
10 downloadName?: string;
11 overlay?: React.ReactNode;
12}
14export function ImageView({
15 title,
16 image,
17 placeholder,
18 downloadName,
19 overlay,
20}: Props) {
21 const canvasRef = useRef<HTMLCanvasElement>(null);
23 useEffect(() => {
24 if (image && canvasRef.current) {
25 drawRawToCanvas(canvasRef.current, image);
26 }
27 }, [image]);
29 return (
30 <div className="imageview">
31 <div className="imageview-head">
32 <span className="imageview-title">{title}</span>
33 {image && (
34 <span className="imageview-dims">
35 {image.width} × {image.height}
36 {downloadName && (
37 <>
38 {" · "}
39 <a
40 href={image ? rawToDataUrl(image) : "#"}
41 download={downloadName}
42 >
43 download
44 </a>
45 </>
46 )}
47 </span>
48 )}
49 </div>
50 <div className="imageview-body">
51 {image ? (
52 <canvas ref={canvasRef} className="imageview-canvas" />
53 ) : (
54 <div className="imageview-placeholder">{placeholder ?? "—"}</div>
55 )}
56 {overlay}
57 </div>
58 </div>
59 );
60}