You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
2.2 KiB
62 lines
2.2 KiB
/** |
|
* TikZ renderer using node-tikzjax |
|
* Converts TikZ LaTeX code to SVG for browser rendering |
|
*/ |
|
|
|
// We'll use a simple approach for now since node-tikzjax might not be available |
|
// This is a placeholder implementation that can be enhanced later |
|
|
|
export function renderTikZ(tikzCode: string): string { |
|
try { |
|
// For now, we'll create a simple SVG placeholder |
|
// In a full implementation, this would use node-tikzjax or similar library |
|
|
|
// Extract TikZ content and create a basic SVG |
|
const svgContent = createBasicSVG(tikzCode); |
|
|
|
return svgContent; |
|
} catch (error) { |
|
console.error("Failed to render TikZ:", error); |
|
return `<div class="tikz-error text-red-500 p-4 border border-red-300 rounded"> |
|
<p class="font-bold">TikZ Rendering Error</p> |
|
<p class="text-sm">Failed to render TikZ diagram. Original code:</p> |
|
<pre class="mt-2 p-2 bg-gray-100 rounded text-xs overflow-x-auto">${tikzCode}</pre> |
|
</div>`; |
|
} |
|
} |
|
|
|
/** |
|
* Creates a basic SVG placeholder for TikZ content |
|
* This is a temporary implementation until proper TikZ rendering is available |
|
*/ |
|
function createBasicSVG(tikzCode: string): string { |
|
// Create a simple SVG with the TikZ code as text |
|
const width = 400; |
|
const height = 300; |
|
|
|
return `<svg width="${width}" height="${height}" class="tikz-diagram max-w-full h-auto rounded-lg shadow-lg my-4" viewBox="0 0 ${width} ${height}"> |
|
<rect width="${width}" height="${height}" fill="white" stroke="#ccc" stroke-width="1"/> |
|
<text x="10" y="20" font-family="monospace" font-size="12" fill="#666"> |
|
TikZ Diagram |
|
</text> |
|
<text x="10" y="40" font-family="monospace" font-size="10" fill="#999"> |
|
(Rendering not yet implemented) |
|
</text> |
|
<foreignObject x="10" y="60" width="${width - 20}" height="${height - 70}"> |
|
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: monospace; font-size: 10px; color: #666; overflow: hidden;"> |
|
<pre style="margin: 0; white-space: pre-wrap; word-break: break-all;">${ |
|
escapeHtml(tikzCode) |
|
}</pre> |
|
</div> |
|
</foreignObject> |
|
</svg>`; |
|
} |
|
|
|
/** |
|
* Escapes HTML characters for safe display |
|
*/ |
|
function escapeHtml(text: string): string { |
|
const div = document.createElement("div"); |
|
div.textContent = text; |
|
return div.innerHTML; |
|
}
|
|
|