main: work in progress [might break]

com/data2event.js

@@ -24,7 +24,9 @@ AFRAME.registerComponent('data2event',{
     setTimeout( () => {
       for( let i in this.el.components ){
         let com = this.el.components[i]
-        com.data = this.reactify( this.el, com.data)
+        if( typeof com.data == 'object' ){
+          com.data = this.reactify( this.el, com.data)
+        }
       }
     },50)
   },

com/dom.js

@@ -46,15 +46,13 @@ AFRAME.registerComponent('dom',{
       return console.warn('dom.js did not find a .dom object inside component')
     }
 
-    console.dir(this.dom)
-
     this
     .ensureOverlay()
     .addCSS()
     .createReactiveDOMElement()
+    .assignUniqueID()
     .scaleDOMvsXR()
     .triggerKeyboardForInputs()
-    .setupListeners()
 
     document.querySelector('#overlay').appendChild(this.el.dom)
     this.el.emit('DOMready',{el: this.el.dom})
@@ -89,13 +87,18 @@ AFRAME.registerComponent('dom',{
     this.el.dom = document.createElement('div')
     this.el.dom.innerHTML = this.dom.html(this)
     this.el.dom.className = this.dom.attrName 
-    console.dir(this.com.data)
     this.com.data = this.reactify( this.el, this.com.data )
     if( this.dom.events ) this.dom.events.map( (e) => this.el.dom.addEventListener(e, (ev) => this.el.emit(e,ev) ) )
     this.el.dom = this.el.dom.children[0]
     return this
   },
 
+  assignUniqueID: function(){
+    // assign unique app id so it's easy to reference (by html-mesh component e.g.)
+    if( !this.el.uid ) this.el.uid = '_'+String(Math.random()).substr(10)
+    return this
+  },
+
   addCSS: function(){
     if( this.dom.css && !document.head.querySelector(`style#${this.attrName}`) ){
       document.head.innerHTML += `<style id="${this.attrName}">${this.dom.css(this)}</style>`
@@ -108,15 +111,6 @@ AFRAME.registerComponent('dom',{
     return this
   },
 
-  setupListeners: function(){
-    this.el.sceneEl.addEventListener('apps:2D', () => this.el.setAttribute('visible', false) )
-    this.el.sceneEl.addEventListener('apps:XR', () => {
-      this.el.setAttribute('visible', true)
-      this.el.setAttribute("html",`html:#${this.el.uid}; cursor:#cursor`)
-    })
-    return this
-  },
-
   triggerKeyboardForInputs: function(){
     // https://developer.oculus.com/documentation/web/webxr-keyboard ;
     [...this.el.dom.querySelectorAll('[type=text]')].map( (input) => {

com/example/helloworld-iframe.js

@@ -12,7 +12,7 @@ AFRAME.registerComponent('helloworld-iframe', {
   },
 
   dom: {
-    scale:   1,
+    scale:   3,
     events:  ['click','keydown'],
     html:    (me) => `<div>
                         <iframe src=""></iframe>
@@ -26,49 +26,60 @@ AFRAME.registerComponent('helloworld-iframe', {
 
   events:{
 
-    // component events
-    html:     function( ){ console.log("html-mesh requirement mounted") },
-
     // combined AFRAME+DOM reactive events
     click:   function(e){ }, // 
     keydown: function(e){ }, // 
 
-    // reactive events for this.data updates 
+    // reactive updates (data2event.js)
-    myvalue: function(e){ /*this.el.dom.querySelector('b').innerText = this.data.myvalue*/ },
+    url: function(e){ 
-
+      this.el.dom.querySelector('iframe').src = this.data.url
-    init: function(){
+      console.dir(this.el.dom.querySelector('iframe'))
-      alert("ja")
     },
 
-    ready: function( ){ 
+    launcher: async function(){
-      this.el.dom.style.display = 'none'
-      console.log("this.el.dom has been added to DOM")
-    },
-
-    launcher:  function(){
-      console.log("this.el.dom iframe has been added to DOM")
       let URL = this.data.url || prompt('enter URL to display','https://fabien.benetou.fr/Wiki/Wiki')
       if( !URL ) return
-      this.el.dom.querySelector('iframe').src = URL
+
-      new WinBox("Hello World",{ 
+      let s = await AFRAME.utils.require(this.requires)
-        width: 250,
+
-        height: 150,
+      // instance this component
-        class:["iframe"],
+      const instance = this.el.cloneNode(false)
-        x:"center",
+      this.el.sceneEl.appendChild( instance )
-        y:"center",
+      instance.setAttribute("dom",       "")
-        id:  this.el.uid, // important hint for html-mesh  
+      instance.setAttribute("data2event","")
-        root: document.querySelector("#overlay"),
+      instance.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
-        mount: this.el.dom,
+      instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(1.39) )
-        onclose: () => { this.el.dom.style.display = 'none'; return false; }
+      instance.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
-      });
+
-      this.el.dom.style.display = ''
+      const setupWindow = () => {
+        const com = instance.components['helloworld-iframe']
+        instance.dom.style.display = 'none'
+        new WinBox("Hello World",{ 
+          width: 250,
+          height: 150,
+          class:["iframe"],
+          x:"center",
+          y:"center",
+          id:  instance.uid, // important hint for html-mesh  
+          root: document.querySelector("#overlay"),
+          mount: instance.dom,
+          onclose: () => { instance.dom.style.display = 'none'; return false; },
+          oncreate: () => {
+            com.data.url = URL
+            instance.setAttribute("html",`html:#${instance.uid}; cursor:#cursor`)
+          }
+        });
+        instance.dom.style.display = ''
+      }
+
+      setTimeout( () => setupWindow(), 10 ) // give new components time to init
     },
 
   },
 
   manifest: { // HTML5 manifest to identify app to xrsh
-    "short_name": "Hello world",
+    "short_name": "Iframe",
-    "name": "Hello world",
+    "name": "Hello world IFRAME window",
     "icons": [
       {
         "src": "https://css.gg/browse.svg",

com/example/helloworld-window.js

@@ -1,20 +1,23 @@
 AFRAME.registerComponent('helloworld-window', {
   schema: { 
-    foo: { type:"string"}
+    foo: { type:"string", "default":"foo"}
   },
 
-  dependencies: ['dom'],
+  requires:     {
-
+    dom:         "./com/dom.js",                                                  // interpret .dom object
-  init: async function(){
+    xd:          "./com/dom.js",                                                  // allow switching between 2D/3D 
-    this.el.object3D.visible = false
+    html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
-
+    winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
+    winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",       // 
   },
 
+  init: function(){ },
+
   dom: {
-    scale:   1,
+    scale:   3,
     events:  ['click','keydown'],
     html:    (me) => `<div>
-                        <div class="pad"> ${me.data.foo} <b>${me.data.myvalue}</b></span>
+                        <div class="pad"> <span>${me.data.foo}</span> <b>${me.data.myvalue}</b></span>
                       </div>`,
 
     css:    (me) =>  `.helloworld-window div.pad { padding:11px; }`
@@ -26,41 +29,53 @@ AFRAME.registerComponent('helloworld-window', {
     click:   function(e){ }, // 
     keydown: function(e){ }, // 
 
-    // reactive events for this.data updates 
+    // reactive events for this.data updates (data2event.js)
-    myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue },
+    myvalue: function(e){ this.el.dom.querySelector('b').innerText    = this.data.myvalue },
+    foo:     function(e){ this.el.dom.querySelector('span').innerText = this.data.foo },
 
     launcher: async function(){
-      let s = await AFRAME.utils.require({
+      let s = await AFRAME.utils.require(this.requires)
-        dom:         "./com/dom.js",                                                  // interpret .dom object
+
-        html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
+      // instance this component
-        winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
+      const instance = this.el.cloneNode(false)
-        winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",       // 
+      this.el.sceneEl.appendChild( instance )
-      })
+      instance.setAttribute("dom",       "")
-      console.dir(s)
+      instance.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
-      this.el.setAttribute("dom","")
+      instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(1.39) )
-      this.el.setAttribute("data2event","")
+      instance.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
-      this.el.setAttribute("html","")
+
-      this.el.dom.style.display = 'none'
+      const setupWindow = () => {
-      this.data.myvalue = 1
+        const com = instance.components['helloworld-window']
-      return
+        instance.dom.style.display = 'none'
-      setInterval( () => this.data.myvalue++, 100 )
+
-      new WinBox("Hello World",{ 
+        new WinBox("Hello World",{ 
-        width: 250,
+          width: 250,
-        height: 150,
+          height: 150,
-        x:"center",
+          x:"center",
-        y:"center",
+          y:"center",
-        id:  this.el.uid, // important hint for html-mesh  
+          id:  instance.uid, // important hint for html-mesh  
-        root: document.querySelector("#overlay"),
+          root: document.querySelector("#overlay"),
-        mount: this.el.dom,
+          mount: instance.dom,
-        onclose: () => { this.el.dom.style.display = 'none'; return false; }
+          onclose: () => { instance.dom.style.display = 'none'; return false; },
-      });
+          oncreate: () => instance.setAttribute("html",`html:#${instance.uid}; cursor:#cursor`)
-      this.el.dom.style.display = ''
+        });
+        instance.dom.style.display = '' // show
+
+        // data2event demo
+        instance.setAttribute("data2event","")
+        com.data.myvalue = 1
+        com.data.foo     = `instance ${instance.uid}: `
+        setInterval( () => com.data.myvalue++, 200 )
+      }
+
+      setTimeout( () => setupWindow(), 10 ) // give new components time to init
+
     },
 
   },
 
   manifest: { // HTML5 manifest to identify app to xrsh
-    "short_name": "Hello world window",
+    "short_name": "window",
     "name": "Hello world window",
     "icons": [
       {

com/launcher.js

@@ -49,6 +49,7 @@ AFRAME.registerComponent('launcher', {
     })
 
     this.el.setAttribute("dom","")
+    this.el.setAttribute("noxd","ignore") // hint to XD.js that we manage ourselve concerning 2D/3D switching
     this.render()
 
     if( this.data.attach ){
@@ -81,7 +82,7 @@ AFRAME.registerComponent('launcher', {
                 overflow:hidden;
                 position: fixed;
                 right: 162px;
-                bottom: 0px;
+                bottom: 10px;
                 left:20px;
                 background: transparent;
                 padding-bottom: 54px;
@@ -345,13 +346,14 @@ AFRAME.registerSystem('launcher',{
   getLaunchables: function(mutationsList,observer){
     let searchEvent = 'launcher'
     let els         = [...this.sceneEl.getElementsByTagName("*")]
+    let seen        = {}
 
     this.components = els.filter( (el) => {
       let hasEvent = false
       if( el.components ){
         for( let i in el.components ){
-          if( el.components[i].events && el.components[i].events[searchEvent] ){
+          if( el.components[i].events && el.components[i].events[searchEvent] && !seen[i] ){
-            hasEvent = true
+            hasEvent = seen[i] = true
           }
         } 
       }

com/paste.js

@@ -108,7 +108,7 @@ AFRAME.registerComponent('paste', {
     return osbutton
   },
 
-  getPositionInFrontOfCamera: function(){
+  getPositionInFrontOfCamera: function(distance){
     const camera = this.el.sceneEl.camera;
     let pos = new THREE.Vector3()
     let direction = new THREE.Vector3();
@@ -117,7 +117,8 @@ AFRAME.registerComponent('paste', {
     camera.getWorldPosition(pos)
     direction.normalize();
     // Scale the direction by 1 meter
-    direction.multiplyScalar(1.5);
+    if( !distance ) distance = 1.5
+    direction.multiplyScalar(distance);
     // Add the camera's position to the scaled direction to get the target point
     pos.add(direction);
     return pos

com/require.js

@@ -25,8 +25,11 @@ AFRAME.utils.require = function(arr_or_obj,opts){
   packagesArr.map( (package) => {
     try{
       package = package.match(/\./) ? package : AFRAME.utils.require.baseURL+package+".js"
-      let id = Object.keys(arr_or_obj)[i]
+      let id = Object.keys(arr_or_obj)[i++]
-      if( id == i ) id = parseURI(package).component 
+      if( id.match(/^[0-9]/) ){ // if AFRAME component.dependency -array was passed
+        id = parseURI(package).component 
+      }
+
       // prevent duplicate requests
       if( AFRAME.required[id] ) return // already loaded before
       AFRAME.required[id] = true
@@ -55,9 +58,9 @@ AFRAME.utils.require = function(arr_or_obj,opts){
       }
     }catch(e){ 
       console.error(`package ${package} could not be retrieved..aborting :(`); 
+      console.dir(e)
       if( opts.halt ) throw e; 
     }
-    i++
   })
   return Promise.all(deps)
 }

com/xd.js

@@ -1,12 +1,16 @@
-AFRAME.registerComponent('spatialize', {
+AFRAME.registerComponent('xd', {
   schema: {
     foo: { type:"string"}
   },
 
   init: function () {
+    if( Object.keys(this.el.components).length > 1 ) return // we collect a-entities which wish to be toggled in this.showElements()
+
+    this.el.sceneEl.addEventListener('enter-vr',() => this.toggle(true) )
+    this.el.sceneEl.addEventListener('exit-vr', () => this.toggle(false) )
+    this.el.sceneEl.addEventListener('2D', () => this.showElements(false) )
+    this.el.sceneEl.addEventListener('3D', () => this.showElements(true) )
 
-    document.querySelector('a-scene').addEventListener('enter-vr',() => this.toggle(true) )
-    document.querySelector('a-scene').addEventListener('exit-vr', () => this.toggle(false) )
     // toggle immersive with ESCAPE
     document.body.addEventListener('keydown', (e) => e.key == 'Escape' && this.toggle() )
 
@@ -21,43 +25,25 @@ AFRAME.registerComponent('spatialize', {
       }
     </style>`
 
-    this.el.sceneEl.addEventListener('launched',(e) => {
+    this.events.launcher = () => this.toggle()
-      console.dir(e)
-      let appEl = e.detail.el.dom 
-      if( appEl && appEl.style && appEl.style.display != 'none' && appEl.innerHTML ){
-        this.btn.style.display = '' // show button
-      }
-    })
   },
 
-  requires:{
+  showElements: function(state){
-    // somecomponent:        "https://unpkg.com/some-aframe-component/mycom.min.js"
+    let els = [...document.querySelectorAll('[xd]')]
-  },
+    els     = els.filter( (el) => el != this.el ? el : null ) // filter out self
-
+    els.map( (el) => el.setAttribute("visible", state ? "true" : false  ) )
-  events:{
-
-    // component events
-    ready:         function(e){
-      //this.btn.style.display = 'none'
-      this.btn.style.background = 'var(--xrsh-primary)'
-      this.btn.style.color      = '#FFF'
-    },
-
-    launcher:      function(e){ this.toggle() },
-
   },
 
   // draw a button so we can toggle apps between 2D / XR
   toggle: function(state){
     state = state || !document.body.className.match(/XR/)
     document.body.classList[ state ? 'add' : 'remove'](['XR'])
-    AFRAME.scenes[0].emit( state ? 'apps:XR' : 'apps:2D')
+    AFRAME.scenes[0].emit( state ? '3D' : '2D')
-    this.btn.innerHTML = state ? "<s>2D</s>" : "2D"
   },
 
   manifest: { // HTML5 manifest to identify app to xrsh
-    "short_name": "2D",
+    "short_name": "XD",
-    "name": "spatialize",
+    "name": "2D/3D switcher",
     "icons": [],
     "id": "/?source=pwa",
     "start_url": "/?source=pwa",
@@ -103,3 +89,23 @@ in above's case "\nHelloworld application\n" will qualify as header.
 
 });
 
+AFRAME.utils.XD = function(){
+  return document.body.classList.contains('XR') ? '3D' : '2D'
+}
+
+
+AFRAME.utils.XD.getPositionInFrontOfCamera = function(distance){
+  const camera = AFRAME.scenes[0].camera;
+  let pos = new THREE.Vector3()
+  let direction = new THREE.Vector3();
+  // Get camera's forward direction (without rotation)
+  camera.getWorldDirection(direction);
+  camera.getWorldPosition(pos)
+  direction.normalize();
+  // Scale the direction by 1 meter
+  if( !distance ) distance = 1.5
+  direction.multiplyScalar(distance);
+  // Add the camera's position to the scaled direction to get the target point
+  pos.add(direction);
+  return pos
+}