Skip to content

Commit 55883df

Browse files
coderofsalvationcoderofsalvation
committed
window-buttons in XR
1 parent 2b3c41f commit 55883df

File tree

6 files changed

+58
-25
lines changed

6 files changed

+58
-25
lines changed

‎com/dom.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ if( !AFRAME.components.dom ){
5050

5151
this
5252
.ensureOverlay()
53-
.addCSS()
5453
.createReactiveDOMElement()
5554
.assignUniqueID()
55+
.addCSS()
5656
.scaleDOMvsXR()
5757
.triggerKeyboardForInputs()
5858

‎com/helloworld-window.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ AFRAME.registerComponent('helloworld-window', {
4141
-->
4242
</div>`,
4343

44-
css: (me) => `.htmlform { padding:11px; }`
44+
css: (me) => `.htmlform { padding:11px; }
45+
`
4546

4647
},
4748

@@ -67,11 +68,16 @@ AFRAME.registerComponent('helloworld-window', {
6768
myvalue: function(e){ this.el.dom.querySelector('#myvalue').innerText = this.data.myvalue },
6869

6970
launcher: async function(){
70-
let s = await AFRAME.utils.require(this.requires)
71-
72-
// instance this component
73-
this.el.setAttribute("dom", "")
74-
this.el.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
71+
if( !this.el.getAttribute("dom") ){
72+
let s = await AFRAME.utils.require(this.requires)
73+
74+
// instance this component
75+
this.el.setAttribute("dom", "")
76+
this.el.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
77+
}else{
78+
// toggle visibility
79+
this.el.winbox[ this.el.winbox.min ? 'restore' : 'minimize' ]()
80+
}
7581
},
7682

7783
DOMready: function(){

‎com/isoterminal.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
*
1414
* | property | type | default | info |
1515
* |-------------------|-----------|------------------------|------|
16+
* | `title` | `string` | 'xrsh.iso' | window title |
1617
* | `iso` | `string` | https`//forgejo.isvery.ninja/assets/xrsh-buildroot/main/xrsh.iso" | |
1718
* | `overlayfs` | `string` | '' | zip URL/file to autoextract on top of filesystem |
1819
* | `width` | `number` | 800 ||
@@ -72,6 +73,7 @@ if( typeof AFRAME != 'undefined '){
7273
schema: {
7374
iso: { type:"string", "default":"https://forgejo.isvery.ninja/assets/xrsh-buildroot/main/xrsh.iso" },
7475
overlayfs: { type:"string"},
76+
title: { type:"string", "default":"xrsh.iso"},
7577
width: { type: 'number',"default": 800 },
7678
height: { type: 'number',"default": 600 },
7779
depth: { type: 'number',"default": 0.03 },
@@ -142,6 +144,7 @@ if( typeof AFRAME != 'undefined '){
142144
143145
.isoterminal{
144146
padding: ${me.com.data.padding}px;
147+
margin-top:-60px;
145148
width:100%;
146149
height:99%;
147150
resize: both;
@@ -244,18 +247,19 @@ if( typeof AFRAME != 'undefined '){
244247
-webkit-animation:none;
245248
}
246249
247-
.wb-body:has(> .isoterminal){
248-
background: #000C;
249-
overflow:hidden;
250+
.winbox#${me.el.uid} .wb-header{
251+
background: var(--xrsh-black) !important;
250252
}
251253
252-
.XR .wb-body:has(> .isoterminal){
253-
background: transparent;
254+
.wb-body:has(> .isoterminal){
255+
background: var(--xrsh-black);
256+
overflow:hidden;
254257
}
255258
256259
.XR .isoterminal{
257-
background: #000;
260+
background: transparent;
258261
}
262+
259263
.isoterminal *{
260264
font-size: 14px;
261265
font-family: "Cousine",Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
@@ -342,7 +346,7 @@ if( typeof AFRAME != 'undefined '){
342346
this.term.emit('term_init', {instance, aEntity:this})
343347
//instance.winbox.resize(720,380)
344348
let size = `width: ${this.data.width}; height: ${this.data.height}`
345-
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-max, no-resize; grabbable: components.html.el.object3D.children.${this.el.children.length}`)
349+
instance.setAttribute("window", `title: ${this.data.title}; uid: ${instance.uid}; attach: #overlay; dom: #${instance.dom.id}; ${size}; min: ${this.data.minimized}; max: ${this.data.maximized}; class: no-full, no-close, no-max, no-resize; grabbable: components.html.el.object3D.children.${this.el.children.length}`)
346350
})
347351

348352
instance.addEventListener('window.oncreate', (e) => {

‎com/isoterminal/ISOTerminal.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,18 @@ function ISOTerminal(instance,opts){
1717

1818
ISOTerminal.prototype.emit = function(event,data,sender){
1919
data = data || false
20-
// *TODO* wrap certain events into this.preventFrameDrop( () => { .. }) to boost performance
2120
const evObj = new CustomEvent(event, {detail: data} )
2221
// forward event to worker/instance/AFRAME element or component-function
2322
// this feels complex, but actually keeps event- and function-names more concise in codebase
24-
this.dispatchEvent( evObj )
25-
if( sender != "instance" && this.instance ) this.instance.dispatchEvent(evObj)
26-
if( sender != "worker" && this.worker ) this.worker.postMessage({event,data}, PromiseWorker.prototype.getTransferable(data) )
27-
if( sender !== undefined && typeof this[event] == 'function' ) this[event].apply(this, data && data.push ? data : [data] )
23+
let fire = () => {
24+
this.dispatchEvent( evObj )
25+
if( sender != "instance" && this.instance ) this.instance.dispatchEvent(evObj)
26+
if( sender != "worker" && this.worker ) this.worker.postMessage({event,data}, PromiseWorker.prototype.getTransferable(data) )
27+
if( sender !== undefined && typeof this[event] == 'function' ) this[event].apply(this, data && data.push ? data : [data] )
28+
}
29+
if( event.match(/^serial/) ){
30+
this.preventFrameDrop( fire )
31+
}else fire()
2832
}
2933

3034
ISOTerminal.addEventListener = (event,cb) => {

‎com/isoterminal/feat/jsconsole.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
ISOTerminal.prototype.redirectConsole = function(handler){
2-
const log = console.log;
3-
const dir = console.dir;
4-
const err = console.error;
5-
const warn = console.warn;
2+
const log = console._log = console.log;
3+
const dir = console._dir = console.dir;
4+
const err = console._error = console.error;
5+
const warn = console._warn = console.warn;
66
const addLineFeeds = (str) => typeof str == 'string' ? str.replace(/\n/g,"\r\n") : str
77

88
console.log = (...args)=>{
@@ -37,12 +37,13 @@ ISOTerminal.prototype.enableConsole = function(opts){
3737
let _str = typeof str == 'string' ? str : JSON.stringify(str)
3838
let finalStr = "";
3939
prefix = prefix ? prefix+' ' : ''
40-
_str.trim().split("\n").map( (line) => {
40+
String(_str).trim().split("\n").map( (line) => {
4141
finalStr += `${opts.stdout ? '' : "\x1b[38;5;165m/dev/browser: \x1b[0m"}`+prefix+line+'\n'
4242
})
4343
if( opts.stdout ){
44-
this.emit('serial-output-string', finalStr)
44+
this.emit('serial-output-string', finalStr, "worker")
4545
}else this.emit('append_file', ["/dev/browser/console",finalStr])
46+
this.lastStr = finalStr
4647
})
4748

4849
window.addEventListener('error', function(event) {

‎com/window.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@ AFRAME.registerComponent('window', {
9191
this.el.components['obb-collider'].data.trackedObject3D = this.data.grabbable
9292
this.el.components['obb-collider'].update()
9393
},1000)
94+
95+
this.patchButtons(e)
9496
},
9597
onclose: close
9698

@@ -112,7 +114,23 @@ AFRAME.registerComponent('window', {
112114

113115
show: function(state){
114116
this.el.dom.closest('.winbox').style.display = state ? '' : 'none'
117+
},
118+
119+
// the buttons don't work in XR because HTMLMesh does not understand onclick on divs
120+
patchButtons: function(e){
121+
let wEl = e.mount;
122+
let controls = [...wEl.closest(".winbox").querySelectorAll(".wb-control span")]
123+
controls.map( (c) => {
124+
if( c.className == "wb-close"){
125+
let btn = document.createElement("button")
126+
btn.className = "xr-close"
127+
btn.innerText = "x"
128+
btn.addEventListener("click", (e) => { } )// this will bubble up (to click ancestor in XR)
129+
c.appendChild(btn)
130+
}
131+
})
115132
}
133+
116134
})
117135

118136
AFRAME.utils.positionObjectNextToNeighbor = function positionObjectNextToNeighbor(object, lastNeighbor = null, margin ){

0 commit comments

Comments
 (0)