add fullscreen toggle to graph visualization
Expand/collapse button in bottom-right corner lets the graph fill the entire viewport for better exploration. Escape key exits fullscreen. Category filters overlay in top-left when fullscreen.
This commit is contained in:
parent
f3e61d8c77
commit
f8bbb2e993
3 changed files with 89 additions and 0 deletions
|
|
@ -289,6 +289,60 @@ textarea.input-field {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Fullscreen toggle button */
|
||||||
|
.fullscreen-toggle-btn {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
z-index: 11;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen-toggle-btn:hover {
|
||||||
|
color: var(--accent);
|
||||||
|
border-color: var(--border-accent);
|
||||||
|
box-shadow: 0 0 12px var(--accent-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Graph fullscreen mode */
|
||||||
|
.graph-fullscreen {
|
||||||
|
position: fixed !important;
|
||||||
|
inset: 0 !important;
|
||||||
|
z-index: 50 !important;
|
||||||
|
background: var(--bg-primary) !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
width: 100vw !important;
|
||||||
|
height: 100vh !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-fullscreen .graph-container {
|
||||||
|
height: 100vh !important;
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-fullscreen .flex.flex-wrap.gap-2.mb-4 {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.75rem;
|
||||||
|
left: 0.75rem;
|
||||||
|
z-index: 11;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
/* Node detail panel */
|
/* Node detail panel */
|
||||||
.node-detail {
|
.node-detail {
|
||||||
background: var(--bg-secondary);
|
background: var(--bg-secondary);
|
||||||
|
|
|
||||||
|
|
@ -488,6 +488,22 @@
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="graph-container" x-ref="graphContainer"></div>
|
<div class="graph-container" x-ref="graphContainer"></div>
|
||||||
|
|
||||||
|
<!-- Fullscreen toggle button -->
|
||||||
|
<button class="fullscreen-toggle-btn" @click="toggleFullscreen()" :title="isFullscreen ? 'Exit fullscreen' : 'Fullscreen'">
|
||||||
|
<template x-if="!isFullscreen">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline>
|
||||||
|
<line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
<template x-if="isFullscreen">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline>
|
||||||
|
<line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</button>
|
||||||
|
|
||||||
<template x-if="selectedNode">
|
<template x-if="selectedNode">
|
||||||
<div class="node-detail" style="position:absolute; top:1rem; right:1rem; width:20rem; z-index:10;">
|
<div class="node-detail" style="position:absolute; top:1rem; right:1rem; width:20rem; z-index:10;">
|
||||||
<div class="flex items-center gap-2 mb-2">
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ function graphComponent() {
|
||||||
loading: false,
|
loading: false,
|
||||||
selectedNode: null,
|
selectedNode: null,
|
||||||
simulation: null,
|
simulation: null,
|
||||||
|
isFullscreen: false,
|
||||||
|
|
||||||
async init() {
|
async init() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
|
|
@ -194,6 +195,24 @@ function graphComponent() {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
toggleFullscreen() {
|
||||||
|
this.isFullscreen = !this.isFullscreen;
|
||||||
|
const wrapper = this.$el.closest('[x-show="$store.app.activeTab === \'graph\'"]');
|
||||||
|
if (wrapper) {
|
||||||
|
wrapper.classList.toggle('graph-fullscreen', this.isFullscreen);
|
||||||
|
}
|
||||||
|
if (this.isFullscreen) {
|
||||||
|
this._escHandler = (e) => { if (e.key === 'Escape') this.toggleFullscreen(); };
|
||||||
|
document.addEventListener('keydown', this._escHandler);
|
||||||
|
} else {
|
||||||
|
if (this._escHandler) {
|
||||||
|
document.removeEventListener('keydown', this._escHandler);
|
||||||
|
this._escHandler = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(() => this.render(), 50);
|
||||||
|
},
|
||||||
|
|
||||||
preview(content, len = 200) {
|
preview(content, len = 200) {
|
||||||
if (!content) return '';
|
if (!content) return '';
|
||||||
return content.length > len ? content.substring(0, len) + '...' : content;
|
return content.length > len ? content.substring(0, len) + '...' : content;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue