Fancier debug mode

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)
 }

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()

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) {

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;
 	}
 }