work in progress [might break]

example/aframe/sandbox/index.html

@@ -76,7 +76,10 @@
     <script src="./../../../dist/aframe-blink-controls.min.js"></script>      <!-- teleporting using controllers -->
     <script src="./../../../dist/xrfragment.plugin.p2p.js"></script>          <!-- serverless p2p connectivity   -->
     <script src="./../../../dist/xrfragment.plugin.matrix.js"></script>       <!-- matrix connectivity           -->
-    <script src="./../../../dist/xrfragment.plugin.frontend.js"></script> <!-- menu + chat interface         -->
+    <script src="./../../../dist/xrfragment.plugin.network.js"></script>      <!-- matrix and webrtc chat/scene examples --> 
+    <script src="./../../../dist/xrfragment.plugin.editor.js"></script>       <!-- basic editor example          --> 
+    <script src="./../../../dist/xrfragment.plugin.frontend.css.js"></script> <!-- basic menu interface css      -->
+    <script src="./../../../dist/xrfragment.plugin.frontend.js"></script>     <!-- basic menu interface          -->
 
   </body>
 </html>

make

@@ -101,7 +101,12 @@ build(){
         example/assets/js/qr.js  > dist/xrfragment.aframe.js
 
     # plugins  
-    jscat src/3rd/js/plugin/frontend/*.js                           > dist/xrfragment.plugin.frontend.js
+    jscat src/3rd/js/plugin/frontend/{network,\$connections,\$chat}.js           > dist/xrfragment.plugin.network.js
+    cp    src/3rd/js/plugin/frontend/\$editor.js                                   dist/xrfragment.plugin.editor.js 
+
+    cp    src/3rd/js/plugin/frontend/css.js                                        dist/xrfragment.plugin.frontend.css.js 
+    jscat src/3rd/js/plugin/frontend/{snackbar,accessibility,\$menu,frontend}.js > dist/xrfragment.plugin.frontend.js
+
     jscat src/3rd/js/plugin/matrix/{matrix-crdt,matrix}.js          > dist/xrfragment.plugin.matrix.js 
     jscat src/3rd/js/plugin/p2p/{trystero-torrent.min,trystero}.js  > dist/xrfragment.plugin.p2p.js 
     

src/3rd/js/aframe/pressable.js

@@ -30,6 +30,8 @@ AFRAME.registerComponent('pressable', {
         }
     },
     detectPress: function(){
+        if( !AFRAME.scenes[0].renderer.xr.isPresenting ) return
+
         var handEls = this.handEls;
         var handEl;
         let minDistance = 5

src/3rd/js/plugin/frontend/$editor.js

@@ -10,7 +10,7 @@ $editorPopup = (el) => new Proxy({
           <tr>
             <td><b class="badge">href</a></td>
             <td>
-              <input type="text" id="href" placeholder="https://foo.com" maxlength="255" 
+              <input type="text" id="href" placeholder="https://foo.com" maxlength="255" list="objects" 
                      onkeydown="document.querySelector('#editActions').classList.add('show')" 
                      onkeyup="$editor.selected.edited = $editor.selected.userData.href = this.value" 
                      value="${$editor.selected.userData.href||''}" />
@@ -19,7 +19,7 @@ $editorPopup = (el) => new Proxy({
           <tr>
             <td><b class="badge">src</a></td>
             <td>
-              <input type="text" id="src" placeholder="https://foo.com" maxlength="255" 
+              <input type="text" id="src" placeholder="https://foo.com" maxlength="255" list="objects"
                      onkeydown="document.querySelector('#editActions').classList.add('show')" 
                      onkeyup="$editor.selected.edited = $editor.selected.userData.src = this.value" 
                      value="${$editor.selected.userData.src||''}" />
@@ -36,10 +36,17 @@ $editorPopup = (el) => new Proxy({
           </tr>
         </tbody>
       </table>
+      <datalist id="objects">
+        <option>https://xrfragment.org/index.glb#pos=start</option>
+        <option>
+        ${opts.objectNames.join('</option><option>')}
+        </option>
+      </datalist>
       <br>
       <div id="editActions">
         <button class="download" onclick="$editor.export()"><i class="gg-software-download"></i> &nbsp;&nbsp;&nbsp;download scene file</button> 
         <br>
+        NOTE: updates to src-values will require reloading the scene 
       </div>
     </div>
     <style type="text/css">
@@ -105,6 +112,7 @@ $editor = (el,opts) => new Proxy({
   editing: false,
   helper: null,
   selected: null,
+  objectNames: [],
 
   init(opts){
     el.innerHTML = this.html
@@ -119,15 +127,15 @@ $editor = (el,opts) => new Proxy({
 
     xrf.addEventListener('export', (e) => this.updateOriginalScene(e) )
     xrf.addEventListener('href', (opts) => {
-      if( this.selecting || this.editing ) return opts.promise().reject("$editor should block hrefs while editing") // never resolve (block hrefs from interfering)
+      if( $editor.selecting || $editor.editing ) return opts.promise().reject("$editor should block hrefs while editing") // never resolve (block hrefs from interfering)
     })
     return this
   },
 
   reset(){
     if( this.helper) xrf.scene.remove(this.helper)
-    this.selecting = false
+    $editor.selecting = false
-    this.editing = false
+    $editor.editing = false
   },
 
   export(){
@@ -137,15 +145,33 @@ $editor = (el,opts) => new Proxy({
 
   editNode(){
     if( !this.selecting ) return console.log("not editing")
+    this.reset()
     $editor.editing = true
+    this.collectObjects()
       //`<b>XR Fragment:</b> #${this.selected.name}<br><br>${this.getMetaData(this.selected)}`),{
-    setTimeout( () => this.reset(), 4000 )
     notify( $editorPopup( document.createElement('div') ).init(this) , {
       timeout:false,
       onclose: () => this.reset()
     })
   },
 
+  collectObjects(){
+    this.objectNames = []
+    const escape = (str) => {
+      let d = document.createElement('div')
+      d.innerText = str
+      return d.innerHTML
+    }
+    xrf.scene.traverse( (n) => {
+      if( n.userData && n.userData.href ){
+        this.objectNames.push( escape(n.userData.href) )
+      }
+    })
+    xrf.scene.traverse( (n) => {
+      if( n.name ) this.objectNames.push( escape('#'+n.name) )
+    }) 
+  },
+
   initEdit(scene){
     if( !this.listenersInstalled ){
       AFRAME.scenes[0].addEventListener('click', () => this.editNode() )
@@ -174,7 +200,6 @@ $editor = (el,opts) => new Proxy({
       }
       if( n.material ) n.addEventListener('mousemove', n.highlightOnMouseMove = highlight(n) )
     }) 
-    console.log("inited scene")
   },
 
   getMetaData(n){
@@ -192,7 +217,6 @@ $editor = (el,opts) => new Proxy({
       let o = xrf.scene.getObjectByName(n.name)
       if( o && o.edited ){
         for( let i in o.userData ) n.userData[i] = o.userData[i]
-        console.log("updating export")
       }
     })
   }
@@ -204,6 +228,7 @@ $editor = (el,opts) => new Proxy({
 
   set(me,k,v){ 
     me[k] = v    
+
     switch( k ){
 
       case "selecting":{ 

src/3rd/js/plugin/frontend/.js

@@ -1,40 +0,0 @@
-window.$editor = (opts) => new Proxy({
-  opts,
-  html: `
-    <div class="xrf footer">
-      <div class="menu">
-        <div id="buttons"></div>
-        <a class="btn" id="more" aria-title="menu button"><i id="icon" class="gg-menu"></i></a><br>
-      </div>
-    </div>
-  `,
-
-  enabled: false,
-
-  toggle(){ this.enabled = !this.enabled },
-
-  init(){
-    el.innerHTML = this.html
-    document.body.appendChild(el);
-  },
-
-},
-{ 
-  // auto-trigger events on changes 
-  get(data,k,receiver){ return data[k] },
-  set(data,k,v){ 
-    data[k] = v 
-    switch( k ){
-      case "enabled": {
-                        data.enabled = v
-    }
-  }
-})
-
-document.addEventListener('$menu:ready', (e) => {
-  return
-  try{
-    $editor = $editor( document.createElement('div'), {} ) 
-    $editor.init()
-  }catch(e){console.error(e)}
-})

src/3rd/js/three/xrf/href.js

@@ -37,6 +37,9 @@ xrf.frag.href = function(v, opts){
 
     if( !mesh.material || !mesh.material.visible ) return // ignore invisible nodes
 
+    // update our values to the latest value (might be edited)
+    v = {string: mesh.userData.href }
+
     // bubble up!
     mesh.traverseAncestors( (n) => n.userData && n.userData.href && n.dispatchEvent({type:e.type,data:{}}) )