janusweb 1.7.0 → 1.7.1

package/media/assets/webui/apps/xrfragment/level0-sidecarfile.js

@@ -0,0 +1,308 @@
+/* XR URI Fragments spec (https://xrfragment.org)
+ *
+ * level0 sidecar files as per the XR URI Fragments spec
+ * https://xrfragment.org/#sidecar%20files
+ * 
+ * NOTE: you can also load sidecarfiles in a roomscript manually:
+ *
+ *       elation.events.add(null, 'room_load_complete', function(e){
+ *         if( room?.sidecarfile ) room.sidecarfile.load()
+ *       })
+ */
+
+elation.require([], function() {
+
+  elation.extend('janusweb.sidecarfile', class {
+    constructor(object) {
+      this.scene     = elation.engine.instances.default.systems.world.scene['world-3d'] 
+      this._object   = object
+      this.extension = /\.(gltf|glb|dae)$/
+      this.extensionXRF = /\.xrf\./ 
+      if( room.url.match(this.extension) && this.isXRF(this.hideSystemFolder) ){
+        this.load()
+      }
+    }
+
+    load(){
+      this.cleanup()
+      this.loadWebVTT() // https://xrfragment.org/#sidecar%20files
+      this.loadSound()  // https://xrfragment.org/#sidecar%20files
+      this.initStartButton()
+      this.initSubtitle()
+    }
+
+    hideSystemFolder(o){
+      // https://xrfragment.org/#system%20folders
+      if(o.name[0] == '_'){ 
+        o.visible = false
+        o.pickable = false
+      }
+    }
+
+    isXRF(cb){
+      // for XRF heuristics see https://xrfragment.org/#%F0%9F%93%9C%20level0%3A%20File
+      let heuristic = room.url.match(this.extensionXRF) 
+      this.scene.traverse( (o) => {
+        if( o.userData?.href )  heuristic = true // has XRF hyperlink
+        if( o.name[0] == '_' )  heuristic = true // has XRF system folder 
+      })
+      return heuristic
+    }
+
+    loadSound(){ // https://xrfragment.org/#sidecar%20files
+      room.removeObject('xrf_audio')
+      const audio     = room.url.replace(this.extension,'.ogg') 
+      room.loadNewAsset("sound", {id:"xrf_audio", src:audio,proxy:false})
+      this.sound = room.createObject('sound',{ id: "xrf_audio", js_id: 'xrf_audio', loop:true })
+    }
+
+    loadWebVTT(){ // https://xrfragment.org/#sidecar%20files
+      const webvtt = room.url.replace(this.extension,'.vtt') 
+      fetch( webvtt )
+      .then( (res)  => res.text() ) 
+      .then( (webvtt) => {
+        this.webvtt = this.parseWEBVTT(webvtt) 
+      })
+      .catch( () => false ) // no biggy (optional)
+    }
+
+    initStartButton(){
+      this.btn = room.createObject('object',{
+        id: 'cube',
+        js_id: 'btnstart',
+        pos: player.localToWorld( V(0,1.8,-1) ),
+        scale: '0.5 0.125 0.01',
+        col: '0.5 0.5 0.5',
+        lighting:false,
+        sync: true,
+        billboard: 'y',
+        collision_id: 'cube'
+      })
+      const label = this.btn.createObject('text',{
+        text: 'Start experience',
+        lighting:false,
+        col: '0 0 0',
+        pos: '0 -0.15 0.5',
+        scale: '1.2 5 1.2',
+      })
+      this.btn.addEventListener('click', () => this.start() )
+      this.positionStartButton()
+    }
+
+    positionStartButton(){
+      setTimeout( () => {
+        this.btn.pos = player.localToWorld( V(0,1.8,-1) )
+      }, 500)
+    }
+
+    initSubtitle(){
+      this.subtitle = player.createObject('paragraph',{
+        js_id: 'subtitle',
+        pos: '0 1.7 -1.5',
+        lighting: false,
+        pickable: false,
+        css: `.paragraphcontainer{ 
+          background: transparent;
+          text-align:center;
+          height:100%; 
+          width:100%; 
+          display: flex;
+          align-items: center;
+          font-size:55px; 
+          line-height:55px;
+          text-shadow: 0px 0px 2px #FFFF;
+          color:black; 
+        }
+        .subtitle{
+          width:100%;
+        }
+        .loading{
+          background:#FFF;
+          display:inline-block;
+          font-size:22px;
+          font-family: monospace;
+          line-height:30px;
+          padding:20px;
+          border-radius:15px;
+        }
+        `,
+        text_col: '1 1 1',
+        back_col: '1 1 1'
+      })
+      this.subtitle.objects['3d'].depthWrite = false 
+      this.subtitle.objects['3d'].depthTest = false 
+      this.subtitle.objects['3d'].renderOrder = 100 
+      this.subtitle.setHTML = (html) => {
+        this.subtitle.visible = true
+        this.subtitle.text = `<div class='subtitle'>${html}</div>`
+      }
+    }
+
+    update(){
+      if( this.update.id || !this.playing ) return // throttle
+      const advance = () => {
+        if( !this?.sound?.timeoffset && this?.sound?.audio?.context){ 
+          this.sound.timeoffset = this.sound.audio.context.currentTime
+        }
+        if( this?.sound?.timeoffset != undefined &&
+            this.webvtt?.items[ this.webvtt?.i ] && 
+            this?.sound?.playStarted             && 
+            this?.sound?.audio?.context?.currentTime ){
+
+          const time = this.sound.audio.context.currentTime - this.sound.timeoffset;
+          let item = this.webvtt.items[ this.webvtt.i ]
+          if( !item.seen && time > item.start.ts ){
+            this.subtitle.setHTML(`
+              ${ item.who ? `<b>${item.who}:</b><br/>` : '' }
+              ${item.text.replace(/\n/g,'<br/>')}
+            `)
+            if( room.hyperlink && item.href && !item.seen ){
+              room.hyperlink.execute(item.href, {portalActivateDelay:6000})
+            }
+            item.seen = true
+          }
+          if( item.seen && time > item.stop.ts ){
+            this.subtitle.visible = false 
+            this.webvtt.i++
+          }
+        }
+        this.update.id = false 
+      }
+      this.update.id = setTimeout( () => advance(), 100 ) // throttle 
+    }
+
+    // naive webvtt parser
+    parseWEBVTT(text) {
+      let i = 0;
+      const WEBVTT_HEADER = /^WEBVTT/i;
+      const TIME_LINE     = /^([0-9:.]+)\s+-->\s+([0-9:.]+)(?:\s+(.+))?$/;
+      const WHO           = /^<v ([^>]+)>/
+      const HREF          = / href:([^ ]+)/
+      const result        = { type: "WEBVTT", items: [], i: 0 };
+      const lines         = text.split(/\r?\n/)
+                                .map( (line) => line.trim() )
+      const vttToSeconds  = (vttString) => {
+        const parts = vttString.split(':');
+        let hours = 0, minutes = 0, secondsWithMs;
+        if (parts.length === 3) { [hours, minutes, secondsWithMs] = parts; }
+        else { [minutes, secondsWithMs] = parts; } // Format is MM:SS.mmm
+        const [seconds, milliseconds] = secondsWithMs.split('.');
+        return (
+          (parseInt(hours) * 3600) +
+          (parseInt(minutes) * 60) +
+          (parseInt(seconds) * 1) +
+          parseInt(milliseconds || 0)
+        );
+      }
+
+      // Skip the WEBVTT header line
+      if (WEBVTT_HEADER.test(lines[i].trim())) i++
+      while (i < lines.length) {
+        if ( lines[i] === "") { i++; continue; } // Skip empty lines
+        // Match cue timing line
+        const timeMatch = lines[i].match(TIME_LINE);
+        if (timeMatch) {
+          const item = {
+            start: {str:timeMatch[1], ts: vttToSeconds(timeMatch[1]) },
+            stop:  {str:timeMatch[2], ts: vttToSeconds(timeMatch[2]) },
+            href:  lines[i].match(HREF) ? lines[i].match(HREF)[1] : false,
+            who: false,
+            text: ""
+          };
+          i++;
+          const speakerMatch = lines[i]?.match(WHO);
+          if (speakerMatch) { 
+            item.who = speakerMatch[1]; 
+            lines[i] = lines[i].replace(WHO,''); 
+          }
+          // Collect all text lines until next empty line
+          while (i < lines.length && lines[i].trim() !== "") {
+            item.text += (item.text ? "\n" : "") + lines[i] ;
+            i++;
+          }
+
+          result.items.push(item);
+        } else { i++; }
+      }
+      return result;
+    }
+
+    start(){
+      // reset subtitles
+      if( this?.webvtt?.items ){
+        this.webvtt.items.map( (item) => item.seen = undefined )
+        this.webvtt.i = 0;
+      }
+      // start sound
+      this.sound.pos = '0 0 0'
+      if( this.sound.isPlaying ) this.sound.stop()
+      this.sound.timeoffset = undefined
+      this.sound.play()
+      // ensure subtitle
+      this.subtitle.visible = false 
+      player.add(this.subtitle)
+      // hide button 
+      this.btn.visible = false
+      this.btn.pickable = false
+      // mark playing
+      this.playing = true
+    }
+
+
+    stop(){
+      this.playing = false
+      this.update.id = false
+      this.subtitle.visible = false 
+      this.subtitle.text = ''
+      this.btn.visible = true
+      this.btn.pickable = true
+    }
+
+    cleanup(){
+      const deleteJsId = (js_id) => {
+        for( let i in player.children ) 
+          if( player.children[i].js_id == js_id )
+            player.remove( player.children[i] )
+      }
+      deleteJsId('subtitle')
+    }
+
+  })
+});
+
+xrf_install_sidecarfiles = function(){
+  if( !room.objects?.scene?.modelasset?.loaded ) {
+    return setTimeout( xrf_install_sidecarfiles, 300 ) 
+  }
+  if( !room.sidecarfile   ) room.sidecarfile = new elation.janusweb.sidecarfile(room);
+  else{
+    room.sidecarfile.positionStartButton() // wait for user being spawned
+    room.sidecarfile.stop()
+  }
+}
+
+xrf_install_sidecarfiles()
+
+elation.events.add(null, 'room_load_complete', xrf_install_sidecarfiles )
+elation.events.add(null, 'room_enable',        xrf_install_sidecarfiles )
+elation.events.add(null, 'janusweb_script_frame', function(){
+  if( room?.sidecarfile ) room.sidecarfile.update()
+})
+elation.events.add(null, 'room_load_start', function(e){
+  if( !e.data ) return
+  if( room?.sidecarfile?.subtitle ) room.sidecarfile.subtitle.setHTML(`<div class='loading'>🔗 ${e.data.name}<br/><br/>please wait..</div>`)
+})
+
+elation.events.add(null, 'room_disable', function(){
+  if( room?.sidecarfile?.subtitle ) room.sidecarfile.stop()
+})
+
+// some convenience WebVTT cue settings => room function mappings 
+// href:#fadeAudioOut&spawnhere => room.fadeAudioOut()
+// href:#myfunc=3               => room.myfunc(3)
+elation.events.add(null, 'href', function(e){
+  if( room?.hyperlink ){
+    const {url,hash} = room.hyperlink.getUrlObject(e.data.href)
+    hash.forEach( (v,k) => { if( room[k] ) room[k](v) })
+  }
+})

