From 45766fcccece62e942d7ba7e47e78804fc1cdaa7 Mon Sep 17 00:00:00 2001 From: cpsdqs Date: Thu, 9 Nov 2017 23:58:58 +0100 Subject: [PATCH] Add renderer support for double-size lines --- js/term/screen_renderer.js | 41 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/js/term/screen_renderer.js b/js/term/screen_renderer.js index 1f61760..8ee77b4 100644 --- a/js/term/screen_renderer.js +++ b/js/term/screen_renderer.js @@ -60,6 +60,7 @@ module.exports = class CanvasRenderer extends EventEmitter { this.screenBG = [] this.screenAttrs = [] this.screenSelection = [] + this.screenLines = [] this.cursor = {} this.reverseVideo = false this.hasBlinkingCells = false @@ -96,6 +97,7 @@ module.exports = class CanvasRenderer extends EventEmitter { this.drawnScreenFG = [] this.drawnScreenBG = [] this.drawnScreenAttrs = [] + this.drawnScreenLines = [] this.drawnCursor = [-1, -1, '', false] } @@ -209,6 +211,9 @@ module.exports = class CanvasRenderer extends EventEmitter { drawBackground ({ x, y, cellWidth, cellHeight, bg, isDefaultBG }) { const { ctx, width, height, padding } = this + // is a double-width/double-height line + if (this.screenLines[y]) cellWidth *= 2 + ctx.fillStyle = this.getColor(bg) let screenX = x * cellWidth + padding let screenY = y * cellHeight + padding @@ -276,6 +281,34 @@ module.exports = class CanvasRenderer extends EventEmitter { let screenX = x * cellWidth + padding let screenY = y * cellHeight + padding + if (this.screenLines[y]) { + // is a double-width/double-height line + cellWidth *= 2 + ctx.save() + ctx.translate(screenX + 0.5 * cellWidth, screenY + 0.5 * cellHeight) + ctx.scale(2, 1) + if (this.screenLines[y] & 0b10) { + // top half + ctx.scale(1, 2) + ctx.translate(0, cellHeight / 4) + + } else if (this.screenLines[y] & 0b100) { + // bottom half + ctx.scale(1, 2) + ctx.translate(0, -cellHeight / 4) + } + ctx.translate((-screenX - 1.5 * cellWidth) / 2, -screenY - 0.5 * cellHeight) + + if (this.screenLines[y] & 0b110) { + // characters overflow -- needs clipping + // TODO: clipping is really expensive + ctx.beginPath() + if (this.screenLines[y] & 0b10) ctx.rect(screenX, screenY, cellWidth, cellHeight / 2) + else ctx.rect(screenX, screenY + cellHeight / 2, cellWidth, cellHeight / 2) + ctx.clip() + } + } + let codePoint = text.codePointAt(0) if (codePoint >= 0x2580 && codePoint <= 0x259F) { // block elements @@ -450,6 +483,8 @@ module.exports = class CanvasRenderer extends EventEmitter { ctx.stroke() } + if (this.screenLines[y]) ctx.restore() + ctx.globalAlpha = 1 } @@ -558,6 +593,7 @@ module.exports = class CanvasRenderer extends EventEmitter { fg !== this.drawnScreenFG[cell] || // foreground updated, and this cell has text bg !== this.drawnScreenBG[cell] || // background updated attrs !== this.drawnScreenAttrs[cell] || // attributes updated + this.screenLines[y] !== this.drawnScreenLines[y] || // line updated // TODO: fix artifacts or keep this hack: isCursor || wasCursor || // cursor blink/position updated (isCursor && this.cursor.style !== this.drawnCursor[2]) || // cursor style updated @@ -570,6 +606,9 @@ module.exports = class CanvasRenderer extends EventEmitter { updateMap.set(cell, didUpdate) } + // set drawn screen lines + this.drawnScreenLines = this.screenLines.slice() + let debugFilledUpdates = [] if (this.graphics >= 1) { @@ -680,8 +719,6 @@ module.exports = class CanvasRenderer extends EventEmitter { i++ } - console.log(regions) - ctx.save() ctx.beginPath() for (let region of regions) {