Upgraded xterm.js, added xterm-addon-fit without surfacing it

Author: rajch

client/apiclient.js

@@ -1,4 +1,4 @@
-"use strict"
+'use strict'
 
 function apiclient (baseurl) {
   baseurl = baseurl || ''

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,28 +68,28 @@ function dialog (world) {
     return innerbox.innerHTML
   }
 
-  function iframe(src, initialmessage, messagehandler) {
+  function iframe (src, initialmessage, messagehandler) {
     clean()
 
     frame = document.createElement('iframe')
     innerbox.appendChild(frame)
 
     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)

package-lock.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",

package.json

@@ -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)
         })
 

public/js/terminaldialog.js

@@ -3,6 +3,7 @@
   <head>
       <link rel="stylesheet" href="css/xterm.css">
       <script src="js/xterm.js"></script>
+      <script src="js/addon-fit.js"></script>
       <style>
         body {
           margin: 0;