diff --git a/js/term/screen_renderer.js b/js/term/screen_renderer.js index 270e484..ae64fc3 100644 --- a/js/term/screen_renderer.js +++ b/js/term/screen_renderer.js @@ -180,8 +180,9 @@ module.exports = class ScreenRenderer { * @param {number} options.cellWidth - cell width in pixels * @param {number} options.cellHeight - cell height in pixels * @param {number} options.bg - the background color + * @param {number} options.isDefaultBG - if true, will draw image background if available */ - drawBackground ({ x, y, cellWidth, cellHeight, bg }) { + drawBackground ({ x, y, cellWidth, cellHeight, bg, isDefaultBG }) { const ctx = this.ctx const { width, height } = this.screen.window const padding = Math.round(this.screen._padding) @@ -189,6 +190,8 @@ module.exports = class ScreenRenderer { let screenX = x * cellWidth + padding let screenY = y * cellHeight + padding let isBorderCell = x === 0 || y === 0 || x === width - 1 || y === height - 1 + + let fillX, fillY, fillWidth, fillHeight if (isBorderCell) { let left = screenX let top = screenY @@ -198,11 +201,25 @@ module.exports = class ScreenRenderer { 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) + + fillX = left + fillY = top + fillWidth = right - left + fillHeight = bottom - top + } else { + fillX = screenX + fillY = screenY + fillWidth = cellWidth + fillHeight = cellHeight + } + + ctx.clearRect(fillX, fillY, fillWidth, fillHeight) + + if (isDefaultBG && bg >= 0 && this.backgroundImage) { + ctx.drawImage(this.backgroundImage, fillX, fillY, fillWidth, fillHeight, + fillX, fillY, fillWidth, fillHeight) } else { - ctx.clearRect(screenX, screenY, cellWidth, cellHeight) - ctx.fillRect(screenX, screenY, cellWidth, cellHeight) + ctx.fillRect(fillX, fillY, fillWidth, fillHeight) } } @@ -497,8 +514,13 @@ module.exports = class ScreenRenderer { let bg = this.screen.screenBG[cell] | 0 let attrs = this.screen.screenAttrs[cell] | 0 + let isDefaultBG = false + if (!(attrs & ATTR_FG)) fg = this.defaultFgNum - if (!(attrs & ATTR_BG)) bg = this.defaultBgNum + if (!(attrs & ATTR_BG)) { + bg = this.defaultBgNum + isDefaultBG = true + } if (attrs & ATTR_INVERSE) [fg, bg] = [bg, fg] // swap - reversed character colors if (this.screen.reverseVideo) [fg, bg] = [bg, fg] // swap - reversed all screen @@ -525,7 +547,7 @@ module.exports = class ScreenRenderer { let font = attrs & FONT_MASK if (!fontGroups.has(font)) fontGroups.set(font, []) - fontGroups.get(font).push({ cell, x, y, text, fg, bg, attrs, isCursor, inSelection }) + fontGroups.get(font).push({ cell, x, y, text, fg, bg, attrs, isCursor, inSelection, isDefaultBG }) updateMap.set(cell, didUpdate) } @@ -595,10 +617,10 @@ module.exports = class ScreenRenderer { // pass 1: backgrounds for (let font of fontGroups.keys()) { for (let data of fontGroups.get(font)) { - let { cell, x, y, text, bg } = data + let { cell, x, y, text, bg, isDefaultBG } = data if (redrawMap.get(cell)) { - this.drawBackground({ x, y, cellWidth, cellHeight, bg }) + this.drawBackground({ x, y, cellWidth, cellHeight, bg, isDefaultBG }) if (this.screen.window.debug && this.screen._debug) { // set cell flags