Make screen work again with screen-layout

js/term/debug.js

@@ -18,16 +18,16 @@ module.exports = function attachDebugger (screen, connection) {
 
   let addCanvas = function () {
     if (!debugCanvas.parentNode) {
-      screen.canvas.parentNode.appendChild(debugCanvas)
+      screen.layout.canvas.parentNode.appendChild(debugCanvas)
-      screen.canvas.addEventListener('mousemove', onMouseMove)
+      screen.layout.canvas.addEventListener('mousemove', onMouseMove)
-      screen.canvas.addEventListener('mouseout', onMouseOut)
+      screen.layout.canvas.addEventListener('mouseout', onMouseOut)
     }
   }
   let removeCanvas = function () {
     if (debugCanvas.parentNode) {
       debugCanvas.parentNode.removeChild(debugCanvas)
-      screen.canvas.removeEventListener('mousemove', onMouseMove)
+      screen.layout.canvas.removeEventListener('mousemove', onMouseMove)
-      screen.canvas.removeEventListener('mouseout', onMouseOut)
+      screen.layout.canvas.removeEventListener('mouseout', onMouseOut)
       onMouseOut()
     }
   }
@@ -261,7 +261,7 @@ module.exports = function attachDebugger (screen, connection) {
   }
 
   const attachToolbar = function () {
-    screen.canvas.parentNode.appendChild(toolbar)
+    screen.layout.canvas.parentNode.appendChild(toolbar)
   }
   const detachToolbar = function () {
     toolbar.parentNode.removeChild(toolbar)

js/term/screen.js

@@ -92,20 +92,20 @@ module.exports = class TermScreen extends EventEmitter {
       if (selecting) return
       selecting = true
       this.selection.start = this.selection.end = this.layout.screenToGrid(x, y, true)
-      this.layout.scheduleDraw('select-start')
+      this.renderScreen('select-start')
     }
 
     let selectMove = (x, y) => {
       if (!selecting) return
       this.selection.end = this.layout.screenToGrid(x, y, true)
-      this.layout.scheduleDraw('select-move')
+      this.renderScreen('select-move')
     }
 
     let selectEnd = (x, y) => {
       if (!selecting) return
       selecting = false
       this.selection.end = this.layout.screenToGrid(x, y, true)
-      this.layout.scheduleDraw('select-end')
+      this.renderScreen('select-end')
       Object.assign(this.selection, this.getNormalizedSelection())
     }
 
@@ -197,7 +197,7 @@ module.exports = class TermScreen extends EventEmitter {
         // reset selection
         this.selection.start = this.selection.end = [0, 0]
         this.emit('hide-touch-select-menu')
-        this.layout.scheduleDraw('select-reset')
+        this.renderScreen('select-reset')
       } else {
         e.preventDefault()
         this.emit('open-soft-keyboard')
@@ -260,13 +260,20 @@ module.exports = class TermScreen extends EventEmitter {
     this.layout.window.height = this.window.height
   }
 
-  renderScreen () {
+  renderScreen (reason) {
-    this.layout.render({
+    let selection = []
+
+    for (let cell = 0; cell < this.screen.length; cell++) {
+      selection.push(this.isInSelection(cell % this.window.width, Math.floor(cell / this.window.width)))
+    }
+
+    this.layout.render(reason, {
       width: this.window.width,
       height: this.window.height,
       screen: this.screen,
       screenFG: this.screenFG,
       screenBG: this.screenBG,
+      screenSelection: selection,
       screenAttrs: this.screenAttrs,
       cursor: this.cursor,
       statusScreen: this.window.statusScreen
@@ -468,7 +475,7 @@ module.exports = class TermScreen extends EventEmitter {
             this.cursor.hanging = update.hanging
             this.layout.renderer.resetCursorBlink()
             this.emit('cursor-moved')
-            this.layout.renderer.scheduleDraw('cursor-moved')
+            this.renderScreen('cursor-moved')
           }
           break
 
@@ -519,7 +526,7 @@ module.exports = class TermScreen extends EventEmitter {
 
           if (this.window.debug) console.log(`Blinking cells: ${this.blinkingCellCount}`)
 
-          this.layout.renderer.scheduleDraw('load', 16)
+          this.renderScreen('load')
           this.emit('load')
           break
 

js/term/screen_layout.js

@@ -171,6 +171,8 @@ module.exports = class ScreenLayout extends EventEmitter {
    * @returns {Object} the cell size with `width` and `height` in pixels
    */
   getCellSize () {
+    if (!this.charSize.height && this.window.fontSize) this.updateCharSize()
+
     return {
       width: Math.ceil(this.charSize.width * this.window.gridScaleX),
       height: Math.ceil(this.charSize.height * this.window.gridScaleY)
@@ -244,12 +246,31 @@ module.exports = class ScreenLayout extends EventEmitter {
       // the screen has been cleared (by changing canvas width)
       this.renderer.resetDrawn()
 
-      // draw immediately; the canvas shouldn't flash
+      this.renderer.render('update-size', this.serializeRenderData())
-      this.renderer.draw('update-size')
     }
   }
 
-  render (...args) {
+  serializeRenderData () {
-    this.renderer.render(...args)
+    return {
+      padding: Math.round(this._padding),
+      devicePixelRatio: this.window.devicePixelRatio,
+      charSize: this.charSize,
+      cellSize: this.getCellSize(),
+      fonts: [
+        this.getFont(),
+        this.getFont({ weight: 'bold' }),
+        this.getFont({ style: 'italic' }),
+        this.getFont({ weight: 'bold', style: 'italic' })
+      ]
+    }
+  }
+
+  render (reason, data) {
+    this.window.width = data.width
+    this.window.height = data.height
+
+    Object.assign(data, this.serializeRenderData())
+
+    this.renderer.render(reason, data)
   }
 }

js/term/screen_renderer.js

@@ -59,6 +59,7 @@ module.exports = class CanvasRenderer extends EventEmitter {
     this.screenFG = []
     this.screenBG = []
     this.screenAttrs = []
+    this.screenSelection = []
     this.cursor = {}
 
     this.resetDrawn()
@@ -73,6 +74,11 @@ module.exports = class CanvasRenderer extends EventEmitter {
     this.resetCursorBlink()
   }
 
+  render (reason, data) {
+    Object.assign(this, data)
+    this.scheduleDraw(reason)
+  }
+
   resetDrawn () {
     // used to determine if a cell should be redrawn; storing the current state
     // as it is on screen
@@ -511,12 +517,11 @@ module.exports = class CanvasRenderer extends EventEmitter {
 
       let wasCursor = x === this.drawnCursor[0] && y === this.drawnCursor[1]
 
-      let inSelection = this.screen.isInSelection(x, y)
-
       let text = this.screen[cell]
       let fg = this.screenFG[cell] | 0
       let bg = this.screenBG[cell] | 0
       let attrs = this.screenAttrs[cell] | 0
+      let inSelection = this.screenSelection[cell]
 
       let isDefaultBG = false