oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2025-12-21 21:22:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

panels: set default values and fix errors while resizing

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-19 01:28:26 +02:00
parent 6107c19e04
commit ce3dc2fd3f
1 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/PanelResizer.js
View File

@@ -14,6 +14,17 @@ export class PanelResizer {
document.documentElement.style.setProperty('--snippet-width', layout.snippetWidth); document.documentElement.style.setProperty('--snippet-width', layout.snippetWidth);
document.documentElement.style.setProperty('--editor-width', layout.editorWidth); document.documentElement.style.setProperty('--editor-width', layout.editorWidth);
document.documentElement.style.setProperty('--preview-width', layout.previewWidth); document.documentElement.style.setProperty('--preview-width', layout.previewWidth);
this.normalizePanelWidths();
} else {
const defaultLayout = {
snippetWidth: '0.25fr',
editorWidth: '0.25fr',
previewWidth: '0.5fr'
};
localStorage.setItem('panelLayout', JSON.stringify(defaultLayout));
document.documentElement.style.setProperty('--snippet-width', defaultLayout.snippetWidth);
document.documentElement.style.setProperty('--editor-width', defaultLayout.editorWidth);
document.documentElement.style.setProperty('--preview-width', defaultLayout.previewWidth);
} }
} }
@@ -59,17 +70,24 @@ export class PanelResizer {
const containerWidth = document.querySelector('.container').getBoundingClientRect().width; const containerWidth = document.querySelector('.container').getBoundingClientRect().width;
// Calculate new widths as fractions // Calculate new widths as fractions
const newLeftWidth = `${(this.leftWidth + dx) / containerWidth}fr`; let leftFr = (this.leftWidth + dx) / containerWidth;
const newRightWidth = `${(this.rightWidth - dx) / containerWidth}fr`; let rightFr = (this.rightWidth - dx) / containerWidth;
// Ensure minimum width of 0.1fr for each panel
const minFr = 0.1;
leftFr = Math.max(minFr, leftFr);
rightFr = Math.max(minFr, rightFr);
// Apply new widths based on which handle is being dragged // Apply new widths based on which handle is being dragged
if (this.activeHandle === 0) { if (this.activeHandle === 0) {
document.documentElement.style.setProperty('--snippet-width', newLeftWidth); document.documentElement.style.setProperty('--snippet-width', `${leftFr}fr`);
document.documentElement.style.setProperty('--editor-width', newRightWidth); document.documentElement.style.setProperty('--editor-width', `${rightFr}fr`);
} else { } else {
document.documentElement.style.setProperty('--editor-width', newLeftWidth); document.documentElement.style.setProperty('--editor-width', `${leftFr}fr`);
document.documentElement.style.setProperty('--preview-width', newRightWidth); document.documentElement.style.setProperty('--preview-width', `${rightFr}fr`);
} }
this.normalizePanelWidths();
} }
handleDragEnd() { handleDragEnd() {
@@ -87,4 +105,18 @@ export class PanelResizer {
window.editor.layout(); window.editor.layout();
} }
} }
normalizePanelWidths() {
const snippetWidth = parseFloat(document.documentElement.style.getPropertyValue('--snippet-width'));
const editorWidth = parseFloat(document.documentElement.style.getPropertyValue('--editor-width'));
const previewWidth = parseFloat(document.documentElement.style.getPropertyValue('--preview-width'));
const total = snippetWidth + editorWidth + previewWidth;
if (total !== 1) {
const factor = 1 / total;
document.documentElement.style.setProperty('--snippet-width', `${snippetWidth * factor}fr`);
document.documentElement.style.setProperty('--editor-width', `${editorWidth * factor}fr`);
document.documentElement.style.setProperty('--preview-width', `${previewWidth * factor}fr`);
}
}
} }