From ce8c2d026227d32c57cdfdfb9ed2adf1a66a4823 Mon Sep 17 00:00:00 2001 From: Melissa LeBlanc-Williams Date: Thu, 23 Jan 2025 12:53:29 -0800 Subject: [PATCH 1/5] Initial resize fixes --- js/layout.js | 9 +++++---- package-lock.json | 3 +++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/js/layout.js b/js/layout.js index 4cdfee7..3d25a0f 100644 --- a/js/layout.js +++ b/js/layout.js @@ -59,6 +59,7 @@ export function showSerial() { // update type is used to indicate which button was clicked function updatePageLayout(updateType) { + // If both are visible, show the separator if (isEditorVisible() && isSerialVisible()) { pageSeparator.classList.add('active'); } else { @@ -72,6 +73,7 @@ function updatePageLayout(updateType) { // Mobile layout, so only show one or the other if (mainContent.offsetWidth < 768) { + // Prioritize based on the update type if (updateType == UPDATE_TYPE_EDITOR && isEditorVisible()) { serialPage.classList.remove('active'); } else if (updateType == UPDATE_TYPE_SERIAL && isSerialVisible()) { @@ -130,8 +132,7 @@ function fixViewportHeight(e) { } // Resize the panes when the separator is moved -function resize(e) { - console.log("Resized"); +function resizePanels(e) { const w = mainContent.offsetWidth; const gap = pageSeparator.offsetWidth; const ratio = e.clientX / w; @@ -182,12 +183,12 @@ function loadPanelSettings() { } function stopResize(e) { - window.removeEventListener('mousemove', resize, false); + window.removeEventListener('mousemove', resizePanels, false); window.removeEventListener('mouseup', stopResize, false); } pageSeparator.addEventListener('mousedown', async function (e) { - window.addEventListener('mousemove', resize, false); + window.addEventListener('mousemove', resizePanels, false); window.addEventListener('mouseup', stopResize, false); }); diff --git a/package-lock.json b/package-lock.json index 10affc2..38d3aaa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,9 @@ "devDependencies": { "sass": "^1.78.0", "vite": "^5.4.3" + }, + "optionalDependencies": { + "@rollup/rollup-linux-x64-gnu": "^4.20.0" } }, "node_modules/@adafruit/ble-file-transfer-js": { From f863277202d69dd907bdb11776b6459f435cd871 Mon Sep 17 00:00:00 2001 From: Melissa LeBlanc-Williams Date: Wed, 12 Feb 2025 14:22:18 -0800 Subject: [PATCH 2/5] Basic shrink fix --- js/layout.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/js/layout.js b/js/layout.js index 3d25a0f..2933252 100644 --- a/js/layout.js +++ b/js/layout.js @@ -116,7 +116,35 @@ function refitTerminal() { window.requestAnimationFrame(() => { window.requestAnimationFrame(() => { if (state.fitter) { + // We need to get the main viewport height and calculate what the size of the terminal pane should be + + // Get the height of the header, footer, and serial bar to determine the height of the terminal + let siteHeader = document.getElementById('site-header'); + let mobileHeader = document.getElementById('mobile-header'); + let headerHeight = siteHeader.offsetHeight; + if (siteHeader.style.display === 'none') { + headerHeight = mobileHeader.offsetHeight; + } + let foorterBarHeight = document.getElementById('footer-bar').offsetHeight; + let serialBarHeight = document.getElementById('serial-bar').offsetHeight; + let viewportHeight = window.innerHeight; + let terminalHeight = viewportHeight - headerHeight - foorterBarHeight - serialBarHeight; + + // Fit the terminal to the new size (works good for growing) state.fitter.fit(); + + // Fix the terminal screen height if it's too big + let screen = document.querySelector('.xterm-screen'); + if (screen && (terminalHeight < screen.offsetHeight)) { + // xterm-screen is 17px per row and 9px per column + let rows = Math.floor(terminalHeight / 17); + if (rows < 0) { + rows = 0; + } + if (rows < state.fitter.proposeDimensions().rows) { + screen.style.height = (rows * 17) + 'px'; + } + } } }); }); From 80cf762c83b8a56c375d17acc7aa580c2d56a064 Mon Sep 17 00:00:00 2001 From: Melissa LeBlanc-Williams Date: Wed, 12 Feb 2025 14:50:08 -0800 Subject: [PATCH 3/5] Replace fitter with custom solution --- js/layout.js | 58 +++++++++++++++++++++++++++------------------------- js/script.js | 4 ---- 2 files changed, 30 insertions(+), 32 deletions(-) diff --git a/js/layout.js b/js/layout.js index 2933252..3ee4994 100644 --- a/js/layout.js +++ b/js/layout.js @@ -15,6 +15,9 @@ const SETTING_TERMINAL_VISIBLE = "terminal-visible"; const UPDATE_TYPE_EDITOR = 1; const UPDATE_TYPE_SERIAL = 2; +const MINIMUM_COLS = 2; +const MINIMUM_ROWS = 1; + function isEditorVisible() { return editorPage.classList.contains('active'); } @@ -110,41 +113,40 @@ function updatePageLayout(updateType) { } function refitTerminal() { + // Custom function to replace the terminal refit function as it was a bit buggy + // Re-fitting the terminal requires a full re-layout of the DOM which can be tricky to time right. // see https://www.macarthur.me/posts/when-dom-updates-appear-to-be-asynchronous window.requestAnimationFrame(() => { window.requestAnimationFrame(() => { window.requestAnimationFrame(() => { - if (state.fitter) { - // We need to get the main viewport height and calculate what the size of the terminal pane should be - - // Get the height of the header, footer, and serial bar to determine the height of the terminal - let siteHeader = document.getElementById('site-header'); - let mobileHeader = document.getElementById('mobile-header'); - let headerHeight = siteHeader.offsetHeight; - if (siteHeader.style.display === 'none') { - headerHeight = mobileHeader.offsetHeight; + const TERMINAL_ROW_HEIGHT = state.terminal._core._renderService.dimensions.css.cell.height; + const TERMINAL_COL_WIDTH = state.terminal._core._renderService.dimensions.css.cell.width; + + // Get the height of the header, footer, and serial bar to determine the height of the terminal + let siteHeader = document.getElementById('site-header'); + let mobileHeader = document.getElementById('mobile-header'); + let headerHeight = siteHeader.offsetHeight; + if (siteHeader.style.display === 'none') { + headerHeight = mobileHeader.offsetHeight; + } + let foorterBarHeight = document.getElementById('footer-bar').offsetHeight; + let serialBarHeight = document.getElementById('serial-bar').offsetHeight; + let viewportHeight = window.innerHeight; + let terminalHeight = viewportHeight - headerHeight - foorterBarHeight - serialBarHeight; + let terminalWidth = document.getElementById('serial-page').offsetWidth; + let screen = document.querySelector('.xterm-screen'); + if (screen) { + let cols = Math.floor(terminalWidth / TERMINAL_COL_WIDTH); + let rows = Math.floor(terminalHeight / TERMINAL_ROW_HEIGHT); + if (cols < MINIMUM_COLS) { + cols = MINIMUM_COLS; } - let foorterBarHeight = document.getElementById('footer-bar').offsetHeight; - let serialBarHeight = document.getElementById('serial-bar').offsetHeight; - let viewportHeight = window.innerHeight; - let terminalHeight = viewportHeight - headerHeight - foorterBarHeight - serialBarHeight; - - // Fit the terminal to the new size (works good for growing) - state.fitter.fit(); - - // Fix the terminal screen height if it's too big - let screen = document.querySelector('.xterm-screen'); - if (screen && (terminalHeight < screen.offsetHeight)) { - // xterm-screen is 17px per row and 9px per column - let rows = Math.floor(terminalHeight / 17); - if (rows < 0) { - rows = 0; - } - if (rows < state.fitter.proposeDimensions().rows) { - screen.style.height = (rows * 17) + 'px'; - } + if (rows < MINIMUM_ROWS) { + rows = MINIMUM_ROWS; } + screen.style.width = (cols * TERMINAL_COL_WIDTH) + 'px'; + screen.style.height = (rows * TERMINAL_ROW_HEIGHT) + 'px'; } }); }); diff --git a/js/script.js b/js/script.js index 4154a8b..484059f 100644 --- a/js/script.js +++ b/js/script.js @@ -152,7 +152,6 @@ btnPlotter.addEventListener('click', async function(e){ await setupPlotterChart(workflow); workflow.plotterEnabled = true; } - state.fitter.fit(); }); btnInfo.addEventListener('click', async function(e) { @@ -548,9 +547,6 @@ async function setupXterm() { } }); - state.fitter = new FitAddon(); - state.terminal.loadAddon(state.fitter); - state.terminal.loadAddon(new WebLinksAddon()); state.terminal.open(document.getElementById('terminal')); From bba27c37f930caca9801ee43d17e9240d30f3ee0 Mon Sep 17 00:00:00 2001 From: Melissa LeBlanc-Williams Date: Fri, 14 Feb 2025 11:42:02 -0800 Subject: [PATCH 4/5] Remove unused import --- js/script.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/script.js b/js/script.js index 484059f..f18886d 100644 --- a/js/script.js +++ b/js/script.js @@ -8,7 +8,6 @@ import { classHighlighter } from "@lezer/highlight"; import { getFileIcon } from "./common/file_dialog.js"; import { Terminal } from '@xterm/xterm'; -import { FitAddon } from '@xterm/addon-fit'; import { WebLinksAddon } from '@xterm/addon-web-links'; import state from './state.js' From c08895f3c7db5ca1df161a3cfbf405c9c8d9d18c Mon Sep 17 00:00:00 2001 From: Melissa LeBlanc-Williams Date: Tue, 18 Feb 2025 15:54:12 -0800 Subject: [PATCH 5/5] Fix spelling error in variable name --- js/layout.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/layout.js b/js/layout.js index 3ee4994..216899a 100644 --- a/js/layout.js +++ b/js/layout.js @@ -130,10 +130,10 @@ function refitTerminal() { if (siteHeader.style.display === 'none') { headerHeight = mobileHeader.offsetHeight; } - let foorterBarHeight = document.getElementById('footer-bar').offsetHeight; + let footerBarHeight = document.getElementById('footer-bar').offsetHeight; let serialBarHeight = document.getElementById('serial-bar').offsetHeight; let viewportHeight = window.innerHeight; - let terminalHeight = viewportHeight - headerHeight - foorterBarHeight - serialBarHeight; + let terminalHeight = viewportHeight - headerHeight - footerBarHeight - serialBarHeight; let terminalWidth = document.getElementById('serial-page').offsetWidth; let screen = document.querySelector('.xterm-screen'); if (screen) {