diff --git a/js/term/index.js b/js/term/index.js index 3109d25..f1a7f95 100644 --- a/js/term/index.js +++ b/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() diff --git a/js/term/screen.js b/js/term/screen.js index e350234..9e58cad 100644 --- a/js/term/screen.js +++ b/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((y - this._padding) / cellSize.height) + Math.floor((x + (rounded ? cellSize.width / 2 : 0)) / cellSize.width), + 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 realHeight = height * cellSize.height + 2 * padding + let realWidth = width * cellSize.width + 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) - // and padding - // TODO: disable in fullscreen mode - this._padding = padding + this._windowScale = realWidth / originalWidth + + realWidth += 2 * 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) diff --git a/js/term/screen_renderer.js b/js/term/screen_renderer.js index a98bb86..ed361be 100644 --- a/js/term/screen_renderer.js +++ b/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 screenY = y * cellHeight + this.screen._padding + let screenX = x * cellWidth + 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 - else if (x === width - 1) right += this.screen._padding - if (y === 0) top -= this.screen._padding - else if (y === height - 1) bottom += this.screen._padding + if (x === 0) left -= padding + else if (x === width - 1) right += padding + if (y === 0) top -= 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 screenY = y * cellHeight + this.screen._padding + let screenX = x * cellWidth + 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 screenHeight = height * cellSize.height + const screenWidth = width * cellSize.width + 2 * this.screen._padding + 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' diff --git a/sass/pages/_term.scss b/sass/pages/_term.scss index b39b3af..890b1f0 100644 --- a/sass/pages/_term.scss +++ b/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;