Fix: Resizable Panels — Drag-Overlay verhindert Text-Selektion
- Unsichtbares Fullscreen-Overlay während Drag fängt alle Maus-Events - document.body.style.userSelect blockiert sofort bei mousedown - Bestehende Selektion wird beim Drag-Start gelöscht - Handle 5px breit + unsichtbarer 15px Greifbereich (::before) - Visueller Grip-Indikator beim Hover Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Eddy
parent
92353e2852
commit
a0ad11b66c
1 changed files with 80 additions and 28 deletions
|
|
@ -24,7 +24,6 @@
|
|||
|
||||
// ============ Resizable Panels ============
|
||||
|
||||
// Breiten in Pixel (werden zu fr umgerechnet)
|
||||
let panelWidths = [220, 400, 400, 380];
|
||||
let container: HTMLDivElement;
|
||||
let dragging: number | null = null;
|
||||
|
|
@ -32,10 +31,9 @@
|
|||
let startWidths: number[] = [];
|
||||
|
||||
function getGridTemplate(): string {
|
||||
// 4 Panels + 3 Handles dazwischen: panel handle panel handle panel handle panel
|
||||
return panelWidths.map((w, i) => {
|
||||
if (i < panelWidths.length - 1) {
|
||||
return `${w}px 3px`;
|
||||
return `${w}px 5px`;
|
||||
}
|
||||
return `${w}px`;
|
||||
}).join(' ');
|
||||
|
|
@ -43,17 +41,30 @@
|
|||
|
||||
function onMouseDown(index: number, event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
dragging = index;
|
||||
startX = event.clientX;
|
||||
startWidths = [...panelWidths];
|
||||
|
||||
// Sofort Text-Selektion blockieren auf dem ganzen Dokument
|
||||
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);
|
||||
}
|
||||
|
||||
function onMouseMove(event: MouseEvent) {
|
||||
if (dragging === null) return;
|
||||
event.preventDefault();
|
||||
|
||||
const dx = event.clientX - startX;
|
||||
const minWidth = 120;
|
||||
const minWidth = 100;
|
||||
|
||||
const leftIdx = dragging;
|
||||
const rightIdx = dragging + 1;
|
||||
|
|
@ -61,7 +72,6 @@
|
|||
let newLeft = startWidths[leftIdx] + dx;
|
||||
let newRight = startWidths[rightIdx] - dx;
|
||||
|
||||
// Mindestbreiten einhalten
|
||||
if (newLeft < minWidth) {
|
||||
newRight -= (minWidth - newLeft);
|
||||
newLeft = minWidth;
|
||||
|
|
@ -73,22 +83,26 @@
|
|||
|
||||
panelWidths[leftIdx] = Math.max(minWidth, newLeft);
|
||||
panelWidths[rightIdx] = Math.max(minWidth, newRight);
|
||||
panelWidths = panelWidths; // Svelte reactivity
|
||||
panelWidths = panelWidths;
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
dragging = null;
|
||||
|
||||
// Selektion wieder erlauben
|
||||
document.body.style.userSelect = '';
|
||||
document.body.style.webkitUserSelect = '';
|
||||
document.body.style.cursor = '';
|
||||
|
||||
window.removeEventListener('mousemove', onMouseMove);
|
||||
window.removeEventListener('mouseup', onMouseUp);
|
||||
|
||||
// Breiten in localStorage speichern
|
||||
try {
|
||||
localStorage.setItem('panel-widths', JSON.stringify(panelWidths));
|
||||
} catch {}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Gespeicherte Breiten laden
|
||||
try {
|
||||
const saved = localStorage.getItem('panel-widths');
|
||||
if (saved) {
|
||||
|
|
@ -99,10 +113,10 @@
|
|||
}
|
||||
} catch {}
|
||||
|
||||
// Initiale Breiten an Fenster anpassen wenn zu breit
|
||||
// Breiten an Fenster anpassen
|
||||
if (container) {
|
||||
const total = panelWidths.reduce((a, b) => a + b, 0);
|
||||
const available = container.clientWidth - 9; // 3 Handles à 3px
|
||||
const available = container.clientWidth - 15; // 3 Handles à 5px
|
||||
if (total > available) {
|
||||
const scale = available / total;
|
||||
panelWidths = panelWidths.map(w => Math.round(w * scale));
|
||||
|
|
@ -118,21 +132,23 @@
|
|||
style="grid-template-columns: {getGridTemplate()}"
|
||||
>
|
||||
<!-- Session-Sidebar -->
|
||||
<aside class="panel panel-sessions">
|
||||
<aside class="panel">
|
||||
<SessionList />
|
||||
</aside>
|
||||
|
||||
<div class="resize-handle" on:mousedown={(e) => onMouseDown(0, e)} role="separator" aria-orientation="vertical"></div>
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="handle" on:mousedown={(e) => onMouseDown(0, e)}><div class="handle-grip"></div></div>
|
||||
|
||||
<!-- Chat -->
|
||||
<section class="panel panel-chat">
|
||||
<section class="panel">
|
||||
<ChatPanel />
|
||||
</section>
|
||||
|
||||
<div class="resize-handle" on:mousedown={(e) => onMouseDown(1, e)} role="separator" aria-orientation="vertical"></div>
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="handle" on:mousedown={(e) => onMouseDown(1, e)}><div class="handle-grip"></div></div>
|
||||
|
||||
<!-- Aktivität / Memory / Audit -->
|
||||
<section class="panel panel-activity">
|
||||
<section class="panel">
|
||||
<div class="panel-tabs">
|
||||
{#each middleTabs as tab}
|
||||
<button
|
||||
|
|
@ -155,10 +171,11 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<div class="resize-handle" on:mousedown={(e) => onMouseDown(2, e)} role="separator" aria-orientation="vertical"></div>
|
||||
<!-- 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 panel-details">
|
||||
<section class="panel">
|
||||
<div class="panel-tabs">
|
||||
{#each rightTabs as tab}
|
||||
<button
|
||||
|
|
@ -180,17 +197,19 @@
|
|||
</section>
|
||||
</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>
|
||||
.panels {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
height: 100%;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.panels.dragging {
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
|
@ -201,20 +220,53 @@
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Resize Handle */
|
||||
.resize-handle {
|
||||
width: 3px;
|
||||
/* Resize Handle — 5px breit, mit unsichtbarem 15px Greifbereich */
|
||||
.handle {
|
||||
width: 5px;
|
||||
cursor: col-resize;
|
||||
background: var(--border);
|
||||
transition: background 0.15s ease;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.resize-handle:hover,
|
||||
.panels.dragging .resize-handle {
|
||||
.handle::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.handle:hover {
|
||||
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 {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.panel-tabs {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in a new issue