Fix various issues with padding and screen sizing

js/term/index.js

@@ -73,13 +73,16 @@ module.exports = function (opts) {
 
   let isFullscreen = false
   let fitScreen = false
+  let screenPadding = screen.window.padding
   let fitScreenIfNeeded = function fitScreenIfNeeded () {
     if (isFullscreen) {
       screen.window.fitIntoWidth = window.screen.width
       screen.window.fitIntoHeight = window.screen.height
+      screen.window.padding = 0
     } else {
-      screen.window.fitIntoWidth = fitScreen ? window.innerWidth - 20 : 0
+      screen.window.fitIntoWidth = fitScreen ? window.innerWidth - 4 : 0
       screen.window.fitIntoHeight = fitScreen ? window.innerHeight : 0
+      screen.window.padding = screenPadding
     }
   }
   fitScreenIfNeeded()

js/term/screen.js

@@ -317,9 +317,12 @@ module.exports = class TermScreen extends EventEmitter {
   screenToGrid (x, y, rounded = false) {
     let cellSize = this.getCellSize()
 
+    x = x / this._windowScale - this._padding
+    y = y / this._windowScale - this._padding
+
     return [
-      Math.floor((x - this._padding + (rounded ? cellSize.width / 2 : 0)) / cellSize.width),
+      Math.floor((x + (rounded ? cellSize.width / 2 : 0)) / cellSize.width),
-      Math.floor((y - this._padding) / cellSize.height)
+      Math.floor(y / cellSize.height)
     ]
   }
 
@@ -389,8 +392,9 @@ module.exports = class TermScreen extends EventEmitter {
       const cellSize = this.getCellSize()
 
       // real height of the canvas element in pixels
-      let realWidth = width * cellSize.width + 2 * padding
+      let realWidth = width * cellSize.width
-      let realHeight = height * cellSize.height + 2 * padding
+      let realHeight = height * cellSize.height
+      let originalWidth = realWidth
 
       if (fitIntoWidth && fitIntoHeight) {
         let terminalAspect = realWidth / realHeight
@@ -398,33 +402,30 @@ module.exports = class TermScreen extends EventEmitter {
 
         if (terminalAspect < fitAspect) {
           // align heights
-          realHeight = fitIntoHeight
+          realHeight = fitIntoHeight - 2 * padding
           realWidth = realHeight * terminalAspect
         } else {
           // align widths
-          realWidth = fitIntoWidth
+          realWidth = fitIntoWidth - 2 * padding
           realHeight = realWidth / terminalAspect
         }
-      } else if (fitIntoWidth) {
-        realHeight = fitIntoWidth / (realWidth / realHeight)
-        realWidth = fitIntoWidth
-      } else if (fitIntoHeight) {
-        realWidth = fitIntoHeight * (realWidth / realHeight)
-        realHeight = fitIntoHeight
       }
 
       // store new window scale
-      this._windowScale = realWidth / (width * cellSize.width)
+      this._windowScale = realWidth / originalWidth
-      // and padding
+
-      // TODO: disable in fullscreen mode
+      realWidth += 2 * padding
-      this._padding = padding
+      realHeight += 2 * padding
+
+      // store padding
+      this._padding = padding * (originalWidth / realWidth)
 
       // the DPR must be rounded to a very nice value to prevent gaps between cells
-      let devicePixelRatio = this._window.devicePixelRatio = Math.round(this._windowScale * (window.devicePixelRatio || 1) * 2) / 2
+      let devicePixelRatio = this._window.devicePixelRatio = Math.ceil(this._windowScale * (window.devicePixelRatio || 1) * 2) / 2
 
-      this.canvas.width = (width * cellSize.width + 2 * padding) * devicePixelRatio
+      this.canvas.width = (width * cellSize.width + 2 * Math.round(this._padding)) * devicePixelRatio
       this.canvas.style.width = `${realWidth}px`
-      this.canvas.height = (height * cellSize.height + 2 * padding) * devicePixelRatio
+      this.canvas.height = (height * cellSize.height + 2 * Math.round(this._padding)) * devicePixelRatio
       this.canvas.style.height = `${realHeight}px`
 
       // the screen has been cleared (by changing canvas width)

js/term/screen_renderer.js

@@ -179,19 +179,20 @@ module.exports = class ScreenRenderer {
   drawBackground ({ x, y, cellWidth, cellHeight, bg }) {
     const ctx = this.ctx
     const { width, height } = this.screen.window
+    const padding = Math.round(this.screen._padding)
     ctx.fillStyle = this.getColor(bg)
-    let screenX = x * cellWidth + this.screen._padding
+    let screenX = x * cellWidth + padding
-    let screenY = y * cellHeight + this.screen._padding
+    let screenY = y * cellHeight + padding
     let isBorderCell = x === 0 || y === 0 || x === width - 1 || y === height - 1
     if (isBorderCell) {
       let left = screenX
       let top = screenY
       let right = screenX + cellWidth
       let bottom = screenY + cellHeight
-      if (x === 0) left -= this.screen._padding
+      if (x === 0) left -= padding
-      else if (x === width - 1) right += this.screen._padding
+      else if (x === width - 1) right += padding
-      if (y === 0) top -= this.screen._padding
+      if (y === 0) top -= padding
-      else if (y === height - 1) bottom += this.screen._padding
+      else if (y === height - 1) bottom += padding
       ctx.clearRect(left, top, right - left, bottom - top)
       ctx.fillRect(left, top, right - left, bottom - top)
     } else {
@@ -218,6 +219,7 @@ module.exports = class ScreenRenderer {
     if (!text) return
 
     const ctx = this.ctx
+    const padding = Math.round(this.screen._padding)
 
     let underline = false
     let strike = false
@@ -230,8 +232,8 @@ module.exports = class ScreenRenderer {
 
     ctx.fillStyle = this.getColor(fg)
 
-    let screenX = x * cellWidth + this.screen._padding
+    let screenX = x * cellWidth + padding
-    let screenY = y * cellHeight + this.screen._padding
+    let screenY = y * cellHeight + padding
 
     let codePoint = text.codePointAt(0)
     if (codePoint >= 0x2580 && codePoint <= 0x259F) {
@@ -695,14 +697,15 @@ module.exports = class ScreenRenderer {
     this.drawnScreen = []
 
     const cellSize = this.screen.getCellSize()
-    const screenWidth = width * cellSize.width
+    const screenWidth = width * cellSize.width + 2 * this.screen._padding
-    const screenHeight = height * cellSize.height
+    const screenHeight = height * cellSize.height + 2 * this.screen._padding
 
     ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0)
-    ctx.clearRect(0, 0, screenWidth, screenHeight)
+    ctx.fillStyle = this.getColor(this.defaultBgNum)
+    ctx.fillRect(0, 0, screenWidth, screenHeight)
 
     ctx.font = `24px ${fontFamily}`
-    ctx.fillStyle = '#fff'
+    ctx.fillStyle = this.getColor(this.defaultFgNum)
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
     ctx.fillText(statusScreen.title || '', screenWidth / 2, screenHeight / 2 - 50)
@@ -712,7 +715,7 @@ module.exports = class ScreenRenderer {
       ctx.save()
       ctx.translate(screenWidth / 2, screenHeight / 2 + 20)
 
-      ctx.strokeStyle = '#fff'
+      ctx.strokeStyle = this.getColor(this.defaultFgNum)
       ctx.lineWidth = 5
       ctx.lineCap = 'round'
 

sass/pages/_term.scss

@@ -35,6 +35,7 @@ body.term {
 		background: rgba(17, 18, 19, 0.2);
 		-webkit-backdrop-filter: blur(10px);
 		backdrop-filter: blur(10px);
+		pointer-events: none;
 
 		&.top {
 			top: 0;