diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 9bf5b08..5b474d9 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -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()}" > -