Compare commits
3 Commits
feat/v86-u
...
main
Author | SHA1 | Date |
---|---|---|
Leon van Kammen | 7ef7d68eea | |
Leon van Kammen | 16eb8bfdbf | |
Leon van Kammen | 88e3d4f04d |
|
@ -1,187 +0,0 @@
|
||||||
if( AFRAME.components.codemirror ) delete AFRAME.components.codemirror
|
|
||||||
|
|
||||||
AFRAME.registerComponent('codemirror', {
|
|
||||||
schema: {
|
|
||||||
file: { type:"string"},
|
|
||||||
term: { type:"selector", default: "[isoterminal]" },
|
|
||||||
width: { type:"number", default:700},
|
|
||||||
height: { type:"number", default:500},
|
|
||||||
},
|
|
||||||
|
|
||||||
init: function () {
|
|
||||||
this.el.object3D.visible = false
|
|
||||||
if( !this.data.term || !this.data.term.components ) throw 'codemirror cannot get isoterminal'
|
|
||||||
if( this.data.file && this.data.file[0] != '/'){
|
|
||||||
this.data.file = "root/"+this.data.file
|
|
||||||
}
|
|
||||||
this.isoterminal = this.data.term.components.isoterminal.term
|
|
||||||
//this.el.innerHTML = ` `
|
|
||||||
this.requireAll()
|
|
||||||
},
|
|
||||||
|
|
||||||
requireAll: async function(){
|
|
||||||
let s = await AFRAME.utils.require(this.requires)
|
|
||||||
setTimeout( () => this.el.setAttribute("dom",""), 300 )
|
|
||||||
},
|
|
||||||
|
|
||||||
requires:{
|
|
||||||
window: "com/window.js"
|
|
||||||
},
|
|
||||||
|
|
||||||
dom: {
|
|
||||||
scale: 0.5,
|
|
||||||
events: ['click','keydown'],
|
|
||||||
html: (me) => `<div class="codemirror">
|
|
||||||
</div>`,
|
|
||||||
|
|
||||||
css: (me) => `.CodeMirror{
|
|
||||||
width: ${me.com.data.width}px !important;
|
|
||||||
height: ${me.com.data.height-30}px !important;
|
|
||||||
}
|
|
||||||
.codemirror *{
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: "Cousine",Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
|
|
||||||
font-weight:500 !important;
|
|
||||||
letter-spacing: 0 !important;
|
|
||||||
text-shadow: 0px 0px 10px #F075;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-body:has(> .codemirror){
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CodeMirror {
|
|
||||||
margin-top:18px;
|
|
||||||
}
|
|
||||||
.cm-s-shadowfox.CodeMirror {
|
|
||||||
background:transparent !important;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
},
|
|
||||||
|
|
||||||
createEditor: function(value){
|
|
||||||
this.el.setAttribute("window", `title: codemirror; uid: ${this.el.dom.id}; attach: #overlay; dom: #${this.el.dom.id}; width: ${this.data.width}px; height: ${this.data.height}px`)
|
|
||||||
this.editor = CodeMirror( this.el.dom, {
|
|
||||||
value,
|
|
||||||
mode: "htmlmixed",
|
|
||||||
lineNumbers: true,
|
|
||||||
styleActiveLine: true,
|
|
||||||
matchBrackets: true,
|
|
||||||
Tab: "indentMore",
|
|
||||||
defaultTab: function(cm) {
|
|
||||||
if (cm.somethingSelected()) cm.indentSelection("add");
|
|
||||||
else cm.replaceSelection(" ", "end");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.editor.setOption("theme", "shadowfox")
|
|
||||||
this.editor.updateFile = AFRAME.utils.throttle( (file,str) => {
|
|
||||||
this.updateFile(file,str)
|
|
||||||
}, 1500)
|
|
||||||
this.editor.on('change', (instance,changeObj) => {
|
|
||||||
this.editor.updateFile( this.data.file, instance.getValue() )
|
|
||||||
})
|
|
||||||
|
|
||||||
this
|
|
||||||
.handleFocus()
|
|
||||||
|
|
||||||
setTimeout( () => {
|
|
||||||
this.el.setAttribute("html-as-texture-in-xr", `domid: #${this.el.dom.id}`) // only show aframe-html in xr
|
|
||||||
},1500)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleFocus: function(){
|
|
||||||
const focus = (showdom) => (e) => {
|
|
||||||
if( this.editor ){
|
|
||||||
this.editor.focus()
|
|
||||||
}
|
|
||||||
if( this.el.components.window && this.data.renderer == 'canvas'){
|
|
||||||
this.el.components.window.show( showdom )
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.el.addEventListener('obbcollisionstarted', focus(false) )
|
|
||||||
this.el.sceneEl.addEventListener('enter-vr', focus(false) )
|
|
||||||
this.el.sceneEl.addEventListener('enter-ar', focus(false) )
|
|
||||||
this.el.sceneEl.addEventListener('exit-vr', focus(true) )
|
|
||||||
this.el.sceneEl.addEventListener('exit-ar', focus(true) )
|
|
||||||
},
|
|
||||||
|
|
||||||
updateFile: async function(file,str){
|
|
||||||
// we don't do via shellcmd: isoterminal.exec(`echo '${str}' > ${file}`,1)
|
|
||||||
// as it would require all kindof ugly stringescaping
|
|
||||||
console.log("updating "+file)
|
|
||||||
await this.isoterminal.worker.update_file(file, this.isoterminal.convert.toUint8Array(str) )
|
|
||||||
this.isoterminal.exec("touch "+file) // *FIXME* notify filesystem (why does inotifyd need this? v86's 9pfees is cached?)
|
|
||||||
},
|
|
||||||
|
|
||||||
events:{
|
|
||||||
|
|
||||||
// component events
|
|
||||||
DOMready: function(e){
|
|
||||||
|
|
||||||
this.isoterminal.worker.read_file(this.data.file)
|
|
||||||
.then( this.isoterminal.convert.Uint8ArrayToString )
|
|
||||||
.then( (str) => {
|
|
||||||
console.log("creating editor")
|
|
||||||
this.createEditor( str )
|
|
||||||
})
|
|
||||||
.catch( (e) => {
|
|
||||||
console.log("error opening "+this.data.file+", creating new one")
|
|
||||||
this.createEditor("")
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
manifest: { // HTML5 manifest to identify app to xrsh
|
|
||||||
"short_name": "Paste",
|
|
||||||
"name": "Paste",
|
|
||||||
"icons": [
|
|
||||||
{
|
|
||||||
"src": "https://css.gg/clipboard.svg",
|
|
||||||
"type": "image/svg+xml",
|
|
||||||
"sizes": "512x512"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"id": "/?source=pwa",
|
|
||||||
"start_url": "/?source=pwa",
|
|
||||||
"background_color": "#3367D6",
|
|
||||||
"display": "standalone",
|
|
||||||
"scope": "/",
|
|
||||||
"theme_color": "#3367D6",
|
|
||||||
"shortcuts": [
|
|
||||||
{
|
|
||||||
"name": "What is the latest news?",
|
|
||||||
"cli":{
|
|
||||||
"usage": "helloworld <type> [options]",
|
|
||||||
"example": "helloworld news",
|
|
||||||
"args":{
|
|
||||||
"--latest": {type:"string"}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"short_name": "Today",
|
|
||||||
"description": "View weather information for today",
|
|
||||||
"url": "/today?source=pwa",
|
|
||||||
"icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"description": "Paste the clipboard",
|
|
||||||
"screenshots": [
|
|
||||||
{
|
|
||||||
"src": "/images/screenshot1.png",
|
|
||||||
"type": "image/png",
|
|
||||||
"sizes": "540x720",
|
|
||||||
"form_factor": "narrow"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"help":`
|
|
||||||
Helloworld application
|
|
||||||
|
|
||||||
This is a help file which describes the application.
|
|
||||||
It will be rendered thru troika text, and will contain
|
|
||||||
headers based on non-punctualized lines separated by linebreaks,
|
|
||||||
in above's case "\nHelloworld application\n" will qualify as header.
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
|
@ -229,9 +229,6 @@ if( typeof AFRAME != 'undefined '){
|
||||||
|
|
||||||
instance.addEventListener('DOMready', () => {
|
instance.addEventListener('DOMready', () => {
|
||||||
this.setupVT100(instance)
|
this.setupVT100(instance)
|
||||||
setTimeout( () => {
|
|
||||||
instance.setAttribute("html-as-texture-in-xr", `domid: #term; faceuser: true`)
|
|
||||||
},100)
|
|
||||||
//instance.winbox.resize(720,380)
|
//instance.winbox.resize(720,380)
|
||||||
let size = `width: ${this.data.width}; height: ${this.data.height}`
|
let size = `width: ${this.data.width}; height: ${this.data.height}`
|
||||||
instance.setAttribute("window", `title: xrsh.iso; uid: ${instance.uid}; attach: #overlay; dom: #${instance.dom.id}; ${size}; min: ${this.data.minimized}; max: ${this.data.maximized}; class: no-full, no-resize, no-move`)
|
instance.setAttribute("window", `title: xrsh.iso; uid: ${instance.uid}; attach: #overlay; dom: #${instance.dom.id}; ${size}; min: ${this.data.minimized}; max: ${this.data.maximized}; class: no-full, no-resize, no-move`)
|
||||||
|
@ -239,6 +236,8 @@ if( typeof AFRAME != 'undefined '){
|
||||||
|
|
||||||
instance.addEventListener('window.oncreate', (e) => {
|
instance.addEventListener('window.oncreate', (e) => {
|
||||||
instance.dom.classList.add('blink')
|
instance.dom.classList.add('blink')
|
||||||
|
// canvas to texture texture
|
||||||
|
instance.setAttribute("html-as-texture-in-xr", `domid: .winbox#${instance.uid}; faceuser: true`)
|
||||||
|
|
||||||
// run iso
|
// run iso
|
||||||
let opts = {dom:instance.dom}
|
let opts = {dom:instance.dom}
|
||||||
|
|
|
@ -42,11 +42,17 @@ this.runISO = function(opts){
|
||||||
/*
|
/*
|
||||||
* forward events/functions so non-worker world can reach them
|
* forward events/functions so non-worker world can reach them
|
||||||
*/
|
*/
|
||||||
this.create_file = async function(){ return emulator.create_file.apply(emulator, arguments[0]) }
|
|
||||||
this.read_file = async function(){ return emulator.read_file.apply(emulator, arguments[0]) }
|
// stripping '/mnt' is needed (the 9p mounted fs does not know about this)
|
||||||
this.read_file_world = async function(){ return emulator.fs9p.read_file_world.apply(emulator.fs9p, arguments[0]) }
|
const stripMountDir = (arr) => {
|
||||||
this.append_file = async function(){ emulator.fs9p.append_file.apply(emulator.fs9p, arguments[0]) }
|
arr[0] = String(arr[0]).replace(/^\/mnt/,'')
|
||||||
this.update_file = async function(){ emulator.fs9p.update_file.apply(emulator.fs9p, arguments[0]) }
|
return arr
|
||||||
|
}
|
||||||
|
this.create_file = async function(){ return emulator.create_file.apply(emulator, stripMountDir(arguments[0]) ) }
|
||||||
|
this.read_file = async function(){ return emulator.read_file.apply(emulator, stripMountDir(arguments[0]) ) }
|
||||||
|
this.read_file_world = async function(){ return emulator.fs9p.read_file_world.apply(emulator.fs9p, stripMountDir(arguments[0]) ) }
|
||||||
|
this.append_file = async function(){ emulator.fs9p.append_file.apply(emulator.fs9p, stripMountDir(arguments[0])) }
|
||||||
|
this.update_file = async function(){ emulator.fs9p.update_file.apply(emulator.fs9p, stripMountDir(arguments[0])) }
|
||||||
|
|
||||||
// filename will be read from 9pfs: "/mnt/"+filename
|
// filename will be read from 9pfs: "/mnt/"+filename
|
||||||
emulator.readFromPipe = function(filename,cb){
|
emulator.readFromPipe = function(filename,cb){
|
||||||
|
|
|
@ -27,6 +27,20 @@ AFRAME.registerComponent('window', {
|
||||||
await AFRAME.utils.require(this.dependencies)
|
await AFRAME.utils.require(this.dependencies)
|
||||||
if( !this.el.dom ) return console.error('window element requires dom-component as dependency')
|
if( !this.el.dom ) return console.error('window element requires dom-component as dependency')
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
let e = {halt:false}
|
||||||
|
this.el.emit('window.onclose',e)
|
||||||
|
if( e.halt ) return true
|
||||||
|
this.data.dom.style.display = 'none';
|
||||||
|
if( this.el.parentNode ) this.el.remove() //parentElement.remove( this.el )
|
||||||
|
this.data.dom.parentElement.remove()
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
this.el.addEventListener('close', () => {
|
||||||
|
close()
|
||||||
|
this.el.winbox.close()
|
||||||
|
})
|
||||||
|
|
||||||
this.el.dom.style.display = 'none'
|
this.el.dom.style.display = 'none'
|
||||||
let winbox = this.el.winbox = new WinBox( this.data.title, {
|
let winbox = this.el.winbox = new WinBox( this.data.title, {
|
||||||
class: this.data.class,
|
class: this.data.class,
|
||||||
|
@ -51,15 +65,8 @@ AFRAME.registerComponent('window', {
|
||||||
this.el.components['obb-collider'].update()
|
this.el.components['obb-collider'].update()
|
||||||
},1000)
|
},1000)
|
||||||
},
|
},
|
||||||
onclose: () => {
|
onclose: close
|
||||||
let e = {halt:false}
|
|
||||||
this.el.emit('window.onclose',e)
|
|
||||||
if( e.halt ) return true
|
|
||||||
this.data.dom.style.display = 'none';
|
|
||||||
if( this.el.parentNode ) this.el.remove() //parentElement.remove( this.el )
|
|
||||||
this.data.dom.parentElement.remove()
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
this.data.dom.style.display = '' // show
|
this.data.dom.style.display = '' // show
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue