oimp/templates/static/ide-modules/ide-scrollbar.js

A CLI tool for generating OI problem and packages

//滚动条有关

export async function initScrollbar() {
    //  监听窗口大小变化
    window.addEventListener('resize', resizeLayout);
    window.addEventListener('DOMContentLoaded', resizeLayout);

    terminalDragbar();
    fileTreeToggle();
    prviewDragbar();
}

// 编辑器和预览区自适应高度，终端始终显示
function resizeLayout() {
    // 使用全局的syncMainHeight函数来确保所有区域都正确同步
    if (window.syncMainHeight) {
        // window.syncMainHeight();
    }
}
// 文件树和editor之间的拖动条
function fileTreeToggle() {
    const dragbar = document.getElementById('tree-dragbar');
    const fileTree = document.getElementById('file-tree');
    const editorDiv = document.getElementById('editor');
    const ideMain = document.getElementById('ide-main');
    let dragging = false;
    let lastUserSelect = '';
    dragbar.addEventListener('mousedown', function (e) {
        dragging = true;
        document.body.style.cursor = 'col-resize';
        lastUserSelect = document.body.style.userSelect;
        document.body.style.userSelect = 'none';
        e.preventDefault();
    });
    window.addEventListener('mousemove', function (e) {
        if (!dragging) return;
        const mainRect = ideMain.getBoundingClientRect();
        let leftWidth = e.clientX - mainRect.left;
        // 限制最小/最大宽度
        leftWidth = Math.max(120, Math.min(leftWidth, mainRect.width - 120));
        fileTree.style.width = leftWidth + 'px';
        editorDiv.style.width = (mainRect.width - leftWidth - dragbar.offsetWidth) + 'px';
        if (window.editor && window.editor.layout) window.editor.layout();
    });
    window.addEventListener('mouseup', function (e) {
        if (dragging) {
            dragging = false;
            document.body.style.cursor = '';
            document.body.style.userSelect = lastUserSelect;
        }
    });
}

// 终端窗口上方拖动条，调整主内容区和终端高度
function terminalDragbar() {
    const dragbar = document.getElementById('terminal-dragbar');
    const terminal = document.getElementById('terminal');
    let dragging = false;
    let lastUserSelect = '';

    dragbar.addEventListener('mousedown', function (e) {
        dragging = true;
        document.body.style.cursor = 'row-resize';
        lastUserSelect = document.body.style.userSelect;
        document.body.style.userSelect = 'none';
        e.preventDefault();
    });

    window.addEventListener('mousemove', function (e) {
        if (!dragging) return;
        const topbar = document.getElementById('topbar');
        const workflowBar = document.getElementById('workflow-bar');
        const previewMain = document.getElementById('ide-preview-main');
        const ideMain = document.getElementById('ide-main');
        const fileTree = document.getElementById('file-tree');
        const editorDiv = document.getElementById('editor');
        const previewDiv = document.getElementById('preview');
         const dragbar = document.getElementById('terminal-dragbar');
        const dragbarHeight = dragbar.offsetHeight;
        const totalHeight = window.innerHeight - dragbarHeight - topbar.offsetHeight - (workflowBar ? workflowBar.offsetHeight : 0);
        const minTerm = 200, minMain = 80;
        let newTermHeight = totalHeight - (e.clientY - topbar.getBoundingClientRect().bottom);
        newTermHeight = Math.max(minTerm, Math.min(newTermHeight, totalHeight - minMain));

        // 设置终端高度
        terminal.style.height = newTermHeight + 'px';

        // 计算主区域高度
       
        const mainHeight = totalHeight - newTermHeight - dragbarHeight;

        // 直接设置所有主区域的高度，确保实时同步
        if (previewMain) previewMain.style.height = mainHeight + 'px';
        if (ideMain) ideMain.style.height = mainHeight + 'px';
        if (fileTree) fileTree.style.height = mainHeight + 'px';
        if (editorDiv) editorDiv.style.height = mainHeight + 'px';
        if (previewDiv) previewDiv.style.height = mainHeight + 'px';

        // 同步编辑器布局
        if (window.editor && window.editor.layout) {
            window.editor.layout();
        }

        if (window.fitAddon) window.fitAddon.fit();
    });

    window.addEventListener('mouseup', function (e) {
        if (dragging) {
            dragging = false;
            document.body.style.cursor = '';
            document.body.style.userSelect = lastUserSelect;

            

            if (window.fitAddon) window.fitAddon.fit();
        }
    });
}

// 拖动分割条实现左右分栏自定义宽度
function prviewDragbar() {
    const dragbar = document.getElementById('dragbar');
    const ideMain = document.getElementById('ide-main');
    const preview = document.getElementById('preview');
    const idePreviewMain = document.getElementById('ide-preview-main');
    const previewHtml = document.getElementById('preview-html');
    let dragging = false;
    let lastUserSelect = '';
    dragbar.addEventListener('mousedown', function (e) {
        dragging = true;
        document.body.style.cursor = 'col-resize';
        lastUserSelect = document.body.style.userSelect;
        document.body.style.userSelect = 'none';
        if (previewHtml) previewHtml.style.pointerEvents = 'none';
        e.preventDefault();
    });
    window.addEventListener('mousemove', function (e) {
        if (!dragging) return;
        const totalWidth = idePreviewMain.offsetWidth;
        let leftWidth = e.clientX - idePreviewMain.getBoundingClientRect().left;
        // 限制最小/最大宽度
        leftWidth = Math.max(200, Math.min(leftWidth, totalWidth - 200));
        ideMain.style.width = leftWidth + 'px';
        preview.style.width = (totalWidth - leftWidth - dragbar.offsetWidth) + 'px';
    });
    window.addEventListener('mouseup', function (e) {
        if (dragging) {
            dragging = false;
            document.body.style.cursor = '';
            document.body.style.userSelect = lastUserSelect;
            if (previewHtml) previewHtml.style.pointerEvents = '';
        }
    });
}