allow global app components

This commit is contained in:
Leon van Kammen 2024-03-07 17:34:37 +01:00
parent fbd5fd4429
commit 375f30ef70
1 changed files with 52 additions and 42 deletions

View File

@ -5,6 +5,8 @@ AFRAME.app = new Proxy({
order:0, order:0,
components: {}, // component-strings in this array are automatically
// added to each app
add(component, entity){ add(component, entity){
// categorize by component to prevent similar apps loading duplicate dependencies simultaniously // categorize by component to prevent similar apps loading duplicate dependencies simultaniously
this[component] = this[component] || [] this[component] = this[component] || []
@ -34,7 +36,7 @@ AFRAME.app = new Proxy({
* This is the abstract 'app' component * This is the abstract 'app' component
*/ */
AFRAME.registerComponent('app', { appComponent = {
schema:{ schema:{
"uri":{ type:"string"} "uri":{ type:"string"}
}, },
@ -43,7 +45,11 @@ AFRAME.registerComponent('app', {
"app:ready": function(){ "app:ready": function(){
let {id,component,type} = this.parseAppURI(this.data.uri) let {id,component,type} = this.parseAppURI(this.data.uri)
AFRAME.app[component].map( (app) => { AFRAME.app[component].map( (app) => {
if( !app.el.getAttribute(component) ) app.el.setAttribute(component,app.data) if( !app.el.getAttribute(component) ){
if( AFRAME.components[ component ] ){
app.el.setAttribute(component,app.data)
}else console.warn(`${component} was not fully downloaded yet (${app.data.uri})`)
}
}) })
}, },
"requires:ready": function(){ "requires:ready": function(){
@ -115,7 +121,10 @@ AFRAME.registerComponent('app', {
}) })
} }
}) }
AFRAME.registerComponent('app', appComponent)
AFRAME.registerComponent('com', appComponent)
/* /*
* Here are monkeypatched AFRAME component prototype functions * Here are monkeypatched AFRAME component prototype functions
@ -151,22 +160,16 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
overlay.id = "overlay" overlay.id = "overlay"
document.body.appendChild(overlay) document.body.appendChild(overlay)
document.querySelector("a-scene").setAttribute("webxr","overlayElement:#overlay") document.querySelector("a-scene").setAttribute("webxr","overlayElement:#overlay")
// let menu = document.createElement('div')
// menu.id = 'iconmenu'
// document.body.appendChild(menu)
} }
// // add menu button const reactify = (el,aframe) => new Proxy(this.data,{
// if( this.manifest && this.manifest.icons ){ get(me,k,v) { return me[k]
// let btn = document.createElement('button') },
// btn.app = this set(me,k,v){
// if( this.manifest.icons.length ){ me[k] = v
// btn.innerHTML = `<img src="${this.manifest.icons[0].src}"/>` aframe.emit(k,{el,k,v})
// }else btn.innerText = this.manifest.short_name }
// btn.setAttribute("alt", this.manifest.name ) })
// btn.addEventListener('click', (e) => this.el.emit('launcher',{}) )
// document.querySelector("#iconmenu").appendChild(btn)
// }
// reactify components with dom-definition // reactify components with dom-definition
if( this.data.uri && this.dom && !this.el.dom ){ if( this.data.uri && this.dom && !this.el.dom ){
@ -174,14 +177,6 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
tasks = { tasks = {
createReactiveDOMElement: () => { createReactiveDOMElement: () => {
const reactify = (el,aframe) => new Proxy(this.data,{
get(me,k,v) { return me[k]
},
set(me,k,v){
me[k] = v
aframe.emit(k,{el,k,v})
}
})
this.el.dom = document.createElement('div') this.el.dom = document.createElement('div')
this.el.dom.className = this.parseAppURI(this.data.uri).component this.el.dom.className = this.parseAppURI(this.data.uri).component
this.el.dom.innerHTML = this.dom.html(this) this.el.dom.innerHTML = this.dom.html(this)
@ -212,6 +207,13 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
return tasks return tasks
}, },
initAutoComponents: () => {
for ( let i in AFRAME.app.components ) {
this.el.setAttribute( i, AFRAME.app.components[i] )
}
return tasks
},
triggerKeyboardForInputs: () => { triggerKeyboardForInputs: () => {
// https://developer.oculus.com/documentation/web/webxr-keyboard ; // https://developer.oculus.com/documentation/web/webxr-keyboard ;
[...this.el.dom.querySelectorAll('[type=text]')].map( (input) => { [...this.el.dom.querySelectorAll('[type=text]')].map( (input) => {
@ -232,16 +234,24 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
.scaleDOMvsXR() .scaleDOMvsXR()
.triggerKeyboardForInputs() .triggerKeyboardForInputs()
.setupListeners() .setupListeners()
.initAutoComponents()
document.querySelector('#overlay').appendChild(this.el.dom) document.querySelector('#overlay').appendChild(this.el.dom)
this.el.emit('DOMready',{el: this.el.dom}) this.el.emit('DOMready',{el: this.el.dom})
} }else this.data = reactify( this.el, this.el )
// assign unique app id // assign unique app id
if( !this.el.uid ) this.el.uid = '_'+String(Math.random()).substr(10) if( !this.el.uid ) this.el.uid = '_'+String(Math.random()).substr(10)
if( this.requires ) this.require( this.requires, 'requires:ready' ) // require coms
else this.el.emit('requires:ready') let requires = {}
for ( let i in AFRAME.app.components ) {
if( !AFRAME.components[i] ) requires[i] = AFRAME.app.components[i]
}
if( this.requires ) requires = {...requires, ...this.requires }
if( Object.values(requires).length ) this.require( requires, 'requires:ready' )
else this.el.emit('requires:ready' )
// mark app as being initialized // mark app as being initialized
this.isApp = true this.isApp = true