refactor: change extractDiagramXML to synchronous function and improve error handling in the UI

This commit is contained in:
dayuan.jiang
2025-03-19 06:11:04 +00:00
parent e26ef731e9
commit 10f9459627
4 changed files with 26 additions and 7 deletions

View File

@@ -1,9 +1,9 @@
import * as pako from 'pako';
export async function extractDiagramXML(xml_svg_string: string): Promise<string> {
export function extractDiagramXML(xml_svg_string: string): string {
try {
// 1. Parse the SVG string (using built-in DOMParser in a browser-like environment)
const svgString = atob(xml_svg_string.slice(26))
const svgString = atob(xml_svg_string.slice(26));
const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
const svgElement = svgDoc.querySelector('svg');
@@ -66,4 +66,4 @@ export async function extractDiagramXML(xml_svg_string: string): Promise<string>
console.error("Error extracting diagram XML:", error);
throw error; // Re-throw for caller handling
}
}
}

View File

@@ -67,10 +67,20 @@ export default function Home() {
<div className="bg-amber-300 w-full h-[400px]">{imgData &&
<>
{/* <img src={imgData} /> */}
<div className="bg-blue-100 h-[400px]">
<h1>Extracted XML</h1>
<div>imgData</div>
<div>{extractDiagramXML(imgData)}</div>
<div className="bg-blue-100 h-[400px] p-4 overflow-auto">
<h1 className="font-semibold mb-2">Extracted XML</h1>
{(() => {
try {
const extractedXml = extractDiagramXML(imgData);
return <pre className="whitespace-pre-wrap text-sm">{extractedXml}</pre>;
} catch (error) {
return (
<div className="text-red-600">
Error extracting XML: {error instanceof Error ? error.message : 'Unknown error'}
</div>
);
}
})()}
</div>
</>}
<Button onClick={handleExport}>Export</Button>