Изменено поведение табов

SQLLinter/Infrastructure/Reporters/Static/HtmlFormatter.js

@@ -23,6 +23,7 @@ class ReportRenderer {
 
     init() {
         this.renderTabs();
+        this.setupTabsDragScroll();
         this.renderFileReports();
         this.setupTabNavigation();
         this.activateTab(0);
@@ -34,33 +35,161 @@ class ReportRenderer {
 
         this.tabsList.innerHTML = '';
 
-        // Табы для файлов
         this.files.forEach((file, index) => {
             const tab = document.createElement('button');
             tab.className = `tab ${index === 0 ? 'active' : ''}`;
             tab.dataset.target = `file_${index}`;
             tab.dataset.index = index;
 
-            const total = (file.v.c?.length || 0) + (file.v.w?.length || 0) + (file.v.i?.length || 0);
+            // Подсчет нарушений по типам
+            const criticalCount = file.v.c?.length || 0;
+            const warningCount = file.v.w?.length || 0;
+            const infoCount = file.v.i?.length || 0;
+
+            // Создание HTML с раздельными счетчиками
+            const countersHTML = `
+                <div class="tab-counters">
+                    <span class="tab-counter critical ${criticalCount === 0 ? 'empty' : ''}" title="${criticalCount} critical">${criticalCount || ''}</span>
+                    <span class="tab-counter warning ${warningCount === 0 ? 'empty' : ''}" title="${warningCount} warning">${warningCount || ''}</span>
+                    <span class="tab-counter info ${infoCount === 0 ? 'empty' : ''}" title="${infoCount} info">${infoCount || ''}</span>
+                </div>
+            `;
 
             tab.innerHTML = `
-                ${this.escapeHtml(file.n)}
-                <span class="tab-badge">${total}</span>
+                <div class="tab-inner">
+                    <span class="tab-text" title="${this.escapeHtml(file.n)}">${this.escapeHtml(file.n)}</span>
+                    ${countersHTML}
+                </div>
             `;
 
             this.tabsList.appendChild(tab);
         });
 
-        // Таб для диаграммы (если есть)
         if (this.diagram.h || this.diagram.hasDiagram) {
             const diagramTab = document.createElement('button');
             diagramTab.className = 'tab';
             diagramTab.dataset.target = 'mermaid';
-            diagramTab.textContent = 'Диаграмма';
+            // Создаем пустые счетчики для диаграммы
+            const diagramCountersHTML = `
+                <div class="tab-counters">
+                    <span class="tab-counter critical empty" title="0 critical"></span>
+                    <span class="tab-counter warning empty" title="0 warning"></span>
+                    <span class="tab-counter info empty" title="0 info"></span>
+                </div>
+            `;
+
+            diagramTab.innerHTML = `
+                <div class="tab-inner">
+                    <span class="tab-text">Диаграмма</span>
+                    ${diagramCountersHTML}
+                </div>
+            `;
+
             tabsList.appendChild(diagramTab);
         }
     }
 
+    // Drag-to-scroll для табов
+    setupTabsDragScroll() {
+        const tabs = document.querySelector('.tabs');
+        if (!tabs) return;
+
+        let isDown = false;
+        let startX;
+        let scrollLeft;
+        let lastTimestamp = 0;
+        const SCROLL_SPEED = 1.5;
+        const FRAME_TIME = 16; // ~60 FPS
+
+        // Улучшенная прокрутка колесиком
+        tabs.addEventListener('wheel', (e) => {
+            if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+                e.preventDefault();
+
+                const now = Date.now();
+                if (now - lastTimestamp < FRAME_TIME) return; // Ограничиваем частоту
+
+                lastTimestamp = now;
+
+                // Плавная прокрутка с инерцией
+                tabs.style.scrollBehavior = 'auto';
+                const currentScroll = tabs.scrollLeft;
+                const targetScroll = currentScroll + e.deltaY * SCROLL_SPEED;
+
+                // Используем requestAnimationFrame для плавности
+                const animateScroll = () => {
+                    const diff = targetScroll - tabs.scrollLeft;
+                    const step = diff * 0.3; // Эффект плавного замедления
+
+                    tabs.scrollLeft += step;
+
+                    if (Math.abs(diff) > 0.5) {
+                        requestAnimationFrame(animateScroll);
+                    }
+                };
+
+                animateScroll();
+            }
+        }, { passive: false });
+
+        // Улучшенный drag-scroll
+        const startDrag = (clientX) => {
+            isDown = true;
+            tabs.style.cursor = 'grabbing';
+            tabs.style.scrollBehavior = 'auto';
+            startX = clientX - tabs.getBoundingClientRect().left;
+            scrollLeft = tabs.scrollLeft;
+        };
+
+        const endDrag = () => {
+            isDown = false;
+            tabs.style.cursor = 'grab';
+        };
+
+        const doDrag = (clientX) => {
+            if (!isDown) return;
+
+            const x = clientX - tabs.getBoundingClientRect().left;
+            const walk = (x - startX) * 2;
+
+            // Плавное обновление позиции
+            requestAnimationFrame(() => {
+                tabs.scrollLeft = scrollLeft - walk;
+            });
+        };
+
+        // Мышь
+        tabs.addEventListener('mousedown', (e) => {
+            if (e.button !== 0) return; // Только левая кнопка
+            startDrag(e.clientX);
+        });
+
+        tabs.addEventListener('mouseleave', endDrag);
+        tabs.addEventListener('mouseup', endDrag);
+
+        tabs.addEventListener('mousemove', (e) => {
+            if (!isDown) return;
+            e.preventDefault();
+            doDrag(e.clientX);
+        });
+
+        // Сенсорные устройства
+        tabs.addEventListener('touchstart', (e) => {
+            if (e.touches.length === 1) {
+                startDrag(e.touches[0].clientX);
+            }
+        }, { passive: true });
+
+        tabs.addEventListener('touchend', endDrag);
+        tabs.addEventListener('touchcancel', endDrag);
+
+        tabs.addEventListener('touchmove', (e) => {
+            if (!isDown || e.touches.length !== 1) return;
+            e.preventDefault();
+            doDrag(e.touches[0].clientX);
+        }, { passive: false });
+    }
+
     renderFileReports() {
         const container = document.getElementById('reports-container');
         if (!container) return;
@@ -189,7 +318,7 @@ class ReportRenderer {
         section.innerHTML = `
             <div class="severity-header">
                 <div class="severity-title">
-                    <h3>${severityTitle}</h3>
+                    <h2>${severityTitle}</h2>
                     <span class="severity-count">${violations.length}</span>
                 </div>
             </div>
@@ -258,9 +387,7 @@ class ReportRenderer {
     }
 
     calculateTotalViolations(file) {
-        return (file.criticalViolations?.length || 0) +
-            (file.warningViolations?.length || 0) +
-            (file.infoViolations?.length || 0);
+        return (file.v.c?.length || 0) + (file.v.w?.length || 0) + (file.v.i?.length || 0);
     }
 
     escapeHtml(text) {
@@ -319,8 +446,10 @@ function initTabs(onTabActivated) {
                 top: ${y - size / 2}px;
             `;
 
+            /*
             tab.style.position = 'relative';
             tab.style.overflow = 'hidden';
+            */
             tab.appendChild(ripple);
 
             setTimeout(() => {