parent
a460b5fe89
commit
3ef4f0712b
GPG Key ID:
3F59586BB7448DD1
@ -0,0 +1,254 @@ |
||||
const EventEmitter = require('events') |
||||
const CanvasRenderer = require('./screen_renderer') |
||||
|
||||
/** |
||||
* Manages terminal screen layout and sizing |
||||
*/ |
||||
module.exports = class ScreenLayout extends EventEmitter { |
||||
constructor () { |
||||
super() |
||||
|
||||
this.canvas = document.createElement('canvas') |
||||
|
||||
this.renderer = new CanvasRenderer(this.canvas.getContext('2d')) |
||||
|
||||
this._window = { |
||||
width: 0, |
||||
height: 0, |
||||
devicePixelRatio: 1, |
||||
fontFamily: '"DejaVu Sans Mono", "Liberation Mono", "Inconsolata", "Menlo", monospace', |
||||
fontSize: 20, |
||||
padding: 6, |
||||
gridScaleX: 1.0, |
||||
gridScaleY: 1.2, |
||||
fitIntoWidth: 0, |
||||
fitIntoHeight: 0, |
||||
// two bits. LSB: debug enabled by user, MSB: debug enabled by server
|
||||
debug: 0, |
||||
graphics: 0, |
||||
statusScreen: null |
||||
} |
||||
|
||||
// scaling caused by fitIntoWidth/fitIntoHeight
|
||||
this._windowScale = 1 |
||||
|
||||
// actual padding, as it may be disabled by fullscreen mode etc.
|
||||
this._padding = 0 |
||||
|
||||
// properties of this.window that require updating size and redrawing
|
||||
this.windowState = { |
||||
width: 0, |
||||
height: 0, |
||||
devicePixelRatio: 0, |
||||
padding: 0, |
||||
gridScaleX: 0, |
||||
gridScaleY: 0, |
||||
fontFamily: '', |
||||
fontSize: 0, |
||||
fitIntoWidth: 0, |
||||
fitIntoHeight: 0 |
||||
} |
||||
|
||||
this.charSize = { width: 0, height: 0 } |
||||
|
||||
const self = this |
||||
|
||||
// make writing to window update size and draw
|
||||
this.window = new Proxy(this._window, { |
||||
set (target, key, value, receiver) { |
||||
if (target[key] !== value) { |
||||
target[key] = value |
||||
self.scheduleSizeUpdate() |
||||
self.renderer.scheduleDraw(`window:${key}=${value}`) |
||||
self.emit(`update-window:${key}`, value) |
||||
} |
||||
return true |
||||
} |
||||
}) |
||||
|
||||
this.canvas.addEventListener('mousedown', e => this.emit('mousedown', e)) |
||||
this.canvas.addEventListener('mousemove', e => this.emit('mousemove', e)) |
||||
this.canvas.addEventListener('mouseup', e => this.emit('mouseup', e)) |
||||
this.canvas.addEventListener('touchstart', e => this.emit('touchstart', e)) |
||||
this.canvas.addEventListener('touchmove', e => this.emit('touchmove', e)) |
||||
this.canvas.addEventListener('touchend', e => this.emit('touchend', e)) |
||||
this.canvas.addEventListener('wheel', e => this.emit('wheel', e)) |
||||
this.canvas.addEventListener('contextmenu', e => this.emit('contextmenu', e)) |
||||
} |
||||
|
||||
/** |
||||
* Schedule a size update in the next millisecond |
||||
*/ |
||||
scheduleSizeUpdate () { |
||||
clearTimeout(this._scheduledSizeUpdate) |
||||
this._scheduledSizeUpdate = setTimeout(() => this.updateSize(), 1) |
||||
} |
||||
|
||||
get backgroundImage () { |
||||
return this.canvas.style.backgroundImage |
||||
} |
||||
|
||||
set backgroundImage (value) { |
||||
this.canvas.style.backgroundImage = value ? `url(${value})` : '' |
||||
if (this.renderer.backgroundImage !== !!value) { |
||||
this.renderer.backgroundImage = !!value |
||||
this.renderer.resetDrawn() |
||||
this.renderer.scheduleDraw('background-image') |
||||
} |
||||
} |
||||
|
||||
get selectable () { |
||||
return this.canvas.classList.contains('selectable') |
||||
} |
||||
|
||||
set selectable (selectable) { |
||||
if (selectable) this.canvas.classList.add('selectable') |
||||
else this.canvas.classList.remove('selectable') |
||||
} |
||||
|
||||
/** |
||||
* Returns a CSS font string with the current font settings and the |
||||
* specified modifiers. |
||||
* @param {Object} modifiers |
||||
* @param {string} [modifiers.style] - the font style |
||||
* @param {string} [modifiers.weight] - the font weight |
||||
* @returns {string} a CSS font string |
||||
*/ |
||||
getFont (modifiers = {}) { |
||||
let fontStyle = modifiers.style || 'normal' |
||||
let fontWeight = modifiers.weight || 'normal' |
||||
return `${fontStyle} normal ${fontWeight} ${this.window.fontSize}px ${this.window.fontFamily}` |
||||
} |
||||
|
||||
/** |
||||
* Converts screen coordinates to grid coordinates. |
||||
* @param {number} x - x in pixels |
||||
* @param {number} y - y in pixels |
||||
* @param {boolean} rounded - whether to round the coord, used for select highlighting |
||||
* @returns {number[]} a tuple of (x, y) in cells |
||||
*/ |
||||
screenToGrid (x, y, rounded = false) { |
||||
let cellSize = this.getCellSize() |
||||
|
||||
x = x / this._windowScale - this._padding |
||||
y = y / this._windowScale - this._padding |
||||
x = Math.floor((x + (rounded ? cellSize.width / 2 : 0)) / cellSize.width) |
||||
y = Math.floor(y / cellSize.height) |
||||
x = Math.max(0, Math.min(this.window.width - 1, x)) |
||||
y = Math.max(0, Math.min(this.window.height - 1, y)) |
||||
|
||||
return [x, y] |
||||
} |
||||
|
||||
/** |
||||
* Converts grid coordinates to screen coordinates. |
||||
* @param {number} x - x in cells |
||||
* @param {number} y - y in cells |
||||
* @param {boolean} [withScale] - when true, will apply window scale |
||||
* @returns {number[]} a tuple of (x, y) in pixels |
||||
*/ |
||||
gridToScreen (x, y, withScale = false) { |
||||
let cellSize = this.getCellSize() |
||||
|
||||
return [x * cellSize.width, y * cellSize.height].map(v => this._padding + (withScale ? v * this._windowScale : v)) |
||||
} |
||||
|
||||
/** |
||||
* Update the character size, used for calculating the cell size. |
||||
* The space character is used for measuring. |
||||
* @returns {Object} the character size with `width` and `height` in pixels |
||||
*/ |
||||
updateCharSize () { |
||||
this.ctx.font = this.getFont() |
||||
|
||||
this.charSize = { |
||||
width: Math.floor(this.ctx.measureText(' ').width), |
||||
height: this.window.fontSize |
||||
} |
||||
|
||||
return this.charSize |
||||
} |
||||
|
||||
/** |
||||
* The cell size, which is the character size multiplied by the grid scale. |
||||
* @returns {Object} the cell size with `width` and `height` in pixels |
||||
*/ |
||||
getCellSize () { |
||||
return { |
||||
width: Math.ceil(this.charSize.width * this.window.gridScaleX), |
||||
height: Math.ceil(this.charSize.height * this.window.gridScaleY) |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Updates the canvas size if it changed |
||||
*/ |
||||
updateSize () { |
||||
// see below (this is just updating it)
|
||||
this._window.devicePixelRatio = Math.ceil(this._windowScale * (window.devicePixelRatio || 1)) |
||||
|
||||
let didChange = false |
||||
for (let key in this.windowState) { |
||||
if (this.windowState.hasOwnProperty(key) && this.windowState[key] !== this.window[key]) { |
||||
didChange = true |
||||
this.windowState[key] = this.window[key] |
||||
} |
||||
} |
||||
|
||||
if (didChange) { |
||||
const { |
||||
width, |
||||
height, |
||||
fitIntoWidth, |
||||
fitIntoHeight, |
||||
padding |
||||
} = this.window |
||||
const cellSize = this.getCellSize() |
||||
|
||||
// real height of the canvas element in pixels
|
||||
let realWidth = width * cellSize.width |
||||
let realHeight = height * cellSize.height |
||||
let originalWidth = realWidth |
||||
|
||||
if (fitIntoWidth && fitIntoHeight) { |
||||
let terminalAspect = realWidth / realHeight |
||||
let fitAspect = fitIntoWidth / fitIntoHeight |
||||
|
||||
if (terminalAspect < fitAspect) { |
||||
// align heights
|
||||
realHeight = fitIntoHeight - 2 * padding |
||||
realWidth = realHeight * terminalAspect |
||||
} else { |
||||
// align widths
|
||||
realWidth = fitIntoWidth - 2 * padding |
||||
realHeight = realWidth / terminalAspect |
||||
} |
||||
} |
||||
|
||||
// store new window scale
|
||||
this._windowScale = realWidth / originalWidth |
||||
|
||||
realWidth += 2 * padding |
||||
realHeight += 2 * padding |
||||
|
||||
// store padding
|
||||
this._padding = padding * (originalWidth / realWidth) |
||||
|
||||
// the DPR must be rounded to a very nice value to prevent gaps between cells
|
||||
let devicePixelRatio = this._window.devicePixelRatio = Math.ceil(this._windowScale * (window.devicePixelRatio || 1)) |
||||
|
||||
this.canvas.width = (width * cellSize.width + 2 * Math.round(this._padding)) * devicePixelRatio |
||||
this.canvas.style.width = `${realWidth}px` |
||||
this.canvas.height = (height * cellSize.height + 2 * Math.round(this._padding)) * devicePixelRatio |
||||
this.canvas.style.height = `${realHeight}px` |
||||
|
||||
this.updateCharSize() |
||||
|
||||
// the screen has been cleared (by changing canvas width)
|
||||
this.renderer.resetDrawn() |
||||
|
||||
// draw immediately; the canvas shouldn't flash
|
||||
this.renderer.draw('update-size') |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue