diff --git a/demo/client/client.ts b/demo/client/client.ts index fa249a9e..77020680 100644 --- a/demo/client/client.ts +++ b/demo/client/client.ts @@ -328,7 +328,9 @@ function createTerminal(): Terminal { } const cols = size.cols; const rows = size.rows; - const url = '/terminals/' + pid + '/size?cols=' + cols + '&rows=' + rows; + const pixelWidth = Math.round(term!.dimensions?.css?.canvas?.width ?? 0); + const pixelHeight = Math.round(term!.dimensions?.css?.canvas?.height ?? 0); + const url = '/terminals/' + pid + '/size?cols=' + cols + '&rows=' + rows + '&pixelWidth=' + pixelWidth + '&pixelHeight=' + pixelHeight; fetch(url, { method: 'POST' }); }); @@ -379,7 +381,9 @@ function createTerminal(): Terminal { if (useRealTerminal instanceof HTMLInputElement && !useRealTerminal.checked) { runFakeTerminal(); } else { - const res = await fetch('/terminals?cols=' + term!.cols + '&rows=' + term!.rows, { method: 'POST' }); + const pixelWidth = Math.round(term!.dimensions?.css?.canvas?.width ?? 0); + const pixelHeight = Math.round(term!.dimensions?.css?.canvas?.height ?? 0); + const res = await fetch('/terminals?cols=' + term!.cols + '&rows=' + term!.rows + '&pixelWidth=' + pixelWidth + '&pixelHeight=' + pixelHeight, { method: 'POST' }); const processId = await res.text(); pid = processId; socketURL += processId; @@ -626,7 +630,7 @@ function updateTerminalSize(): void { function getBox(width: number, height: number): any { return { string: '+', - style: 'font-size: 1px; padding: ' + Math.floor(height/2) + 'px ' + Math.floor(width/2) + 'px; line-height: ' + height + 'px;' + style: 'font-size: 1px; padding: ' + Math.floor(height / 2) + 'px ' + Math.floor(width / 2) + 'px; line-height: ' + height + 'px;' }; } if (source instanceof HTMLCanvasElement) { diff --git a/demo/server/server.ts b/demo/server/server.ts index 0f4a79b3..ef98eb84 100644 --- a/demo/server/server.ts +++ b/demo/server/server.ts @@ -65,6 +65,8 @@ function startServer(): void { } const cols = parseInt(req.query.cols); const rows = parseInt(req.query.rows); + const pixelWidth = typeof req.query.pixelWidth === 'string' ? parseInt(req.query.pixelWidth) : 0; + const pixelHeight = typeof req.query.pixelHeight === 'string' ? parseInt(req.query.pixelHeight) : 0; const isWindows = process.platform === 'win32'; const term = pty.spawn(isWindows ? 'powershell.exe' : 'bash', [], { name: 'xterm-256color', @@ -77,7 +79,13 @@ function startServer(): void { useConptyDll: isWindows, }); - console.log('Created terminal with PID: ' + term.pid); + // Set pixel dimensions immediately after spawn (pty.spawn doesn't support them) + if (pixelWidth > 0 && pixelHeight > 0) { + term.resize(cols, rows, { width: pixelWidth, height: pixelHeight }); + console.log('Created terminal with PID: ' + term.pid + ' (' + cols + 'x' + rows + ', ' + pixelWidth + 'px x ' + pixelHeight + 'px)'); + } else { + console.log('Created terminal with PID: ' + term.pid); + } terminals[term.pid] = term; unsentOutput[term.pid] = ''; temporaryDisposable[term.pid] = term.onData(function(data) { @@ -95,10 +103,17 @@ function startServer(): void { const pid = parseInt(req.params.pid); const cols = parseInt(req.query.cols); const rows = parseInt(req.query.rows); + const pixelWidth = typeof req.query.pixelWidth === 'string' ? parseInt(req.query.pixelWidth) : 0; + const pixelHeight = typeof req.query.pixelHeight === 'string' ? parseInt(req.query.pixelHeight) : 0; const term = terminals[pid]; - term.resize(cols, rows); - console.log('Resized terminal ' + pid + ' to ' + cols + ' cols and ' + rows + ' rows.'); + if (pixelWidth > 0 && pixelHeight > 0) { + term.resize(cols, rows, { width: pixelWidth, height: pixelHeight }); + console.log('Resized terminal ' + pid + ' to ' + cols + ' cols, ' + rows + ' rows, ' + pixelWidth + 'px x ' + pixelHeight + 'px'); + } else { + term.resize(cols, rows); + console.log('Resized terminal ' + pid + ' to ' + cols + ' cols and ' + rows + ' rows.'); + } res.end(); });