sauer/bfa-dryer-design
1
0
Fork 0
mirror of http://10.0.2.1:3031/sauer/bfa-dryer-design.git synced 2026-06-30 13:06:42 +10:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix: sim panel resizes workspace, tab clicks switch pages in canvas

Browse Source
This commit is contained in:
Richard Sauer 2026-04-08 18:11:15 +10:00
parent 4af8f488cd
commit 31cdcef9c2
1 changed files with 52 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
templates/editor.html
View File

@ -55,9 +55,14 @@
/* Right panel width */
.gjs-pn-views-container{width:280px !important}
/* Main layout — editor + optional sim panel side by side */
.main-wrap{display:flex;height:calc(100vh - 48px)}
.editor-wrap{flex:1;overflow:hidden}
.editor-wrap #gjs{height:100% !important}
/* Simulation toggle panel */
.sim-panel{position:fixed;right:0;top:48px;width:50%;height:calc(100vh - 48px);background:#080c14;border-left:2px solid var(--border);z-index:20;display:none;overflow:auto}
.sim-panel.open{display:block}
.sim-panel{width:0;overflow:hidden;background:#080c14;border-left:2px solid var(--border);transition:width 0.2s;flex-shrink:0}
.sim-panel.open{width:45%}
.sim-panel-header{padding:8px 12px;background:var(--card);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--text2)}
.sim-panel-header button{padding:4px 10px;border:1px solid var(--border);border-radius:4px;background:var(--card);color:var(--text2);font-size:11px;cursor:pointer}
</style>
@ -86,10 +91,11 @@
</div>
</div>
<!-- GRAPESJS EDITOR -->
<!-- MAIN LAYOUT -->
<div class="main-wrap">
<div class="editor-wrap">
<div id="gjs"></div>
<!-- SIMULATION PANEL (toggle) -->
</div>
<div class="sim-panel" id="sim-panel">
<div class="sim-panel-header">
MACHINE SIMULATION
@ -97,6 +103,7 @@
</div>
<div id="sim-container" style="padding:16px;display:flex;align-items:center;justify-content:center;min-height:400px"></div>
</div>
</div><!-- /main-wrap -->
<script src="static/vendor/grapes.min.js"></script>
<script src="static/hmi-blocks.js"></script>
@ -283,7 +290,44 @@ function switchTheme(theme) {
// ══════════════════════════════════════════════════════
function toggleSim() {
document.getElementById('sim-panel').classList.toggle('open');
// Give GrapesJS time to see the resize, then refresh canvas
setTimeout(() => editor.refresh(), 300);
}
// Inject page-switching script into the canvas after components load
editor.on('load', () => {
// Add script to make tab clicks switch pages inside the canvas
const script = `
document.addEventListener('click', function(e) {
var tab = e.target.closest('[style*="cursor:pointer"][style*="font-weight:600"]');
if (!tab || !tab.parentElement || tab.parentElement.children.length < 2) return;
// Check if it's in the tab bar
var bar = tab.parentElement;
if (!bar.style.cssText.includes('height:50px') && !bar.style.cssText.includes('height: 50px')) return;
// Get tab index
var tabs = Array.from(bar.children);
var idx = tabs.indexOf(tab);
if (idx < 0) return;
// Reset all tab styles
tabs.forEach(function(t) { t.style.color = '#7a8baa'; t.style.borderBottom = 'none'; });
tab.style.color = '#2d7ff9';
tab.style.borderBottom = '3px solid #2d7ff9';
// Show/hide pages
var pages = document.querySelectorAll('[data-page], [style*="flex-wrap:wrap"][style*="padding:8px"]');
var pageContainers = Array.from(pages).filter(function(p) { return p.style.cssText.includes('wrap') && p.style.cssText.includes('padding'); });
pageContainers.forEach(function(p, i) {
p.style.display = (i === idx) ? 'flex' : 'none';
});
});
`;
// Inject into canvas
const frame = editor.Canvas.getFrameEl();
if (frame && frame.contentDocument) {
const s = frame.contentDocument.createElement('script');
s.textContent = script;
frame.contentDocument.body.appendChild(s);
}
});
</script>
</body>
</html>