reorganize scripts

2025-12-21 21:22:25 +00:00 · 2025-01-19 01:17:25 +02:00
parent 3015c6e39b
commit 6107c19e04
6 changed files with 304 additions and 309 deletions
--- a/src/PanelResizer.js
+++ b/src/PanelResizer.js
@@ -0,0 +1,90 @@
+export class PanelResizer {
+    constructor() {
+        this.handleDragStart = this.handleDragStart.bind(this);
+        this.handleDrag = this.handleDrag.bind(this);
+        this.handleDragEnd = this.handleDragEnd.bind(this);
+        this.loadLayout();
+        this.initializeResizeHandles();
+    }
+
+    loadLayout() {
+        const stored = localStorage.getItem('panelLayout');
+        if (stored) {
+            const layout = JSON.parse(stored);
+            document.documentElement.style.setProperty('--snippet-width', layout.snippetWidth);
+            document.documentElement.style.setProperty('--editor-width', layout.editorWidth);
+            document.documentElement.style.setProperty('--preview-width', layout.previewWidth);
+        }
+    }
+
+    saveLayout() {
+        const layout = {
+            snippetWidth: document.documentElement.style.getPropertyValue('--snippet-width'),
+            editorWidth: document.documentElement.style.getPropertyValue('--editor-width'),
+            previewWidth: document.documentElement.style.getPropertyValue('--preview-width')
+        };
+        localStorage.setItem('panelLayout', JSON.stringify(layout));
+    }
+
+    initializeResizeHandles() {
+        const handles = document.querySelectorAll('.resize-handle');
+        handles.forEach((handle, index) => {
+            handle.addEventListener('mousedown', (e) => this.handleDragStart(e, index));
+        });
+    }
+
+    handleDragStart(e, handleIndex) {
+        this.activeHandle = handleIndex;
+        this.startX = e.clientX;
+        this.handle = e.target;
+        this.handle.classList.add('active');
+
+        // Get the panels adjacent to the handle
+        const panels = document.querySelectorAll('.panel');
+        this.leftPanel = panels[handleIndex];
+        this.rightPanel = panels[handleIndex + 1];
+
+        // Store initial widths
+        this.leftWidth = this.leftPanel.getBoundingClientRect().width;
+        this.rightWidth = this.rightPanel.getBoundingClientRect().width;
+
+        document.addEventListener('mousemove', this.handleDrag);
+        document.addEventListener('mouseup', this.handleDragEnd);
+    }
+
+    handleDrag(e) {
+        if (!this.handle) return;
+
+        const dx = e.clientX - this.startX;
+        const containerWidth = document.querySelector('.container').getBoundingClientRect().width;
+
+        // Calculate new widths as fractions
+        const newLeftWidth = `${(this.leftWidth + dx) / containerWidth}fr`;
+        const newRightWidth = `${(this.rightWidth - dx) / containerWidth}fr`;
+
+        // Apply new widths based on which handle is being dragged
+        if (this.activeHandle === 0) {
+            document.documentElement.style.setProperty('--snippet-width', newLeftWidth);
+            document.documentElement.style.setProperty('--editor-width', newRightWidth);
+        } else {
+            document.documentElement.style.setProperty('--editor-width', newLeftWidth);
+            document.documentElement.style.setProperty('--preview-width', newRightWidth);
+        }
+    }
+
+    handleDragEnd() {
+        if (!this.handle) return;
+
+        this.handle.classList.remove('active');
+        this.handle = null;
+        this.saveLayout();
+
+        document.removeEventListener('mousemove', this.handleDrag);
+        document.removeEventListener('mouseup', this.handleDragEnd);
+
+        // Trigger Monaco editor resize
+        if (window.editor) {
+            window.editor.layout();
+        }
+    }
+}