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

feat: enhance Mermaid diagram interaction with improved activation, hint display, and click-to-zoom functionality

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-25 07:57:42 +03:00
parent c28450b97d
commit abeed5ae88
1 changed files with 112 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/proposals/show.blade.php
+112 -2
View File
@@ -255,11 +255,14 @@
.mermaid-canvas {
width: 100%;
height: 520px;
cursor: grab;
cursor: pointer;
position: relative;
overflow: hidden;
}
.mermaid-canvas:active { cursor: grabbing; }
.mermaid-canvas.mermaid-active {
cursor: grab;
}
.mermaid-canvas.mermaid-active:active { cursor: grabbing; }
.mermaid-canvas .mermaid {
width: 100%;
height: 100%;
@@ -267,6 +270,42 @@
.mermaid-canvas svg {
display: block;
}
.mermaid-container.mermaid-active {
box-shadow: 0 0 0 2px var(--accent-color, #4f46e5);
}
.mermaid-canvas-hint {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
background: rgba(248, 250, 252, 0.55);
backdrop-filter: blur(2px);
transition: opacity 0.2s ease;
}
.dark .mermaid-canvas-hint {
background: rgba(15, 23, 42, 0.55);
}
.mermaid-canvas-hint span {
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 6px 14px;
border-radius: 999px;
}
.dark .mermaid-canvas-hint span {
color: #94a3b8;
background: rgba(30, 41, 59, 0.9);
border-color: rgba(255, 255, 255, 0.08);
}
.mermaid-container.mermaid-active .mermaid-canvas-hint {
opacity: 0;
visibility: hidden;
}
/* Fullscreen overlay */
.mermaid-fullscreen-overlay {
@@ -944,6 +983,59 @@
// Mermaid zoom state store
const mermaidZoomInstances = {};
let mermaidActiveIndex = null;
function setMermaidActive(index) {
if (mermaidActiveIndex !== null && mermaidActiveIndex !== index) {
deactivateMermaid(mermaidActiveIndex);
}
mermaidActiveIndex = index;
const wrapper = document.getElementById('mermaid-wrapper-' + index);
const canvas = document.getElementById('mermaid-canvas-' + index);
const pz = mermaidZoomInstances[index];
if (!wrapper || !canvas || !pz) return;
wrapper.classList.add('mermaid-active');
canvas.classList.add('mermaid-active');
pz.enablePan();
}
function deactivateMermaid(index) {
const wrapper = document.getElementById('mermaid-wrapper-' + index);
const canvas = document.getElementById('mermaid-canvas-' + index);
const pz = mermaidZoomInstances[index];
if (wrapper) wrapper.classList.remove('mermaid-active');
if (canvas) canvas.classList.remove('mermaid-active');
if (pz) pz.disablePan();
if (mermaidActiveIndex === index) mermaidActiveIndex = null;
}
function deactivateAllMermaid() {
if (mermaidActiveIndex !== null) {
deactivateMermaid(mermaidActiveIndex);
}
}
function setupMermaidActivation(index) {
const canvas = document.getElementById('mermaid-canvas-' + index);
if (!canvas || canvas.dataset.activationBound) return;
canvas.dataset.activationBound = '1';
canvas.addEventListener('click', function() {
setMermaidActive(index);
});
canvas.addEventListener('wheel', function(e) {
if (!canvas.classList.contains('mermaid-active')) return;
e.preventDefault();
const pz = mermaidZoomInstances[index];
if (!pz) return;
if (e.deltaY < 0) pz.zoomIn();
else pz.zoomOut();
updatePct(index, pz.getZoom());
}, { passive: false });
}
// Scan code blocks for mermaid and convert them
const codeElements = contentDiv.querySelectorAll('pre code.language-mermaid');
@@ -981,6 +1073,10 @@
const canvas = document.createElement('div');
canvas.className = 'mermaid-canvas';
canvas.id = 'mermaid-canvas-' + index;
const hint = document.createElement('div');
hint.className = 'mermaid-canvas-hint';
hint.innerHTML = '<span>Zoom ve kaydırma için tıklayın</span>';
const graphDiv = document.createElement('div');
graphDiv.className = 'mermaid w-full';
@@ -988,6 +1084,7 @@
graphDiv.textContent = rawMermaid;
canvas.appendChild(graphDiv);
canvas.appendChild(hint);
wrapper.appendChild(toolbar);
wrapper.appendChild(canvas);
preContainer.parentNode.replaceChild(wrapper, preContainer);
@@ -1021,6 +1118,12 @@
document.body.appendChild(fsOverlay);
fsOverlay.addEventListener('click', function(e) { if (e.target === fsOverlay) closeMermaidFullscreen(); });
document.addEventListener('click', function(e) {
if (!e.target.closest('.mermaid-container')) {
deactivateAllMermaid();
}
});
// Run mermaid parser
setTimeout(() => {
mermaid.run().then(() => {
@@ -1071,18 +1174,21 @@
try {
const panZoom = svgPanZoom('#' + svg.id, {
zoomEnabled: true,
panEnabled: false,
controlIconsEnabled: false,
fit: true,
center: true,
minZoom: 0.3,
maxZoom: 8,
zoomScaleSensitivity: 0.3,
mouseWheelZoomEnabled: false,
onZoom: (zoom) => {
const pctEl = document.getElementById('mermaid-pct-' + index);
if (pctEl) pctEl.textContent = Math.round(zoom * 100) + '%';
}
});
mermaidZoomInstances[index] = panZoom;
setupMermaidActivation(index);
} catch(e) {
console.warn('svg-pan-zoom init failed for mermaid-' + index, e);
}
@@ -1090,14 +1196,17 @@
// Zoom controls
function mermaidZoomIn(index) {
setMermaidActive(index);
const pz = mermaidZoomInstances[index];
if (pz) { pz.zoomIn(); updatePct(index, pz.getZoom()); }
}
function mermaidZoomOut(index) {
setMermaidActive(index);
const pz = mermaidZoomInstances[index];
if (pz) { pz.zoomOut(); updatePct(index, pz.getZoom()); }
}
function mermaidZoomReset(index) {
setMermaidActive(index);
const pz = mermaidZoomInstances[index];
if (pz) { pz.resetZoom(); pz.center(); updatePct(index, pz.getZoom()); }
}
@@ -1185,6 +1294,7 @@
}
async function mermaidFullscreen(index) {
deactivateAllMermaid();
const wrapper = document.getElementById('mermaid-wrapper-' + index);
if (!wrapper) return;
const rawMermaid = wrapper.dataset.mermaidSource;