i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-02 22:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
app/extract_xml.ts
View File

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

18
app/page.tsx
View File

@@ -67,10 +67,20 @@ export default function Home() {
<div className="bg-amber-300 w-full h-[400px]">{imgData && <div className="bg-amber-300 w-full h-[400px]">{imgData &&
<> <>
{/* <img src={imgData} /> */} {/* <img src={imgData} /> */}
<div className="bg-blue-100 h-[400px]"> <div className="bg-blue-100 h-[400px] p-4 overflow-auto">
<h1>Extracted XML</h1> <h1 className="font-semibold mb-2">Extracted XML</h1>
<div>imgData</div> {(() => {
<div>{extractDiagramXML(imgData)}</div> 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> </div>
</>} </>}
<Button onClick={handleExport}>Export</Button> <Button onClick={handleExport}>Export</Button>

8
package-lock.json generated
View File

@@ -34,6 +34,7 @@
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4", "@tailwindcss/postcss": "^4",
"@types/node": "^20", "@types/node": "^20",
"@types/pako": "^2.0.3",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"tailwindcss": "^4", "tailwindcss": "^4",
@@ -1300,6 +1301,13 @@
"undici-types": "~6.19.2" "undici-types": "~6.19.2"
} }
}, },
"node_modules/@types/pako": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.3.tgz",
"integrity": "sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/react": { "node_modules/@types/react": {
"version": "19.0.11", "version": "19.0.11",
"license": "MIT", "license": "MIT",

1
package.json
View File

@@ -35,6 +35,7 @@
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4", "@tailwindcss/postcss": "^4",
"@types/node": "^20", "@types/node": "^20",
"@types/pako": "^2.0.3",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"tailwindcss": "^4", "tailwindcss": "^4",