diff options
Diffstat (limited to 'html/merfolk/app.js')
-rw-r--r-- | html/merfolk/app.js | 26 |
1 files changed, 12 insertions, 14 deletions
diff --git a/html/merfolk/app.js b/html/merfolk/app.js index cb6eccf..963f22d 100644 --- a/html/merfolk/app.js +++ b/html/merfolk/app.js @@ -1,11 +1,11 @@ /** - * Mermaid diagram editor and viewer application - * Features: - * - Real-time preview of Mermaid diagrams - * - Pan and zoom functionality - * - Export as PNG with configurable scale - * - Export as SVG - * - Reset view to center + * Merfolk is a mermaid diagram editor and viewer. + * + * Dependencies: + * - mermaid.js + * - html2canvas + * - panzoom + * */ // Configuration @@ -15,7 +15,7 @@ mermaid.initialize({ securityLevel: 'loose' }); -// DOM Elements +// Known DOM Elements const input = document.getElementById('mermaid-input'); const preview = document.getElementById('mermaid-preview'); const errorMessage = document.getElementById('error-message'); @@ -45,7 +45,7 @@ const debounce = (func, wait) => { }; /** - * Renders a Mermaid diagram from the provided text + * Renders a Mermaid diagram from the provided markup * Handles initialization of panzoom functionality * @param {string} text - The Mermaid diagram syntax * @returns {Promise<void>} @@ -96,7 +96,7 @@ const handleReset = () => { /** * Exports the current diagram as a PNG image - * Prompts user to select scale factor before export + * Prompts user to select a desired scale before exporting * @returns {Promise<void>} */ const handleExport = async () => { @@ -202,7 +202,7 @@ const handleExport = async () => { document.body.appendChild(overlay); }); - // If user cancelled, return early + // Return early on cancel if (scale === null) return; const canvas = await html2canvas(preview, { @@ -233,7 +233,6 @@ const handleExportSvg = async () => { // Reset view before capturing handleReset(); - // Small delay to ensure the reset is complete await new Promise(resolve => setTimeout(resolve, 100)); const svg = preview.querySelector('svg'); @@ -255,7 +254,6 @@ const handleExportSvg = async () => { link.href = svgUrl; link.click(); - // Clean up URL.revokeObjectURL(svgUrl); } catch (err) { errorMessage.textContent = 'SVG export failed.'; @@ -263,7 +261,7 @@ const handleExportSvg = async () => { } }; -// Event Handlers + const debouncedRender = debounce(renderMermaid, 300); input.addEventListener('input', (e) => { debouncedRender(e.target.value); |