diff --git a/jssrc/debug_screen.js b/jssrc/debug_screen.js index 739db81..71d7466 100644 --- a/jssrc/debug_screen.js +++ b/jssrc/debug_screen.js @@ -6,6 +6,7 @@ if (Screen) { // hackity hack should probably set this in CSS debugCanvas.style.top = '6px' debugCanvas.style.left = '6px' + debugCanvas.style.pointerEvents = 'none' let addCanvas = function () { if (!debugCanvas.parentNode) qs('#screen').appendChild(debugCanvas) @@ -22,17 +23,19 @@ if (Screen) { debugCanvas.style.height = `${height * cellSize.height}px` } - let startTime, endTime + let startTime, endTime, lastReason let cells = new Map() let startDrawing Screen._debug = { drawStart (reason) { + lastReason = reason startTime = Date.now() }, drawEnd () { endTime = Date.now() + console.log(`Draw: ${lastReason} (${(endTime - startTime)} ms) with fancy graphics: ${Screen.window.graphics}`) startDrawing() }, setCell (cell, flags) { diff --git a/jssrc/term_screen.js b/jssrc/term_screen.js index 261ebeb..add499d 100644 --- a/jssrc/term_screen.js +++ b/jssrc/term_screen.js @@ -108,7 +108,8 @@ class TermScreen { blinkInterval: null, fitIntoWidth: 0, fitIntoHeight: 0, - debug: false + debug: false, + graphics: 0 } // properties of this.window that require updating size and redrawing @@ -791,36 +792,33 @@ class TermScreen { if (adjacentDidUpdate) shouldUpdate = true } - if (shouldUpdate) { - if (isWideCell) { - // set redraw for adjacent cells - for (let adjacentCell of this.getAdjacentCells(cell)) { - redrawMap.set(adjacentCell, true) - } - - // update previous wide cells as well - let index = cell - 1 - while (index > 0) { - let text = this.screen[index] - let isWide = isTextWide(text) - - if (redrawMap.get(index - 1)) break + redrawMap.set(cell, shouldUpdate) + } - // might be out of bounds but that doesn't matter - redrawMap.set(index - width, true) - redrawMap.set(index + width, true) - redrawMap.set(index--, true) + for (let cell of updateMap.keys()) updateRedrawMapAt(cell) - if (!isWide) break + // mask to redrawing regions only + if (this.window.graphics > 1) { + ctx.save() + ctx.beginPath() + for (let y = 0; y < height; y++) { + let regionStart = null + for (let x = 0; x < width; x++) { + let cell = y * width + x + let redrawing = redrawMap.get(cell) + if (redrawing && regionStart === null) regionStart = x + if (!redrawing && regionStart !== null) { + ctx.rect(regionStart * cellWidth, y * cellHeight, (x - regionStart) * cellWidth, cellHeight) + regionStart = null } } + if (regionStart !== null) { + ctx.rect(regionStart * cellWidth, y * cellHeight, (width - regionStart) * cellWidth, cellHeight) + } } - - redrawMap.set(cell, shouldUpdate) + ctx.clip() } - for (let cell of updateMap.keys()) updateRedrawMapAt(cell) - // pass 1: backgrounds for (let font of fontGroups.keys()) { for (let data of fontGroups.get(font)) { @@ -893,6 +891,8 @@ class TermScreen { } } + if (this.window.graphics > 1) ctx.restore() + if (this.window.debug && this._debug) this._debug.drawEnd() }