feat: enhance Mermaid toolbar with improved hint display and interactive controls for zoom and fullscreen functionality
This commit is contained in:
Ümit Tunç
@@ -196,6 +196,7 @@
|
|||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
border-radius: 16px 16px 0 0;
|
border-radius: 16px 16px 0 0;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.dark .mermaid-toolbar {
|
.dark .mermaid-toolbar {
|
||||||
background: rgba(15, 23, 42, 0.9);
|
background: rgba(15, 23, 42, 0.9);
|
||||||
@@ -207,8 +208,32 @@
|
|||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #94a3b8;
|
color: #94a3b8;
|
||||||
margin-right: 4px;
|
flex-shrink: 0;
|
||||||
flex: 1;
|
}
|
||||||
|
.mermaid-toolbar-hint {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #64748b;
|
||||||
|
white-space: nowrap;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
.dark .mermaid-toolbar-hint {
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
.mermaid-container.mermaid-active .mermaid-toolbar-hint {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.mermaid-toolbar-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
margin-left: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.mermaid-zoom-btn {
|
.mermaid-zoom-btn {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
@@ -273,34 +298,6 @@
|
|||||||
.mermaid-container.mermaid-active {
|
.mermaid-container.mermaid-active {
|
||||||
box-shadow: 0 0 0 2px var(--accent-color, #4f46e5);
|
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;
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
.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 */
|
/* Fullscreen overlay */
|
||||||
.mermaid-fullscreen-overlay {
|
.mermaid-fullscreen-overlay {
|
||||||
@@ -1049,29 +1046,28 @@
|
|||||||
toolbar.className = 'mermaid-toolbar';
|
toolbar.className = 'mermaid-toolbar';
|
||||||
toolbar.innerHTML = `
|
toolbar.innerHTML = `
|
||||||
<span class="mermaid-toolbar-label">Diyagram Görünümü</span>
|
<span class="mermaid-toolbar-label">Diyagram Görünümü</span>
|
||||||
<button class="mermaid-zoom-btn" title="Yakınlaştır (Zoom In)" onclick="mermaidZoomIn(${index})">
|
<span class="mermaid-toolbar-hint">Zoom ve kaydırma için tıklayın</span>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
<div class="mermaid-toolbar-controls">
|
||||||
</button>
|
<button class="mermaid-zoom-btn" title="Yakınlaştır (Zoom In)" onclick="mermaidZoomIn(${index})">
|
||||||
<span class="mermaid-zoom-pct" id="mermaid-pct-${index}">100%</span>
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
||||||
<button class="mermaid-zoom-btn" title="Uzaklaştır (Zoom Out)" onclick="mermaidZoomOut(${index})">
|
</button>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
<span class="mermaid-zoom-pct" id="mermaid-pct-${index}">100%</span>
|
||||||
</button>
|
<button class="mermaid-zoom-btn" title="Uzaklaştır (Zoom Out)" onclick="mermaidZoomOut(${index})">
|
||||||
<button class="mermaid-zoom-btn" title="Tam Boyut (1:1)" onclick="mermaidZoomReset(${index})">
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
|
</button>
|
||||||
</button>
|
<button class="mermaid-zoom-btn" title="Tam Boyut (1:1)" onclick="mermaidZoomReset(${index})">
|
||||||
<button class="mermaid-zoom-btn" title="Tam Ekran" onclick="mermaidFullscreen(${index})">
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
|
</button>
|
||||||
</button>
|
<button class="mermaid-zoom-btn" title="Tam Ekran" onclick="mermaidFullscreen(${index})">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// Canvas wrapper
|
// Canvas wrapper
|
||||||
const canvas = document.createElement('div');
|
const canvas = document.createElement('div');
|
||||||
canvas.className = 'mermaid-canvas';
|
canvas.className = 'mermaid-canvas';
|
||||||
canvas.id = 'mermaid-canvas-' + index;
|
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');
|
const graphDiv = document.createElement('div');
|
||||||
graphDiv.className = 'mermaid w-full';
|
graphDiv.className = 'mermaid w-full';
|
||||||
@@ -1079,7 +1075,6 @@
|
|||||||
graphDiv.textContent = rawMermaid;
|
graphDiv.textContent = rawMermaid;
|
||||||
|
|
||||||
canvas.appendChild(graphDiv);
|
canvas.appendChild(graphDiv);
|
||||||
canvas.appendChild(hint);
|
|
||||||
wrapper.appendChild(toolbar);
|
wrapper.appendChild(toolbar);
|
||||||
wrapper.appendChild(canvas);
|
wrapper.appendChild(canvas);
|
||||||
preContainer.parentNode.replaceChild(wrapper, preContainer);
|
preContainer.parentNode.replaceChild(wrapper, preContainer);
|
||||||
|
|||||||
Reference in New Issue
Block a user