package/media/assets/webui/apps/xrfragment/level2-hyperlink.js

@@ -0,0 +1,265 @@
+/* XR URI Fragments spec (https://xrfragment.org)
+ *
+ * level2 explicit hyperlinks (embedded in 3D scenes/files) as per the XR URI Fragments spec
+ * 
+ * When clicking an href-value, the user(camera) is teleported/imported to the referenced object.
+ * Usecases: spatial anchors, object imports, hyperlink bridge between JML<>3D files
+ * see more: https://xrfragment.org/#%F0%9F%93%9C%20level2%3A%20explicit%20hyperlinks
+ */
+
+
+elation.require([], function() {
+
+  elation.extend('janusweb.hyperlink', class {
+    constructor(object) {
+      this.scene = elation.engine.instances.default.systems.world.scene['world-3d'] 
+      this._object = object
+      this.init()
+    }
+
+    init(){
+      this.cleanup()
+      this.scan( this.scene )
+      this.setupShroud()
+    }
+
+    setupShroud(){
+      // show shroud when teleporting
+      for( let i in player.head.children ){
+        let n = player.head.children[i]
+        if( n.js_id == 'xrf_shroud' ) this.shroud = n // found previrous one
+      }
+      if( this.shroud ) return // we're done!
+      this.shroud = room.createObject('object', {
+        id: 'sphere',
+        js_id: 'xrf_shroud',
+        scale: V(1),
+        lighting: false,
+        col: 'black',
+        cull_face: 'none',
+        depth_test: false,
+        depth_write: false,
+        shadow_cast: false,
+        shadow_receive: false,
+        renderorder: 1000,
+        visible: false,
+      });
+      player.head.add(this.shroud._target); 
+
+      // patch setPlayerPosition() with shroud animations during local teleports
+      room.setPlayerPosition = (
+        (original) => function(room){
+          this.hyperlink.showShroud()
+          return original.apply(this,room)
+        }.bind(room)
+      )(room.setPlayerPosition)
+    }
+
+    scan(scene,cb){
+      scene.traverse( (object) => {
+        this.detectHUDLUT(object)
+        this.detectHref(object)
+      })
+    }
+
+    detectHref(object){
+      if( !object?.userData?.href || object.hasHref ) return
+
+      const jobj = this.toJanusObject(object)
+      jobj.addEventListener("click", () => this.execute(object.userData.href,{jobj,scene:this.scene}) )
+      object.hasHref = true
+    }
+
+    cleanup(){
+      const head = player.head.objects['3d'] 
+      head.children
+      .filter( (child) => child.xrf_cleanup ? child : false ) 
+      .map( (child) => child.xrf_cleanup() )
+    }
+
+    detectHUDLUT(object){
+      // XR Fragment HUD extensions: https://xrfragment.org/#teleport%20camera%20spawnpoint
+      if( object.type == 'PerspectiveCamera' && object.name == 'spawn' && object.children.length ){
+        const head = player.head.objects['3d'] 
+        // move children to player head
+        while( object.children.length ){ 
+          object.children[0].xrf_cleanup = function(me,object){
+            object.add( me ) // add back
+          }.bind(null, object.children[0], object )
+          head.add( object.children[0] )
+        }
+      }
+    }
+
+    execute = function(href,opts){
+      const {url,hash} = this.getUrlObject(href)
+      opts = opts ? {...opts, url, hash} : {url,hash} 
+      console.log("hyperlink: "+href)
+      elation.events.fire({element: this, type: 'href', data: {href,opts}});
+      if( room.url != url.origin+url.pathname ) return this.executeExternal(href,opts)
+      hash.forEach( (v,k) => {
+        const {operator,param} = this.getOperators(k)
+        switch( param ){
+          case "t":    // W3C URI Time fragment not implemented (yet)
+          case "loop": this._object.loop = operator != '-' 
+          case "pos":  // legacy fallthrough
+          default:     // level2: internal teleports/spawn
+                       // https://xrfragment.org/#%F0%9F%93%9C%20level2%3A%20explicit%20hyperlinks   
+                       room.referrer = room.urlhash
+                       room.urlhash = v || k
+                       if( this.scene.getObjectByName(v) ){ 
+                         room.setPlayerPosition()
+                         this.spawnBackLink()
+                       }
+                       // level2: animation triggers 
+                       // https://xrfragment.org/#%F0%9F%93%9C%20level2%3A%20explicit%20hyperlinks   
+                       for( let i in this._object.children ){
+                         const model = this._object.children[i]
+                         if( model.animations && model.animations.map ){
+                           model.animations.map( (a) => {
+                             if( !String(a.name).toLowerCase() == String(v).toLowerCase() ) return 
+                             console.log("xrfragment: activating animation '"+a.name+"'")
+                             model.anim_id = a.name
+                           })
+                         }
+                       }
+                       return
+                      break;
+        }
+      })
+
+      const fullUrl = href.match(/^#/) ? `${room.url}${url.hash}` : url.href
+      room.url = fullUrl
+      if( !url.protocol.match(/^xrf:/) ){
+        // level4: https://xrfragment.org/doc/RFC_XR_Fragments.html#xrf-uri-scheme
+        janus.updateClientURL(fullUrl)
+      }
+      elation.events.fire({element: room, type: 'room_change', data: room});
+    }
+
+    spawnBackLink(){
+      for( let i in room.objects ){
+        if( i.match(/^reciprocal-hashlink/) ) room.removeObject(i)
+      }
+      let link = room.createObject('link', {
+        rotation: '0 45 0',
+        url: room.url+'#'+room.referrer,
+        title: 'go back',
+        round: true,
+        shader_id: 'defaultportal',
+        js_id: 'reciprocal-hashlink',
+      });
+      setTimeout( () => {
+        link.position = player.localToWorld(V(1.5,0,1.5))
+      },10)
+    }
+
+    executeExternal(href, opts){
+      if( opts.portalActivateDelay ){
+        setTimeout( () => {
+          janus.setActiveRoom( href, room.url)
+        }, opts.portalActivateDelay)
+      }
+      player.spawnPortal(href)
+      elation.events.fire({element: this, type: 'href_portal', data: {href,opts}});
+    }
+
+    getUrlObject = function(href){
+      const urlExpanded = href[0] == '#'                                                    
+                    ? room.url+href                                                   
+                    : href.match(/:\//) ? href : room.baseurl+href                                 
+      const url  = new URL( urlExpanded )
+      const hash = new URLSearchParams( String(url.hash).substr(1) ) 
+      return {url,hash}
+    }
+
+    getOperators = function(k){
+      let operator = ''
+      // scan for operator
+      if( k[0].match(/[-+]/) ){
+        operator = k[0]
+        k = k.substr(1)
+      }
+      return {operator,param:k}
+    }
+
+    toJanusObject = function(object){
+      // we are not using object.parts[ ... ] because
+      // glTF animated collidable objects require special sync/setup: 
+      // collider must be child of THREE object (to get animated), not janusobject
+      // NOTE: avoid jobj.add() since that reparents the object (andw breaks glTF anims)
+      let jo = this._object.createObject("object",{
+        js_id: object.name
+      })
+      object.parent.add( jo.objects['3d'] )
+      jo.objects['3d'] = object
+      jo.collidable = true
+      jo.removeCollider();
+      const collider = object.clone()
+      collider.position.set(0,0,0)
+      collider.rotation.set(0,0,0)
+      collider.scale.set(1,1,1)
+      jo.setCollider('mesh',{mesh: collider})
+      jo.colliders.parent = object
+      return jo
+    }
+
+    showShroud = function(){
+      this.shroud.visible = true;
+      this.shroud.opacity = 1;
+    }
+
+    update = function(){
+      if (this.shroud?.visible && !janus.loading) {
+        if (this.shroud.opacity > .001) {
+          this.shroud.opacity *= .9;
+          if (this.shroud.opacity <= .001) {
+            this.shroud.visible = false;
+            this.shroud.opacity = 0;
+          }
+        }
+      }
+    }
+
+  })
+});
+
+xrf_install_hyperlinks = function(){
+  if( !room.objects?.scene?.modelasset?.loaded ) {
+    return setTimeout( xrf_install_hyperlinks, 300 ) 
+  }
+  if( !room.hyperlink     ){
+    room.hyperlink = new elation.janusweb.hyperlink(room)
+    janus.loading = false // force!
+  }
+}
+
+xrf_install_hyperlinks()
+
+// update urlbar when user or browser activates href 
+elation.events.add(null, 'href', function(e){
+  const scene  = elation.engine.instances.default.systems.world.scene['world-3d'] 
+  const urlbar = document.querySelector('janus-ui-urlbar ui-input')
+  const href   = e?.data?.href
+  if( urlbar ){
+    urlbar.value = href[0] == '#' ? urlbar.value.replace(/#.*/,'') + href : href
+  }else console.warn("xrfragment: cannot find urlbar")
+})
+
+elation.events.add(null, 'room_load_complete', xrf_install_hyperlinks ) 
+elation.events.add(null, 'room_disable', function(e){
+  if( room?.hyperlink ) room.hyperlink.cleanup()
+})
+
+elation.events.add(null, 'room_enable', function(e){
+  if( room?.hyperlink ) room.hyperlink.init()
+  else xrf_install_hyperlinks()
+})
+
+elation.events.add(null, 'janusweb_script_frame', function(){
+  if( room?.hyperlink ) room.hyperlink.update()
+})
+
+if( room.urlhash ){ 
+  elation.events.fire({element: this, type: 'href', data: {href: `#${room.urlhash}`}});
+}

package/media/assets/webui/apps/xrfragment/level7-engine-prefixes.export.js

@@ -0,0 +1,93 @@
+xrf_export = {
+
+  node(e){
+    const {userData,n} = e.data
+    for( let k in userData ){
+      if( k.match(/^-(three)-/) || k == 'href' ){ // keep hrefs + `-three-*` engine prefixes
+        n.userData[k] = userData[k]               // but ditch `-janus-*` (we'll regenerate them)
+      }
+      if( k == 'thing' && String(userData[k].componentname).match('engine.things.janus') ){
+        const thing       = userData[k]
+        switch( thing.componentname ){
+          case "engine.things.janusparagraph":
+          case "engine.things.janustext":
+          case "engine.things.janusportal":
+          case "engine.things.januswebsurface":
+          case "engine.things.janusroom":
+
+            if( thing.componentname != 'engine.things.janusroom' ){
+              n.name = String(`-janus-${thing.js_id}`).replace(/.*janus-/,'-janus-')
+              n.userData['-janus-tag'] = thing.componentname 
+                                              .replace('janusportal','januslink')
+                                              .replace('engine.things.janus','')
+            }
+            if( thing.componentname.match(/engine\.things\.janus(portal|link)/) && n.children[0] ){
+              // convert portal to XRF href
+              n.children[0].userData['href'] = thing.url
+            }
+            // write XRF `-janus-*` engine prefixes
+            const attrs = xrf_export.getAttributes(thing)
+            for( let i in attrs ){ 
+              if( !i.match(/^-janus-(use_local_asset)/) ){
+                n.userData[`-janus-${i}`] = attrs[i]
+              }
+            }
+            break;
+        }
+      }
+    }
+  },
+  scene(e){
+    // https://xrfragment.org/#%F0%9F%93%9Clevel7%3A%20engine%20prefixes
+    e.data.scene.userData['-janus-source'] = room.getRoomSource()
+  },
+  getAttributes(thing){
+    if( !thing ) return {}
+    let proxy     = thing.getProxyObject(),
+        propdefs  = thing._thingdef.properties,
+        proxydefs = proxy._proxydefs,
+        attrs     = {};
+
+    // this code is almost a duplicate of elation's .summarizeXML() but with inversed (glTF) position
+    for (let k in proxydefs) {
+      let proxydef = proxydefs[k],
+        propdef = elation.utils.arrayget(propdefs, proxydef[1]);
+      if ( k != 'room' && k != 'tagName' && k != 'classList' && proxydef[0] == 'property' && propdef) {
+        let val = elation.utils.arrayget(thing.properties, proxydef[1]);
+        let defaultval = propdef.default;
+        if (val instanceof THREE.Vector2) {
+          if (defaultval instanceof THREE.Vector2) defaultval = defaultval.toArray();
+          if (!('default' in propdef) || ('default' in propdef && !(val.x == defaultval[0] && val.y == defaultval[1]))) {
+            attrs[k] = val.toArray().map(n => Math.round(n * 10000) / 10000).join(' ');
+          }
+        } else if (val instanceof THREE.Vector3) {
+          if (defaultval instanceof THREE.Vector3) defaultval = defaultval.toArray();
+          if (!('default' in propdef) || ('default' in propdef && !(val.x == defaultval[0] && val.y == defaultval[1] && val.z == defaultval[2]))) {
+            attrs[k] = val.toArray().map(n => Math.round(n * -10000) / 10000).join(' ');
+          }
+        } else if (val instanceof THREE.Color) {
+          if (defaultval instanceof THREE.Color) defaultval = defaultval.toArray();
+          if (!('default' in propdef) || defaultval === null || ('default' in propdef && !(val.r == defaultval[0] && val.g == defaultval[1] && val.b == defaultval[2]))) {
+            attrs[k] = val.toArray().map(n => Math.round(n * 10000) / 10000).join(' ');
+          }
+        } else if (val instanceof THREE.Euler) {
+          if (defaultval instanceof THREE.Euler) defaultval = defaultval.toArray();
+          if (!('default' in propdef) || ('default' in propdef && !(val.x == defaultval[0] && val.y == defaultval[1] && val.z == defaultval[2]))) {
+            attrs[k] = val.toArray().slice(0, 3).map(n => Math.round(n * 10000) / 10000).join(' ');
+          }
+        } else if (val instanceof THREE.Quaternion) {
+          if (defaultval instanceof THREE.Quaternion) defaultval = defaultval.toArray();
+          if (!('default' in propdef) || ('default' in propdef && !(val.x == defaultval[0] && val.y == defaultval[1] && val.z == defaultval[2] && val.w == defaultval[3]))) {
+            attrs[k] = val.toArray().map(n => Math.round(n * 10000) / 10000).join(' ');
+          }
+        } else if (val !== propdef.default && val !== null && val !== '') {
+          attrs[k] = val;
+        }
+      }
+    }            
+    return attrs;
+  }
+}
+
+elation.events.add(null, 'webui_editor_export_node', xrf_export.node )
+elation.events.add(null, 'webui_editor_export',      xrf_export.scene )