janusweb 1.5.30 → 1.5.34

package/scripts/text.js

@@ -26,8 +26,9 @@ elation.require(['engine.things.label'], function() {
         'roughness':       { type: 'float', default: null, min: 0, max: 1, set: this.updateMaterial, comment: 'Material roughness value' },
         'metalness':       { type: 'float', default: null, set: this.updateMaterial, comment: 'Material metalness value' },
         'envmap_id':       { type: 'string', set: this.updateMaterial, comment: 'Environment map texture ID (overrides skybox reflections)' },
+        'wireframe':       { type: 'boolean', default: false, set: this.updateMaterial, comment: 'Wireframe rendering' },
       });
-      this.emptygeometry = new THREE.Geometry();
+      this.emptygeometry = new THREE.BufferGeometry();
       elation.events.add(this.engine, 'engine_frame', elation.bind(this, this.handleFrameUpdates));
     }
     this.createObject3D = function() {
@@ -91,7 +92,8 @@ elation.require(['engine.things.label'], function() {
         emissive: this.properties.emissive, 
         flatShading: false,
         depthTest: this.properties.depthTest,
-        reflectivity: .5
+        reflectivity: .5,
+        wireframe: this.wireframe,
       };
       if (this.room.pbr) {
         matargs.roughness = this.roughness;
@@ -131,7 +133,7 @@ elation.require(['engine.things.label'], function() {
 
       let font = this.fontasset.getInstance();
 
-      var geometry = new THREE.TextBufferGeometry( text, {
+      var geometry = new THREE.TextGeometry( text, {
         size: this.font_size,
         height: this.properties.thickness || this.font_size / 8,
         curveSegments: this.segments,
@@ -195,7 +197,7 @@ elation.require(['engine.things.label'], function() {
    }
    this.setMultilineText = function(text) {
       var lines = text.split('\n');
-      var geometry = new THREE.Geometry();
+      var geometry = new THREE.BufferGeometry();
       var linematrix = new THREE.Matrix4();
       var lineoffset = 0;
       var lineheight = 0;
@@ -219,7 +221,6 @@ elation.require(['engine.things.label'], function() {
           text:  [ 'property', 'text'],
           col:   [ 'property', 'color'],
           emissive:  [ 'property', 'emissive'],
-          font:  [ 'property', 'font'],
           bevel:  [ 'property', 'bevel'],
           bevel_thickness:  [ 'property', 'bevel_thickness'],
           bevel_size:  [ 'property', 'bevel_size'],
@@ -228,6 +229,13 @@ elation.require(['engine.things.label'], function() {
           roughness:  [ 'property', 'roughness'],
           metalness:  [ 'property', 'metalness'],
           envmap_id:  [ 'property', 'envmap_id'],
+          font:       [ 'property', 'font'],
+          font_size:  [ 'property', 'font_size'],
+          font_scale: [ 'property', 'font_scale'],
+          align:       [ 'property', 'align'],
+          verticalalign:  [ 'property', 'verticalalign'],
+          zalign: [ 'property', 'zalign'],
+          wireframe: [ 'property', 'wireframe'],
         };
       }
       return this._proxyobject;

package/scripts/translators/janusvfs.js

@@ -0,0 +1,20 @@
+elation.require([], function() {
+  elation.component.add('janusweb.translators.janusvfs', function() {
+    this.exec = function(args) {
+      return new Promise(async function(resolve, reject) {
+        setTimeout(async () => {
+          elation.engine.assetdownloader.fetchURL(args.url).then((ev) => {
+            let decoder = new TextDecoder('utf-8');
+            let src = decoder.decode(ev.target.data);
+            elation.events.fire({element: room._target, type: 'room_load_processing'});
+            room.loadFromSource(src);
+            resolve({room: { }, source: src});
+          }).catch((err) => {
+            console.log('oh no', err);
+            reject();
+          });
+        }, 1000);
+      });
+    }
+  });
+});

package/scripts/video.js

@@ -32,7 +32,7 @@ elation.require(['janusweb.janusbase'], function() {
             if (camera.name) {
               texture.setEye(camera.name);
             }
-          }
+          };
         }
         return mesh;
       } else {

package/scripts/websurface.js

@@ -5,6 +5,7 @@ elation.require(['engine.things.generic'], function() {
       this.defineProperties({
         websurface_id: { type: 'string' },
         image_id: { type: 'string' },
+        url: { type: 'string', set: this.updateURL },
         color: { type: 'color', default: 0xffffff },
         hovercolor: { type: 'color', default: 0x009900 },
         activecolor: { type: 'color', default: 0x00ff00 }
@@ -27,6 +28,8 @@ elation.require(['engine.things.generic'], function() {
         // and hope that most sites are running both.
 
         this.url = url.replace(/^http:/, 'https:');
+      } else {
+        this.url = this.websurface_id;
       }
 
       // FIXME - binding of member functions should happen at object creation
@@ -78,9 +81,12 @@ elation.require(['engine.things.generic'], function() {
     }
     this.createObjectDOM = function() {
         var websurface = this.room.websurfaces[this.properties.websurface_id];
-        if (websurface) {
+        if (!websurface) {
+          websurface = {};
+        }
           var width = websurface.width || 1024,
-              height = websurface.height || 768;
+              height = websurface.height || 768,
+              border = elation.utils.any(websurface.border, true);
 
           var iframe = elation.html.create('iframe');
           iframe.src = this.url;
@@ -93,12 +99,15 @@ elation.require(['engine.things.generic'], function() {
           iframe.style.width = width + 'px';
           iframe.style.height = height + 'px';
 
+          if (!border) {
+            iframe.style.border = 0;
+          }
+
           var obj = new THREE.CSS3DObject(div);
           obj.scale.set(1/width, 1/height, 1);
 
           this.iframe = iframe;
           this.domobj = obj;
-        }
     }
     this.activate = function() {
       if (!this.active) {
@@ -162,6 +171,11 @@ setTimeout(elation.bind(this, function() {
         this.objects['3d'].remove(this.domobj);
       }
     }
+    this.updateURL = function() {
+      if (this.iframe) {
+        this.iframe.src = this.url;
+      }
+    }
   }, elation.engine.things.janusbase);
 });
 

package/utils/build.sh

@@ -42,6 +42,9 @@ fi
 if [ ! -f "$BUILDDIR/manifest.json" ] || [ ! "$BUILDDIR/media/manifest.json" -ef "$BUILDDIR/manifest.json" ]; then
   mv "$BUILDDIR/media/manifest.json" "$BUILDDIR/"
 fi
+if [ ! -f "$BUILDDIR/service-worker.js" ] || [ ! "$BUILDDIR/media/service-worker.js" -ef "$BUILDDIR/service-worker.js" ]; then
+  mv "$BUILDDIR/media/service-worker.js" "$BUILDDIR/"
+fi
 
 if [ -e elation ] && [ -e elation/components/janusweb ]; then
   echo 'Building from project-local elation directory'

package/utils/init.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 echo "Creating directory tree..."
-DEPENDENCYPATHS=$(npm ls -parseable)
+DEPENDENCYPATHS=$(npm ls --all -parseable)
 
 declare -A dependencies
 
@@ -32,6 +32,6 @@ if [ ! -d elation ]; then
 
   cd ..
   ./elation web init
-  ./elation component enable engine physics share elements janusweb
+  ./elation component enable elation engine physics share elements janusweb ui utils
 fi
 echo "done"

package/scripts/chat.js

@@ -1,80 +0,0 @@
-elation.requireCSS('janusweb.chat');
-elation.require(['ui.window', 'ui.list', 'ui.input', 'elation.collection'], function() {
-  elation.template.add('janusweb.chat.message', '[{userId}] {message}');
-
-  elation.component.add('janusweb.chat', function() {
-    this.init = function() {
-      this.args.title = 'Chat Log';
-      this.args.bottom = true;
-      this.args.resizable = false;
-      this.args.controls = true;
-      this.client = this.args.client;
-      this.player = this.args.player || this.client.player;
-      this.network = this.args.network;
-
-      elation.janusweb.chat.extendclass.init.call(this);
-
-      this.chatbutton = elation.ui.button({classname: 'janusweb_chat', label: 'Chat'});
-      elation.events.add(this.chatbutton, 'ui_button_click', elation.bind(this, this.toggleChat));
-      this.client.buttons.add('chat', this.chatbutton);
-
-      this.messagecollection = elation.collection.indexed({index: 'timestamp'});
-      var panel = elation.ui.panel_vertical({classname: 'janusweb_chat_panel'});
-      this.messagelist = elation.ui.list({append: panel, classname: 'janusweb_chat_messages', itemcollection: this.messagecollection, attrs: {itemtemplate: 'janusweb.chat.message'}});
-      this.input = elation.ui.input({
-        append: panel, 
-        classname: 'janusweb_chat_input', 
-        placeholder: 'Press T to talk',
-        events: {
-          ui_input_accept: elation.bind(this, this.sendmessage),
-          focus: elation.bind(this, this.focus),
-          blur: elation.bind(this, this.blur),
-        }
-      });
-
-      this.setcontent(panel);
-      this.hide();
-    }
-    this.addmessage = function(msg) {
-      if (!msg.timestamp) msg.timestamp = window.performance.now();
-      var bottom = this.messagelist.isScrollAtBottom();
-      if (elation.utils.isObject(msg.message)) {
-        msg.message = msg.message.data;
-      }
-      this.messagecollection.add(msg);
-      if (bottom) {
-        this.messagelist.scrollToBottom();
-      }
-      this.refresh();
-    }
-    this.sendmessage = function() {
-      this.network.send({'method': 'chat', data: this.input.value});
-      var msg = {userId: 'me', message: this.input.value, self: true};
-      this.addmessage(msg);
-      elation.events.fire({element: this, type: 'janusweb_chat_send', data: msg});
-      this.input.value = '';
-    }
-    this.focus = function() {
-      if (this.input) {
-        this.input.focus();
-      }
-      if (this.player) {
-        this.player.disable();
-      }
-    }
-    this.blur = function() {
-      if (this.player) {
-        this.player.enable();
-      }
-    }
-    this.toggleChat = function() {
-      if (this.hidden) {
-        this.show();
-        this.refresh();
-      } else {
-        this.hide();
-        this.refresh();
-      }
-    }
-  }, elation.ui.window);
-});

package/scripts/ui.js

@@ -1,265 +0,0 @@
-elation.require(['ui.all', 'janusweb.urlbar'], function() {
-  elation.component.add('janusweb.ui.old', function() {
-    this.init = function() {
-      elation.janusweb.ui.navigation.extendclass.init.call(this);
-
-      this.client = this.args.client;
-      this.player = this.client.player;
-      this.janusweb = this.client.janusweb;
-
-      this.createUI();
-      //this.createUI3D();
-    }
-    this.createUI = function() {
-      this.navigation = elation.ui.panel({append: this, classname: 'janusweb_ui_navigation'})
-      this.backbutton = elation.ui.button({append: this.navigation, label: '◀', events: { click: elation.bind(this.janusweb, this.janusweb.navigateBack) } });
-      this.homebutton = elation.ui.button({append: this.navigation, label: '🏠', events: { click: elation.bind(this.janusweb, this.janusweb.navigateHome) } });
-      this.urlbar = elation.janusweb.urlbar({
-        append: this.navigation, 
-        label: '', 
-        value: this.janusweb.properties.url, 
-        janusweb: this.janusweb,
-        client: this.client,
-        events: { 
-          ui_input_accept: elation.bind(this, function(ev) { this.janusweb.setActiveRoom(ev.data); this.client.hideMenu(); this.player.enable(); }),
-          focus: elation.bind(this, function(ev) { this.player.disable(); }),
-          blur: elation.bind(this, function(ev) { this.player.enable(); }),
-        }
-      });
-    }
-
-    this.createUI3D = function() {
-      var nav3d = this.janusweb.spawn('generic', 'janusweb_navigation_3d', { position: [0,1,5] });
-      this.navigation3d = elation.ui.panel3d({append3d: nav3d, panelorientation: 'horizontal', classname: 'janusweb_ui_navigation'})
-
-      this.backbutton3d    = elation.ui.button3d({append3d: this.navigation3d, label: '◀', events: { click: elation.bind(this.janusweb, this.janusweb.navigateBack) } });
-      this.forwardbutton3d = elation.ui.button3d({append3d: this.navigation3d, label: '▶', events: { click: elation.bind(this.janusweb, this.janusweb.navigateForward) } });
-      this.homebutton3d    = elation.ui.button3d({append3d: this.navigation3d, label: '🏠', events: { click: elation.bind(this.janusweb, this.janusweb.navigateHome) } });
-    }
-    this.enable = function() {
-      elation.janusweb.ui.navigation.extendclass.enable.call(this);
-      this.navigation.enable();
-    }
-    this.disable = function() {
-      elation.janusweb.ui.navigation.extendclass.disable.call(this);
-      this.navigation.disable();
-    }
-  }, elation.ui.base);
-
-  /* base3d */
-  elation.component.add('ui.base3d', function() {
-    this.init = function() {
-      var append3d = this.args.append3d;
-      if (append3d.sceneobj) append3d = append3d.sceneobj;
-      this.style = new elation.ui.style3d();
-
-      if (append3d) {
-        this.engine = append3d.engine;
-        this.client = this.engine.client;
-        this.sceneobj = this.create();
-        if (this.sceneobj) {
-          append3d.add(this.sceneobj);
-        }
-      }
-    }
-    this.create = function() {
-    }
-    this.dimensions = function() {
-      if (this.sceneobj) {
-        var bounds = this.sceneobj.getBoundingBox();
-      }
-    }
-  }, elation.ui.base);
-
-  /* panel */
-  elation.component.add('ui.panel3d', function() {
-    this.init = function() {
-      elation.ui.panel3d.extendclass.init.call(this);
-    }
-    this.create = function() {
-      return elation.engine.things.ui_panel({engine: this.client.engine, client: this.client, properties: this.args, id: Math.floor(Math.random() * 1e10), events: this.events});
-    }
-  }, elation.ui.base3d);
-  elation.component.add('engine.things.ui_panel', function() {
-    this.postinit = function() {
-      elation.engine.things.ui_panel.extendclass.postinit.call(this);
-      this.defineProperties({
-        panelorientation: { type: 'string', default: 'vertical' }
-      });
-      elation.events.add(this, 'thing_add', elation.bind(this, this.update));
-    }
-    this.createObject3D = function() {
-      var box = new THREE.BoxGeometry(1,1,1);
-      var mat = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
-      var bbox = new THREE.Mesh(box, mat);
-
-      this.geometry = box;
-
-      var obj = new THREE.Object3D();
-      obj.add(bbox);
-      bbox.visible = false;
-      return obj;
-    }
-    this.update = function() {
-      var offset = [0,0,0];
-      var size = new THREE.Vector3();
-      var bounds = new THREE.Box3();
-
-      // Use the 3d object's children since it's a regular array, in order of insertion
-      for (var i = 0; i < this.objects['3d'].children.length; i++) {
-        if (!this.objects['3d'].children[i].userData || !this.objects['3d'].children[i].userData.thing) continue;
-        var child = this.objects['3d'].children[i].userData.thing;
-        var dims = child.getBoundingBox();
-        dims.size(size);
-        child.position.x = offset[0];
-        child.position.y = offset[1];
-        child.position.z = offset[2];
-
-        if (this.panelorientation == 'horizontal') {
-          offset[0] += size.x;
-        } else if (this.panelorientation == 'vertical') {
-          offset[1] -= size.y;
-        } else if (this.panelorientation == 'depth') {
-          offset[2] += size.z;
-        }
-
-        var dims = child.getBoundingBox();
-        bounds.expandByPoint(dims.min);
-        bounds.expandByPoint(dims.max);
-      }
-      var worldpos = this.localToWorld(new THREE.Vector3(0,0,0));
-      bounds.min.sub(worldpos);
-      bounds.max.sub(worldpos);
-      bounds.size(size);
-      //this.objects['3d'].scale.set(size.x, size.y, size.z);
-
-      this.geometry.vertices[0].set(bounds.max.x, bounds.max.y, bounds.max.z);
-      this.geometry.vertices[1].set(bounds.max.x, bounds.max.y, bounds.min.z);
-      this.geometry.vertices[2].set(bounds.max.x, bounds.min.y, bounds.max.z);
-      this.geometry.vertices[3].set(bounds.max.x, bounds.min.y, bounds.min.z);
-      this.geometry.vertices[4].set(bounds.min.x, bounds.max.y, bounds.min.z);
-      this.geometry.vertices[5].set(bounds.min.x, bounds.max.y, bounds.max.z);
-      this.geometry.vertices[6].set(bounds.min.x, bounds.min.y, bounds.min.z);
-      this.geometry.vertices[7].set(bounds.min.x, bounds.min.y, bounds.max.z);
-
-      if (this.geometry.boundingBox) {
-        this.geometry.boundingBox.copy(bounds);
-      } else {
-        this.geometry.boundingBox = bounds;
-      }
-    }
-  }, elation.engine.things.generic);
-
-  /* button */
-  elation.component.add('ui.button3d', function() {
-    this.create = function() {
-      return elation.engine.things.ui_button({engine: this.client.engine, client: this.client, properties: this.args, id: Math.floor(Math.random() * 1e10), events: this.events});
-    }
-  }, elation.ui.base3d);
-  elation.component.add('engine.things.ui_button', function() {
-    this.postinit = function() {
-      elation.engine.things.ui_panel.extendclass.postinit.call(this);
-      this.defineProperties({
-        label: { type: 'string', default: '' },
-        fontSize: { type: 'integer', default: 512 },
-        font: { type: 'string', default: 'Open Sans Regular' },
-      });
-      elation.events.add(this, 'mouseover,mouseout,mousedown,mouseup,click', this);
-    }
-    this.createObject3D = function() {
-      var box = new THREE.BoxGeometry(1,0.5,0.1);
-      box.applyMatrix(new THREE.Matrix4().makeTranslation(0,0,.05));
-      var mat = new THREE.MeshBasicMaterial({color: 0x0000ff, wireframe: true});
-      var bbox = new THREE.Mesh(box, mat);
-
-      var labelgen = this.getAssetWrapper();
-      var label = labelgen.getLabel(this.label);
-
-      var buttongeo = new THREE.BoxGeometry(0.8,.4,.1);
-      var buttonmat = new THREE.MeshPhongMaterial({color: 0x999999, map: label});
-      var sidemat = new THREE.MeshPhongMaterial({color: 0x999999});
-      var button = new THREE.Mesh(buttongeo, new THREE.MeshFaceMaterial([sidemat, sidemat, sidemat, sidemat, buttonmat, sidemat]));
-
-      this.geometry = buttongeo;
-      this.material = buttonmat;
-
-      var obj = new THREE.Object3D(); 
-      bbox.visible = false;
-      obj.add(bbox);
-      obj.add(button);
-
-      return obj;
-    }
-    this.createChildren = function() {
-    }
-    this.createForces = function() {
-      this.geometry.computeBoundingBox();
-      this.setCollider('box', this.geometry.boundingBox);
-    }
-
-    this.mouseover = function() {
-      this.material.color.setHex(0xccffcc);
-    }
-    this.mouseout = function() {
-      this.material.color.setHex(0x999999)
-    }
-    this.mousedown = function() {
-alert('e');
-      this.scale.z = 0.5;
-    }
-    this.mouseup = function() {
-      this.scale.z = 1.0;
-    }
-    this.getAssetWrapper = function() {
-      var color = (this.properties.color instanceof THREE.Color ? this.properties.color : new THREE.Color(this.properties.color));
-      if (!this.labelgen) {
-        var genname = ['label2d', this.font, this.fontSize, color.getHexString()].join('_');
-        var asset = elation.engine.assets.find('labelgen', genname);
-        if (!asset) {
-          asset = elation.engine.assets.get({
-            assettype: 'labelgen',
-            assetname: genname,
-            color: '#' + color.getHexString(),
-            font: this.font,
-            fontSize: this.fontSize,
-            outlineSize: 0
-          });
-        }
-        this.labelgen = asset;
-      }
-      return this.labelgen;
-    }
-  }, elation.engine.things.generic);
-
-  elation.define('ui.style3d', {
-    margin: function() { },
-    marginLeft: 0,
-    marginRight: 0,
-    marginTop: 0,
-    marginBottom: 0,
-    marginFront: 0,
-    marginBack: 0,
-
-    padding: function() { },
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingFront: 0,
-    paddingBack: 0,
-
-    width: 'auto',
-    height: 'auto',
-    depth: 'auto',
-
-    border: function() { },
-    borderWidth: 0,
-    borderColor: 0xffffff,
-    borderStyle: 'solid',
-    borderRadius: 0,
-
-    background: function() { },
-    backgroundColor: 'trans',
-    backgroundImage: null,
-  });
-});

package/scripts/urlbar.js

@@ -1,93 +0,0 @@
-elation.require(['ui.input'], function() {
-  elation.requireCSS('janusweb.urlbar');
-
-  elation.component.add('janusweb.urlbar', function() {
-    this.create = function() {
-      this.janusweb = this.args.janusweb;
-      this.client = this.args.client;
-
-      this.indicator = elation.ui.indicator({ append: this, state: 'ready' });
-      this.addclass('janusweb_urlbar');
-
-      if (this.container instanceof HTMLInputElement) {
-        this.inputelement = this.container;
-      } else {
-        var inputs = elation.find('input', this.container);
-        if (inputs.length > 0) {
-          this.inputelement = inputs[0];
-        } else {
-          this.inputelement = elation.html.create({tag: 'input', append: this.container});
-          if (this.args.type) { 
-            this.inputelement.type = this.args.type;
-          }
-        }
-      }
-
-      this.progress = elation.ui.progressbar({ append: this, value: 0, classname: 'janusweb_urlbar_progress' });
-      this.progress.hide();
-
-      if (this.args.id) {
-        this.inputelement.id = this.args.id;
-      }
-
-      elation.events.add(this.janusweb, 'room_change', elation.bind(this, this.updateCurrentURL));
-    }
-    this.updateCurrentURL = function() {
-      this.value = this.janusweb.url;
-      var room = this.janusweb.currentroom;
-      elation.events.add(room, 'room_load_queued', elation.bind(this, this.updateStatus, 'queued'));
-      elation.events.add(room, 'room_load_start', elation.bind(this, this.updateStatus, 'downloading'));
-      elation.events.add(room, 'room_load_processing', elation.bind(this, this.updateStatus, 'processing'));
-      elation.events.add(room, 'room_load_processed', elation.bind(this, this.updateRoomAssets));
-      elation.events.add(room, 'room_load_complete', elation.bind(this, this.updateStatus, 'complete'));
-
-      elation.events.add(room, 'room_load_progress', elation.bind(this, this.updateProgress));
-
-      elation.events.add(room, 'room_add_asset', elation.bind(this, this.roomAddAsset));
-      this.loading = {};
-      this.progress.set(0);
-      this.progress.show();
-    }
-    this.updateStatus = function(status, ev) {
-    }
-    this.updateRoomAssets = function(ev) {
-      this.updateStatus('processed');
-      var room = this.janusweb.currentroom;
-      var assets = room.getActiveAssets();
-      for (var type in assets) {
-        for (var id in assets[type]) {
-          var asset = assets[type][id];
-          elation.events.add(asset, 'asset_load_progress', elation.bind(this, this.updateProgress));
-        }
-      }
-    }
-    this.roomAddAsset = function(ev) {
-      var room = this.janusweb.currentroom;
-      var asset = ev.data;
-
-      if (!this.loading[asset.src]) {
-        elation.events.add(asset, 'asset_load_progress', elation.bind(this, this.updateProgress));
-      }
-    }
-    this.updateProgress = function(ev) {
-      //console.log('room had some progress', this.loading);
-      var progress = ev.data;
-
-      var url = progress.src;
-      if (!this.loading[url]) {
-        this.loading[url] = progress;
-      }
-      this.loading[url].loaded = progress.loaded;
-
-      var loaded = 0, total = 0, count = 0;
-      for (var k in this.loading) {
-        count++;
-        loaded += this.loading[k].loaded;
-        total += this.loading[k].total;
-      }
-      var percent = loaded / total;
-      //console.log('room had some progress', count + ' files, ' + loaded + ' / ' + total + ' bytes, ' + percent.toFixed(2) + '%', url);
-      this.progress.set(percent);
-    }
-  }, elation.ui.input);
-});

package/templates/janusweb.tpl

@@ -1,3 +0,0 @@
-{dependency name="janusweb.client"}
-<div data-elation-component="janusweb.client" data-elation-args.homepage="http://www.janusvr.com/index.html" id="default"></div>
-{set var="page.title"}JanusWeb{/set}