58 lines
1.6 KiB
HTML
58 lines
1.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body { background: #ffffff; overflow: hidden; }
|
||
|
|
#root { display: inline-block; }
|
||
|
|
#root svg { display: block; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="root"></div>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
import { exportToSvg } from "https://esm.sh/@excalidraw/excalidraw?bundle";
|
||
|
|
|
||
|
|
window.renderDiagram = async function(jsonData) {
|
||
|
|
try {
|
||
|
|
const data = typeof jsonData === "string" ? JSON.parse(jsonData) : jsonData;
|
||
|
|
const elements = data.elements || [];
|
||
|
|
const appState = data.appState || {};
|
||
|
|
const files = data.files || {};
|
||
|
|
|
||
|
|
// Force white background in appState
|
||
|
|
appState.viewBackgroundColor = appState.viewBackgroundColor || "#ffffff";
|
||
|
|
appState.exportWithDarkMode = false;
|
||
|
|
|
||
|
|
const svg = await exportToSvg({
|
||
|
|
elements: elements,
|
||
|
|
appState: {
|
||
|
|
...appState,
|
||
|
|
exportBackground: true,
|
||
|
|
},
|
||
|
|
files: files,
|
||
|
|
});
|
||
|
|
|
||
|
|
// Clear any previous render
|
||
|
|
const root = document.getElementById("root");
|
||
|
|
root.innerHTML = "";
|
||
|
|
root.appendChild(svg);
|
||
|
|
|
||
|
|
window.__renderComplete = true;
|
||
|
|
window.__renderError = null;
|
||
|
|
return { success: true, width: svg.getAttribute("width"), height: svg.getAttribute("height") };
|
||
|
|
} catch (err) {
|
||
|
|
window.__renderComplete = true;
|
||
|
|
window.__renderError = err.message;
|
||
|
|
return { success: false, error: err.message };
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Signal that the module is loaded and ready
|
||
|
|
window.__moduleReady = true;
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|