espterm
/
espterm-front-end
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make debug bar work again and fix cursor artifacts

Browse Source
pull/1/head
cpsdqs 7 years ago
parent 73b390d7de
commit f53d3390c8
Signed by untrusted user: cpsdqs
GPG Key ID: 3F59586BB7448DD1
2 changed files with 42 additions and 42 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 33
      js/term/debug.js
  2. 51
      js/term/screen_renderer.js

33
js/term/debug.js
Unescape View File

@ -10,7 +10,7 @@ module.exports = function attachDebugger (screen, connection) {
let updateToolbar let updateToolbar
let onMouseMove = e => { let onMouseMove = e => {
mouseHoverCell = screen.screenToGrid(e.offsetX, e.offsetY) mouseHoverCell = screen.layout.screenToGrid(e.offsetX, e.offsetY)
startDrawing() startDrawing()
updateToolbar() updateToolbar()
} }
@ -32,8 +32,8 @@ module.exports = function attachDebugger (screen, connection) {
} }
} }
let updateCanvasSize = function () { let updateCanvasSize = function () {
let { width, height, devicePixelRatio } = screen.window let { width, height, devicePixelRatio } = screen.layout.window
let cellSize = screen.getCellSize() let cellSize = screen.layout.getCellSize()
debugCanvas.width = width * cellSize.width * devicePixelRatio debugCanvas.width = width * cellSize.width * devicePixelRatio
debugCanvas.height = height * cellSize.height * devicePixelRatio debugCanvas.height = height * cellSize.height * devicePixelRatio
debugCanvas.style.width = `${width * cellSize.width}px` debugCanvas.style.width = `${width * cellSize.width}px`
@ -50,7 +50,7 @@ module.exports = function attachDebugger (screen, connection) {
let startDrawing let startDrawing
screen._debug = { screen._debug = screen.layout.renderer._debug = {
drawStart (reason) { drawStart (reason) {
lastReason = reason lastReason = reason
startTime = Date.now() startTime = Date.now()
@ -58,7 +58,7 @@ module.exports = function attachDebugger (screen, connection) {
}, },
drawEnd () { drawEnd () {
endTime = Date.now() endTime = Date.now()
console.log(drawInfo.textContent = `Draw: ${lastReason} (${(endTime - startTime)} ms) with graphics=${screen.window.graphics}`) console.log(drawInfo.textContent = `Draw: ${lastReason} (${(endTime - startTime)} ms) with graphics=${screen.layout.renderer.graphics}`)
startDrawing() startDrawing()
}, },
setCell (cell, flags) { setCell (cell, flags) {
@ -107,8 +107,8 @@ module.exports = function attachDebugger (screen, connection) {
lastDrawTime = Date.now() lastDrawTime = Date.now()
t += dt t += dt
let { devicePixelRatio, width, height } = screen.window let { devicePixelRatio, width, height } = screen.layout.window
let { width: cellWidth, height: cellHeight } = screen.getCellSize() let { width: cellWidth, height: cellHeight } = screen.layout.getCellSize()
let screenLength = width * height let screenLength = width * height
let now = Date.now() let now = Date.now()
@ -247,15 +247,16 @@ module.exports = function attachDebugger (screen, connection) {
const redraw = mk('button') const redraw = mk('button')
redraw.textContent = 'Redraw' redraw.textContent = 'Redraw'
redraw.addEventListener('click', e => { redraw.addEventListener('click', e => {
screen.renderer.resetDrawn() screen.layout.renderer.resetDrawn()
screen.renderer.draw('debug-redraw') screen.layout.renderer.draw('debug-redraw')
}) })
buttons.appendChild(redraw) buttons.appendChild(redraw)
const fancyGraphics = mk('button') const fancyGraphics = mk('button')
fancyGraphics.textContent = 'Toggle Graphics' fancyGraphics.textContent = 'Toggle Graphics'
fancyGraphics.addEventListener('click', e => { fancyGraphics.addEventListener('click', e => {
screen.window.graphics = +!screen.window.graphics screen.layout.renderer.graphics = +!screen.layout.renderer.graphics
screen.layout.renderer.draw('set-graphics')
}) })
buttons.appendChild(fancyGraphics) buttons.appendChild(fancyGraphics)
} }
@ -303,14 +304,14 @@ module.exports = function attachDebugger (screen, connection) {
const formatColor = color => color < 256 ? color : `#${`000000${(color - 256).toString(16)}`.substr(-6)}` const formatColor = color => color < 256 ? color : `#${`000000${(color - 256).toString(16)}`.substr(-6)}`
const getCellData = cell => { const getCellData = cell => {
if (cell < 0 || cell > screen.screen.length) return '(-)' if (cell < 0 || cell > screen.screen.length) return '(-)'
let cellAttrs = screen.renderer.drawnScreenAttrs[cell] | 0 let cellAttrs = screen.layout.renderer.drawnScreenAttrs[cell] | 0
let cellFG = screen.renderer.drawnScreenFG[cell] | 0 let cellFG = screen.layout.renderer.drawnScreenFG[cell] | 0
let cellBG = screen.renderer.drawnScreenBG[cell] | 0 let cellBG = screen.layout.renderer.drawnScreenBG[cell] | 0
let fgText = formatColor(cellFG) let fgText = formatColor(cellFG)
let bgText = formatColor(cellBG) let bgText = formatColor(cellBG)
fgText += `\\[color=${screen.renderer.getColor(cellFG).replace(/ /g, '')}]●\\[]` fgText += `\\[color=${screen.layout.renderer.getColor(cellFG).replace(/ /g, '')}]●\\[]`
bgText += `\\[color=${screen.renderer.getColor(cellBG).replace(/ /g, '')}]●\\[]` bgText += `\\[color=${screen.layout.renderer.getColor(cellBG).replace(/ /g, '')}]●\\[]`
let cellCode = (screen.renderer.drawnScreen[cell] || '').codePointAt(0) | 0 let cellCode = (screen.layout.renderer.drawnScreen[cell] || '').codePointAt(0) | 0
let hexcode = cellCode.toString(16).toUpperCase() let hexcode = cellCode.toString(16).toUpperCase()
if (hexcode.length < 4) hexcode = `0000${hexcode}`.substr(-4) if (hexcode.length < 4) hexcode = `0000${hexcode}`.substr(-4)
hexcode = `U+${hexcode}` hexcode = `U+${hexcode}`

51
js/term/screen_renderer.js
Unescape View File

@ -1,7 +1,6 @@
const EventEmitter = require('events') const EventEmitter = require('events')
const { const {
themes, themes,
buildColorTable,
getColor getColor
} = require('./themes') } = require('./themes')
@ -38,15 +37,14 @@ module.exports = class CanvasRenderer extends EventEmitter {
this.canvas = canvas this.canvas = canvas
this.ctx = this.canvas.getContext('2d') this.ctx = this.canvas.getContext('2d')
this._palette = null // colors 0-15 this._palette = null // colors 0-15
this.defaultBgNum = 0 this.defaultBG = 0
this.defaultFgNum = 7 this.defaultFG = 7
// 256color lookup table
// should not be used to look up 0-15 (will return transparent)
this.colorTable256 = buildColorTable()
this.debug = false this.debug = false
this._debug = null
this.graphics = 0
// screen data, considered immutable // screen data, considered immutable
this.width = 0 this.width = 0
@ -88,7 +86,7 @@ module.exports = class CanvasRenderer extends EventEmitter {
this.drawnScreenFG = [] this.drawnScreenFG = []
this.drawnScreenBG = [] this.drawnScreenBG = []
this.drawnScreenAttrs = [] this.drawnScreenAttrs = []
this.drawnCursor = [-1, -1, ''] this.drawnCursor = [-1, -1, '', false]
} }
/** /**
@ -118,10 +116,10 @@ module.exports = class CanvasRenderer extends EventEmitter {
} }
setDefaultColors (fg, bg) { setDefaultColors (fg, bg) {
if (fg !== this.defaultFgNum || bg !== this.defaultBgNum) { if (fg !== this.defaultFG || bg !== this.defaultBG) {
this.resetDrawn() this.resetDrawn()
this.defaultFgNum = fg this.defaultFG = fg
this.defaultBgNum = bg this.defaultBG = bg
this.scheduleDraw('default-colors') this.scheduleDraw('default-colors')
// full bg with default color (goes behind the image) // full bg with default color (goes behind the image)
@ -492,7 +490,7 @@ module.exports = class CanvasRenderer extends EventEmitter {
ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0) ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0)
// if (this.debug) this.screen._debug.drawStart(why) if (this.debug && this._debug) this._debug.drawStart(why)
ctx.font = this.fonts[0] ctx.font = this.fonts[0]
ctx.textAlign = 'center' ctx.textAlign = 'center'
@ -525,9 +523,9 @@ module.exports = class CanvasRenderer extends EventEmitter {
let isDefaultBG = false let isDefaultBG = false
if (!(attrs & ATTR_FG)) fg = this.defaultFgNum if (!(attrs & ATTR_FG)) fg = this.defaultFG
if (!(attrs & ATTR_BG)) { if (!(attrs & ATTR_BG)) {
bg = this.defaultBgNum bg = this.defaultBG
isDefaultBG = true isDefaultBG = true
} }
@ -536,8 +534,8 @@ module.exports = class CanvasRenderer extends EventEmitter {
if (attrs & ATTR_BLINK && !this.blinkStyleOn) { if (attrs & ATTR_BLINK && !this.blinkStyleOn) {
// blinking is enabled and blink style is off // blinking is enabled and blink style is off
// set text to nothing so drawCharacter doesn't draw anything // set text to nothing so drawCharacter only draws decoration
text = '' text = ' '
} }
if (inSelection) { if (inSelection) {
@ -549,7 +547,8 @@ module.exports = class CanvasRenderer extends EventEmitter {
fg !== this.drawnScreenFG[cell] || // foreground updated, and this cell has text fg !== this.drawnScreenFG[cell] || // foreground updated, and this cell has text
bg !== this.drawnScreenBG[cell] || // background updated bg !== this.drawnScreenBG[cell] || // background updated
attrs !== this.drawnScreenAttrs[cell] || // attributes updated attrs !== this.drawnScreenAttrs[cell] || // attributes updated
isCursor !== wasCursor || // cursor blink/position updated // TODO: fix artifacts or keep this hack:
isCursor || wasCursor || // cursor blink/position updated
(isCursor && this.cursor.style !== this.drawnCursor[2]) || // cursor style updated (isCursor && this.cursor.style !== this.drawnCursor[2]) || // cursor style updated
(isCursor && this.cursor.hanging !== this.drawnCursor[3]) // cursor hanging updated (isCursor && this.cursor.hanging !== this.drawnCursor[3]) // cursor hanging updated
@ -612,13 +611,13 @@ module.exports = class CanvasRenderer extends EventEmitter {
if (redrawing && regionStart === null) regionStart = x if (redrawing && regionStart === null) regionStart = x
if (!redrawing && regionStart !== null) { if (!redrawing && regionStart !== null) {
ctx.rect(padding + regionStart * cellWidth, padding + y * cellHeight, (x - regionStart) * cellWidth, cellHeight) ctx.rect(padding + regionStart * cellWidth, padding + y * cellHeight, (x - regionStart) * cellWidth, cellHeight)
// if (this.debug) this.screen._debug.clipRect(regionStart * cellWidth, y * cellHeight, (x - regionStart) * cellWidth, cellHeight) if (this.debug && this._debug) this._debug.clipRect(regionStart * cellWidth, y * cellHeight, (x - regionStart) * cellWidth, cellHeight)
regionStart = null regionStart = null
} }
} }
if (regionStart !== null) { if (regionStart !== null) {
ctx.rect(padding + regionStart * cellWidth, padding + y * cellHeight, (width - regionStart) * cellWidth, cellHeight) ctx.rect(padding + regionStart * cellWidth, padding + y * cellHeight, (width - regionStart) * cellWidth, cellHeight)
// if (this.debug) this.screen._debug.clipRect(regionStart * cellWidth, y * cellHeight, (width - regionStart) * cellWidth, cellHeight) if (this.debug && this._debug) this._debug.clipRect(regionStart * cellWidth, y * cellHeight, (width - regionStart) * cellWidth, cellHeight)
} }
} }
ctx.clip() ctx.clip()
@ -637,14 +636,14 @@ module.exports = class CanvasRenderer extends EventEmitter {
let flags = (+redrawMap.get(cell)) let flags = (+redrawMap.get(cell))
flags |= (+updateMap.get(cell)) << 1 flags |= (+updateMap.get(cell)) << 1
flags |= (+isTextWide(text)) << 2 flags |= (+isTextWide(text)) << 2
// this.screen._debug.setCell(cell, flags) this._debug.setCell(cell, flags)
} }
} }
} }
} }
// reset drawn cursor // reset drawn cursor
this.drawnCursor = [-1, -1, -1] this.drawnCursor = [-1, -1, '', false]
// pass 2: characters // pass 2: characters
for (let font of fontGroups.keys()) { for (let font of fontGroups.keys()) {
@ -717,7 +716,7 @@ module.exports = class CanvasRenderer extends EventEmitter {
if (this.graphics >= 1) ctx.restore() if (this.graphics >= 1) ctx.restore()
// if (this.debug) this.screen._debug.drawEnd() if (this.debug && this._debug) this._debug.drawEnd()
this.emit('draw', why) this.emit('draw', why)
} }
@ -733,11 +732,11 @@ module.exports = class CanvasRenderer extends EventEmitter {
const screenHeight = height * cellSize.height + 2 * this.padding const screenHeight = height * cellSize.height + 2 * this.padding
ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0) ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0)
ctx.fillStyle = this.getColor(this.defaultBgNum) ctx.fillStyle = this.getColor(this.defaultBG)
ctx.fillRect(0, 0, screenWidth, screenHeight) ctx.fillRect(0, 0, screenWidth, screenHeight)
ctx.font = `24px ${this.statusFont}` ctx.font = `24px ${this.statusFont}`
ctx.fillStyle = this.getColor(this.defaultFgNum) ctx.fillStyle = this.getColor(this.defaultFG)
ctx.textAlign = 'center' ctx.textAlign = 'center'
ctx.textBaseline = 'middle' ctx.textBaseline = 'middle'
ctx.fillText(statusScreen.title || '', screenWidth / 2, screenHeight / 2 - 50) ctx.fillText(statusScreen.title || '', screenWidth / 2, screenHeight / 2 - 50)
@ -747,7 +746,7 @@ module.exports = class CanvasRenderer extends EventEmitter {
ctx.save() ctx.save()
ctx.translate(screenWidth / 2, screenHeight / 2 + 20) ctx.translate(screenWidth / 2, screenHeight / 2 + 20)
ctx.strokeStyle = this.getColor(this.defaultFgNum) ctx.strokeStyle = this.getColor(this.defaultFG)
ctx.lineWidth = 5 ctx.lineWidth = 5
ctx.lineCap = 'round' ctx.lineCap = 'round'

Write Preview
Loading…
Cancel
Save