89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
// layout.ts
|
|
let leftPanel: HTMLElement | null = null;
|
|
let rightPanel: HTMLElement | null = null;
|
|
let dragBar: HTMLElement | null = null;
|
|
let isDragging: boolean = false;
|
|
let pendingX: number | null = null;
|
|
|
|
export function initResize(): void {
|
|
leftPanel = document.getElementById("leftPanel");
|
|
rightPanel = document.getElementById("rightPanel");
|
|
dragBar = document.getElementById("dragBar");
|
|
|
|
if (!leftPanel || !rightPanel || !dragBar) return;
|
|
|
|
const savedRatio = localStorage.getItem('layoutRatio');
|
|
if (savedRatio) {
|
|
applyRatio(parseFloat(savedRatio));
|
|
}
|
|
|
|
dragBar.addEventListener("mousedown", (e) => {
|
|
if (rightPanel!.classList.contains("hidden")) return;
|
|
|
|
isDragging = true;
|
|
document.body.style.cursor = "col-resize";
|
|
e.preventDefault();
|
|
});
|
|
|
|
document.addEventListener("mouseup", () => {
|
|
if (!isDragging) return;
|
|
|
|
isDragging = false;
|
|
document.body.style.cursor = "default";
|
|
|
|
if (rightPanel && !rightPanel.classList.contains("hidden")) {
|
|
const total = window.innerWidth;
|
|
const leftWidth = leftPanel!.getBoundingClientRect().width;
|
|
localStorage.setItem('layoutRatio', String(leftWidth / total));
|
|
}
|
|
});
|
|
|
|
document.addEventListener("mousemove", (e) => {
|
|
if (!isDragging) return;
|
|
if (rightPanel && rightPanel.classList.contains("hidden")) return;
|
|
|
|
pendingX = e.clientX;
|
|
|
|
requestAnimationFrame(() => {
|
|
if (pendingX === null) return;
|
|
if (!leftPanel || !rightPanel || !dragBar) return;
|
|
|
|
const total = window.innerWidth;
|
|
let leftWidth = pendingX;
|
|
|
|
const min = 300;
|
|
if (leftWidth < min) leftWidth = min;
|
|
if (leftWidth > total - min) leftWidth = total - min;
|
|
|
|
const rightWidth = total - leftWidth - dragBar.offsetWidth;
|
|
|
|
leftPanel.style.flex = `0 0 ${leftWidth}px`;
|
|
rightPanel.style.flex = `0 0 ${rightWidth}px`;
|
|
|
|
pendingX = null;
|
|
});
|
|
});
|
|
}
|
|
|
|
function applyRatio(ratio: number): void {
|
|
const total = window.innerWidth;
|
|
const leftWidth = Math.floor(total * ratio);
|
|
const rightWidth = total - leftWidth;
|
|
|
|
if (leftPanel && rightPanel) {
|
|
leftPanel.style.flex = `0 0 ${leftWidth}px`;
|
|
rightPanel.style.flex = `0 0 ${rightWidth}px`;
|
|
}
|
|
}
|
|
|
|
export function updateResizerVisibility(): void {
|
|
if (!dragBar || !rightPanel || !leftPanel) return;
|
|
|
|
if (rightPanel.classList.contains("hidden")) {
|
|
dragBar.classList.add("hidden");
|
|
leftPanel.style.flex = "1";
|
|
} else {
|
|
dragBar.classList.remove("hidden");
|
|
}
|
|
}
|