feat : add preview export image
This commit is contained in:
@@ -10,6 +10,7 @@ import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
@@ -65,6 +66,9 @@ export function GuideImageExport({
|
||||
promptForLanguage = false,
|
||||
localizeFileName = true,
|
||||
modeSelection = "dialog",
|
||||
additionalOptions,
|
||||
previewPosition = "top",
|
||||
optionsBeforePreview = false,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
fileName: string;
|
||||
@@ -81,6 +85,9 @@ export function GuideImageExport({
|
||||
promptForLanguage?: boolean;
|
||||
localizeFileName?: boolean;
|
||||
modeSelection?: "dialog" | "inline";
|
||||
additionalOptions?: ReactNode;
|
||||
previewPosition?: "top" | "right";
|
||||
optionsBeforePreview?: boolean;
|
||||
}) {
|
||||
const captureRef = useRef<HTMLDivElement>(null);
|
||||
const [captureMode, setCaptureMode] = useState<
|
||||
@@ -93,6 +100,10 @@ export function GuideImageExport({
|
||||
"with-notes",
|
||||
);
|
||||
const [modeDialogOpen, setModeDialogOpen] = useState(false);
|
||||
const previewRef = useRef<HTMLDivElement>(null);
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||
const [previewing, setPreviewing] = useState(false);
|
||||
const previewEnabled = modeSelection === "inline" || modeDialogOpen;
|
||||
|
||||
function requestCapture() {
|
||||
setModeDialogOpen(false);
|
||||
@@ -121,7 +132,29 @@ export function GuideImageExport({
|
||||
);
|
||||
}
|
||||
|
||||
const exportSettings = (
|
||||
function applyNoteMode(
|
||||
node: HTMLDivElement,
|
||||
mode: "with-notes" | "without-notes",
|
||||
) {
|
||||
node.querySelectorAll<HTMLElement>("[data-export-note]").forEach((note) => {
|
||||
note.style.display = mode === "without-notes" ? "none" : "";
|
||||
});
|
||||
|
||||
const right = node.querySelector<HTMLElement>(".artifact-export-right");
|
||||
if (!right) return;
|
||||
right.style.display = "";
|
||||
if (mode === "without-notes") {
|
||||
const sections = right.querySelectorAll<HTMLElement>(
|
||||
"[data-artifact-export-section]",
|
||||
);
|
||||
const hasVisibleSection = Array.from(sections).some(
|
||||
(section) => getComputedStyle(section).display !== "none",
|
||||
);
|
||||
if (!hasVisibleSection) right.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
const exportOptions = (
|
||||
<>
|
||||
{showLanguageSelector || promptForLanguage ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
@@ -146,39 +179,90 @@ export function GuideImageExport({
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
) : null}
|
||||
<Button type="button" disabled={capturing || disabled} onClick={requestCapture}>
|
||||
{capturing ? <Spinner data-icon="inline-start" /> : <DownloadIcon data-icon="inline-start" />}
|
||||
{capturing ? "กำลังส่งออก…" : buttonLabel}
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
const exportAction = (
|
||||
<Button type="button" disabled={capturing || disabled} onClick={requestCapture}>
|
||||
{capturing ? <Spinner data-icon="inline-start" /> : <DownloadIcon data-icon="inline-start" />}
|
||||
{capturing ? "กำลังส่งออก…" : buttonLabel}
|
||||
</Button>
|
||||
);
|
||||
|
||||
const exportPreview = (
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="text-sm font-medium">ตัวอย่างภาพส่งออก</p>
|
||||
<div className="flex min-h-32 items-center justify-center overflow-hidden rounded-lg border bg-muted/30 p-2">
|
||||
{previewing ? (
|
||||
<Spinner className="size-6" />
|
||||
) : previewUrl ? (
|
||||
// This is a temporary client-generated blob, not an optimizable remote asset.
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={previewUrl} alt="ตัวอย่างภาพที่จะส่งออก" className="max-h-[50svh] max-w-full object-contain" />
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">ไม่สามารถสร้างตัวอย่างได้</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!previewEnabled) return;
|
||||
|
||||
let cancelled = false;
|
||||
let nextUrl: string | null = null;
|
||||
|
||||
async function createPreview() {
|
||||
setPreviewing(true);
|
||||
try {
|
||||
const node = previewRef.current;
|
||||
if (!node) throw new Error("Preview target is unavailable");
|
||||
applyNoteMode(node, selectedMode);
|
||||
|
||||
const { domToBlob, waitUntilLoad } = await import("modern-screenshot");
|
||||
await Promise.all([document.fonts.ready, waitUntilLoad(node)]);
|
||||
const blob = await domToBlob(node, {
|
||||
backgroundColor: getComputedStyle(node).backgroundColor,
|
||||
type: `image/${format}`,
|
||||
scale: 1,
|
||||
width,
|
||||
height,
|
||||
});
|
||||
if (cancelled) return;
|
||||
|
||||
nextUrl = URL.createObjectURL(blob);
|
||||
setPreviewUrl((current) => {
|
||||
if (current) URL.revokeObjectURL(current);
|
||||
return nextUrl;
|
||||
});
|
||||
} catch {
|
||||
if (!cancelled) setPreviewUrl(null);
|
||||
} finally {
|
||||
if (!cancelled) setPreviewing(false);
|
||||
}
|
||||
}
|
||||
|
||||
void createPreview();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
if (nextUrl) URL.revokeObjectURL(nextUrl);
|
||||
};
|
||||
}, [children, format, height, language, previewEnabled, selectedMode, width]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!capturing) return;
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
async function capture() {
|
||||
const activeCaptureMode = captureMode;
|
||||
if (!activeCaptureMode) return;
|
||||
|
||||
try {
|
||||
const node = captureRef.current;
|
||||
if (!node) throw new Error("Capture target is unavailable");
|
||||
|
||||
if (captureMode === "without-notes") {
|
||||
node.querySelectorAll<HTMLElement>("[data-export-note]").forEach((note) => {
|
||||
note.style.display = "none";
|
||||
});
|
||||
// A note can be the only remaining content in the artifact right column.
|
||||
const right = node.querySelector<HTMLElement>(".artifact-export-right");
|
||||
if (right) {
|
||||
const sections = right.querySelectorAll<HTMLElement>(
|
||||
"[data-artifact-export-section]",
|
||||
);
|
||||
const hasVisibleSection = Array.from(sections).some(
|
||||
(section) => getComputedStyle(section).display !== "none",
|
||||
);
|
||||
if (!hasVisibleSection) right.style.display = "none";
|
||||
}
|
||||
}
|
||||
applyNoteMode(node, activeCaptureMode);
|
||||
|
||||
const { domToBlob, waitUntilLoad } = await import("modern-screenshot");
|
||||
await Promise.all([document.fonts.ready, waitUntilLoad(node)]);
|
||||
@@ -196,7 +280,7 @@ export function GuideImageExport({
|
||||
link.download = imageExportFileName(
|
||||
fileName,
|
||||
language,
|
||||
captureMode === "without-notes",
|
||||
activeCaptureMode === "without-notes",
|
||||
localizeFileName,
|
||||
);
|
||||
link.href = url;
|
||||
@@ -220,21 +304,78 @@ export function GuideImageExport({
|
||||
return (
|
||||
<>
|
||||
{modeSelection === "inline" ? (
|
||||
exportSettings
|
||||
<>
|
||||
{previewPosition === "right" ? (
|
||||
<div className="grid min-h-0 gap-4 lg:grid-cols-[16rem_fit-content(42rem)]">
|
||||
<div className="flex min-w-0 flex-col gap-4">
|
||||
{additionalOptions}
|
||||
{exportOptions}
|
||||
</div>
|
||||
<div className="min-w-0">{exportPreview}</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{additionalOptions}
|
||||
{exportPreview}
|
||||
{exportOptions}
|
||||
</>
|
||||
)}
|
||||
<DialogFooter className="sticky bottom-0">
|
||||
{exportAction}
|
||||
</DialogFooter>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">{exportButton(buttonLabel)}</div>
|
||||
)}
|
||||
{modeSelection === "dialog" ? (
|
||||
<Dialog open={modeDialogOpen} onOpenChange={setModeDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogContent
|
||||
className={cn(
|
||||
"max-h-[90svh] overflow-y-auto sm:max-w-3xl",
|
||||
previewPosition === "right" && "sm:w-fit sm:max-w-[calc(100%-2rem)]",
|
||||
)}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>ตั้งค่าการส่งออกภาพ</DialogTitle>
|
||||
<DialogDescription>เลือกตัวเลือกที่ต้องการก่อนส่งออกภาพ</DialogDescription>
|
||||
</DialogHeader>
|
||||
{exportSettings}
|
||||
{previewPosition === "right" ? (
|
||||
<div className="grid min-h-0 gap-4 lg:grid-cols-[16rem_fit-content(42rem)]">
|
||||
<div className="flex min-w-0 flex-col gap-4">
|
||||
{additionalOptions}
|
||||
{exportOptions}
|
||||
</div>
|
||||
<div className="min-w-0">{exportPreview}</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{additionalOptions}
|
||||
{optionsBeforePreview ? exportOptions : exportPreview}
|
||||
{optionsBeforePreview ? exportPreview : exportOptions}
|
||||
</>
|
||||
)}
|
||||
<DialogFooter className="sticky bottom-0">
|
||||
{exportAction}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
) : null}
|
||||
{previewEnabled && typeof document !== "undefined"
|
||||
? createPortal(
|
||||
<div aria-hidden="true" className="pointer-events-none fixed top-0 left-[-10000px]">
|
||||
<div
|
||||
ref={previewRef}
|
||||
data-export-language={language}
|
||||
className={cn("bg-background p-10 text-foreground", captureClassName)}
|
||||
style={{ width, height }}
|
||||
>
|
||||
<style>{'[data-export-language="th"] [data-export-lang="en"],[data-export-language="en"] [data-export-lang="th"]{display:none!important}'}</style>
|
||||
{children}
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
: null}
|
||||
{capturing
|
||||
? createPortal(
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user