From 1fa919e502ff6be9f29ea693a0094963e6f5ef36 Mon Sep 17 00:00:00 2001 From: Raj Chaudhuri Date: Thu, 25 Jul 2024 13:48:31 +0530 Subject: [PATCH] Upgraded xterm.js, added xterm-addon-fit without surfacing it --- client/apiclient.js | 2 +- client/dialog.js | 25 ++++++++------------- package-lock.json | 45 +++++++++++++++++++++++++------------ package.json | 7 +++--- public/js/terminaldialog.js | 14 +++++++----- public/terminaldialog.html | 1 + 6 files changed, 54 insertions(+), 40 deletions(-) diff --git a/client/apiclient.js b/client/apiclient.js index c5290b1..09776ab 100644 --- a/client/apiclient.js +++ b/client/apiclient.js @@ -1,4 +1,4 @@ -"use strict" +'use strict' function apiclient (baseurl) { baseurl = baseurl || '' diff --git a/client/dialog.js b/client/dialog.js index 64adff4..82b9719 100644 --- a/client/dialog.js +++ b/client/dialog.js @@ -26,7 +26,7 @@ function dialog (world) { const closebutton = document.createElement('div') closebutton.className = 'closebutton' closebutton.innerText = '✖' - closebutton.onclick = function closeButtonClick(e) { + closebutton.onclick = function closeButtonClick (e) { self.close() } headingsection.appendChild(closebutton) @@ -42,30 +42,23 @@ function dialog (world) { const modaldialog = new ModalDialog(world.game(), opts) - function open() { - // const parentElement = world.options().parentElement - // const width = parentElement.clientWidth * 0.8 - // const height = parentElement.clientHeight * 0.8 - - // box.style.width = width + 'px' - // box.style.height = height + 'px' - + function open () { modaldialog.open() } - function close() { + function close () { clean() modaldialog.close() } - function heading(text) { + function heading (text) { if (text) { headingelement.innerText = text } return headingelement.innerText } - function html(arg) { + function html (arg) { if (arg) { clean() innerbox.innerHTML = arg @@ -75,7 +68,7 @@ function dialog (world) { return innerbox.innerHTML } - function iframe(src, initialmessage, messagehandler) { + function iframe (src, initialmessage, messagehandler) { clean() frame = document.createElement('iframe') @@ -83,20 +76,20 @@ function dialog (world) { frame.src = src messageHandler = messagehandler - frame.onload = function onDialogIframeLoaded() { + frame.onload = function onDialogIframeLoaded () { window.addEventListener('message', messageHandler, false) postMessage(initialmessage) } }; - function postMessage(message) { + function postMessage (message) { if (frame) { frame.contentWindow.postMessage(message, '*') } } - function clean() { + function clean () { if (frame) { if (frame.parentElement) { frame.parentElement.removeChild(frame) diff --git a/package-lock.json b/package-lock.json index 2da3804..f851785 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,16 @@ { "name": "voxel-dockerclient", - "version": "0.4.1", + "version": "0.4.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "voxel-dockerclient", - "version": "0.4.1", + "version": "0.4.2", "license": "MIT", "dependencies": { + "@xterm/addon-fit": "^0.10.0", + "@xterm/xterm": "^5.5.0", "shellwords": "^0.1.0", "voxel-console": "^1.0.1", "voxel-engine": "git+https://github.com/rajch/voxel-engine.git", @@ -17,8 +19,7 @@ "voxel-modal-dialog": "^1.0.1", "voxel-player": "^0.1.0", "voxel-plugins": "^0.5.0", - "voxel-walk": "0.0.5", - "xterm": "^3.8.1" + "voxel-walk": "0.0.5" }, "devDependencies": { "browserify": "^13.3.0", @@ -177,6 +178,21 @@ "dev": true, "license": "ISC" }, + "node_modules/@xterm/addon-fit": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz", + "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==", + "license": "MIT", + "peerDependencies": { + "@xterm/xterm": "^5.0.0" + } + }, + "node_modules/@xterm/xterm": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz", + "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==", + "license": "MIT" + }, "node_modules/aabb-3d": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/aabb-3d/-/aabb-3d-0.0.0.tgz", @@ -5797,11 +5813,6 @@ "node": ">=0.4" } }, - "node_modules/xterm": { - "version": "3.14.5", - "resolved": "https://registry.npmjs.org/xterm/-/xterm-3.14.5.tgz", - "integrity": "sha512-DVmQ8jlEtL+WbBKUZuMxHMBgK/yeIZwkXB81bH+MGaKKnJGYwA+770hzhXPfwEIokK9On9YIFPRleVp/5G7z9g==" - }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", @@ -5916,6 +5927,17 @@ "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", "dev": true }, + "@xterm/addon-fit": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz", + "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==", + "requires": {} + }, + "@xterm/xterm": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz", + "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==" + }, "aabb-3d": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/aabb-3d/-/aabb-3d-0.0.0.tgz", @@ -10277,11 +10299,6 @@ "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", "dev": true }, - "xterm": { - "version": "3.14.5", - "resolved": "https://registry.npmjs.org/xterm/-/xterm-3.14.5.tgz", - "integrity": "sha512-DVmQ8jlEtL+WbBKUZuMxHMBgK/yeIZwkXB81bH+MGaKKnJGYwA+770hzhXPfwEIokK9On9YIFPRleVp/5G7z9g==" - }, "yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index 07d4ed3..47e97d7 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "scripts": { "check-env": "node -e 'console.log(process.env)'", "test": "echo \"Error: no test specified\" && exit 1", - "build-public": "copyfiles --up 1 public/css/* public/fonts/* public/js/* public/textures/* public/*.html out && copyfiles -f node_modules/xterm/dist/xterm.js out/js && copyfiles -f node_modules/xterm/dist/xterm.css out/css", + "build-public": "copyfiles --up 1 public/css/* public/fonts/* public/js/* public/textures/* public/*.html out && copyfiles -f node_modules/@xterm/xterm/lib/xterm.js out/js && copyfiles -f node_modules/@xterm/addon-fit/lib/addon-fit.js out/js && copyfiles -f node_modules/@xterm/xterm/css/xterm.css out/css", "clean-public": "rimraf out/css out/fonts out/js/*dialog.js out/js/xterm.js out/textures out/*.html", "build-client-debug": "browserify --debug client/main.js -o out/js/client.js", "build-client-release": "browserify client/main.js -o out/js/client.js", @@ -40,6 +40,8 @@ }, "homepage": "https://github.com/rajch/voxel-dockerclient#readme", "dependencies": { + "@xterm/addon-fit": "^0.10.0", + "@xterm/xterm": "^5.5.0", "shellwords": "^0.1.0", "voxel-console": "^1.0.1", "voxel-engine": "git+https://github.com/rajch/voxel-engine.git", @@ -48,8 +50,7 @@ "voxel-modal-dialog": "^1.0.1", "voxel-player": "^0.1.0", "voxel-plugins": "^0.5.0", - "voxel-walk": "0.0.5", - "xterm": "^3.8.1" + "voxel-walk": "0.0.5" }, "devDependencies": { "browserify": "^13.3.0", diff --git a/public/js/terminaldialog.js b/public/js/terminaldialog.js index 1e98a37..5c9470d 100644 --- a/public/js/terminaldialog.js +++ b/public/js/terminaldialog.js @@ -9,10 +9,6 @@ window.addEventListener('message', onMessageReceived, false) - function ab2str (buf) { - return String.fromCharCode.apply(null, new Uint8Array(buf)) - } - function onMessageReceived (event) { sourceWindow = event.source eventOrigin = event.origin @@ -28,7 +24,12 @@ cols: 80, rows: 26 }) + + const fitaddon = new FitAddon.FitAddon() + terminal.open(document.getElementById('terminal-container')) + terminal.loadAddon(fitaddon) + fitaddon.fit() const wsUri = 'ws://' + window.location.host + '/websocket/containers/' + containername + '/attach/ws?logs=0&stderr=1&stdout=1&stream=1&stdin=1' @@ -47,7 +48,8 @@ socket.onmessage = function onMessage (evt) { if (evt.data instanceof ArrayBuffer) { - terminal.write(ab2str(evt.data)) + const binarydata = new Uint8Array(evt.data) + terminal.write(binarydata) } else { terminal.write(evt.data) } @@ -58,7 +60,7 @@ errorcreated = true } - terminal.on('data', function (data) { + terminal.onData(function terminalOnData (data) { socket.send(data) }) diff --git a/public/terminaldialog.html b/public/terminaldialog.html index 57458ea..96c55a3 100644 --- a/public/terminaldialog.html +++ b/public/terminaldialog.html @@ -3,6 +3,7 @@ +