Fix: Resize-Handles als absolute Overlays statt Grid-Spalten
Komplett neuer Ansatz: Handles sind absolut positionierte 8px-Elemente über den Panel-Grenzen statt schmale Grid-Spalten. Behebt das Problem dass WebKitGTK Mouse-Events auf engen Grid-Zellen nicht registriert. - Handles position:absolute über kumulierten Panel-Breiten - 8px breit, transparent, wird blau beim Hover - Drag-Overlay (position:fixed) fängt Events während Drag - document.addEventListener statt window für bessere Kompatibilität Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Eddy
parent
a0ad11b66c
commit
eb8e2ac1d7
1 changed files with 144 additions and 162 deletions
|
|
@ -26,80 +26,75 @@
|
|||
|
||||
let panelWidths = [220, 400, 400, 380];
|
||||
let container: HTMLDivElement;
|
||||
let dragging: number | null = null;
|
||||
let startX = 0;
|
||||
let startWidths: number[] = [];
|
||||
let draggingIdx: number | null = null;
|
||||
let dragStartX = 0;
|
||||
let dragStartWidths: number[] = [];
|
||||
|
||||
// Panel-Refs für Position-Berechnung
|
||||
let panelRefs: HTMLElement[] = [];
|
||||
|
||||
function getGridTemplate(): string {
|
||||
return panelWidths.map((w, i) => {
|
||||
if (i < panelWidths.length - 1) {
|
||||
return `${w}px 5px`;
|
||||
}
|
||||
return `${w}px`;
|
||||
}).join(' ');
|
||||
return panelWidths.map(w => `${w}px`).join(' ');
|
||||
}
|
||||
|
||||
function onMouseDown(index: number, event: MouseEvent) {
|
||||
// Handle-Positionen berechnen (kumulierte Breiten)
|
||||
function getHandlePositions(): number[] {
|
||||
const positions: number[] = [];
|
||||
let cumulative = 0;
|
||||
for (let i = 0; i < panelWidths.length - 1; i++) {
|
||||
cumulative += panelWidths[i];
|
||||
positions.push(cumulative);
|
||||
}
|
||||
return positions;
|
||||
}
|
||||
|
||||
function startDrag(index: number, event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
dragging = index;
|
||||
startX = event.clientX;
|
||||
startWidths = [...panelWidths];
|
||||
draggingIdx = index;
|
||||
dragStartX = event.clientX;
|
||||
dragStartWidths = [...panelWidths];
|
||||
|
||||
// Sofort Text-Selektion blockieren auf dem ganzen Dokument
|
||||
// Text-Selektion sofort blockieren
|
||||
document.body.style.userSelect = 'none';
|
||||
document.body.style.webkitUserSelect = 'none';
|
||||
document.body.style.cursor = 'col-resize';
|
||||
|
||||
// Bestehende Selektion löschen
|
||||
window.getSelection()?.removeAllRanges();
|
||||
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
window.addEventListener('mouseup', onMouseUp);
|
||||
document.addEventListener('mousemove', onDrag);
|
||||
document.addEventListener('mouseup', stopDrag);
|
||||
}
|
||||
|
||||
function onMouseMove(event: MouseEvent) {
|
||||
if (dragging === null) return;
|
||||
function onDrag(event: MouseEvent) {
|
||||
if (draggingIdx === null) return;
|
||||
event.preventDefault();
|
||||
|
||||
const dx = event.clientX - startX;
|
||||
const minWidth = 100;
|
||||
const dx = event.clientX - dragStartX;
|
||||
const min = 80;
|
||||
|
||||
const leftIdx = dragging;
|
||||
const rightIdx = dragging + 1;
|
||||
const li = draggingIdx;
|
||||
const ri = draggingIdx + 1;
|
||||
|
||||
let newLeft = startWidths[leftIdx] + dx;
|
||||
let newRight = startWidths[rightIdx] - dx;
|
||||
let newL = dragStartWidths[li] + dx;
|
||||
let newR = dragStartWidths[ri] - dx;
|
||||
|
||||
if (newLeft < minWidth) {
|
||||
newRight -= (minWidth - newLeft);
|
||||
newLeft = minWidth;
|
||||
}
|
||||
if (newRight < minWidth) {
|
||||
newLeft -= (minWidth - newRight);
|
||||
newRight = minWidth;
|
||||
}
|
||||
// Clamp
|
||||
if (newL < min) { newR -= (min - newL); newL = min; }
|
||||
if (newR < min) { newL -= (min - newR); newR = min; }
|
||||
|
||||
panelWidths[leftIdx] = Math.max(minWidth, newLeft);
|
||||
panelWidths[rightIdx] = Math.max(minWidth, newRight);
|
||||
panelWidths[li] = Math.max(min, newL);
|
||||
panelWidths[ri] = Math.max(min, newR);
|
||||
panelWidths = panelWidths;
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
dragging = null;
|
||||
|
||||
// Selektion wieder erlauben
|
||||
function stopDrag() {
|
||||
draggingIdx = null;
|
||||
document.body.style.userSelect = '';
|
||||
document.body.style.webkitUserSelect = '';
|
||||
document.body.style.cursor = '';
|
||||
document.removeEventListener('mousemove', onDrag);
|
||||
document.removeEventListener('mouseup', stopDrag);
|
||||
|
||||
window.removeEventListener('mousemove', onMouseMove);
|
||||
window.removeEventListener('mouseup', onMouseUp);
|
||||
|
||||
try {
|
||||
localStorage.setItem('panel-widths', JSON.stringify(panelWidths));
|
||||
} catch {}
|
||||
try { localStorage.setItem('panel-widths', JSON.stringify(panelWidths)); } catch {}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
|
|
@ -107,109 +102,111 @@
|
|||
const saved = localStorage.getItem('panel-widths');
|
||||
if (saved) {
|
||||
const parsed = JSON.parse(saved);
|
||||
if (Array.isArray(parsed) && parsed.length === 4) {
|
||||
panelWidths = parsed;
|
||||
}
|
||||
if (Array.isArray(parsed) && parsed.length === 4) panelWidths = parsed;
|
||||
}
|
||||
} catch {}
|
||||
|
||||
// Breiten an Fenster anpassen
|
||||
if (container) {
|
||||
const total = panelWidths.reduce((a, b) => a + b, 0);
|
||||
const available = container.clientWidth - 15; // 3 Handles à 5px
|
||||
if (total > available) {
|
||||
const scale = available / total;
|
||||
panelWidths = panelWidths.map(w => Math.round(w * scale));
|
||||
// An Fensterbreite anpassen
|
||||
requestAnimationFrame(() => {
|
||||
if (container) {
|
||||
const available = container.clientWidth;
|
||||
const total = panelWidths.reduce((a, b) => a + b, 0);
|
||||
if (total > available || total < available * 0.5) {
|
||||
const scale = available / total;
|
||||
panelWidths = panelWidths.map(w => Math.max(80, Math.round(w * scale)));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$: handlePositions = getHandlePositions();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="panels"
|
||||
class:dragging={dragging !== null}
|
||||
bind:this={container}
|
||||
style="grid-template-columns: {getGridTemplate()}"
|
||||
>
|
||||
<!-- Session-Sidebar -->
|
||||
<aside class="panel">
|
||||
<SessionList />
|
||||
</aside>
|
||||
<div class="layout" bind:this={container}>
|
||||
<!-- Die 4 Panels als einfaches Grid ohne Handle-Spalten -->
|
||||
<div class="panels" style="grid-template-columns: {getGridTemplate()}">
|
||||
<aside class="panel">
|
||||
<SessionList />
|
||||
</aside>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="handle" on:mousedown={(e) => onMouseDown(0, e)}><div class="handle-grip"></div></div>
|
||||
<section class="panel">
|
||||
<ChatPanel />
|
||||
</section>
|
||||
|
||||
<!-- Chat -->
|
||||
<section class="panel">
|
||||
<ChatPanel />
|
||||
</section>
|
||||
<section class="panel">
|
||||
<div class="panel-tabs">
|
||||
{#each middleTabs as tab}
|
||||
<button
|
||||
class="tab"
|
||||
class:active={activeMiddleTab === tab.id}
|
||||
on:click={() => activeMiddleTab = tab.id}
|
||||
>
|
||||
{tab.icon} {tab.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
{#if activeMiddleTab === 'activity'}
|
||||
<ActivityPanel />
|
||||
{:else if activeMiddleTab === 'memory'}
|
||||
<MemoryPanel />
|
||||
{:else if activeMiddleTab === 'audit'}
|
||||
<AuditLog />
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="handle" on:mousedown={(e) => onMouseDown(1, e)}><div class="handle-grip"></div></div>
|
||||
<section class="panel">
|
||||
<div class="panel-tabs">
|
||||
{#each rightTabs as tab}
|
||||
<button
|
||||
class="tab"
|
||||
class:active={activeRightTab === tab.id}
|
||||
on:click={() => activeRightTab = tab.id}
|
||||
>
|
||||
{tab.icon} {tab.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
{#if activeRightTab === 'agents'}
|
||||
<AgentView />
|
||||
{:else if activeRightTab === 'guards'}
|
||||
<GuardRailsPanel />
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Aktivität / Memory / Audit -->
|
||||
<section class="panel">
|
||||
<div class="panel-tabs">
|
||||
{#each middleTabs as tab}
|
||||
<button
|
||||
class="tab"
|
||||
class:active={activeMiddleTab === tab.id}
|
||||
on:click={() => activeMiddleTab = tab.id}
|
||||
>
|
||||
{tab.icon} {tab.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
{#if activeMiddleTab === 'activity'}
|
||||
<ActivityPanel />
|
||||
{:else if activeMiddleTab === 'memory'}
|
||||
<MemoryPanel />
|
||||
{:else if activeMiddleTab === 'audit'}
|
||||
<AuditLog />
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
<!-- Resize-Handles als absolut positionierte Elemente ÜBER den Panels -->
|
||||
{#each handlePositions as pos, i}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="resize-handle"
|
||||
class:active={draggingIdx === i}
|
||||
style="left: {pos - 4}px"
|
||||
on:mousedown={(e) => startDrag(i, e)}
|
||||
></div>
|
||||
{/each}
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="handle" on:mousedown={(e) => onMouseDown(2, e)}><div class="handle-grip"></div></div>
|
||||
|
||||
<!-- Agents / Guard-Rails -->
|
||||
<section class="panel">
|
||||
<div class="panel-tabs">
|
||||
{#each rightTabs as tab}
|
||||
<button
|
||||
class="tab"
|
||||
class:active={activeRightTab === tab.id}
|
||||
on:click={() => activeRightTab = tab.id}
|
||||
>
|
||||
{tab.icon} {tab.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
{#if activeRightTab === 'agents'}
|
||||
<AgentView />
|
||||
{:else if activeRightTab === 'guards'}
|
||||
<GuardRailsPanel />
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
<!-- Drag-Overlay -->
|
||||
{#if draggingIdx !== null}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="drag-overlay" on:mousemove={onDrag} on:mouseup={stopDrag}></div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Unsichtbares Overlay während Drag — fängt alle Maus-Events ab -->
|
||||
{#if dragging !== null}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="drag-overlay" on:mousemove={onMouseMove} on:mouseup={onMouseUp}></div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.layout {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panels {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
height: 100%;
|
||||
background: var(--bg-primary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
|
@ -218,48 +215,32 @@
|
|||
background: var(--bg-primary);
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Resize Handle — 5px breit, mit unsichtbarem 15px Greifbereich */
|
||||
.handle {
|
||||
width: 5px;
|
||||
cursor: col-resize;
|
||||
background: var(--border);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.panel:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.handle::before {
|
||||
content: '';
|
||||
/* Resize Handle — absolut positioniert, 8px breit, über den Panel-Grenzen */
|
||||
.resize-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
z-index: 11;
|
||||
width: 8px;
|
||||
cursor: col-resize;
|
||||
z-index: 100;
|
||||
background: transparent;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.handle:hover {
|
||||
.resize-handle:hover,
|
||||
.resize-handle.active {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.handle-grip {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
background: var(--text-secondary);
|
||||
border-radius: 1px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.handle:hover .handle-grip {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Drag-Overlay — ganzer Bildschirm, unsichtbar, fängt Maus-Events */
|
||||
/* Drag-Overlay — fängt ALLE Maus-Events während Drag */
|
||||
.drag-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
|
|
@ -272,11 +253,12 @@
|
|||
display: flex;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
padding: var(--spacing-sm) var(--spacing-sm);
|
||||
padding: var(--spacing-sm);
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
background: transparent;
|
||||
|
|
|
|||
Loading…
Reference in a new issue