f524c1b9d8
Replace the charCount * fontSize * 0.55 text sizing heuristic with canvas-based measurement (graceful fallback when native deps unavailable). Add validate.mjs for automated spatial checks (text overflow, arrow-text collisions, element overlap). Update element format reference with sizing rules, label guidelines, and arrow routing conventions. Add verification step to SKILL.md workflow. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
62 lines
1.8 KiB
HTML
62 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
body { margin: 0; background: white; }
|
|
#root { width: 900px; height: 400px; }
|
|
</style>
|
|
<script>
|
|
window.EXCALIDRAW_ASSET_PATH = "https://esm.sh/@excalidraw/excalidraw/dist/prod/";
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"react": "https://esm.sh/react@18",
|
|
"react-dom": "https://esm.sh/react-dom@18",
|
|
"react-dom/client": "https://esm.sh/react-dom@18/client",
|
|
"react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
|
|
"@excalidraw/excalidraw": "https://esm.sh/@excalidraw/excalidraw@0.18.0?external=react,react-dom"
|
|
}
|
|
}
|
|
</script>
|
|
<script type="module">
|
|
import { exportToBlob } from "@excalidraw/excalidraw";
|
|
|
|
async function run() {
|
|
const resp = await fetch("./diagram.excalidraw");
|
|
const data = await resp.json();
|
|
|
|
const validTypes = ["rectangle","ellipse","diamond","text","arrow","line","freedraw","image","frame"];
|
|
const elements = data.elements.filter(el => validTypes.includes(el.type));
|
|
|
|
const blob = await exportToBlob({
|
|
elements,
|
|
appState: {
|
|
exportBackground: true,
|
|
viewBackgroundColor: data.appState?.viewBackgroundColor || "#ffffff",
|
|
exportWithDarkMode: data.appState?.exportWithDarkMode || false,
|
|
},
|
|
files: data.files || {},
|
|
getDimensions: (w, h) => ({ width: w * 2, height: h * 2, scale: 2 }),
|
|
});
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
window.__PNG_DATA__ = reader.result;
|
|
document.title = "READY";
|
|
};
|
|
reader.readAsDataURL(blob);
|
|
}
|
|
|
|
run().catch(e => {
|
|
console.error("EXPORT ERROR:", e);
|
|
document.title = "ERROR:" + e.message;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|