diff --git a/js/term/debug_screen.js b/js/term/debug_screen.js index dc9dcee..0f486c6 100644 --- a/js/term/debug_screen.js +++ b/js/term/debug_screen.js @@ -6,11 +6,30 @@ module.exports = function attachDebugScreen (screen) { debugCanvas.classList.add('debug-canvas') + let mouseHoverCell = null + let updateToolbar + + let onMouseMove = e => { + mouseHoverCell = screen.screenToGrid(e.offsetX, e.offsetY) + startDrawing() + updateToolbar() + } + let onMouseOut = () => (mouseHoverCell = null) + let addCanvas = function () { - if (!debugCanvas.parentNode) screen.canvas.parentNode.appendChild(debugCanvas) + if (!debugCanvas.parentNode) { + screen.canvas.parentNode.appendChild(debugCanvas) + screen.canvas.parentNode.addEventListener('mousemove', onMouseMove) + screen.canvas.parentNode.addEventListener('mouseout', onMouseOut) + } } let removeCanvas = function () { - if (debugCanvas.parentNode) debugCanvas.parentNode.removeChild(debugCanvas) + if (debugCanvas.parentNode) { + debugCanvas.parentNode.removeChild(debugCanvas) + screen.canvas.parentNode.removeEventListener('mousemove', onMouseMove) + screen.canvas.parentNode.removeEventListener('mouseout', onMouseOut) + onMouseOut() + } } let updateCanvasSize = function () { let { width, height, devicePixelRatio } = screen.window @@ -21,6 +40,9 @@ module.exports = function attachDebugScreen (screen) { debugCanvas.style.height = `${height * cellSize.height}px` } + let drawInfo = mk('div') + drawInfo.classList.add('draw-info') + let startTime, endTime, lastReason let cells = new Map() let clippedRects = [] @@ -35,7 +57,7 @@ module.exports = function attachDebugScreen (screen) { }, drawEnd () { endTime = Date.now() - console.log(`Draw: ${lastReason} (${(endTime - startTime)} ms) with fancy graphics: ${screen.window.graphics}`) + console.log(drawInfo.textContent = `Draw: ${lastReason} (${(endTime - startTime)} ms) with graphics=${screen.window.graphics}`) startDrawing() }, setCell (cell, flags) { @@ -69,10 +91,16 @@ module.exports = function attachDebugScreen (screen) { } let isDrawing = false + let lastDrawTime = 0 + let t = 0 let drawLoop = function () { if (isDrawing) window.requestAnimationFrame(drawLoop) + let dt = (Date.now() - lastDrawTime) / 1000 + lastDrawTime = Date.now() + t += dt + let { devicePixelRatio, width, height } = screen.window let { width: cellWidth, height: cellHeight } = screen.getCellSize() let screenLength = width * height @@ -127,7 +155,22 @@ module.exports = function attachDebugScreen (screen) { ctx.fill() } - if (activeCells === 0) { + if (mouseHoverCell) { + ctx.save() + ctx.globalAlpha = 1 + ctx.lineWidth = 1 + 0.5 * Math.sin(t * 10) + ctx.strokeStyle = '#fff' + ctx.lineJoin = 'round' + ctx.setLineDash([2, 2]) + ctx.lineDashOffset = t * 10 + ctx.strokeRect(mouseHoverCell[0] * cellWidth, mouseHoverCell[1] * cellHeight, cellWidth, cellHeight) + ctx.lineDashOffset += 2 + ctx.strokeStyle = '#000' + ctx.strokeRect(mouseHoverCell[0] * cellWidth, mouseHoverCell[1] * cellHeight, cellWidth, cellHeight) + ctx.restore() + } + + if (activeCells === 0 && !mouseHoverCell) { isDrawing = false removeCanvas() } @@ -138,6 +181,7 @@ module.exports = function attachDebugScreen (screen) { addCanvas() updateCanvasSize() isDrawing = true + lastDrawTime = Date.now() drawLoop() } @@ -145,6 +189,30 @@ module.exports = function attachDebugScreen (screen) { const toolbar = mk('div') toolbar.classList.add('debug-toolbar') let toolbarAttached = false + const dataDisplay = mk('div') + dataDisplay.classList.add('data-display') + toolbar.appendChild(dataDisplay) + toolbar.appendChild(drawInfo) + const buttons = mk('div') + buttons.classList.add('toolbar-buttons') + toolbar.appendChild(buttons) + + { + const redraw = mk('button') + redraw.textContent = 'Redraw' + redraw.addEventListener('click', e => { + screen.renderer.resetDrawn() + screen.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 + }) + buttons.appendChild(fancyGraphics) + } const attachToolbar = function () { screen.canvas.parentNode.appendChild(toolbar) @@ -157,20 +225,36 @@ module.exports = function attachDebugScreen (screen) { if (debug !== toolbarAttached) { toolbarAttached = debug if (debug) attachToolbar() - else detachToolbar() + else { + detachToolbar() + removeCanvas() + } } }) - screen.on('draw', () => { - if (!toolbarAttached) return - let cursorCell = screen.cursor.y * screen.window.width + screen.cursor.x - let cellFG = screen.screenFG[cursorCell] - let cellBG = screen.screenBG[cursorCell] - let cellCode = (screen.screen[cursorCell] || '').codePointAt(0) - let cellAttrs = screen.screenAttrs[cursorCell] + 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] + let cellFG = formatColor(screen.renderer.drawnScreenFG[cell]) + let cellBG = formatColor(screen.renderer.drawnScreenBG[cell]) + let cellCode = (screen.renderer.drawnScreen[cell] || '').codePointAt(0) let hexcode = cellCode.toString(16).toUpperCase() if (hexcode.length < 4) hexcode = `0000${hexcode}`.substr(-4) hexcode = `U+${hexcode}` - toolbar.textContent = `Cursor cell (${cursorCell}): ${hexcode} FG: ${cellFG} BG: ${cellBG} Attrs: ${cellAttrs.toString(2)}` - }) + let x = cell % screen.window.width + let y = Math.floor(cell / screen.window.width) + return `((${y},${x})=${cell}:${hexcode}:F${cellFG}:B${cellBG}:A${cellAttrs.toString(2)})` + } + + updateToolbar = () => { + if (!toolbarAttached) return + let text = `C((${screen.cursor.y},${screen.cursor.x}),hang:${screen.cursor.hanging},vis:${screen.cursor.visible})` + if (mouseHoverCell) { + text += ' m' + getCellData(mouseHoverCell[1] * screen.window.width + mouseHoverCell[0]) + } + dataDisplay.textContent = text + } + + screen.on('draw', updateToolbar) } diff --git a/js/term/screen_parser.js b/js/term/screen_parser.js index c7c288c..aa2f571 100644 --- a/js/term/screen_parser.js +++ b/js/term/screen_parser.js @@ -167,7 +167,7 @@ module.exports = class ScreenParser { this.screen.cursor.x = cursorX this.screen.cursor.y = cursorY - this.screen.cursor.hanging = hanging + this.screen.cursor.hanging = !!hanging if (cursorMoved) { this.screen.renderer.resetCursorBlink() diff --git a/js/term/screen_renderer.js b/js/term/screen_renderer.js index 6980169..270e484 100644 --- a/js/term/screen_renderer.js +++ b/js/term/screen_renderer.js @@ -569,6 +569,7 @@ module.exports = class ScreenRenderer { // mask to redrawing regions only if (this.screen.window.graphics >= 1) { let debug = this.screen.window.debug && this.screen._debug + let padding = Math.round(this.screen._padding) ctx.save() ctx.beginPath() for (let y = 0; y < height; y++) { @@ -578,13 +579,13 @@ module.exports = class ScreenRenderer { 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) + ctx.rect(padding + regionStart * cellWidth, padding + y * cellHeight, (x - regionStart) * cellWidth, cellHeight) if (debug) this.screen._debug.clipRect(regionStart * cellWidth, y * cellHeight, (x - regionStart) * cellWidth, cellHeight) regionStart = null } } if (regionStart !== null) { - ctx.rect(regionStart * cellWidth, y * cellHeight, (width - regionStart) * cellWidth, cellHeight) + ctx.rect(padding + regionStart * cellWidth, padding + y * cellHeight, (width - regionStart) * cellWidth, cellHeight) if (debug) this.screen._debug.clipRect(regionStart * cellWidth, y * cellHeight, (width - regionStart) * cellWidth, cellHeight) } } @@ -686,7 +687,7 @@ module.exports = class ScreenRenderer { if (this.screen.window.debug && this.screen._debug) this.screen._debug.drawEnd() - this.screen.emit('draw') + this.screen.emit('draw', why) } drawStatus (statusScreen) { diff --git a/sass/pages/_term.scss b/sass/pages/_term.scss index 890b1f0..d22a9cc 100644 --- a/sass/pages/_term.scss +++ b/sass/pages/_term.scss @@ -107,6 +107,10 @@ body.term { .debug-toolbar { line-height: 1.5; + text-align: left; + padding: 6px; + font-family: $screen-stack; + font-size: 12px; } }