110 lines
3.8 KiB
JavaScript
110 lines
3.8 KiB
JavaScript
//layout.js
|
|
let leftPanel, rightPanel, dragBar;
|
|
let isDragging = false;
|
|
|
|
export function initResize() {
|
|
leftPanel = document.getElementById("leftPanel");
|
|
rightPanel = document.getElementById("rightPanel");
|
|
dragBar = document.getElementById("dragBar");
|
|
|
|
if (!leftPanel || !rightPanel || !dragBar) {
|
|
console.warn("[layout] Элементы не найдены");
|
|
return;
|
|
}
|
|
|
|
console.log("[layout] Инициализация ресайза");
|
|
|
|
// Загрузка сохранённых пропорций
|
|
const savedRatio = localStorage.getItem('layoutRatio');
|
|
if (savedRatio) {
|
|
const ratio = parseFloat(savedRatio);
|
|
applyRatio(ratio);
|
|
}
|
|
|
|
dragBar.addEventListener("mousedown", (e) => {
|
|
if (rightPanel.classList.contains("hidden")) return;
|
|
|
|
console.log("[layout] mousedown на resizer");
|
|
isDragging = true;
|
|
document.body.style.cursor = "col-resize";
|
|
document.body.style.userSelect = "none";
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
});
|
|
|
|
document.addEventListener("mouseup", () => {
|
|
if (isDragging) {
|
|
console.log("[layout] mouseup - конец перетаскивания");
|
|
isDragging = false;
|
|
document.body.style.cursor = "default";
|
|
document.body.style.userSelect = "";
|
|
|
|
// Сохраняем пропорции только если камера открыта
|
|
if (!rightPanel.classList.contains("hidden")) {
|
|
const total = window.innerWidth;
|
|
const leftWidth = leftPanel.getBoundingClientRect().width;
|
|
const ratio = leftWidth / total;
|
|
localStorage.setItem('layoutRatio', ratio.toString());
|
|
}
|
|
}
|
|
});
|
|
|
|
document.addEventListener("mousemove", (e) => {
|
|
if (!isDragging) return;
|
|
if (rightPanel.classList.contains("hidden")) return;
|
|
|
|
const total = window.innerWidth;
|
|
let leftWidth = e.clientX;
|
|
|
|
const minWidth = 300;
|
|
if (leftWidth < minWidth) leftWidth = minWidth;
|
|
if (leftWidth > total - minWidth) leftWidth = total - minWidth;
|
|
|
|
const rightWidth = total - leftWidth - dragBar.offsetWidth;
|
|
|
|
leftPanel.style.flex = `0 0 ${leftWidth}px`;
|
|
leftPanel.style.width = `${leftWidth}px`;
|
|
rightPanel.style.flex = `0 0 ${rightWidth}px`;
|
|
rightPanel.style.width = `${rightWidth}px`;
|
|
});
|
|
|
|
window.addEventListener("resize", () => {
|
|
if (rightPanel.classList.contains("hidden")) return;
|
|
|
|
const total = window.innerWidth;
|
|
const leftWidth = leftPanel.getBoundingClientRect().width;
|
|
const ratio = leftWidth / total;
|
|
if (ratio > 0.2 && ratio < 0.8) {
|
|
applyRatio(ratio);
|
|
}
|
|
});
|
|
}
|
|
|
|
function applyRatio(ratio) {
|
|
const total = window.innerWidth;
|
|
const leftWidth = Math.floor(total * ratio);
|
|
const rightWidth = total - leftWidth - dragBar.offsetWidth;
|
|
|
|
leftPanel.style.flex = `0 0 ${leftWidth}px`;
|
|
leftPanel.style.width = `${leftWidth}px`;
|
|
rightPanel.style.flex = `0 0 ${rightWidth}px`;
|
|
rightPanel.style.width = `${rightWidth}px`;
|
|
}
|
|
|
|
export function updateResizerVisibility() {
|
|
if (!dragBar || !rightPanel) return;
|
|
|
|
if (rightPanel.classList.contains("hidden")) {
|
|
dragBar.classList.add("hidden");
|
|
// Сбрасываем инлайн-стили левой панели, чтобы CSS flex заработал
|
|
leftPanel.style.flex = "";
|
|
leftPanel.style.width = "";
|
|
} else {
|
|
dragBar.classList.remove("hidden");
|
|
// Восстанавливаем сохранённые пропорции
|
|
const savedRatio = localStorage.getItem('layoutRatio');
|
|
if (savedRatio) {
|
|
applyRatio(parseFloat(savedRatio));
|
|
}
|
|
}
|
|
} |