github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-18 10:48:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Replace fullscreen with in-page expand for graph view

Browse Source 
Fullscreen API took over the whole output and broke window-manager splits (and is denied in some environments). The Expand button now toggles a fixed-position overlay covering the page while keeping browser chrome; Esc restores. Column positioning moved from inline style to the stylesheet so the expanded class can override it.

Signed-off-by: Álvaro Tejero Cantero <alvorithm@teje.ro>
This commit is contained in:
Álvaro Tejero Cantero 2026-07-15 19:11:03 +02:00
parent c056aa2cce
commit 3f5469b6bd
No known key found for this signature in database
1 changed files with 42 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
backend/resources/app/templates/graph-console.tmpl
View File

@ -147,10 +147,10 @@ Graph Console
{% if session %} {% if session %}
<div id="graph-view-column" <div id="graph-view-column"
style="flex: 1 1 auto; min-width: 0; position: sticky; top: 8px;"> style="flex: 1 1 auto; min-width: 0;">
<fieldset id="graph-view-panel"> <fieldset id="graph-view-panel">
<legend>Graph view <legend>Graph view
<button type="button" id="graph-maximize" style="margin-left: 1em;">Maximize</button> <button type="button" id="graph-maximize" style="margin-left: 1em;">Expand</button>
</legend> </legend>
<desc> <desc>
Renders the in-memory Ladybug graph with AntV G6 (CDN). Node color Renders the in-memory Ladybug graph with AntV G6 (CDN). Node color
@ -170,13 +170,21 @@ Graph Console
</main> </main>
<style> <style>
#graph-view-panel:fullscreen { #graph-view-column {
position: sticky;
top: 8px;
}
#graph-view-column.graph-view-expanded {
position: fixed;
inset: 0;
z-index: 1000;
background: #fff; background: #fff;
overflow: auto; overflow: auto;
padding: 12px; padding: 12px;
margin: 0;
} }
#graph-view-panel:fullscreen #graph-canvas { #graph-view-column.graph-view-expanded #graph-canvas {
height: calc(100vh - 110px) !important; height: calc(100vh - 160px) !important;
} }
#graph-files-tree summary { cursor: pointer; } #graph-files-tree summary { cursor: pointer; }
#graph-files-tree ul { margin: 2px 0 4px 0; padding-left: 2em; } #graph-files-tree ul { margin: 2px 0 4px 0; padding-left: 2em; }
@ -605,30 +613,38 @@ Graph Console
}); });
} }
// In-page expand (no Fullscreen API): keeps browser chrome and window
// manager splits usable while the graph takes the whole page.
const maximizeBtn = document.getElementById("graph-maximize"); const maximizeBtn = document.getElementById("graph-maximize");
const graphPanel = document.getElementById("graph-view-panel"); const graphColumn = document.getElementById("graph-view-column");
if (maximizeBtn && graphPanel) {
maximizeBtn.addEventListener("click", function () { function resizeGraphSoon() {
if (document.fullscreenElement) { setTimeout(function () {
document.exitFullscreen(); if (g6graph) {
} else { const canvas = document.getElementById("graph-canvas");
graphPanel.requestFullscreen().catch(function (err) { try {
graphViewStatus.textContent = "fullscreen rejected: " + err; g6graph.setSize(canvas.clientWidth, canvas.clientHeight);
}); g6graph.fitView();
} catch (_err) { /* autoResize covers most cases */ }
} }
}, 120);
}
function setExpanded(expanded) {
graphColumn.classList.toggle("graph-view-expanded", expanded);
maximizeBtn.textContent = expanded ? "Restore (Esc)" : "Expand";
resizeGraphSoon();
}
if (maximizeBtn && graphColumn) {
maximizeBtn.addEventListener("click", function () {
setExpanded(!graphColumn.classList.contains("graph-view-expanded"));
}); });
document.addEventListener("fullscreenchange", function () { document.addEventListener("keydown", function (ev) {
maximizeBtn.textContent = if (ev.key === "Escape"
document.fullscreenElement ? "Exit fullscreen" : "Maximize"; && graphColumn.classList.contains("graph-view-expanded")) {
setTimeout(function () { setExpanded(false);
if (g6graph) { }
const canvas = document.getElementById("graph-canvas");
try {
g6graph.setSize(canvas.clientWidth, canvas.clientHeight);
g6graph.fitView();
} catch (_err) { /* autoResize covers most cases */ }
}
}, 120);
}); });
} }