tiny/spring-state-machine-renderer
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

html exporter fixed

Browse Source
This commit is contained in:
Kamil Patryk Kozakowski
2026-06-18 22:06:57 +02:00
parent 5894303510
commit d93d36e8ad
4 changed files with 72 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
state_machine_exporter_html/src/main/resources/html/template.html
View File

@@ -261,32 +261,10 @@
</head>
<body>
<div id="sidebar">
<div class="sidebar-header">
<header>
<h1>Explorer</h1>
<p>{{MACHINE_NAME}}</p>
</header>
</div>
<div class="tabs">
<div class="tab active" data-tab="explorer">Explorer</div>
<div class="tab" data-tab="flows">Business Flows</div>
</div>
<div id="tab-explorer" class="tab-content active">
<div id="ep-list"></div>
</div>
<div id="tab-flows" class="tab-content">
<div id="flow-list"></div>
</div>
</div>
{{SIDEBAR_HTML}}
<div id="main">
<button id="toggle-sidebar" aria-label="Toggle Sidebar" title="Toggle Sidebar">
<svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
{{TOGGLE_BUTTON_HTML}}
<div id="svg-container">
{{SVG_CONTENT}}
</div>
@@ -304,18 +282,21 @@
const svg = document.querySelector('#svg-container svg');
panZoomInstance = svgPanZoom(svg, { zoomEnabled: true, controlIconsEnabled: true, fit: true, center: true });
document.getElementById('toggle-sidebar').addEventListener('click', () => {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('collapsed');
// Re-center SVG pan-zoom after transition
setTimeout(() => {
if (panZoomInstance) {
panZoomInstance.resize();
panZoomInstance.center();
}
}, 300);
});
const toggleSidebar = document.getElementById('toggle-sidebar');
if (toggleSidebar) {
toggleSidebar.addEventListener('click', () => {
const sidebar = document.getElementById('sidebar');
if (sidebar) sidebar.classList.toggle('collapsed');
// Re-center SVG pan-zoom after transition
setTimeout(() => {
if (panZoomInstance) {
panZoomInstance.resize();
panZoomInstance.center();
}
}, 300);
});
}
setupTabs();
populateSidebar();
@@ -325,8 +306,10 @@
function setupTabs() {
const flows = metadata.flows || [];
const tabsEl = document.querySelector('.tabs');
if (!tabsEl) return;
if (flows.length === 0) {
document.querySelector('.tabs').style.display = 'none';
tabsEl.style.display = 'none';
document.querySelector('.tab-content[data-tab="flows"]')?.remove();
return;
}
@@ -342,6 +325,7 @@
function populateSidebar() {
const list = document.getElementById('ep-list');
if (!list) return;
const entryPoints = metadata.metadata.entryPoints || [];
const machineEvents = new Set(metadata.transitions.map(t => t.event).filter(Boolean));
@@ -372,6 +356,7 @@
function populateFlows() {
const list = document.getElementById('flow-list');
if (!list) return;
const flows = metadata.flows || [];
if (flows.length === 0) {