Add fancy graphics

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

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