846 lines
30 KiB
JavaScript
846 lines
30 KiB
JavaScript
/**
|
|
* Mermaid.js integration for ObsiGate.
|
|
*
|
|
* Handles initialization, rendering, templates, zoom/pan,
|
|
* fullscreen, focus mode, theme sync, and Obsidian compatibility.
|
|
*
|
|
* Usage: import { initMermaid, renderMermaidBlocks } from './mermaid-viewer.js';
|
|
*/
|
|
import { safeCreateIcons } from './utils.js';
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Configuration (#20)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
var _mermaidReady = false;
|
|
var _currentTheme = 'default';
|
|
|
|
export function initMermaid() {
|
|
if (typeof mermaid === 'undefined') {
|
|
console.warn('[Mermaid] library not loaded');
|
|
return;
|
|
}
|
|
mermaid.initialize(_getMermaidConfig(_currentTheme === 'dark'));
|
|
_mermaidReady = true;
|
|
}
|
|
|
|
export function updateMermaidTheme(isDark) {
|
|
_currentTheme = isDark ? 'dark' : 'default';
|
|
if (_mermaidReady) {
|
|
mermaid.initialize(_getMermaidConfig(isDark));
|
|
}
|
|
|
|
// Re-render all existing Mermaid containers with the new theme
|
|
var containers = document.querySelectorAll('.mermaid-container');
|
|
for (var i = 0; i < containers.length; i++) {
|
|
reRenderContainer(containers[i]);
|
|
}
|
|
}
|
|
|
|
// Unified theme config — used by both init and theme toggle
|
|
function _getMermaidConfig(isDark) {
|
|
return {
|
|
startOnLoad: false,
|
|
securityLevel: 'strict',
|
|
theme: 'base',
|
|
fontFamily: 'inherit',
|
|
themeVariables: isDark ? DARK_THEME : LIGHT_THEME,
|
|
};
|
|
}
|
|
|
|
// Dark theme — optimized for readability on dark backgrounds
|
|
var DARK_THEME = {
|
|
// Flowchart / general shapes
|
|
primaryColor: '#1e3a5f',
|
|
primaryTextColor: '#c8daf0',
|
|
primaryBorderColor: '#4a7ab5',
|
|
lineColor: '#5a7a9a',
|
|
secondaryColor: '#2a4a6a',
|
|
tertiaryColor: '#3a6090',
|
|
// Background & containers
|
|
background: '#0f1117',
|
|
mainBkg: '#1a2030',
|
|
nodeBorder: '#4a7ab5',
|
|
clusterBkg: '#1a2235',
|
|
clusterBorder: '#3a5a80',
|
|
titleColor: '#a0c0e0',
|
|
edgeLabelBackground: '#1a2d47',
|
|
nodeTextColor: '#c8daf0',
|
|
// Sequence diagram
|
|
actorBkg: '#1e3a5f',
|
|
actorBorder: '#4a7ab5',
|
|
actorTextColor: '#c8daf0',
|
|
actorLineColor: '#4a7ab5',
|
|
signalColor: '#c8daf0',
|
|
signalTextColor: '#c8daf0',
|
|
labelBoxBkgColor: '#1e3a5f',
|
|
labelBoxBorderColor: '#4a7ab5',
|
|
labelTextColor: '#c8daf0',
|
|
loopTextColor: '#c8daf0',
|
|
noteBkgColor: '#2a3550',
|
|
noteBorderColor: '#4a7ab5',
|
|
noteTextColor: '#c8daf0',
|
|
activationBkgColor: '#3a5a80',
|
|
// Gantt
|
|
sectionBkgColor: '#1a2d47',
|
|
altSectionBkgColor: '#1e3350',
|
|
sectionBkgColor2: '#1a2d47',
|
|
taskBkgColor: '#1e3a5f',
|
|
taskBorderColor: '#4a7ab5',
|
|
taskTextColor: '#c8daf0',
|
|
taskTextOutsideColor: '#8aacca',
|
|
taskTextLightColor: '#e0e8f0',
|
|
gridColor: '#2a3a55',
|
|
activeTaskBkgColor: '#2a5a8a',
|
|
activeTaskBorderColor: '#6a9ad0',
|
|
doneTaskBkgColor: '#1a3a4f',
|
|
doneTaskBorderColor: '#3a7a9a',
|
|
critBkgColor: '#5a2a3a',
|
|
critBorderColor: '#a04050',
|
|
todayLineColor: '#4a7ab5',
|
|
// Git graph
|
|
git0: '#4a7ab5',
|
|
git1: '#3a6a9a',
|
|
git2: '#5a8ac0',
|
|
git3: '#2a5a8a',
|
|
git4: '#6a9ad0',
|
|
git5: '#3a7aaa',
|
|
git6: '#4a8abf',
|
|
git7: '#5a9acf',
|
|
gitInv0: '#c8daf0',
|
|
gitInv1: '#b0c8e0',
|
|
gitInv2: '#d0e0f0',
|
|
gitInv3: '#a0b8d0',
|
|
gitBranchLabel0: '#c8daf0',
|
|
gitBranchLabel1: '#b0c8e0',
|
|
gitBranchLabel2: '#d0e0f0',
|
|
commitLabelColor: '#c8daf0',
|
|
commitLabelBackground: '#1e3a5f',
|
|
commitLabelFontSize: '11px',
|
|
tagLabelColor: '#a0c0e0',
|
|
tagLabelBackground: '#1a2d47',
|
|
tagLabelBorder: '#4a7ab5',
|
|
// Pie chart
|
|
pie1: '#1e3a5f',
|
|
pie2: '#2a5a8a',
|
|
pie3: '#153050',
|
|
pie4: '#3a6a9a',
|
|
pie5: '#204070',
|
|
pie6: '#4a7ab5',
|
|
pie7: '#255080',
|
|
pie8: '#5a8ac0',
|
|
pieTitleTextColor: '#c8daf0',
|
|
pieSectionTextColor: '#c8daf0',
|
|
pieLegendTextColor: '#a0c0e0',
|
|
pieStrokeColor: '#0f1117',
|
|
// Class diagram
|
|
classText: '#c8daf0',
|
|
// State diagram
|
|
labelColor: '#c8daf0',
|
|
// ER diagram — dark alternating rows for readability
|
|
fillType0: '#111d30',
|
|
fillType1: '#152238',
|
|
fillType2: '#111d30',
|
|
fillType3: '#152238',
|
|
fillType4: '#111d30',
|
|
fillType5: '#152238',
|
|
fillType6: '#111d30',
|
|
fillType7: '#152238',
|
|
entityBorder: '#4a7ab5',
|
|
entityBackground: '#0d1520',
|
|
attributeEvenColor: '#ffffff',
|
|
attributeOddColor: '#c8daf0',
|
|
// Timeline — section colors
|
|
cScale0: '#1e3a5f',
|
|
cScale1: '#2a5a8a',
|
|
cScale2: '#153050',
|
|
cScale3: '#3a6a9a',
|
|
cScale4: '#204070',
|
|
cScale5: '#4a7ab5',
|
|
cScaleLabel0: '#c8daf0',
|
|
cScaleLabel1: '#c8daf0',
|
|
cScaleLabel2: '#c8daf0',
|
|
cScaleLabel3: '#c8daf0',
|
|
cScaleLabel4: '#c8daf0',
|
|
cScaleLabel5: '#c8daf0',
|
|
// XY Chart — bar and line colors
|
|
xyChartBackgroundColor: '#0f1117',
|
|
xyChartTitleColor: '#c8daf0',
|
|
xyChartXaxisTitleColor: '#8aacca',
|
|
xyChartYaxisTitleColor: '#8aacca',
|
|
plotColor1: '#1e3a5f',
|
|
plotColor2: '#4a7ab5',
|
|
plotColor3: '#2a5a8a',
|
|
plotColor4: '#5a8ac0',
|
|
plotColor5: '#3a6a9a',
|
|
plotColor6: '#6a9ad0',
|
|
plotColor7: '#153050',
|
|
plotColor8: '#204070',
|
|
// General text
|
|
textColor: '#c8daf0',
|
|
fontSize: '14px',
|
|
};
|
|
|
|
// Light theme — clean, minimal
|
|
var LIGHT_THEME = {
|
|
primaryColor: '#f0f0f5',
|
|
primaryTextColor: '#1a1a2e',
|
|
primaryBorderColor: '#ccc',
|
|
lineColor: '#666',
|
|
secondaryColor: '#e8e8f0',
|
|
tertiaryColor: '#fafafa',
|
|
background: '#ffffff',
|
|
mainBkg: '#f5f5fa',
|
|
nodeBorder: '#ccc',
|
|
clusterBkg: '#f0f0f5',
|
|
clusterBorder: '#ddd',
|
|
titleColor: '#333',
|
|
edgeLabelBackground: '#f5f5fa',
|
|
nodeTextColor: '#1a1a2e',
|
|
fontSize: '14px',
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Templates for all diagram types (#22)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export var MERMAID_TEMPLATES = {
|
|
flowchart: 'flowchart TD\n A[Start] --> B{Decision?}\n B -->|Yes| C[OK]\n B -->|No| D[Cancel]',
|
|
sequenceDiagram: 'sequenceDiagram\n Alice->>Bob: Hello\n Bob-->>Alice: Hi!',
|
|
classDiagram: 'classDiagram\n class Animal {\n +name: string\n +age: int\n +makeSound()\n }\n class Dog {\n +bark()\n }\n Animal <|-- Dog',
|
|
'stateDiagram-v2': 'stateDiagram-v2\n [*] --> Idle\n Idle --> Running : start\n Running --> Idle : stop\n Running --> [*] : done',
|
|
erDiagram: 'erDiagram\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE-ITEM : contains',
|
|
journey: 'journey\n title My day\n section Morning\n Wake up: 5: Me\n Breakfast: 3: Me\n section Work\n Code: 5: Me, Cat',
|
|
gantt: 'gantt\n title Project Plan\n dateFormat YYYY-MM-DD\n section Design\n Mockups :a1, 2024-01-01, 7d\n section Dev\n Backend :a2, after a1, 14d',
|
|
pie: 'pie title Languages\n "Python" : 45\n "JavaScript" : 30\n "Go" : 15\n "Rust" : 10',
|
|
gitGraph: 'gitGraph\n commit\n branch feature\n checkout feature\n commit\n checkout main\n merge feature',
|
|
requirementDiagram: 'requirementDiagram\n requirement req1 {\n id: 1\n text: System shall do X\n }\n element Component {\n type: package\n }\n Component - satisfies -> req1',
|
|
mindmap: 'mindmap\n root((Project))\n Frontend\n HTML\n CSS\n JavaScript\n Backend\n API\n Database',
|
|
timeline: 'timeline\n title History\n 2020 : Started\n 2022 : v1.0\n 2024 : v2.0',
|
|
quadrantChart: 'quadrantChart\n title Products\n x-axis Low Reach --> High Reach\n y-axis Low Value --> High Value\n quadrant-1 Stars\n quadrant-2 Question Marks\n Product A: [0.8, 0.6]\n Product B: [0.3, 0.8]',
|
|
C4Context: 'C4Context\n title System Context\n Person(user, "User")\n System(app, "My App")\n System_Ext(db, "Database")\n Rel(user, app, "Uses")\n Rel(app, db, "Reads/Writes")',
|
|
C4Container: 'C4Container\n title Containers\n Container(web, "Web App", "React")\n Container(api, "API", "FastAPI")\n ContainerDb(db, "DB", "PostgreSQL")\n Rel(web, api, "REST")\n Rel(api, db, "SQL")',
|
|
C4Component: 'C4Component\n title API Components\n Container_Boundary(api, "API") {\n Component(auth, "Auth Service")\n Component(search, "Search Engine")\n }',
|
|
C4Dynamic: 'C4Dynamic\n title Login Flow\n Person(user, "User")\n Container(web, "Web App")\n Container(api, "API")\n Rel(user, web, "POST /login")\n Rel(web, api, "authenticate")',
|
|
C4Deployment: 'C4Deployment\n title Deployment\n Deployment_Node(cloud, "Cloud") {\n Container(web, "Web")\n Container(api, "API")\n }',
|
|
'xychart-beta': 'xychart-beta\n title "Sales"\n x-axis [Jan, Feb, Mar, Apr]\n y-axis "Revenue" 0 --> 100\n bar [45, 60, 75, 90]\n line [30, 45, 55, 70]',
|
|
'block-beta': 'block-beta\n columns 3\n A B C\n D E F',
|
|
'sankey-beta': 'sankey-beta\n A, B, 50\n A, C, 30\n B, D, 20\n C, D, 30',
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Rendering engine (#21)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
var _renderCounter = 0;
|
|
|
|
export async function renderMermaidBlocks(container) {
|
|
if (!_mermaidReady || typeof mermaid === 'undefined') return;
|
|
|
|
var blocks = container.querySelectorAll('pre code.language-mermaid, .mermaid-code');
|
|
if (blocks.length === 0) return;
|
|
|
|
for (var i = 0; i < blocks.length; i++) {
|
|
var codeBlock = blocks[i];
|
|
var originalCode = codeBlock.textContent || codeBlock.innerText || '';
|
|
if (!originalCode.trim()) continue;
|
|
|
|
var wrapper = codeBlock.closest('pre') || codeBlock.parentElement;
|
|
if (!wrapper) continue;
|
|
|
|
// Check if already rendered
|
|
if (wrapper.querySelector('.mermaid-rendered')) continue;
|
|
|
|
try {
|
|
// Preprocess Obsidian syntax before Mermaid parsing (#24)
|
|
var code = preprocessObsidian(originalCode);
|
|
await mermaid.parse(code);
|
|
var id = 'mermaid-' + (++_renderCounter) + '-' + Date.now();
|
|
var result = await mermaid.render(id, code);
|
|
|
|
// Extract diagram type from first non-comment, non-empty line
|
|
var diagramType = extractDiagramType(code);
|
|
|
|
// Build container with header + body
|
|
var containerDiv = document.createElement('div');
|
|
containerDiv.className = 'mermaid-container';
|
|
containerDiv.setAttribute('data-mermaid-code', originalCode);
|
|
|
|
// Header bar
|
|
var header = document.createElement('div');
|
|
header.className = 'mermaid-header';
|
|
header.innerHTML =
|
|
'<span class="mermaid-diagram-type">' + escapeHtml(diagramType) + '</span>' +
|
|
'<div class="mermaid-header-actions">' +
|
|
'<button class="mermaid-btn mermaid-zoom-in" title="Zoom +"><i data-lucide="zoom-in" style="width:14px;height:14px"></i></button>' +
|
|
'<button class="mermaid-btn mermaid-zoom-out" title="Zoom -"><i data-lucide="zoom-out" style="width:14px;height:14px"></i></button>' +
|
|
'<button class="mermaid-btn mermaid-fullscreen" title="Plein ecran"><i data-lucide="expand" style="width:14px;height:14px"></i></button>' +
|
|
'<button class="mermaid-btn mermaid-copy-svg" title="Copier SVG"><i data-lucide="copy" style="width:14px;height:14px"></i></button>' +
|
|
'<button class="mermaid-btn mermaid-copy-code" title="Copier le code Mermaid"><i data-lucide="file-code-2" style="width:14px;height:14px"></i></button>' +
|
|
'<button class="mermaid-btn mermaid-download" title="Telecharger PNG"><i data-lucide="download" style="width:14px;height:14px"></i></button>' +
|
|
'<div class="mermaid-toggle">' +
|
|
'<button class="mermaid-toggle-btn active" data-mode="preview">Preview</button>' +
|
|
'<button class="mermaid-toggle-btn" data-mode="code">Code</button>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
// Body
|
|
var body = document.createElement('div');
|
|
body.className = 'mermaid-body';
|
|
body.innerHTML =
|
|
'<div class="mermaid-rendered">' + result.svg + '</div>' +
|
|
'<div class="mermaid-source" style="display:none"><pre><code class="language-mermaid">' + escapeHtml(originalCode) + '</code></pre></div>';
|
|
|
|
containerDiv.appendChild(header);
|
|
containerDiv.appendChild(body);
|
|
|
|
wrapper.parentNode.replaceChild(containerDiv, wrapper);
|
|
|
|
// Wire up header buttons
|
|
wireHeaderButtons(containerDiv, originalCode);
|
|
setupZoomPan(containerDiv);
|
|
setupCodePreviewToggle(containerDiv);
|
|
// Patch beta diagram colors for dark mode
|
|
if (_currentTheme === 'dark') patchBetaColors(containerDiv, diagramType);
|
|
safeCreateIcons();
|
|
} catch (err) {
|
|
var errorDiv = document.createElement('div');
|
|
errorDiv.className = 'mermaid-error';
|
|
errorDiv.innerHTML = '<strong>Erreur Mermaid</strong><br>' + escapeHtml(err.message || String(err));
|
|
wrapper.parentNode.replaceChild(errorDiv, wrapper);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Header button wiring
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function wireHeaderButtons(container, originalCode) {
|
|
// Copy SVG
|
|
var copySvgBtn = container.querySelector('.mermaid-copy-svg');
|
|
if (copySvgBtn) {
|
|
copySvgBtn.addEventListener('click', function() {
|
|
copySvgToClipboard(container);
|
|
});
|
|
}
|
|
|
|
// Copy code
|
|
var copyCodeBtn = container.querySelector('.mermaid-copy-code');
|
|
if (copyCodeBtn) {
|
|
copyCodeBtn.addEventListener('click', function() {
|
|
copyToClipboard(originalCode);
|
|
});
|
|
}
|
|
|
|
// Download PNG
|
|
var downloadBtn = container.querySelector('.mermaid-download');
|
|
if (downloadBtn) {
|
|
downloadBtn.addEventListener('click', function() {
|
|
exportMermaidPNG(container);
|
|
});
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Code / Preview toggle
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function setupCodePreviewToggle(container) {
|
|
var toggleBtns = container.querySelectorAll('.mermaid-toggle-btn');
|
|
var rendered = container.querySelector('.mermaid-rendered');
|
|
var source = container.querySelector('.mermaid-source');
|
|
var zoomBtns = container.querySelectorAll('.mermaid-zoom-in, .mermaid-zoom-out');
|
|
var fullscreenBtn = container.querySelector('.mermaid-fullscreen');
|
|
|
|
for (var i = 0; i < toggleBtns.length; i++) {
|
|
toggleBtns[i].addEventListener('click', function() {
|
|
var mode = this.getAttribute('data-mode');
|
|
|
|
// Update active state
|
|
for (var j = 0; j < toggleBtns.length; j++) {
|
|
toggleBtns[j].classList.remove('active');
|
|
}
|
|
this.classList.add('active');
|
|
|
|
if (mode === 'preview') {
|
|
rendered.style.display = '';
|
|
source.style.display = 'none';
|
|
// Show zoom/fullscreen buttons in preview mode
|
|
for (var k = 0; k < zoomBtns.length; k++) zoomBtns[k].style.display = '';
|
|
if (fullscreenBtn) fullscreenBtn.style.display = '';
|
|
} else {
|
|
rendered.style.display = 'none';
|
|
source.style.display = '';
|
|
// Hide zoom/fullscreen in code mode
|
|
for (var k = 0; k < zoomBtns.length; k++) zoomBtns[k].style.display = 'none';
|
|
if (fullscreenBtn) fullscreenBtn.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Diagram type extraction
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function extractDiagramType(code) {
|
|
var lines = code.trim().split('\n');
|
|
for (var i = 0; i < lines.length; i++) {
|
|
var line = lines[i].trim();
|
|
// Skip comments and empty lines
|
|
if (!line || line.indexOf('%%') === 0) continue;
|
|
// Return the first meaningful word(s)
|
|
var words = line.split(/\s+/);
|
|
if (words.length >= 2) {
|
|
return words[0] + ' ' + words[1];
|
|
}
|
|
return words[0] || 'mermaid';
|
|
}
|
|
return 'mermaid';
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Re-render a container after theme change
|
|
// ---------------------------------------------------------------------------
|
|
|
|
async function reRenderContainer(container) {
|
|
var code = container.getAttribute('data-mermaid-code');
|
|
if (!code) return;
|
|
|
|
var rendered = container.querySelector('.mermaid-rendered');
|
|
if (!rendered) return;
|
|
|
|
try {
|
|
var id = 'mermaid-' + (++_renderCounter) + '-' + Date.now();
|
|
var result = await mermaid.render(id, preprocessObsidian(code));
|
|
rendered.innerHTML = result.svg;
|
|
|
|
// Reset zoom/pan state on the SVG
|
|
var svg = rendered.querySelector('svg');
|
|
if (svg) {
|
|
svg.style.transform = '';
|
|
svg.style.cursor = 'grab';
|
|
}
|
|
// Patch beta diagram colors for dark mode
|
|
if (_currentTheme === 'dark') {
|
|
var diagramType = extractDiagramType(code);
|
|
patchBetaColors(container, diagramType);
|
|
}
|
|
} catch (err) {
|
|
// Keep old rendering on error
|
|
console.warn('[Mermaid] Re-render failed:', err.message);
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Patch beta diagram colors for dark mode (inline SVG attributes beat CSS)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function patchBetaColors(container, diagramType) {
|
|
var svg = container.querySelector('.mermaid-rendered svg');
|
|
if (!svg) return;
|
|
|
|
// packet-beta — override white block backgrounds
|
|
if (diagramType.indexOf('packet') !== -1) {
|
|
var rects = svg.querySelectorAll('rect');
|
|
for (var i = 0; i < rects.length; i++) {
|
|
var r = rects[i];
|
|
var fill = r.getAttribute('fill');
|
|
// Only override if the fill is light/white (preserve dark fills)
|
|
if (!fill || fill === '#f4f4f4' || fill === '#fff' || fill === '#ffffff' || fill === 'white' || fill === '#e8e8e8') {
|
|
r.setAttribute('fill', '#1e3a5f');
|
|
r.setAttribute('stroke', '#4a7ab5');
|
|
}
|
|
}
|
|
// Text color
|
|
var texts = svg.querySelectorAll('text');
|
|
for (var j = 0; j < texts.length; j++) {
|
|
var t = texts[j];
|
|
var tfill = t.getAttribute('fill');
|
|
if (!tfill || tfill === '#000' || tfill === '#333' || tfill === 'black') {
|
|
t.setAttribute('fill', '#c8daf0');
|
|
}
|
|
}
|
|
}
|
|
|
|
// xychart-beta — override cream bars and orange line
|
|
if (diagramType.indexOf('xychart') !== -1) {
|
|
var allRects = svg.querySelectorAll('rect');
|
|
for (var k = 0; k < allRects.length; k++) {
|
|
var rr = allRects[k];
|
|
var f = rr.getAttribute('fill');
|
|
if (!f || f === '#f4f4f4' || f === '#fff' || f === '#ffffff' || f === 'white' || f.indexOf('cream') !== -1 || f === '#ececec') {
|
|
rr.setAttribute('fill', '#1e3a5f');
|
|
rr.setAttribute('stroke', '#4a7ab5');
|
|
}
|
|
}
|
|
// Line color
|
|
var paths = svg.querySelectorAll('path');
|
|
for (var m = 0; m < paths.length; m++) {
|
|
var p = paths[m];
|
|
var ps = p.getAttribute('stroke');
|
|
if (!ps || ps === '#ffa500' || ps === 'orange' || ps === '#ff8c00') {
|
|
p.setAttribute('stroke', '#6a9ad0');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Zoom & Pan (#27)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function setupZoomPan(container) {
|
|
var svgWrapper = container.querySelector('.mermaid-rendered');
|
|
if (!svgWrapper) return;
|
|
var svg = svgWrapper.querySelector('svg');
|
|
if (!svg) return;
|
|
|
|
var scale = 1;
|
|
var panX = 0, panY = 0;
|
|
var dragging = false, startX, startY;
|
|
|
|
svg.style.transformOrigin = '0 0';
|
|
svg.style.cursor = 'grab';
|
|
|
|
function update() {
|
|
svg.style.transform = 'translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + ')';
|
|
}
|
|
|
|
svg.addEventListener('mousedown', function(e) {
|
|
dragging = true;
|
|
startX = e.clientX - panX;
|
|
startY = e.clientY - panY;
|
|
svg.style.cursor = 'grabbing';
|
|
e.preventDefault();
|
|
});
|
|
|
|
document.addEventListener('mousemove', function(e) {
|
|
if (!dragging) return;
|
|
panX = e.clientX - startX;
|
|
panY = e.clientY - startY;
|
|
update();
|
|
});
|
|
|
|
document.addEventListener('mouseup', function() {
|
|
dragging = false;
|
|
if (svg) svg.style.cursor = 'grab';
|
|
});
|
|
|
|
svg.addEventListener('wheel', function(e) {
|
|
e.preventDefault();
|
|
var delta = e.deltaY > 0 ? 0.9 : 1.1;
|
|
scale = Math.max(0.2, Math.min(5, scale * delta));
|
|
update();
|
|
}, { passive: false });
|
|
|
|
var zoomIn = container.querySelector('.mermaid-zoom-in');
|
|
var zoomOut = container.querySelector('.mermaid-zoom-out');
|
|
if (zoomIn) zoomIn.addEventListener('click', function() { scale = Math.min(5, scale * 1.3); update(); });
|
|
if (zoomOut) zoomOut.addEventListener('click', function() { scale = Math.max(0.2, scale * 0.7); update(); });
|
|
|
|
// Fullscreen (#28)
|
|
var fsBtn = container.querySelector('.mermaid-fullscreen');
|
|
if (fsBtn) {
|
|
fsBtn.addEventListener('click', function() {
|
|
openFullscreen(container);
|
|
});
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Fullscreen mode (#28) — with header bar + full-size diagram
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function openFullscreen(container) {
|
|
var svgWrapper = container.querySelector('.mermaid-rendered');
|
|
var diagramType = container.querySelector('.mermaid-diagram-type');
|
|
var typeLabel = diagramType ? diagramType.textContent : 'mermaid';
|
|
|
|
var overlay = document.createElement('div');
|
|
overlay.className = 'mermaid-fullscreen-overlay';
|
|
|
|
// Fullscreen header bar
|
|
overlay.innerHTML =
|
|
'<div class="mermaid-fullscreen-header">' +
|
|
'<span class="mermaid-diagram-type">' + escapeHtml(typeLabel) + '</span>' +
|
|
'<div class="mermaid-header-actions">' +
|
|
'<button class="mermaid-btn mermaid-fs-zoom-in" title="Zoom +"><i data-lucide="zoom-in" style="width:14px;height:14px"></i></button>' +
|
|
'<button class="mermaid-btn mermaid-fs-zoom-out" title="Zoom -"><i data-lucide="zoom-out" style="width:14px;height:14px"></i></button>' +
|
|
'<button class="mermaid-btn mermaid-fs-copy-svg" title="Copier SVG"><i data-lucide="copy" style="width:14px;height:14px"></i></button>' +
|
|
'<button class="mermaid-btn mermaid-fs-copy-code" title="Copier le code Mermaid"><i data-lucide="file-code-2" style="width:14px;height:14px"></i></button>' +
|
|
'<button class="mermaid-btn mermaid-fs-download" title="Telecharger PNG"><i data-lucide="download" style="width:14px;height:14px"></i></button>' +
|
|
'<button class="mermaid-btn mermaid-fs-close" title="Fermer (Echap)"><i data-lucide="x" style="width:14px;height:14px"></i></button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="mermaid-fullscreen-content"></div>';
|
|
|
|
var content = overlay.querySelector('.mermaid-fullscreen-content');
|
|
content.innerHTML = svgWrapper.innerHTML;
|
|
var svg = content.querySelector('svg');
|
|
if (svg) {
|
|
svg.style.cursor = 'default';
|
|
}
|
|
|
|
document.body.appendChild(overlay);
|
|
|
|
// Fullscreen zoom
|
|
var fsScale = 1, fsPanX = 0, fsPanY = 0, fsDragging = false, fsStartX, fsStartY;
|
|
if (svg) {
|
|
svg.style.transformOrigin = '0 0';
|
|
function fsUpdate() {
|
|
svg.style.transform = 'translate(' + fsPanX + 'px, ' + fsPanY + 'px) scale(' + fsScale + ')';
|
|
}
|
|
|
|
svg.addEventListener('mousedown', function(e) {
|
|
fsDragging = true;
|
|
fsStartX = e.clientX - fsPanX;
|
|
fsStartY = e.clientY - fsPanY;
|
|
svg.style.cursor = 'grabbing';
|
|
e.preventDefault();
|
|
});
|
|
|
|
document.addEventListener('mousemove', function(e) {
|
|
if (!fsDragging) return;
|
|
fsPanX = e.clientX - fsStartX;
|
|
fsPanY = e.clientY - fsStartY;
|
|
fsUpdate();
|
|
});
|
|
|
|
document.addEventListener('mouseup', function() {
|
|
fsDragging = false;
|
|
if (svg) svg.style.cursor = 'grab';
|
|
});
|
|
|
|
svg.addEventListener('wheel', function(e) {
|
|
e.preventDefault();
|
|
var delta = e.deltaY > 0 ? 0.9 : 1.1;
|
|
fsScale = Math.max(0.2, Math.min(5, fsScale * delta));
|
|
fsUpdate();
|
|
}, { passive: false });
|
|
|
|
var fsZoomIn = overlay.querySelector('.mermaid-fs-zoom-in');
|
|
var fsZoomOut = overlay.querySelector('.mermaid-fs-zoom-out');
|
|
if (fsZoomIn) fsZoomIn.addEventListener('click', function() { fsScale = Math.min(5, fsScale * 1.3); fsUpdate(); });
|
|
if (fsZoomOut) fsZoomOut.addEventListener('click', function() { fsScale = Math.max(0.2, fsScale * 0.7); fsUpdate(); });
|
|
}
|
|
|
|
// Copy SVG in fullscreen
|
|
var fsCopySvg = overlay.querySelector('.mermaid-fs-copy-svg');
|
|
if (fsCopySvg) {
|
|
fsCopySvg.addEventListener('click', function() {
|
|
copySvgFromElement(content);
|
|
});
|
|
}
|
|
|
|
// Copy code in fullscreen
|
|
var fsCopyCode = overlay.querySelector('.mermaid-fs-copy-code');
|
|
if (fsCopyCode) {
|
|
fsCopyCode.addEventListener('click', function() {
|
|
var code = container.getAttribute('data-mermaid-code') || '';
|
|
copyToClipboard(code);
|
|
});
|
|
}
|
|
|
|
// Download PNG in fullscreen
|
|
var fsDownload = overlay.querySelector('.mermaid-fs-download');
|
|
if (fsDownload) {
|
|
fsDownload.addEventListener('click', function() {
|
|
exportMermaidPNGFromElement(svg);
|
|
});
|
|
}
|
|
|
|
safeCreateIcons();
|
|
|
|
function close() {
|
|
overlay.remove();
|
|
document.removeEventListener('keydown', escHandler);
|
|
}
|
|
|
|
var escHandler = function(e) {
|
|
if (e.key === 'Escape') close();
|
|
};
|
|
document.addEventListener('keydown', escHandler);
|
|
|
|
overlay.addEventListener('click', function(e) {
|
|
if (e.target === overlay) close();
|
|
});
|
|
overlay.querySelector('.mermaid-fs-close').addEventListener('click', close);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Copy SVG to clipboard
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function copySvgToClipboard(container) {
|
|
copySvgFromElement(container.querySelector('.mermaid-rendered'));
|
|
}
|
|
|
|
function copySvgFromElement(el) {
|
|
if (!el) return;
|
|
var svg = el.querySelector('svg');
|
|
if (!svg) return;
|
|
var data = new XMLSerializer().serializeToString(svg);
|
|
copyToClipboard(data);
|
|
}
|
|
|
|
function fallbackCopy(text) {
|
|
var textarea = document.createElement('textarea');
|
|
textarea.value = text;
|
|
textarea.style.position = 'fixed';
|
|
textarea.style.opacity = '0';
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
try { document.execCommand('copy'); } catch (e) {}
|
|
document.body.removeChild(textarea);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Export SVG/PNG (#24)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function exportMermaidSVG(container) {
|
|
var svg = container.querySelector('.mermaid-rendered svg');
|
|
if (!svg) return;
|
|
var data = new XMLSerializer().serializeToString(svg);
|
|
var blob = new Blob([data], { type: 'image/svg+xml' });
|
|
downloadBlob(blob, 'diagram.svg');
|
|
}
|
|
|
|
export function exportMermaidPNG(container) {
|
|
var svg = container.querySelector('.mermaid-rendered svg');
|
|
exportMermaidPNGFromElement(svg);
|
|
}
|
|
|
|
function exportMermaidPNGFromElement(svg) {
|
|
if (!svg) return;
|
|
var data = new XMLSerializer().serializeToString(svg);
|
|
var canvas = document.createElement('canvas');
|
|
var ctx = canvas.getContext('2d');
|
|
var img = new Image();
|
|
var blob = new Blob([data], { type: 'image/svg+xml' });
|
|
var url = URL.createObjectURL(blob);
|
|
|
|
img.onload = function() {
|
|
canvas.width = img.width * 2;
|
|
canvas.height = img.height * 2;
|
|
ctx.scale(2, 2);
|
|
ctx.drawImage(img, 0, 0);
|
|
URL.revokeObjectURL(url);
|
|
canvas.toBlob(function(pngBlob) {
|
|
downloadBlob(pngBlob, 'diagram.png');
|
|
}, 'image/png');
|
|
};
|
|
img.src = url;
|
|
}
|
|
|
|
function downloadBlob(blob, filename) {
|
|
var a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = filename;
|
|
a.click();
|
|
URL.revokeObjectURL(a.href);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Copy text to clipboard
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function copyToClipboard(text) {
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
navigator.clipboard.writeText(text).catch(function() {
|
|
fallbackCopy(text);
|
|
});
|
|
} else {
|
|
fallbackCopy(text);
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Focus mode (#29) — click diagram to enlarge in a side panel
|
|
// ---------------------------------------------------------------------------
|
|
|
|
var _focusPanel = null;
|
|
|
|
export function setupFocusMode() {
|
|
document.addEventListener('click', function(e) {
|
|
var container = e.target.closest('.mermaid-container');
|
|
if (!container) return;
|
|
// Don't trigger focus if clicking header or controls
|
|
if (e.target.closest('.mermaid-header') || e.target.closest('button')) return;
|
|
|
|
var svgWrapper = container.querySelector('.mermaid-rendered');
|
|
if (!svgWrapper) return;
|
|
|
|
if (_focusPanel && _focusPanel.style.display !== 'none') {
|
|
updateFocusPanel(svgWrapper);
|
|
} else {
|
|
showFocusPanel(svgWrapper);
|
|
}
|
|
});
|
|
}
|
|
|
|
function showFocusPanel(svgWrapper) {
|
|
if (!_focusPanel) {
|
|
_focusPanel = document.createElement('div');
|
|
_focusPanel.className = 'mermaid-focus-panel';
|
|
_focusPanel.innerHTML =
|
|
'<div class="mermaid-focus-header">' +
|
|
'<span>Diagramme</span>' +
|
|
'<button class="mermaid-focus-close" title="Fermer"><i data-lucide="x" style="width:14px;height:14px"></i></button>' +
|
|
'</div>' +
|
|
'<div class="mermaid-focus-content"></div>';
|
|
document.body.appendChild(_focusPanel);
|
|
|
|
_focusPanel.querySelector('.mermaid-focus-close').addEventListener('click', function() {
|
|
_focusPanel.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
_focusPanel.style.display = 'block';
|
|
updateFocusPanel(svgWrapper);
|
|
safeCreateIcons();
|
|
}
|
|
|
|
function updateFocusPanel(svgWrapper) {
|
|
if (!_focusPanel) return;
|
|
var content = _focusPanel.querySelector('.mermaid-focus-content');
|
|
content.innerHTML = svgWrapper.innerHTML;
|
|
var svg = content.querySelector('svg');
|
|
if (svg) {
|
|
svg.style.width = '100%';
|
|
svg.style.height = 'auto';
|
|
svg.style.maxHeight = '80vh';
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Obsidian compatibility pre-processor (#24)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function preprocessObsidian(code) {
|
|
return code
|
|
.replace(/!\[\[([^\]]+?)\]\]/g, function(_, m) {
|
|
var parts = m.split('|');
|
|
var src = parts[0].trim();
|
|
var width = parts[1] ? parts[1].trim() : null;
|
|
if (width && /^\d+$/.test(width)) {
|
|
return '<img src="' + src + '" width="' + width + '" />';
|
|
}
|
|
return '<img src="' + src + '" />';
|
|
})
|
|
.replace(/\[\[([^\]]+?)\]\]/g, '<a href="$1">$1</a>')
|
|
.replace(/==([^=]+)==/g, '<mark>$1</mark>');
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Utility
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function escapeHtml(str) {
|
|
var div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|