diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5b474d9..ca2100d 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -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(); -
- - +
+ +
+ - -
onMouseDown(0, e)}>
+
+ +
- -
- -
+
+
+ {#each middleTabs as tab} + + {/each} +
+
+ {#if activeMiddleTab === 'activity'} + + {:else if activeMiddleTab === 'memory'} + + {:else if activeMiddleTab === 'audit'} + + {/if} +
+
- -
onMouseDown(1, e)}>
+
+
+ {#each rightTabs as tab} + + {/each} +
+
+ {#if activeRightTab === 'agents'} + + {:else if activeRightTab === 'guards'} + + {/if} +
+
+
- -
-
- {#each middleTabs as tab} - - {/each} -
-
- {#if activeMiddleTab === 'activity'} - - {:else if activeMiddleTab === 'memory'} - - {:else if activeMiddleTab === 'audit'} - - {/if} -
-
+ + {#each handlePositions as pos, i} + +
startDrag(i, e)} + >
+ {/each} - -
onMouseDown(2, e)}>
- - -
-
- {#each rightTabs as tab} - - {/each} -
-
- {#if activeRightTab === 'agents'} - - {:else if activeRightTab === 'guards'} - - {/if} -
-
+ + {#if draggingIdx !== null} + +
+ {/if}
- -{#if dragging !== null} - -
-{/if} -