269 lines
8.4 KiB
JavaScript
269 lines
8.4 KiB
JavaScript
/*
|
|
* MIT License
|
|
*
|
|
* Copyright (c) 2019
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
* of this software and associated documentation files (the "Software"), to deal
|
|
* in the Software without restriction, including without limitation the rights
|
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
* copies of the Software, and to permit persons to whom the Software is
|
|
* furnished to do so, subject to the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be included in all
|
|
* copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
* SOFTWARE.
|
|
*
|
|
* 2019 Mauve Ranger
|
|
* 2024 Leon van Kammen
|
|
*/
|
|
|
|
let terminalInstance = 0
|
|
|
|
const TERMINAL_THEME = {
|
|
theme_foreground: {
|
|
// 'default': '#ffffff'
|
|
},
|
|
theme_background: {
|
|
// 'default': '#000'
|
|
},
|
|
theme_cursor: {
|
|
// 'default': '#ffffff'
|
|
},
|
|
theme_selection: {
|
|
// 'default': 'rgba(255, 255, 255, 0.3)'
|
|
},
|
|
theme_black: {
|
|
// 'default': '#000000'
|
|
},
|
|
theme_red: {
|
|
// 'default': '#e06c75'
|
|
},
|
|
theme_brightRed: {
|
|
// 'default': '#e06c75'
|
|
},
|
|
theme_green: {
|
|
// 'default': '#A4EFA1'
|
|
},
|
|
theme_brightGreen: {
|
|
// 'default': '#A4EFA1'
|
|
},
|
|
theme_brightYellow: {
|
|
// 'default': '#EDDC96'
|
|
},
|
|
theme_yellow: {
|
|
// 'default': '#EDDC96'
|
|
},
|
|
theme_magenta: {
|
|
// 'default': '#e39ef7'
|
|
},
|
|
theme_brightMagenta: {
|
|
// 'default': '#e39ef7'
|
|
},
|
|
theme_cyan: {
|
|
// 'default': '#5fcbd8'
|
|
},
|
|
theme_brightBlue: {
|
|
// 'default': '#5fcbd8'
|
|
},
|
|
theme_brightCyan: {
|
|
// 'default': '#5fcbd8'
|
|
},
|
|
theme_blue: {
|
|
// 'default': '#5fcbd8'
|
|
},
|
|
theme_white: {
|
|
// 'default': '#d0d0d0'
|
|
},
|
|
theme_brightBlack: {
|
|
// 'default': '#808080'
|
|
},
|
|
theme_brightWhite: {
|
|
// 'default': '#ffffff'
|
|
}
|
|
}
|
|
|
|
AFRAME.registerComponent('xterm', {
|
|
schema: Object.assign({
|
|
XRrenderer: { type: 'string', default: 'canvas', },
|
|
cols: { type: 'number', default: 110, },
|
|
rows: { type: 'number', default: Math.floor( (window.innerHeight * 0.7 ) * 0.054 ) },
|
|
canvasLatency:{ type:'number', default: 200 }
|
|
}, TERMINAL_THEME),
|
|
|
|
write: function(message) {
|
|
this.term.write(message)
|
|
},
|
|
init: function () {
|
|
const terminalElement = document.createElement('div')
|
|
terminalElement.setAttribute('style', `
|
|
width: 800px;
|
|
height: ${Math.floor( 800 * 0.527 )}px;
|
|
overflow: hidden;
|
|
`)
|
|
|
|
this.el.terminalElement = terminalElement
|
|
|
|
if( this.data.XRrenderer == 'canvas' ){
|
|
// setup slightly bigger black backdrop (this.el.getObject3D("mesh"))
|
|
// and terminal text (this.el.planeText.getObject("mesh"))
|
|
const w = 2;
|
|
const h = (this.data.rows*5/this.data.cols)
|
|
this.el.setAttribute("geometry",`primitive: box; width:${w}; height:${h}; depth: -0.12`)
|
|
this.el.setAttribute("material","shader:flat; color:black; opacity:0.5; transparent:true; ")
|
|
this.el.planeText = document.createElement('a-entity')
|
|
this.el.planeText.setAttribute("geometry",`primitive: plane; width:${w}; height:${h}`)
|
|
this.el.appendChild(this.el.planeText)
|
|
|
|
// we switch between dom/canvas rendering because canvas looks pixely in nonimmersive mode
|
|
this.el.sceneEl.addEventListener('enter-vr', this.enterImmersive.bind(this) )
|
|
this.el.sceneEl.addEventListener('enter-ar', this.enterImmersive.bind(this) )
|
|
this.el.sceneEl.addEventListener('exit-vr', this.exitImmersive.bind(this) )
|
|
this.el.sceneEl.addEventListener('exit-ar', this.exitImmersive.bind(this) )
|
|
|
|
}
|
|
|
|
this.tick = AFRAME.utils.throttleLeadingAndTrailing( () => {
|
|
if( this.el.sceneEl.renderer.xr.isPresenting ){
|
|
// workaround
|
|
// xterm relies on window.requestAnimationFrame (which is not called WebXR immersive mode)
|
|
//this.term._core.viewport._innerRefresh()
|
|
this.term._core.renderer._renderDebouncer._innerRefresh()
|
|
}
|
|
}, this.data.canvasLatency)
|
|
|
|
// Build up a theme object
|
|
const theme = Object.keys(this.data).reduce((theme, key) => {
|
|
if (!key.startsWith('theme_')) return theme
|
|
const data = this.data[key]
|
|
if(!data) return theme
|
|
theme[key.slice('theme_'.length)] = data
|
|
return theme
|
|
}, {})
|
|
|
|
this.fontSize = 14
|
|
|
|
const term = this.term = new Terminal({
|
|
logLevel:"off",
|
|
theme: theme,
|
|
allowTransparency: true,
|
|
cursorBlink: true,
|
|
disableStdin: false,
|
|
rows: this.data.rows,
|
|
cols: this.data.cols,
|
|
fontFamily: 'Cousine, monospace',
|
|
fontSize: this.fontSize,
|
|
lineHeight: 1.15,
|
|
useFlowControl: true,
|
|
rendererType: this.renderType // 'dom' // 'canvas'
|
|
})
|
|
|
|
this.term.open(terminalElement)
|
|
this.term.focus()
|
|
this.setRenderType('dom')
|
|
|
|
terminalElement.querySelector('.xterm-viewport').style.background = 'transparent'
|
|
|
|
// now we can scale canvases to the parent element
|
|
const $screen = terminalElement.querySelector('.xterm-screen')
|
|
$screen.style.width = '100%'
|
|
|
|
term.on('refresh', AFRAME.utils.throttleLeadingAndTrailing( () => this.update(), 150 ) )
|
|
term.on('data', (data) => {
|
|
this.el.emit('xterm-input', data)
|
|
})
|
|
|
|
this.el.addEventListener('serial-output-byte', (e) => {
|
|
const byte = e.detail
|
|
var chr = String.fromCharCode(byte);
|
|
this.term.write(chr)
|
|
})
|
|
|
|
this.el.addEventListener('serial-output-string', (e) => {
|
|
this.term.write(e.detail)
|
|
})
|
|
|
|
},
|
|
|
|
update: function(){
|
|
if( this.renderType == 'canvas' ){
|
|
const material = this.el.planeText.getObject3D('mesh').material
|
|
if (!material.map ) return
|
|
if( this.cursorCanvas ) this.canvasContext.drawImage(this.cursorCanvas, 0,0)
|
|
else console.log("no cursorCanvas")
|
|
material.map.needsUpdate = true
|
|
//material.needsUpdate = true
|
|
}
|
|
},
|
|
|
|
setRenderType: function(type){
|
|
|
|
|
|
if( type.match(/(dom|canvas)/) ){
|
|
|
|
if( type == 'dom'){
|
|
this.el.dom.appendChild(this.el.terminalElement)
|
|
this.term.setOption('fontSize', this.fontSize )
|
|
this.term.setOption('rendererType',type )
|
|
this.renderType = type
|
|
}
|
|
|
|
if( type == 'canvas'){
|
|
this.el.appendChild(this.el.terminalElement)
|
|
this.term.setOption('fontSize', this.fontSize * 3 )
|
|
this.term.setOption('rendererType',type )
|
|
this.renderType = type
|
|
this.update()
|
|
setTimeout( () => {
|
|
this.canvas = this.el.terminalElement.querySelector('.xterm-text-layer')
|
|
this.canvas.id = "xterm-canvas"
|
|
this.canvasContext = this.canvas.getContext('2d')
|
|
this.cursorCanvas = this.el.terminalElement.querySelector('.xterm-cursor-layer')
|
|
// Create a texture from the canvas
|
|
const canvasTexture = new THREE.Texture(this.canvas)
|
|
//canvasTexture.minFilter = THREE.NearestFilter //LinearFilter
|
|
//canvasTexture.magFilter = THREE.LinearMipMapLinearFilter //THREE.NearestFilter //LinearFilter
|
|
canvasTexture.needsUpdate = true; // Ensure the texture updates
|
|
let plane = this.el.planeText.getObject3D("mesh") //this.el.getObject3D('mesh')
|
|
if( plane.material ) plane.material.dispose()
|
|
plane.material = new THREE.MeshBasicMaterial({
|
|
map: canvasTexture, // Set the texture from the canvas
|
|
transparent: false, // Set transparency
|
|
//side: THREE.DoubleSide // Set to double-sided rendering
|
|
//blending: THREE.AdditiveBlending
|
|
});
|
|
this.el.object3D.scale.x = 0.2
|
|
this.el.object3D.scale.y = 0.2
|
|
this.el.object3D.scale.z = 0.2
|
|
},100)
|
|
}
|
|
|
|
this.el.terminalElement.style.opacity = type == 'canvas' ? 0 : 1
|
|
|
|
}
|
|
},
|
|
|
|
enterImmersive: function(){
|
|
if( this.mode == 'immersive' ) return
|
|
this.el.object3D.visible = true
|
|
this.mode = "immersive"
|
|
this.setRenderType('canvas')
|
|
this.term.focus()
|
|
},
|
|
|
|
exitImmersive: function(){
|
|
if( this.mode == 'nonimmersive' ) return
|
|
this.el.object3D.visible = false
|
|
this.mode = "nonimmersive"
|
|
this.setRenderType('dom')
|
|
},
|
|
|
|
})
|