From f53d3390c8d7c5507495cf5eb09fecf3046da692 Mon Sep 17 00:00:00 2001 From: cpsdqs Date: Sun, 8 Oct 2017 21:46:48 +0200 Subject: [PATCH] Make debug bar work again and fix cursor artifacts --- js/term/debug.js | 33 ++++++++++++------------ js/term/screen_renderer.js | 51 +++++++++++++++++++------------------- 2 files changed, 42 insertions(+), 42 deletions(-) diff --git a/js/term/debug.js b/js/term/debug.js index 471cd8f..d6f0827 100644 --- a/js/term/debug.js +++ b/js/term/debug.js @@ -10,7 +10,7 @@ module.exports = function attachDebugger (screen, connection) { let updateToolbar let onMouseMove = e => { - mouseHoverCell = screen.screenToGrid(e.offsetX, e.offsetY) + mouseHoverCell = screen.layout.screenToGrid(e.offsetX, e.offsetY) startDrawing() updateToolbar() } @@ -32,8 +32,8 @@ module.exports = function attachDebugger (screen, connection) { } } let updateCanvasSize = function () { - let { width, height, devicePixelRatio } = screen.window - let cellSize = screen.getCellSize() + let { width, height, devicePixelRatio } = screen.layout.window + let cellSize = screen.layout.getCellSize() debugCanvas.width = width * cellSize.width * devicePixelRatio debugCanvas.height = height * cellSize.height * devicePixelRatio debugCanvas.style.width = `${width * cellSize.width}px` @@ -50,7 +50,7 @@ module.exports = function attachDebugger (screen, connection) { let startDrawing - screen._debug = { + screen._debug = screen.layout.renderer._debug = { drawStart (reason) { lastReason = reason startTime = Date.now() @@ -58,7 +58,7 @@ module.exports = function attachDebugger (screen, connection) { }, drawEnd () { endTime = Date.now() - console.log(drawInfo.textContent = `Draw: ${lastReason} (${(endTime - startTime)} ms) with graphics=${screen.window.graphics}`) + console.log(drawInfo.textContent = `Draw: ${lastReason} (${(endTime - startTime)} ms) with graphics=${screen.layout.renderer.graphics}`) startDrawing() }, setCell (cell, flags) { @@ -107,8 +107,8 @@ module.exports = function attachDebugger (screen, connection) { lastDrawTime = Date.now() t += dt - let { devicePixelRatio, width, height } = screen.window - let { width: cellWidth, height: cellHeight } = screen.getCellSize() + let { devicePixelRatio, width, height } = screen.layout.window + let { width: cellWidth, height: cellHeight } = screen.layout.getCellSize() let screenLength = width * height let now = Date.now() @@ -247,15 +247,16 @@ module.exports = function attachDebugger (screen, connection) { const redraw = mk('button') redraw.textContent = 'Redraw' redraw.addEventListener('click', e => { - screen.renderer.resetDrawn() - screen.renderer.draw('debug-redraw') + screen.layout.renderer.resetDrawn() + screen.layout.renderer.draw('debug-redraw') }) buttons.appendChild(redraw) const fancyGraphics = mk('button') fancyGraphics.textContent = 'Toggle Graphics' fancyGraphics.addEventListener('click', e => { - screen.window.graphics = +!screen.window.graphics + screen.layout.renderer.graphics = +!screen.layout.renderer.graphics + screen.layout.renderer.draw('set-graphics') }) buttons.appendChild(fancyGraphics) } @@ -303,14 +304,14 @@ module.exports = function attachDebugger (screen, connection) { const formatColor = color => color < 256 ? color : `#${`000000${(color - 256).toString(16)}`.substr(-6)}` const getCellData = cell => { if (cell < 0 || cell > screen.screen.length) return '(-)' - let cellAttrs = screen.renderer.drawnScreenAttrs[cell] | 0 - let cellFG = screen.renderer.drawnScreenFG[cell] | 0 - let cellBG = screen.renderer.drawnScreenBG[cell] | 0 + let cellAttrs = screen.layout.renderer.drawnScreenAttrs[cell] | 0 + let cellFG = screen.layout.renderer.drawnScreenFG[cell] | 0 + let cellBG = screen.layout.renderer.drawnScreenBG[cell] | 0 let fgText = formatColor(cellFG) let bgText = formatColor(cellBG) - fgText += `\\[color=${screen.renderer.getColor(cellFG).replace(/ /g, '')}]●\\[]` - bgText += `\\[color=${screen.renderer.getColor(cellBG).replace(/ /g, '')}]●\\[]` - let cellCode = (screen.renderer.drawnScreen[cell] || '').codePointAt(0) | 0 + fgText += `\\[color=${screen.layout.renderer.getColor(cellFG).replace(/ /g, '')}]●\\[]` + bgText += `\\[color=${screen.layout.renderer.getColor(cellBG).replace(/ /g, '')}]●\\[]` + let cellCode = (screen.layout.renderer.drawnScreen[cell] || '').codePointAt(0) | 0 let hexcode = cellCode.toString(16).toUpperCase() if (hexcode.length < 4) hexcode = `0000${hexcode}`.substr(-4) hexcode = `U+${hexcode}` diff --git a/js/term/screen_renderer.js b/js/term/screen_renderer.js index be0cf28..052e3e7 100644 --- a/js/term/screen_renderer.js +++ b/js/term/screen_renderer.js @@ -1,7 +1,6 @@ const EventEmitter = require('events') const { themes, - buildColorTable, getColor } = require('./themes') @@ -38,15 +37,14 @@ module.exports = class CanvasRenderer extends EventEmitter { this.canvas = canvas this.ctx = this.canvas.getContext('2d') - this._palette = null // colors 0-15 - this.defaultBgNum = 0 - this.defaultFgNum = 7 - - // 256color lookup table - // should not be used to look up 0-15 (will return transparent) - this.colorTable256 = buildColorTable() + this._palette = null // colors 0-15 + this.defaultBG = 0 + this.defaultFG = 7 this.debug = false + this._debug = null + + this.graphics = 0 // screen data, considered immutable this.width = 0 @@ -88,7 +86,7 @@ module.exports = class CanvasRenderer extends EventEmitter { this.drawnScreenFG = [] this.drawnScreenBG = [] this.drawnScreenAttrs = [] - this.drawnCursor = [-1, -1, ''] + this.drawnCursor = [-1, -1, '', false] } /** @@ -118,10 +116,10 @@ module.exports = class CanvasRenderer extends EventEmitter { } setDefaultColors (fg, bg) { - if (fg !== this.defaultFgNum || bg !== this.defaultBgNum) { + if (fg !== this.defaultFG || bg !== this.defaultBG) { this.resetDrawn() - this.defaultFgNum = fg - this.defaultBgNum = bg + this.defaultFG = fg + this.defaultBG = bg this.scheduleDraw('default-colors') // full bg with default color (goes behind the image) @@ -492,7 +490,7 @@ module.exports = class CanvasRenderer extends EventEmitter { ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0) - // if (this.debug) this.screen._debug.drawStart(why) + if (this.debug && this._debug) this._debug.drawStart(why) ctx.font = this.fonts[0] ctx.textAlign = 'center' @@ -525,9 +523,9 @@ module.exports = class CanvasRenderer extends EventEmitter { let isDefaultBG = false - if (!(attrs & ATTR_FG)) fg = this.defaultFgNum + if (!(attrs & ATTR_FG)) fg = this.defaultFG if (!(attrs & ATTR_BG)) { - bg = this.defaultBgNum + bg = this.defaultBG isDefaultBG = true } @@ -536,8 +534,8 @@ module.exports = class CanvasRenderer extends EventEmitter { if (attrs & ATTR_BLINK && !this.blinkStyleOn) { // blinking is enabled and blink style is off - // set text to nothing so drawCharacter doesn't draw anything - text = '' + // set text to nothing so drawCharacter only draws decoration + text = ' ' } if (inSelection) { @@ -549,7 +547,8 @@ 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 - isCursor !== wasCursor || // cursor blink/position updated + // TODO: fix artifacts or keep this hack: + isCursor || wasCursor || // cursor blink/position updated (isCursor && this.cursor.style !== this.drawnCursor[2]) || // cursor style updated (isCursor && this.cursor.hanging !== this.drawnCursor[3]) // cursor hanging updated @@ -612,13 +611,13 @@ module.exports = class CanvasRenderer extends EventEmitter { if (redrawing && regionStart === null) regionStart = x if (!redrawing && regionStart !== null) { ctx.rect(padding + regionStart * cellWidth, padding + y * cellHeight, (x - regionStart) * cellWidth, cellHeight) - // if (this.debug) this.screen._debug.clipRect(regionStart * cellWidth, y * cellHeight, (x - regionStart) * cellWidth, cellHeight) + if (this.debug && this._debug) this._debug.clipRect(regionStart * cellWidth, y * cellHeight, (x - regionStart) * cellWidth, cellHeight) regionStart = null } } if (regionStart !== null) { ctx.rect(padding + regionStart * cellWidth, padding + y * cellHeight, (width - regionStart) * cellWidth, cellHeight) - // if (this.debug) this.screen._debug.clipRect(regionStart * cellWidth, y * cellHeight, (width - regionStart) * cellWidth, cellHeight) + if (this.debug && this._debug) this._debug.clipRect(regionStart * cellWidth, y * cellHeight, (width - regionStart) * cellWidth, cellHeight) } } ctx.clip() @@ -637,14 +636,14 @@ module.exports = class CanvasRenderer extends EventEmitter { let flags = (+redrawMap.get(cell)) flags |= (+updateMap.get(cell)) << 1 flags |= (+isTextWide(text)) << 2 - // this.screen._debug.setCell(cell, flags) + this._debug.setCell(cell, flags) } } } } // reset drawn cursor - this.drawnCursor = [-1, -1, -1] + this.drawnCursor = [-1, -1, '', false] // pass 2: characters for (let font of fontGroups.keys()) { @@ -717,7 +716,7 @@ module.exports = class CanvasRenderer extends EventEmitter { if (this.graphics >= 1) ctx.restore() - // if (this.debug) this.screen._debug.drawEnd() + if (this.debug && this._debug) this._debug.drawEnd() this.emit('draw', why) } @@ -733,11 +732,11 @@ module.exports = class CanvasRenderer extends EventEmitter { const screenHeight = height * cellSize.height + 2 * this.padding ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0) - ctx.fillStyle = this.getColor(this.defaultBgNum) + ctx.fillStyle = this.getColor(this.defaultBG) ctx.fillRect(0, 0, screenWidth, screenHeight) ctx.font = `24px ${this.statusFont}` - ctx.fillStyle = this.getColor(this.defaultFgNum) + ctx.fillStyle = this.getColor(this.defaultFG) ctx.textAlign = 'center' ctx.textBaseline = 'middle' ctx.fillText(statusScreen.title || '', screenWidth / 2, screenHeight / 2 - 50) @@ -747,7 +746,7 @@ module.exports = class CanvasRenderer extends EventEmitter { ctx.save() ctx.translate(screenWidth / 2, screenHeight / 2 + 20) - ctx.strokeStyle = this.getColor(this.defaultFgNum) + ctx.strokeStyle = this.getColor(this.defaultFG) ctx.lineWidth = 5 ctx.lineCap = 'round'