You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
928 lines
30 KiB
928 lines
30 KiB
const EventEmitter = require('events')
|
|
const {
|
|
themes,
|
|
getColor
|
|
} = require('./themes')
|
|
|
|
const {
|
|
ATTR_FG,
|
|
ATTR_BG,
|
|
ATTR_BOLD,
|
|
ATTR_UNDERLINE,
|
|
ATTR_INVERSE,
|
|
ATTR_BLINK,
|
|
ATTR_ITALIC,
|
|
ATTR_STRIKE,
|
|
ATTR_OVERLINE,
|
|
ATTR_FAINT,
|
|
ATTR_FRAKTUR
|
|
} = require('./screen_attr_bits')
|
|
|
|
// Some non-bold Fraktur symbols are outside the contiguous block
|
|
const frakturExceptions = {
|
|
'C': '\u212d',
|
|
'H': '\u210c',
|
|
'I': '\u2111',
|
|
'R': '\u211c',
|
|
'Z': '\u2128'
|
|
}
|
|
|
|
/**
|
|
* A terminal screen renderer, using canvas 2D
|
|
*/
|
|
module.exports = class CanvasRenderer extends EventEmitter {
|
|
constructor (canvas) {
|
|
super()
|
|
|
|
this.canvas = canvas
|
|
this.ctx = this.canvas.getContext('2d')
|
|
|
|
this._palette = null // colors 0-15
|
|
this.defaultBG = 0
|
|
this.defaultFG = 7
|
|
|
|
this.debug = false
|
|
this._debug = null
|
|
|
|
this.graphics = 0
|
|
|
|
this.statusFont = "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif"
|
|
|
|
// screen data, considered immutable
|
|
this.width = 0
|
|
this.height = 0
|
|
this.padding = 0
|
|
this.charSize = { width: 0, height: 0 }
|
|
this.cellSize = { width: 0, height: 0 }
|
|
this.fonts = ['', '', '', ''] // normal, bold, italic, bold-italic
|
|
this.screen = []
|
|
this.screenFG = []
|
|
this.screenBG = []
|
|
this.screenAttrs = []
|
|
this.screenSelection = []
|
|
this.screenLines = []
|
|
this.cursor = {}
|
|
this.reverseVideo = false
|
|
this.hasBlinkingCells = false
|
|
this.statusScreen = null
|
|
|
|
this.resetDrawn()
|
|
|
|
this.blinkStyleOn = false
|
|
this.blinkInterval = null
|
|
this.cursorBlinkOn = false
|
|
this.cursorBlinkInterval = null
|
|
|
|
// start blink timers
|
|
this.resetBlink()
|
|
this.resetCursorBlink()
|
|
}
|
|
|
|
render (reason, data) {
|
|
if ('hasBlinkingCells' in data && data.hasBlinkingCells !== this.hasBlinkingCells) {
|
|
if (data.hasBlinkingCells) this.resetBlink()
|
|
else clearInterval(this.blinkInterval)
|
|
}
|
|
|
|
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
|
|
if (this.debug) console.log('Resetting drawn screen')
|
|
|
|
this.drawnScreen = []
|
|
this.drawnScreenFG = []
|
|
this.drawnScreenBG = []
|
|
this.drawnScreenAttrs = []
|
|
this.drawnScreenLines = []
|
|
this.drawnCursor = [-1, -1, '', false]
|
|
}
|
|
|
|
/**
|
|
* The color palette. Should define 16 colors in an array.
|
|
* @type {string[]}
|
|
*/
|
|
get palette () {
|
|
return this._palette || themes[0]
|
|
}
|
|
|
|
/** @type {string[]} */
|
|
set palette (palette) {
|
|
if (this._palette !== palette) {
|
|
this._palette = palette
|
|
this.resetDrawn()
|
|
this.emit('palette-update', palette)
|
|
this.scheduleDraw('palette')
|
|
}
|
|
}
|
|
|
|
getCharWidthFor (font) {
|
|
this.ctx.font = font
|
|
return Math.floor(this.ctx.measureText(' ').width)
|
|
}
|
|
|
|
loadTheme (i) {
|
|
if (i in themes) this.palette = themes[i]
|
|
}
|
|
|
|
setDefaultColors (fg, bg) {
|
|
if (fg !== this.defaultFG || bg !== this.defaultBG) {
|
|
this.resetDrawn()
|
|
this.defaultFG = fg
|
|
this.defaultBG = bg
|
|
this.scheduleDraw('default-colors')
|
|
|
|
// full bg with default color (goes behind the image)
|
|
this.canvas.style.backgroundColor = this.getColor(bg)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Schedule a draw in the next millisecond
|
|
* @param {string} why - the reason why the draw occured (for debugging)
|
|
* @param {number} [aggregateTime] - time to wait for more scheduleDraw calls
|
|
* to occur. 1 ms by default.
|
|
*/
|
|
scheduleDraw (why, aggregateTime = 1) {
|
|
clearTimeout(this._scheduledDraw)
|
|
this._scheduledDraw = setTimeout(() => this.draw(why), aggregateTime)
|
|
}
|
|
|
|
/**
|
|
* Returns the specified color. If `i` is in the palette, it will return the
|
|
* palette color. If `i` is between 16 and 255, it will return the 256color
|
|
* value. If `i` is larger than 255, it will return an RGB color value. If `i`
|
|
* is -1 (foreground) or -2 (background), it will return the selection colors.
|
|
* @param {number} i - the color
|
|
* @returns {string} the CSS color
|
|
*/
|
|
getColor (i) {
|
|
return getColor(i, this.palette)
|
|
}
|
|
|
|
/**
|
|
* Resets the cursor blink to on and restarts the timer
|
|
*/
|
|
resetCursorBlink () {
|
|
this.cursorBlinkOn = true
|
|
clearInterval(this.cursorBlinkInterval)
|
|
this.cursorBlinkInterval = setInterval(() => {
|
|
this.cursorBlinkOn = this.cursor.blinking ? !this.cursorBlinkOn : true
|
|
if (this.cursor.blinking) this.scheduleDraw('cursor-blink')
|
|
}, 500)
|
|
}
|
|
|
|
/**
|
|
* Resets the blink style to on and restarts the timer
|
|
*/
|
|
resetBlink () {
|
|
this.blinkStyleOn = true
|
|
clearInterval(this.blinkInterval)
|
|
let intervals = 0
|
|
this.blinkInterval = setInterval(() => {
|
|
if (this.blinkingCellCount <= 0) return
|
|
|
|
intervals++
|
|
if (intervals >= 4 && this.blinkStyleOn) {
|
|
this.blinkStyleOn = false
|
|
intervals = 0
|
|
this.scheduleDraw('blink-style')
|
|
} else if (intervals >= 1 && !this.blinkStyleOn) {
|
|
this.blinkStyleOn = true
|
|
intervals = 0
|
|
this.scheduleDraw('blink-style')
|
|
}
|
|
}, 200)
|
|
}
|
|
|
|
/**
|
|
* Draws a cell's background with the given parameters.
|
|
* @param {Object} options
|
|
* @param {number} options.x - x in cells
|
|
* @param {number} options.y - y in cells
|
|
* @param {number} options.cellWidth - cell width in pixels
|
|
* @param {number} options.cellHeight - cell height in pixels
|
|
* @param {number} options.bg - the background color
|
|
* @param {number} options.isDefaultBG - if true, will draw image background if available
|
|
*/
|
|
drawBackground ({ x, y, cellWidth, cellHeight, bg, isDefaultBG }) {
|
|
const { ctx, width, height, padding } = this
|
|
|
|
// is a double-width/double-height line
|
|
if (this.screenLines[y]) cellWidth *= 2
|
|
|
|
ctx.fillStyle = this.getColor(bg)
|
|
let screenX = x * cellWidth + padding
|
|
let screenY = y * cellHeight + padding
|
|
let isBorderCell = x === 0 || y === 0 || x === width - 1 || y === height - 1
|
|
|
|
let fillX, fillY, fillWidth, fillHeight
|
|
if (isBorderCell) {
|
|
let left = screenX
|
|
let top = screenY
|
|
let right = screenX + cellWidth
|
|
let bottom = screenY + cellHeight
|
|
if (x === 0) left -= padding
|
|
else if (x === width - 1) right += padding
|
|
if (y === 0) top -= padding
|
|
else if (y === height - 1) bottom += padding
|
|
|
|
fillX = left
|
|
fillY = top
|
|
fillWidth = right - left
|
|
fillHeight = bottom - top
|
|
} else {
|
|
fillX = screenX
|
|
fillY = screenY
|
|
fillWidth = cellWidth
|
|
fillHeight = cellHeight
|
|
}
|
|
|
|
ctx.clearRect(fillX, fillY, fillWidth, fillHeight)
|
|
|
|
if (!isDefaultBG || bg < 0 || !this.backgroundImage) {
|
|
ctx.fillRect(fillX, fillY, fillWidth, fillHeight)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Draws a cell's character with the given parameters. Won't do anything if
|
|
* text is an empty string.
|
|
* @param {Object} options
|
|
* @param {number} options.x - x in cells
|
|
* @param {number} options.y - y in cells
|
|
* @param {Object} options.charSize - the character size, an object with
|
|
* `width` and `height` in pixels
|
|
* @param {number} options.cellWidth - cell width in pixels
|
|
* @param {number} options.cellHeight - cell height in pixels
|
|
* @param {string} options.text - the cell content
|
|
* @param {number} options.fg - the foreground color
|
|
* @param {number} options.attrs - the cell's attributes
|
|
*/
|
|
drawCharacter ({ x, y, charSize, cellWidth, cellHeight, text, fg, attrs }) {
|
|
if (!text) return
|
|
|
|
const { ctx, padding } = this
|
|
|
|
let underline = false
|
|
let strike = false
|
|
let overline = false
|
|
if (attrs & ATTR_FAINT) ctx.globalAlpha = 0.5
|
|
if (attrs & ATTR_UNDERLINE) underline = true
|
|
if (attrs & ATTR_FRAKTUR) text = CanvasRenderer.alphaToFraktur(text)
|
|
if (attrs & ATTR_STRIKE) strike = true
|
|
if (attrs & ATTR_OVERLINE) overline = true
|
|
|
|
ctx.fillStyle = this.getColor(fg)
|
|
|
|
let screenX = x * cellWidth + padding
|
|
let screenY = y * cellHeight + padding
|
|
|
|
if (this.screenLines[y]) {
|
|
// is a double-width/double-height line
|
|
cellWidth *= 2
|
|
ctx.save()
|
|
ctx.translate(screenX + 0.5 * cellWidth, screenY + 0.5 * cellHeight)
|
|
ctx.scale(2, 1)
|
|
if (this.screenLines[y] & 0b10) {
|
|
// top half
|
|
ctx.scale(1, 2)
|
|
ctx.translate(0, cellHeight / 4)
|
|
|
|
} else if (this.screenLines[y] & 0b100) {
|
|
// bottom half
|
|
ctx.scale(1, 2)
|
|
ctx.translate(0, -cellHeight / 4)
|
|
}
|
|
ctx.translate((-screenX - 1.5 * cellWidth) / 2, -screenY - 0.5 * cellHeight)
|
|
|
|
if (this.screenLines[y] & 0b110) {
|
|
// characters overflow -- needs clipping
|
|
// TODO: clipping is really expensive
|
|
ctx.beginPath()
|
|
if (this.screenLines[y] & 0b10) ctx.rect(screenX, screenY, cellWidth, cellHeight / 2)
|
|
else ctx.rect(screenX, screenY + cellHeight / 2, cellWidth, cellHeight / 2)
|
|
ctx.clip()
|
|
}
|
|
}
|
|
|
|
let codePoint = text.codePointAt(0)
|
|
if (codePoint >= 0x2580 && codePoint <= 0x259F) {
|
|
// block elements
|
|
ctx.beginPath()
|
|
const left = screenX
|
|
const top = screenY
|
|
const cw = cellWidth
|
|
const ch = cellHeight
|
|
const c2w = cellWidth / 2
|
|
const c2h = cellHeight / 2
|
|
|
|
// http://www.fileformat.info/info/unicode/block/block_elements/utf8test.htm
|
|
// 0x00 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 0x0A 0x0B 0x0C 0x0D 0x0E 0x0F
|
|
// 0x2580 ▀ ▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▉ ▊ ▋ ▌ ▍ ▎ ▏
|
|
// 0x2590 ▐ ░ ▒ ▓ ▔ ▕ ▖ ▗ ▘ ▙ ▚ ▛ ▜ ▝ ▞ ▟
|
|
|
|
if (codePoint === 0x2580) {
|
|
// upper half block >▀<
|
|
ctx.rect(left, top, cw, c2h)
|
|
} else if (codePoint <= 0x2588) {
|
|
// lower n eighth block (increasing) >▁< to >█<
|
|
let offset = (1 - (codePoint - 0x2580) / 8) * ch
|
|
ctx.rect(left, top + offset, cw, ch - offset)
|
|
} else if (codePoint <= 0x258F) {
|
|
// left n eighth block (decreasing) >▉< to >▏<
|
|
let offset = (codePoint - 0x2588) / 8 * cw
|
|
ctx.rect(left, top, cw - offset, ch)
|
|
} else if (codePoint === 0x2590) {
|
|
// right half block >▐<
|
|
ctx.rect(left + c2w, top, c2w, ch)
|
|
} else if (codePoint <= 0x2593) {
|
|
// shading >░< >▒< >▓<
|
|
|
|
// dot spacing by dividing cell size by a constant. This could be
|
|
// reworked to always return a whole number, but that would require
|
|
// prime factorization, and doing that without a loop would let you
|
|
// take over the world, which is not within the scope of this project.
|
|
let dotSpacingX, dotSpacingY, dotSize
|
|
if (codePoint === 0x2591) {
|
|
dotSpacingX = cw / 4
|
|
dotSpacingY = ch / 10
|
|
dotSize = 1
|
|
} else if (codePoint === 0x2592) {
|
|
dotSpacingX = cw / 6
|
|
dotSpacingY = cw / 10
|
|
dotSize = 1
|
|
} else if (codePoint === 0x2593) {
|
|
dotSpacingX = cw / 4
|
|
dotSpacingY = cw / 7
|
|
dotSize = 2
|
|
}
|
|
|
|
let alignRight = false
|
|
for (let dy = 0; dy < ch; dy += dotSpacingY) {
|
|
for (let dx = 0; dx < cw; dx += dotSpacingX) {
|
|
// prevent overflow
|
|
let dotSizeY = Math.min(dotSize, ch - dy)
|
|
ctx.rect(left + (alignRight ? cw - dx - dotSize : dx), top + dy, dotSize, dotSizeY)
|
|
}
|
|
alignRight = !alignRight
|
|
}
|
|
} else if (codePoint === 0x2594) {
|
|
// upper one eighth block >▔<
|
|
ctx.rect(left, top, cw, ch / 8)
|
|
} else if (codePoint === 0x2595) {
|
|
// right one eighth block >▕<
|
|
ctx.rect(left + (7 / 8) * cw, top, cw / 8, ch)
|
|
} else if (codePoint === 0x2596) {
|
|
// left bottom quadrant >▖<
|
|
ctx.rect(left, top + c2h, c2w, c2h)
|
|
} else if (codePoint === 0x2597) {
|
|
// right bottom quadrant >▗<
|
|
ctx.rect(left + c2w, top + c2h, c2w, c2h)
|
|
} else if (codePoint === 0x2598) {
|
|
// left top quadrant >▘<
|
|
ctx.rect(left, top, c2w, c2h)
|
|
} else if (codePoint === 0x2599) {
|
|
// left chair >▙<
|
|
ctx.rect(left, top, c2w, ch)
|
|
ctx.rect(left + c2w, top + c2h, c2w, c2h)
|
|
} else if (codePoint === 0x259A) {
|
|
// quadrants lt rb >▚<
|
|
ctx.rect(left, top, c2w, c2h)
|
|
ctx.rect(left + c2w, top + c2h, c2w, c2h)
|
|
} else if (codePoint === 0x259B) {
|
|
// left chair upside down >▛<
|
|
ctx.rect(left, top, c2w, ch)
|
|
ctx.rect(left + c2w, top, c2w, c2h)
|
|
} else if (codePoint === 0x259C) {
|
|
// right chair upside down >▜<
|
|
ctx.rect(left, top, cw, c2h)
|
|
ctx.rect(left + c2w, top + c2h, c2w, c2h)
|
|
} else if (codePoint === 0x259D) {
|
|
// right top quadrant >▝<
|
|
ctx.rect(left + c2w, top, c2w, c2h)
|
|
} else if (codePoint === 0x259E) {
|
|
// quadrants lb rt >▞<
|
|
ctx.rect(left, top + c2h, c2w, c2h)
|
|
ctx.rect(left + c2w, top, c2w, c2h)
|
|
} else if (codePoint === 0x259F) {
|
|
// right chair upside down >▟<
|
|
ctx.rect(left, top + c2h, c2w, c2h)
|
|
ctx.rect(left + c2w, top, c2w, ch)
|
|
}
|
|
|
|
ctx.fill()
|
|
} else if (codePoint >= 0xE0B0 && codePoint <= 0xE0B3) {
|
|
// powerline symbols, except branch, line, and lock. Basically, just the triangles
|
|
ctx.beginPath()
|
|
|
|
if (codePoint === 0xE0B0 || codePoint === 0xE0B1) {
|
|
// right-pointing triangle
|
|
ctx.moveTo(screenX, screenY)
|
|
ctx.lineTo(screenX + cellWidth, screenY + cellHeight / 2)
|
|
ctx.lineTo(screenX, screenY + cellHeight)
|
|
} else if (codePoint === 0xE0B2 || codePoint === 0xE0B3) {
|
|
// left-pointing triangle
|
|
ctx.moveTo(screenX + cellWidth, screenY)
|
|
ctx.lineTo(screenX, screenY + cellHeight / 2)
|
|
ctx.lineTo(screenX + cellWidth, screenY + cellHeight)
|
|
}
|
|
|
|
if (codePoint % 2 === 0) {
|
|
// triangle
|
|
ctx.fill()
|
|
} else {
|
|
// chevron
|
|
ctx.strokeStyle = ctx.fillStyle
|
|
ctx.stroke()
|
|
}
|
|
} else {
|
|
// Draw other characters using the text renderer
|
|
ctx.fillText(text, screenX + 0.5 * cellWidth, screenY + 0.5 * cellHeight)
|
|
}
|
|
|
|
// -- line drawing - a reference for a possible future rect/line implementation ---
|
|
// http://www.fileformat.info/info/unicode/block/box_drawing/utf8test.htm
|
|
// 0x00 0x01 0x02 0x03 0x04 0x05 0x06 0x07 0x08 0x09 0x0A 0x0B 0x0C 0x0D 0x0E 0x0F
|
|
// 0x2500 ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏
|
|
// 0x2510 ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟
|
|
// 0x2520 ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯
|
|
// 0x2530 ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿
|
|
// 0x2540 ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏
|
|
// 0x2550 ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟
|
|
// 0x2560 ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯
|
|
// 0x2570 ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿
|
|
|
|
if (underline || strike || overline) {
|
|
ctx.strokeStyle = this.getColor(fg)
|
|
ctx.lineWidth = 1
|
|
ctx.lineCap = 'round'
|
|
ctx.beginPath()
|
|
|
|
if (underline) {
|
|
let lineY = Math.round(screenY + charSize.height) + 0.5
|
|
ctx.moveTo(screenX, lineY)
|
|
ctx.lineTo(screenX + cellWidth, lineY)
|
|
}
|
|
|
|
if (strike) {
|
|
let lineY = Math.round(screenY + 0.5 * cellHeight) + 0.5
|
|
ctx.moveTo(screenX, lineY)
|
|
ctx.lineTo(screenX + cellWidth, lineY)
|
|
}
|
|
|
|
if (overline) {
|
|
let lineY = Math.round(screenY) + 0.5
|
|
ctx.moveTo(screenX, lineY)
|
|
ctx.lineTo(screenX + cellWidth, lineY)
|
|
}
|
|
|
|
ctx.stroke()
|
|
}
|
|
|
|
if (this.screenLines[y]) ctx.restore()
|
|
|
|
ctx.globalAlpha = 1
|
|
}
|
|
|
|
/**
|
|
* Returns all adjacent cell indices given a radius.
|
|
* @param {number} cell - the center cell index
|
|
* @param {number} [radius] - the radius. 1 by default
|
|
* @returns {number[]} an array of cell indices
|
|
*/
|
|
getAdjacentCells (cell, radius = 1) {
|
|
const { width, height } = this
|
|
const screenLength = width * height
|
|
|
|
let cells = []
|
|
|
|
for (let x = -radius; x <= radius; x++) {
|
|
for (let y = -radius; y <= radius; y++) {
|
|
if (x === 0 && y === 0) continue
|
|
cells.push(cell + x + y * width)
|
|
}
|
|
}
|
|
|
|
return cells.filter(cell => cell >= 0 && cell < screenLength)
|
|
}
|
|
|
|
/**
|
|
* Updates the screen.
|
|
* @param {string} why - the draw reason (for debugging)
|
|
*/
|
|
draw (why) {
|
|
const ctx = this.ctx
|
|
const {
|
|
width,
|
|
height,
|
|
devicePixelRatio,
|
|
statusScreen
|
|
} = this
|
|
|
|
if (statusScreen) {
|
|
// draw status screen instead
|
|
this.drawStatus(statusScreen)
|
|
this.startDrawLoop()
|
|
return
|
|
} else this.stopDrawLoop()
|
|
|
|
const charSize = this.charSize
|
|
const { width: cellWidth, height: cellHeight } = this.cellSize
|
|
const screenLength = width * height
|
|
|
|
ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0)
|
|
|
|
if (this.debug && this._debug) this._debug.drawStart(why)
|
|
|
|
ctx.font = this.fonts[0]
|
|
ctx.textAlign = 'center'
|
|
ctx.textBaseline = 'middle'
|
|
|
|
// bits in the attr value that affect the font
|
|
const FONT_MASK = ATTR_BOLD | ATTR_ITALIC
|
|
|
|
// Map of (attrs & FONT_MASK) -> Array of cell indices
|
|
let fontGroups = new Map()
|
|
|
|
// Map of (cell index) -> boolean, whether or not a cell has updated
|
|
let updateMap = new Map()
|
|
|
|
for (let cell = 0; cell < screenLength; cell++) {
|
|
let x = cell % width
|
|
let y = Math.floor(cell / width)
|
|
let isCursor = this.cursorBlinkOn &&
|
|
this.cursor.x === x &&
|
|
this.cursor.y === y &&
|
|
this.cursor.visible
|
|
|
|
let wasCursor = x === this.drawnCursor[0] && y === this.drawnCursor[1]
|
|
|
|
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
|
|
|
|
if (!(attrs & ATTR_FG)) fg = this.defaultFG
|
|
if (!(attrs & ATTR_BG)) {
|
|
bg = this.defaultBG
|
|
isDefaultBG = true
|
|
}
|
|
|
|
if (attrs & ATTR_INVERSE) [fg, bg] = [bg, fg] // swap - reversed character colors
|
|
if (this.reverseVideo) [fg, bg] = [bg, fg] // swap - reversed all screen
|
|
|
|
if (attrs & ATTR_BLINK && !this.blinkStyleOn) {
|
|
// blinking is enabled and blink style is off
|
|
// set text to nothing so drawCharacter only draws decoration
|
|
text = ' '
|
|
}
|
|
|
|
if (inSelection) {
|
|
fg = -1
|
|
bg = -2
|
|
}
|
|
|
|
let didUpdate = text !== this.drawnScreen[cell] || // text updated
|
|
fg !== this.drawnScreenFG[cell] || // foreground updated, and this cell has text
|
|
bg !== this.drawnScreenBG[cell] || // background updated
|
|
attrs !== this.drawnScreenAttrs[cell] || // attributes updated
|
|
this.screenLines[y] !== this.drawnScreenLines[y] || // line 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.hanging !== this.drawnCursor[3]) // cursor hanging updated
|
|
|
|
let font = attrs & FONT_MASK
|
|
if (!fontGroups.has(font)) fontGroups.set(font, [])
|
|
|
|
fontGroups.get(font).push({ cell, x, y, text, fg, bg, attrs, isCursor, inSelection, isDefaultBG })
|
|
updateMap.set(cell, didUpdate)
|
|
}
|
|
|
|
// set drawn screen lines
|
|
this.drawnScreenLines = this.screenLines.slice()
|
|
|
|
let debugFilledUpdates = []
|
|
|
|
if (this.graphics >= 1) {
|
|
// fancy graphics gets really slow when there's a lot of masks
|
|
// so here's an algorithm that fills in holes in the update map
|
|
|
|
for (let cell of updateMap.keys()) {
|
|
if (updateMap.get(cell)) continue
|
|
let previous = updateMap.get(cell - 1) || false
|
|
let next = updateMap.get(cell + 1) || false
|
|
|
|
if (previous && next) {
|
|
// set cell to true of horizontally adjacent updated
|
|
updateMap.set(cell, true)
|
|
if (this.debug && this._debug) debugFilledUpdates.push(cell)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Map of (cell index) -> boolean, whether or not a cell should be redrawn
|
|
const redrawMap = new Map()
|
|
const maskedCells = new Map()
|
|
|
|
let isTextWide = text =>
|
|
text !== ' ' && ctx.measureText(text).width >= (cellWidth + 0.05)
|
|
|
|
// decide for each cell if it should be redrawn
|
|
for (let cell of updateMap.keys()) {
|
|
let shouldUpdate = updateMap.get(cell) || redrawMap.get(cell) || false
|
|
|
|
// TODO: fonts (necessary?)
|
|
let text = this.screen[cell]
|
|
let isWideCell = isTextWide(text)
|
|
let checkRadius = isWideCell ? 2 : 1
|
|
|
|
if (!shouldUpdate) {
|
|
// check adjacent cells
|
|
let adjacentDidUpdate = false
|
|
|
|
for (let adjacentCell of this.getAdjacentCells(cell, checkRadius)) {
|
|
// update this cell if:
|
|
// - the adjacent cell updated (For now, this'll always be true because characters can be slightly larger than they say they are)
|
|
// - the adjacent cell updated and this cell or the adjacent cell is wide
|
|
if (updateMap.get(adjacentCell) && (this.graphics < 2 || isWideCell || isTextWide(this.screen[adjacentCell]))) {
|
|
adjacentDidUpdate = true
|
|
|
|
if (this.getAdjacentCells(cell, 1).includes(adjacentCell)) {
|
|
// this is within a radius of 1, therefore this cell should be included in the mask as well
|
|
maskedCells.set(cell, true)
|
|
}
|
|
break
|
|
}
|
|
}
|
|
|
|
if (adjacentDidUpdate) shouldUpdate = true
|
|
}
|
|
|
|
if (updateMap.get(cell)) {
|
|
// this was updated, it should definitely be included in the mask
|
|
maskedCells.set(cell, true)
|
|
}
|
|
|
|
redrawMap.set(cell, shouldUpdate)
|
|
}
|
|
|
|
// mask to masked regions only
|
|
if (this.graphics >= 1) {
|
|
// TODO: include padding in border cells
|
|
const padding = this.padding
|
|
|
|
let regions = []
|
|
|
|
for (let y = 0; y < height; y++) {
|
|
let regionStart = null
|
|
for (let x = 0; x < width; x++) {
|
|
let cell = y * width + x
|
|
let masked = maskedCells.get(cell)
|
|
if (masked && regionStart === null) regionStart = x
|
|
if (!masked && regionStart !== null) {
|
|
regions.push([regionStart, y, x, y + 1])
|
|
regionStart = null
|
|
}
|
|
}
|
|
if (regionStart !== null) {
|
|
regions.push([regionStart, y, width, y + 1])
|
|
}
|
|
}
|
|
|
|
// join regions if possible (O(n^2-1), sorry)
|
|
let i = 0
|
|
while (i < regions.length) {
|
|
let region = regions[i]
|
|
let j = 0
|
|
while (j < regions.length) {
|
|
let other = regions[j]
|
|
if (other === region) {
|
|
j++
|
|
continue
|
|
}
|
|
if (other[0] === region[0] && other[2] === region[2] && other[3] === region[1]) {
|
|
region[1] = other[1]
|
|
regions.splice(j, 1)
|
|
if (i > j) i--
|
|
j--
|
|
}
|
|
j++
|
|
}
|
|
i++
|
|
}
|
|
|
|
ctx.save()
|
|
ctx.beginPath()
|
|
for (let region of regions) {
|
|
let [regionStart, y, endX, endY] = region
|
|
let rectX = padding + regionStart * cellWidth
|
|
let rectY = padding + y * cellHeight
|
|
let rectWidth = (endX - regionStart) * cellWidth
|
|
let rectHeight = (endY - y) * cellHeight
|
|
|
|
// compensate for padding
|
|
if (regionStart === 0) {
|
|
rectX -= padding
|
|
rectWidth += padding
|
|
}
|
|
if (y === 0) {
|
|
rectY -= padding
|
|
rectHeight += padding
|
|
}
|
|
if (endX === width - 1) rectWidth += padding
|
|
if (y === height - 1) rectHeight += padding
|
|
|
|
ctx.rect(rectX, rectY, rectWidth, rectHeight)
|
|
}
|
|
ctx.clip()
|
|
}
|
|
|
|
// pass 1: backgrounds
|
|
for (let font of fontGroups.keys()) {
|
|
for (let data of fontGroups.get(font)) {
|
|
let { cell, x, y, text, bg, isDefaultBG } = data
|
|
|
|
if (redrawMap.get(cell)) {
|
|
this.drawBackground({ x, y, cellWidth, cellHeight, bg, isDefaultBG })
|
|
|
|
if (this.debug) {
|
|
// set cell flags
|
|
let flags = (+redrawMap.get(cell))
|
|
flags |= (+updateMap.get(cell)) << 1
|
|
flags |= (+maskedCells.get(cell)) << 2
|
|
flags |= (+isTextWide(text)) << 3
|
|
flags |= (+debugFilledUpdates.includes(cell)) << 4
|
|
this._debug.setCell(cell, flags)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// reset drawn cursor
|
|
this.drawnCursor = [-1, -1, '', false]
|
|
|
|
// pass 2: characters
|
|
for (let font of fontGroups.keys()) {
|
|
// set font once because in Firefox, this is a really slow action for some
|
|
// reason
|
|
let fontIndex = 0
|
|
if (font & ATTR_BOLD) fontIndex |= 1
|
|
if (font & ATTR_ITALIC) fontIndex |= 2
|
|
ctx.font = this.fonts[fontIndex]
|
|
|
|
for (let data of fontGroups.get(font)) {
|
|
let { cell, x, y, text, fg, bg, attrs, isCursor, inSelection } = data
|
|
|
|
if (redrawMap.get(cell)) {
|
|
this.drawCharacter({
|
|
x, y, charSize, cellWidth, cellHeight, text, fg, attrs
|
|
})
|
|
|
|
this.drawnScreen[cell] = text
|
|
this.drawnScreenFG[cell] = fg
|
|
this.drawnScreenBG[cell] = bg
|
|
this.drawnScreenAttrs[cell] = attrs
|
|
|
|
if (isCursor) this.drawnCursor = [x, y, this.cursor.style, this.cursor.hanging]
|
|
|
|
// draw cursor
|
|
if (isCursor && !inSelection) {
|
|
ctx.save()
|
|
ctx.beginPath()
|
|
|
|
let cursorX = x
|
|
let cursorY = y
|
|
let cursorWidth = cellWidth // JS doesn't allow same-name assignment
|
|
|
|
if (this.cursor.hanging) {
|
|
// draw hanging cursor in the margin
|
|
cursorX += 1
|
|
}
|
|
|
|
// double-width lines
|
|
if (this.screenLines[cursorY]) cursorWidth *= 2
|
|
|
|
let screenX = cursorX * cursorWidth + this.padding
|
|
let screenY = cursorY * cellHeight + this.padding
|
|
|
|
if (this.cursor.style === 'block') {
|
|
// block
|
|
ctx.rect(screenX, screenY, cursorWidth, cellHeight)
|
|
} else if (this.cursor.style === 'bar') {
|
|
// vertical bar
|
|
let barWidth = 2
|
|
ctx.rect(screenX, screenY, barWidth, cellHeight)
|
|
} else if (this.cursor.style === 'line') {
|
|
// underline
|
|
let lineHeight = 2
|
|
ctx.rect(screenX, screenY + charSize.height, cursorWidth, lineHeight)
|
|
}
|
|
ctx.clip()
|
|
|
|
// swap foreground/background
|
|
;[fg, bg] = [bg, fg]
|
|
|
|
// HACK: ensure cursor is visible
|
|
if (fg === bg) bg = fg === 0 ? 7 : 0
|
|
|
|
this.drawBackground({ x: cursorX, y: cursorY, cellWidth, cellHeight, bg })
|
|
this.drawCharacter({
|
|
x: cursorX, y: cursorY, charSize, cellWidth, cellHeight, text, fg, attrs
|
|
})
|
|
ctx.restore()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.graphics >= 1) ctx.restore()
|
|
|
|
if (this.debug && this._debug) this._debug.drawEnd()
|
|
|
|
this.emit('draw', why)
|
|
}
|
|
|
|
drawStatus (statusScreen) {
|
|
const { ctx, width, height, devicePixelRatio } = this
|
|
|
|
// reset drawnScreen to force redraw when statusScreen is disabled
|
|
this.drawnScreen = []
|
|
|
|
const cellSize = this.cellSize
|
|
const screenWidth = width * cellSize.width + 2 * this.padding
|
|
const screenHeight = height * cellSize.height + 2 * this.padding
|
|
|
|
ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0)
|
|
ctx.fillStyle = this.getColor(this.defaultBG)
|
|
ctx.fillRect(0, 0, screenWidth, screenHeight)
|
|
|
|
ctx.font = `24px ${this.statusFont}`
|
|
ctx.fillStyle = this.getColor(this.defaultFG)
|
|
ctx.textAlign = 'center'
|
|
ctx.textBaseline = 'middle'
|
|
ctx.fillText(statusScreen.title || '', screenWidth / 2, screenHeight / 2 - 50)
|
|
|
|
if (statusScreen.loading) {
|
|
// show loading spinner
|
|
ctx.save()
|
|
ctx.translate(screenWidth / 2, screenHeight / 2 + 20)
|
|
|
|
ctx.strokeStyle = this.getColor(this.defaultFG)
|
|
ctx.lineWidth = 5
|
|
ctx.lineCap = 'round'
|
|
|
|
let t = Date.now() / 1000
|
|
|
|
for (let i = 0; i < 12; i++) {
|
|
ctx.rotate(Math.PI / 6)
|
|
let offset = ((t * 12) - i) % 12
|
|
ctx.globalAlpha = Math.max(0.2, 1 - offset / 3)
|
|
ctx.beginPath()
|
|
ctx.moveTo(0, 15)
|
|
ctx.lineTo(0, 30)
|
|
ctx.stroke()
|
|
}
|
|
|
|
ctx.restore()
|
|
}
|
|
}
|
|
|
|
startDrawLoop () {
|
|
if (this._drawTimerThread) return
|
|
let threadID = Math.random().toString(36)
|
|
this._drawTimerThread = threadID
|
|
this.drawTimerLoop(threadID)
|
|
}
|
|
|
|
stopDrawLoop () {
|
|
this._drawTimerThread = null
|
|
}
|
|
|
|
drawTimerLoop (threadID) {
|
|
if (!threadID || threadID !== this._drawTimerThread) return
|
|
window.requestAnimationFrame(() => this.drawTimerLoop(threadID))
|
|
this.draw('draw-loop')
|
|
}
|
|
|
|
/**
|
|
* Converts an alphabetic character to its fraktur variant.
|
|
* @param {string} character - the character
|
|
* @returns {string} the converted character
|
|
*/
|
|
static alphaToFraktur (character) {
|
|
if (character >= 'a' && character <= 'z') {
|
|
character = String.fromCodePoint(0x1d51e - 0x61 + character.charCodeAt(0))
|
|
} else if (character >= 'A' && character <= 'Z') {
|
|
character = frakturExceptions[character] || String.fromCodePoint(0x1d504 - 0x41 + character.charCodeAt(0))
|
|
}
|
|
return character
|
|
}
|
|
}
|
|
|