laxmanhalaki/RE_Documents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

renamed files and full screen mode fo mermaid viewer

Browse Source
This commit is contained in:
laxmanhalaki 2025-10-17 10:14:45 +05:30
parent 4e92cb73cf
commit 2fd66a1c59
6 changed files with 127 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
Mermaid_Selector.html
View File

@ -299,6 +299,58 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
/* Fullscreen mode styles */
.fullscreen-mode {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: #f8f9fa;
padding: 20px;
margin: 0;
border-radius: 0;
box-shadow: none;
}
.fullscreen-mode #diagramOutput {
width: 100%;
height: 100%;
min-height: calc(100vh - 40px);
border-radius: 0;
background: white;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.fullscreen-exit-hint {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(102, 126, 234, 0.95);
color: white;
padding: 12px 24px;
border-radius: 25px;
font-size: 1em;
font-weight: 600;
z-index: 10000;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
animation: slideDown 0.3s ease;
pointer-events: none;
}
@keyframes slideDown {
from {
transform: translateX(-50%) translateY(-20px);
opacity: 0;
}
to {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
}
</style> </style>
</head> </head>
<body> <body>
@ -355,6 +407,7 @@ graph TD
<button class="zoom-btn" onclick="zoomOut()" title="Zoom Out">−</button> <button class="zoom-btn" onclick="zoomOut()" title="Zoom Out">−</button>
<button class="zoom-btn" onclick="resetZoom()" title="Reset Zoom" style="font-size: 1.2em;">⟲</button> <button class="zoom-btn" onclick="resetZoom()" title="Reset Zoom" style="font-size: 1.2em;">⟲</button>
<button class="zoom-btn" onclick="fitToScreen()" title="Fit to Screen" style="font-size: 1.2em;">⛶</button> <button class="zoom-btn" onclick="fitToScreen()" title="Fit to Screen" style="font-size: 1.2em;">⛶</button>
<button class="zoom-btn" id="fullscreenBtn" onclick="toggleFullscreen()" title="Fullscreen Mode" style="font-size: 1.2em; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);">📺</button>
<button class="zoom-btn" onclick="exportAsSVG()" title="Export as SVG (Best for Word/PDF - Vector Format)" style="font-size: 1em; background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">SVG</button> <button class="zoom-btn" onclick="exportAsSVG()" title="Export as SVG (Best for Word/PDF - Vector Format)" style="font-size: 1em; background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">SVG</button>
<button class="zoom-btn" onclick="exportAsPNG()" title="Export as PNG (Raster Format)" style="font-size: 1em;">PNG</button> <button class="zoom-btn" onclick="exportAsPNG()" title="Export as PNG (Raster Format)" style="font-size: 1em;">PNG</button>
<button class="zoom-btn" onclick="exportAsJPEG()" title="Export as JPEG (Raster Format)" style="font-size: 1em;">JPG</button> <button class="zoom-btn" onclick="exportAsJPEG()" title="Export as JPEG (Raster Format)" style="font-size: 1em;">JPG</button>
@ -618,6 +671,80 @@ graph TD
exportDiagram('jpeg'); exportDiagram('jpeg');
} }
function toggleFullscreen() {
const panel = document.querySelector('.panel:last-child');
const output = document.getElementById('diagramOutput');
const fullscreenBtn = document.getElementById('fullscreenBtn');
if (!output.querySelector('svg')) {
showMessage('❌ No diagram to display in fullscreen', 'error');
return;
}
if (!panel.classList.contains('fullscreen-mode')) {
// Enter fullscreen
panel.classList.add('fullscreen-mode');
// Update button icon and title
fullscreenBtn.innerHTML = '✕';
fullscreenBtn.title = 'Exit Fullscreen (Press ESC)';
fullscreenBtn.style.background = 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)';
// Show exit hint
const hint = document.createElement('div');
hint.className = 'fullscreen-exit-hint';
hint.textContent = '🖥️ Fullscreen Mode Active | Press ESC or click ✕ to exit';
hint.id = 'fullscreenHint';
document.body.appendChild(hint);
// Auto-hide hint after 4 seconds
setTimeout(() => {
const hintElement = document.getElementById('fullscreenHint');
if (hintElement) {
hintElement.style.transition = 'opacity 0.3s ease';
hintElement.style.opacity = '0';
setTimeout(() => hintElement.remove(), 300);
}
}, 4000);
// Fit to screen after a short delay for layout adjustment
setTimeout(() => {
fitToScreen();
}, 100);
showMessage('✅ Fullscreen mode activated - Press ESC to exit', 'success');
} else {
// Exit fullscreen
panel.classList.remove('fullscreen-mode');
// Update button icon and title back
fullscreenBtn.innerHTML = '📺';
fullscreenBtn.title = 'Fullscreen Mode';
fullscreenBtn.style.background = 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)';
// Remove hint if still visible
const hint = document.getElementById('fullscreenHint');
if (hint) hint.remove();
// Reset zoom after exiting fullscreen
setTimeout(() => {
fitToScreen();
}, 100);
showMessage('✅ Exited fullscreen mode', 'success');
}
}
// ESC key to exit fullscreen
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
const panel = document.querySelector('.panel:last-child');
if (panel && panel.classList.contains('fullscreen-mode')) {
toggleFullscreen();
}
}
});
function exportAsSVG() { function exportAsSVG() {
const output = document.getElementById('diagramOutput'); const output = document.getElementById('diagramOutput');
const svg = output.querySelector('svg'); const svg = output.querySelector('svg');

BIN
RE Workflow Management System - Non Templatized V1.1.pdf Normal file
View File

Binary file not shown.

0
Workflow Document - Templatized_ Non Templatized.txt → atreamlined_workflow_extracted_content.txt
View File

0
settlment_diagram.mermaid → dealer_claim _settlment.mermaid
View File

0
complete_workflow_diagram.mermaid → onboard_offboard_completeflow.mermaid
View File

0
workflow_complete_flow.mermaid → streamlined_project_flow.mermaid
View File