33 lines
1.0 KiB
JavaScript
33 lines
1.0 KiB
JavaScript
export function initResizablePanels() {
|
|
const handle = document.getElementById('resize-handle-h');
|
|
const container = document.getElementById('workspace-container');
|
|
const blocklyArea = document.getElementById('blockly-area');
|
|
const bottomPanels = document.getElementById('bottom-panels');
|
|
|
|
if (!handle || !container || !blocklyArea || !bottomPanels) return;
|
|
|
|
let dragging = false;
|
|
|
|
handle.addEventListener('mousedown', (e) => {
|
|
dragging = true;
|
|
e.preventDefault();
|
|
});
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
if (!dragging) return;
|
|
const containerRect = container.getBoundingClientRect();
|
|
const offset = e.clientY - containerRect.top;
|
|
const totalHeight = containerRect.height;
|
|
const topPercent = Math.max(20, Math.min(80, (offset / totalHeight) * 100));
|
|
|
|
blocklyArea.style.flex = `0 0 ${topPercent}%`;
|
|
bottomPanels.style.flex = `0 0 ${100 - topPercent}%`;
|
|
|
|
window.dispatchEvent(new Event('resize'));
|
|
});
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
dragging = false;
|
|
});
|
|
}
|