truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve mermaid fullscreen rendering and sizing logic for pan-zoom initialization

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-25 07:43:08 +03:00
parent e9ddc3d332
commit 40fbb750db
1 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/proposals/show.blade.php
+24 -18
View File
@@ -288,8 +288,8 @@
border-radius: 20px;
overflow: hidden;
width: 92vw;
max-width: 1200px;
max-height: 90vh;
max-width: 1400px;
height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 40px 80px rgba(0,0,0,0.5);
@@ -299,17 +299,13 @@
}
.mermaid-fullscreen-canvas {
flex: 1;
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
overflow: hidden;
position: relative;
cursor: grab;
}
.mermaid-fullscreen-canvas:active { cursor: grabbing; }
.mermaid-fullscreen-canvas svg {
width: 100%;
height: auto;
display: block;
}
/* Bullet lists */
@@ -1117,19 +1113,29 @@
if (!svg) return;
const fsCanvas = document.getElementById('mermaid-fs-canvas');
const svgClone = svg.cloneNode(true);
svgClone.id = 'mermaid-fs-svg-' + index;
svgClone.style.width = '100%';
svgClone.style.height = 'auto';
svgClone.removeAttribute('height');
fsCanvas.innerHTML = '';
fsCanvas.appendChild(svgClone);
// Show overlay first so fsCanvas has layout dimensions
document.getElementById('mermaid-fs-overlay').classList.add('active');
document.body.style.overflow = 'hidden';
// Init pan-zoom on cloned SVG
// Init pan-zoom on cloned SVG after layout is available
setTimeout(() => {
const svgClone = svg.cloneNode(true);
svgClone.id = 'mermaid-fs-svg-' + index;
// Get actual pixel dimensions of the fullscreen canvas
const fsW = fsCanvas.clientWidth || fsCanvas.offsetWidth || 1000;
const fsH = fsCanvas.clientHeight || fsCanvas.offsetHeight || 600;
// Set explicit dimensions on SVG for svg-pan-zoom
svgClone.setAttribute('width', fsW);
svgClone.setAttribute('height', fsH);
svgClone.style.width = fsW + 'px';
svgClone.style.height = fsH + 'px';
fsCanvas.appendChild(svgClone);
try {
fsActivePanZoom = svgPanZoom('#mermaid-fs-svg-' + index, {
zoomEnabled: true,
@@ -1145,8 +1151,8 @@
}
});
document.getElementById('mermaid-fs-pct').textContent = Math.round(fsActivePanZoom.getZoom() * 100) + '%';
} catch(e) {}
}, 100);
} catch(e) { console.warn('fs pan-zoom init error', e); }
}, 150);
}
function closeMermaidFullscreen() {
document.getElementById('mermaid-fs-overlay').classList.remove('active');