janusweb 1.5.42 → 1.5.44

package/CHANGELOG

@@ -1,3 +1,26 @@
+JanusWeb 1.5.42
+===============
+- New Features
+  - TiltBrush / OpenBrush support via three-icosa
+  - VOIP "start call" button
+  - Synced avatar morphtargets over network
+  - New <outliner> built-in element
+  - Support for .hdr envmaps
+- Updates
+  - glTF optimizations: KTX2 textures, Meshopt compression
+  - VR controller improvements
+  - Scriptable player walk/run speeds
+  - Editor improvements
+  - Upgrade Three.js to r140
+- Bugfixes
+  - Handle localStorage permission rejection
+  - Fixed particle rates < 1 particle per frame
+  - Fixed toon shader for <room toon="true">
+  - Material fixes for emissive, clearcoat, transmission tint, etc
+  - Fixed FBX texture load path
+  - Update player gravity when flying is toggled
+
+
 JanusWeb 1.5
 ============
 - Threejs upgrade to r133

package/css/janusweb.css

@@ -263,7 +263,8 @@ janus-viewer section {
 janus-viewer ui-scrollindicator {
   text-align: center;
   position: absolute;
-  bottom: 5vh;
+  bottom: 2vh;
+  overflow: hidden;
 }
 janus-viewer ui-scrollindicator:after {
   border-left: 4px solid white;
@@ -271,6 +272,7 @@ janus-viewer ui-scrollindicator:after {
   width: 50px;
   height: 50px;
   transform: rotate(-45deg);
+  transform-origin: 0 5px;
   display: block;
   animation: scrollindicator-bounce 1s infinite;
   content: ' ';
@@ -301,6 +303,9 @@ janus-overlay[hidden] {
   pointer-events: none;
   display: block !important;
 }
-fireboxroom {
+janus-viewer room,
+janus-viewer assets,
+fireboxroom room,
+fireboxroom assets {
   display: none;
 }

package/media/assets/webui/apps/buttons/buttons.js

@@ -202,16 +202,25 @@ elation.elements.define('janus-button-audio', class extends elation.elements.ui.
   init() {
     super.init();
     this.defineAttribute('muted', { type: 'boolean' });
+    janus.engine.systems.sound.getOutputChannel().then(c => this.output_main = c);
   }
   create() {
+    /*
     this.popupcontent = `
-      <ui-slider name="volume_env" label="Environment" min="0" max="1.2" value="1"></ui-slider>
-      <ui-slider name="volume_voip" label="Voice Chat" min="0" max="1.2" value="1"></ui-slider>
+      <ui-slider name="volume_env" label="Main Volume" min="0" max="150" value="100" snap="1"></ui-slider>
+      <ui-slider name="volume_voip" label="Voice Chat" min="0" max="150" value="100" snap="1"></ui-slider>
+    `;
+    */
+    this.popupcontent = `
+      <ui-slider name="volume_env" label="Main Volume" min="0" max="150" value="100" snap="1"></ui-slider>
     `;
     super.create();
     this.createPopup();
     this.hidePopup();
-    elation.events.add(this.popup.content.elements['volume_env'], 'change', (ev) => this.adjustEnvironmentVolume(ev.data));
+
+    console.log(this.popup.content);
+    elation.events.add(this.popup.content.querySelector('[name="volume_env"]'), 'change', (ev) => this.adjustEnvironmentVolume(ev.data));
+    //elation.events.add(this.popup.content.querySelector('[name="volume_voip"]'), 'change', (ev) => this.adjustVoipVolume(ev.data));
     //this.addEventListener('click', (ev) => this.handleClick(ev));
 
     let soundsystem = janus.engine.systems.sound;
@@ -226,10 +235,15 @@ elation.elements.define('janus-button-audio', class extends elation.elements.ui.
     elation.events.add(soundsystem, 'sound_enabled', (ev) => this.updateMuteState());
   }
   adjustEnvironmentVolume(volume) {
+    //console.log('adjust environment output', room.audionodes.gain.gain.value);
+    /*
     if (room.audionodes) {
       room.audionodes.gain.gain.value = volume;
       this.updateMuteState();
     }
+    */
+    console.log(volume);
+    janus.engine.systems.sound.reallistener.gain.gain.value = volume / 100;
   }
   adjustVOIPVolume(volume) {
     // TODO

package/media/assets/webui/apps/comms/comms.css

@@ -169,4 +169,4 @@ janus-voip-picker>ul li button[disabled] {
   color: #888;
   text-shadow: 0 0 5px #444;
   cursor: not-allowed;
-
+}

package/media/assets/webui/apps/comms/comms.js

@@ -52,7 +52,7 @@ elation.elements.define('janus-comms-status', class extends elation.elements.bas
         this.state = 'disconnected';
       }
     }
-    this.elements = elation.elements.fromTemplate('janus.comms.status', this);
+    this.refresh();
 
     //elation.events.add(player._target, 'username_change', (ev) => this.handleUsernameChange(ev));
   }

package/media/assets/webui/apps/comms/voip.css

@@ -1,10 +1,13 @@
 janus-voip-client {
-  display: flex;
   border: 1px solid black;
   position: relative;
   max-width: 75vh;
   flex-wrap: wrap;
 }
+janus-voip-client-janus {
+  display: flex;
+  flex-direction: horizontal;
+}
 janus-voip-localuser {
   display: block;
   bottom: 0px;
@@ -20,7 +23,7 @@ janus-voip-localuser video {
   margin: 1px 0 0 1px;
 }
 janus-voip-remoteuser {
-  display: inline-block;
+  xdisplay: inline-block;
   border: 2px solid black;
   position: relative;
   font-family: monospace;
@@ -34,7 +37,7 @@ janus-voip-remoteuser video {
   height: 128px;
 }
 janus-voip-remoteuser video.active {
-  display: block;
+  display: inline-block;
 }
 janus-voip-remoteuser[active] {
   transform: scale(1, 1);
@@ -68,6 +71,7 @@ janus-voip-localuser ui-button {
   font-size: 0;
   width: auto;
   transition: opacity 100ms linear;
+  z-index: 100;
 }
 janus-voip-remoteuser ui-button {
   font-size: 0;
@@ -99,6 +103,11 @@ janus-voip-localuser ui-button.muted:before {
 }
 janus-voip-localuser:hover ui-button,
 janus-voip-remoteuser:hover ui-button {
+  display: block;
+  opacity: .6;
+}
+janus-voip-localuser ui-button:hover,
+janus-voip-remoteuser ui-button:hover {
   display: block;
   opacity: 1;
 }

package/media/assets/webui/apps/comms/voip.js

@@ -555,6 +555,7 @@ elation.elements.define('janus-voip-remoteuser', class extends elation.elements.
   }
   setUserData(data) {
     this.id = data.id;
+console.log('got a remote voip user', data);
 
     if (!this.label) {
       let label = document.createElement('h2');
@@ -621,11 +622,12 @@ elation.elements.define('janus-voip-remoteuser', class extends elation.elements.
     if (!this.controlpanel) {
       this.controlpanel = elation.elements.create('ui-panel', { bottom: 1, append: this });
       this.mutebutton = elation.elements.create('ui-button', { label: 'Mute', name: "mutebutton", append: this.controlpanel });
-/*
-      this.volume = elation.elements.create('ui-slider', { name: "volume", min: 0, max: 2, value: this.video.volume, append: this.controlpanel });
+      this.volume = elation.elements.create('ui-slider', { name: "volume", min: 0, max: 200, value: this.video.volume * 100, append: this.controlpanel, snap: 1 });
 
       elation.events.add(this.volume, 'change', (ev) => {
-        remoteuser.setVolume(ev.data);
+        if (remoteuser) {
+          remoteuser.setVolume(ev.data / 100);
+        }
         this.muted = (ev.data == 0);
         if (this.muted && !this.mutebutton.hasclass('muted')) {
           this.mutebutton.addclass('muted');
@@ -633,7 +635,6 @@ elation.elements.define('janus-voip-remoteuser', class extends elation.elements.
           this.mutebutton.removeclass('muted');
         }
       });
-*/
       elation.events.add(this.mutebutton, 'click', (ev) => {
 /*
         remoteuser.setVolume(0);
@@ -730,6 +731,7 @@ elation.elements.define('janus-voip-remoteuser', class extends elation.elements.
   }
   toggleMute() {
     this.muted = !this.muted;
+console.log('mute?', this.muted, this);
     let remoteuser = janus.network.remoteplayers[this.id];
     if (this.muted) {
       this.mutebutton.addclass('muted');
@@ -977,12 +979,12 @@ elation.elements.define('janus-voip-picker-audio', class extends elation.element
 
     if (this.elements.inputDevice.value && this.elements.inputDevice.value != 'default') {
       console.log('input!', this.elements.inputDevice.value);
-      constraints.audio.deviceId = { exact: this.elements.inputDevice.value };
+      constraints.audio.deviceId = { ideal: this.elements.inputDevice.value };
     }
     if (this.elements.videoDevice && this.elements.videoDevice.value && this.elements.videoDevice.value != 'none') {
       console.log('video!', this.elements.videoDevice.value);
       constraints.video = {
-        deviceId: { exact: this.elements.videoDevice.value },
+        deviceId: { ideal: this.elements.videoDevice.value },
         height: 256,
         width: 256
       };
@@ -1344,3 +1346,11 @@ elation.elements.define('janus-voip-client-incomingcall', class extends elation.
     }
   }
 });
+elation.elements.define('janus-voip-client-none', class extends elation.elements.base {
+  create() {
+  }
+  connect() {
+  }
+  setInputStream(stream) {
+  }
+});

package/media/assets/webui/apps/editor/editor.css

@@ -21,6 +21,7 @@ janus-ui-editor-property-integer {
 .janus_editor ui-input>ui-label {
   padding: .2em;
   vertical-align: middle;
+  min-width: auto;
 }
 .janus_editor ui-input>input {
   width: 100%;

package/media/assets/webui/apps/editor/editor.js

@@ -157,23 +157,30 @@ elation.elements.define('janus.ui.editor.panel', class extends elation.elements.
         col: 'lime',
         opacity: .4,
         outline: 3,
+        layers: '10',
       });
       this.outliner_hover = room.createObject('outliner', {
         col: 'gray',
         opacity: .4,
         outline: 1,
+        layers: '10',
       });
 setTimeout(() => {
       this.outliner_selected.col = 'lime';
       this.outliner_hover.col = 'gray';
+this.outliner_selected.setLayers('10');
+this.outliner_hover.setLayers('10');
 }, 0);
+      let editor = this;
       this.outliner_hover.update = function() {
+/*
         let rc = player.raycast();
         if (rc.length > 0 && rc[0].object !== room) {
           this.select(rc[0].object);
         } else {
           this.deselect();
         }
+*/
       }
     } else if (this.outliner_selected.room !== room) {
       room.appendChild(this.outliner_selected);
@@ -255,7 +262,7 @@ setTimeout(() => {
     this.roomedit.rotationsnap = snap;
     let manipulator = this.getManipulator();
     if (snap == 'Off') snap = 0;
-    if (manipulator) manipulator.setRotationSnap(+snap * THREE.Math.DEG2RAD);
+    if (manipulator) manipulator.setRotationSnap(+snap * THREE.MathUtils.DEG2RAD);
 /*
     if (this.elements.rotatesnap.value != snap) {
       this.elements.rotatesnap.value = snap || 'Off';
@@ -703,7 +710,7 @@ console.log('set translation snap', ev.data, ev);
         this.editObjectSnapVector(obj[attrname], this.roomedit.snap);
       } else if (attrtype == 'euler') {
         let rot = new THREE.Euler();
-        let move = (ev.deltaY > 0 ? -1 : 1) * this.roomedit.rotationsnap * THREE.Math.DEG2RAD;
+        let move = (ev.deltaY > 0 ? -1 : 1) * this.roomedit.rotationsnap * THREE.MathUtils.DEG2RAD;
         if (ev.ctrlKey) {
           rot.x += move;
         }
@@ -721,7 +728,7 @@ console.log('set translation snap', ev.data, ev);
         let quat2 = new THREE.Quaternion().setFromEuler(rot);
         quat.multiply(quat2);
         obj[attrname].radians.setFromQuaternion(quat);
-        //this.editObjectSnapVector(obj[attrname], this.roomedit.rotationsnap * THREE.Math.DEG2RAD);
+        //this.editObjectSnapVector(obj[attrname], this.roomedit.rotationsnap * THREE.MathUtils.DEG2RAD);
       } else if (attrtype == 'color') {
         let move = 4/255 * (ev.deltaY < 0 ? 1 : -1);
 
@@ -741,9 +748,9 @@ console.log('set translation snap', ev.data, ev);
           col.g += move;
           col.b += move;
         }
-        col.r = THREE.Math.clamp(col.r, 0, 1);
-        col.g = THREE.Math.clamp(col.g, 0, 1);
-        col.b = THREE.Math.clamp(col.b, 0, 1);
+        col.r = THREE.MathUtils.clamp(col.r, 0, 1);
+        col.g = THREE.MathUtils.clamp(col.g, 0, 1);
+        col.b = THREE.MathUtils.clamp(col.b, 0, 1);
         console.log('opacity after', obj.opacity);
         obj[mode] = col;
 obj.opacity = obj.opacity;
@@ -769,7 +776,7 @@ obj.opacity = obj.opacity;
         } else {
           amount /= divisor;
         }
-        obj[attrname] = THREE.Math.clamp(obj[attrname] + amount, min, max);
+        obj[attrname] = THREE.MathUtils.clamp(obj[attrname] + amount, min, max);
 
       } else if (attrtype == 'boolean' || attrtype == 'bool') {
         if (ev.deltaY < 1) {
@@ -893,10 +900,10 @@ obj.updateDirvecsFromOrientation();
         else if (this.roomedit.snap == .01) amount = 15;
         else if (this.roomedit.snap == .001) amount = 5;
 
-        let rot = new THREE.Euler().setFromVector3(vec.clone().multiplyScalar(amount * THREE.Math.DEG2RAD));
+        let rot = new THREE.Euler().setFromVector3(vec.clone().multiplyScalar(amount * THREE.MathUtils.DEG2RAD));
         let quat = new THREE.Quaternion();
         quat.setFromEuler(rot);
-        //obj.rotation = V(rot.x * THREE.Math.RAD2DEG, rot.y * THREE.Math.RAD2DEG, rot.z * THREE.Math.RAD2DEG);
+        //obj.rotation = V(rot.x * THREE.MathUtils.RAD2DEG, rot.y * THREE.MathUtils.RAD2DEG, rot.z * THREE.MathUtils.RAD2DEG);
         obj.orientation.multiply(quat);
 console.log('rotate it', vec.clone().multiplyScalar(amount), amount, rot, quat);
 
@@ -915,9 +922,9 @@ console.log('rotate it', vec.clone().multiplyScalar(amount), amount, rot, quat);
         break;
       case 'col':
         let snap = 10 / 255;
-        obj.col = V(THREE.Math.clamp(obj.col.r + vec.x * snap, 0, 1),
-                    THREE.Math.clamp(obj.col.g + vec.y * snap, 0, 1),
-                    THREE.Math.clamp(obj.col.b + vec.z * snap, 0, 1));
+        obj.col = V(THREE.MathUtils.clamp(obj.col.r + vec.x * snap, 0, 1),
+                    THREE.MathUtils.clamp(obj.col.g + vec.y * snap, 0, 1),
+                    THREE.MathUtils.clamp(obj.col.b + vec.z * snap, 0, 1));
 
 console.log('change color', obj.col, vec);
         break;

package/media/assets/webui/apps/locomotion/teleporter.js

@@ -65,9 +65,9 @@ janus.registerElement('locomotion_teleporter', {
       rand_pos: V(.5,0,.5),
       accel: V(0,-1,0),
       rand_accel: V(0,2,0),
-      rate: 50,
+      rate: 10,
       count: 60,
-      duration: .5,
+      duration: 3,
       collision_id: '',
       collidable: false,
       pickable: false,
@@ -167,8 +167,14 @@ janus.registerElement('locomotion_teleporter', {
         speed = dir.length();
         dir.divideScalar(speed);
         let hits = room.raycast(dir, p0, null, speed);
-        if (hits.length > 0) {
-          let hit = hits[0];
+        let hit = false;
+        for (let j = 0; j < hits.length; j++) {
+          if (hits[j].object !== player) {
+            hit = hits[j];
+            break;
+          }
+        }
+        if (hit) {
           p1.copy(hit.point);
           if (hit.distance < 200) {
             this.pos = player.worldToLocal(hit.point);
@@ -337,6 +343,7 @@ janus.registerElement('locomotion_teleporter', {
   enableCursor() {
     if (!room.teleport) return;
     this.visible = true;
+    this.particles.resetParticles();
     this.particles.visible = true;
     if (this.laser.room !== room._target) room.appendChild(this.laser);
     if (this.particles.room !== room._target) room.appendChild(this.particles);

package/media/assets/webui/apps/xrmenu/xrmenu-assets.json

@@ -2,5 +2,6 @@
   { "assettype": "image", "name": "xrmenu-button-home", "src": "./images/home-button.png", "hasalpha": true },
   { "assettype": "image", "name": "xrmenu-button-back", "src": "./images/previous-button.png", "hasalpha": true },
   { "assettype": "image", "name": "xrmenu-button-reset", "src": "./images/address-location.png", "hasalpha": true },
-  { "assettype": "image", "name": "xrmenu-button-reload", "src": "./images/redo-arrow.png", "hasalpha": true }
+  { "assettype": "image", "name": "xrmenu-button-reload", "src": "./images/redo-arrow.png", "hasalpha": true },
+  { "assettype": "image", "name": "xrmenu-button-sound", "src": "./images/audio-settings.png", "hasalpha": true }
 ]

package/media/assets/webui/apps/xrmenu/xrmenu.js

@@ -18,11 +18,33 @@ janus.registerElement('xrmenu', {
     this.worlddir = V();
     this.playervec = V();
 
+    this.panels = {};
+
     let xrmenu = janus.ui.apps.default.apps.xrmenu;
+    if (!xrmenu) return;
     let asseturl = xrmenu.resolveFullURL('./xrmenu-assets.json');
     fetch(asseturl).then(res => res.json()).then(assetlist => {
       this.assetpack = elation.engine.assets.loadJSON(assetlist, xrmenu.resolveFullURL('./'));
 
+/*
+  * Navigation
+    * Home
+    * Respawn
+    * Exit VR
+    * Refresh
+  * Sound
+    * Output
+      * Output Select
+      * Volume Levels
+        * Environment
+        * Media
+        * Voices
+    * Input
+      * Input Select
+      * Volume Levels
+  * Settings
+*/
+
       this.buttons = {
         home: this.createObject('xrmenu-button', {
           pos: V(.08, 0, 0),
@@ -54,12 +76,31 @@ janus.registerElement('xrmenu', {
           //image_id: 'xrmenu-button-exitvr',
           //onactivate: (ev) => this.engine.client.stopXR(),
         }),
+        sound: this.createObject('xrmenu-button', {
+          pos: V(.56, 0, 0),
+          label: 'Exit VR',
+          image_id: 'xrmenu-button-sound',
+          //onactivate: (ev) => this.engine.client.stopXR(),
+        }),
       };
       this.buttons.home.addEventListener('activate', ev => janus.navigateHome());
       this.buttons.back.addEventListener('activate', ev => janus.navigateBack());
       this.buttons.reset.addEventListener('activate', ev => player.reset_position());
       this.buttons.reload.addEventListener('activate', ev => location.reload());
       this.buttons.exitvr.addEventListener('activate', ev => this.engine.client.stopXR());
+      this.buttons.sound.addEventListener('activate', ev => {
+        if (!this.panels['sound']) {
+          this.panels['sound'] = this.buttons.sound.createObject('xrmenu-popup', {
+            content: 'janus-voip-picker'
+          });
+        } else {
+          if (this.panels['sound'].parent === this.buttons.sound) {
+            this.buttons.sound.removeChild(this.panels['sound']);
+          } else {
+            this.buttons.sound.appendChild(this.panels['sound']);
+          }
+        }
+      });
       this.reflow();
     });
   },
@@ -138,7 +179,7 @@ janus.registerElement('xrmenu-popup', {
 
   create() {
 
-    let element = elation.elements.create(this.content);
+    let element = elation.elements.create(this.content, { deferred: false });
     //document.body.appendChild(element);
     //this.shadowdom.appendChild(element);
 
@@ -146,50 +187,36 @@ janus.registerElement('xrmenu-popup', {
     this.shadowdom = container.attachShadow({mode: 'open'});
     //container.appendChild(element);
 
-setTimeout(() => {
-    for (let i = 0; i < document.styleSheets.length; i++) {
-      let styleel = document.createElement('link');
-      styleel.rel = 'stylesheet';
-      styleel.href = document.styleSheets[i].href;
-      this.shadowdom.appendChild(styleel);
-    }
-}, 1000);
-
-    this.shadowdom.appendChild(element);
+    setTimeout(() => {
+      this.initShadowStylesheets();
+    }, 0);
+    //this.shadowdom.appendChild(element);
+    let a = document.createElement('html');
+    let b = document.createElement('body');
+    b.className = 'dark janusweb';
+    a.appendChild(b);
+    this.shadowdom.appendChild(a);
+    b.appendChild(element);
     document.body.appendChild(container);
 
+    elation.events.add(element, 'styleupdate', ev => {
+      this.initShadowStylesheets();
+    });
 
-container.style.position = 'absolute';
-container.style.top = '0';
-container.style.left = '0';
-container.style.zIndex = -1000;
-container.style.width = this.width + 'px';
-container.style.height = this.height + 'px';
-container.style.overflow = 'auto';
-container.style.opacity = 0;
-//container.style.transform = 'translateX(-40000px)';
-//container.style.border = '1px solid red';
+    container.style.position = 'absolute';
+    container.style.top = '0';
+    container.style.left = '0';
+    container.style.zIndex = -1000;
+    container.style.width = this.width + 'px';
+    container.style.height = this.height + 'px';
+    container.style.overflow = 'hidden';
+    container.style.opacity = 0;
+    //container.style.transform = 'translateX(-40000px)';
+    //container.style.border = '1px solid red';
 
-this.elementcontainer = container;
+    this.elementcontainer = container;
 
-setTimeout(() => {
-    let canvas = element.toCanvas(this.width, this.height, 1);
-/*
-document.body.appendChild(canvas);
-canvas.style.position = 'absolute';
-canvas.style.top = '0';
-canvas.style.left = '0';
-canvas.style.zIndex = 1000;
-canvas.style.border = '1px solid red';
-*/
-    this.loadNewAsset('image', {
-      id: 'xrmenu-element-canvas',
-      canvas: canvas,
-    });
-    this.plane.image_id = 'xrmenu-element-canvas';
-    this.canvas = canvas;
-    elation.events.add(canvas, 'update', ev => this.refresh());
-}, 1000);
+    this.initElementCanvas();
 
     this.plane = this.createObject('object', {
       id: 'plane',
@@ -210,6 +237,71 @@ canvas.style.border = '1px solid red';
     this.plane.addEventListener('mouseover', ev => this.handleMouseOver(ev));
     this.plane.addEventListener('mouseout', ev => this.handleMouseOut(ev));
   },
+  initElementCanvas() {
+    let element = this.element;
+
+    if (!(element && element.isConnected && element.toCanvas)) {
+      setTimeout(() => this.initElementCanvas(), 100);
+      return;
+    }
+
+    console.log(element.isConnected, element);
+    let canvas = element.toCanvas(this.width, this.height, 1);
+/*
+document.body.appendChild(canvas);
+canvas.style.position = 'absolute';
+canvas.style.top = '0';
+canvas.style.left = '0';
+canvas.style.zIndex = 1000;
+canvas.style.border = '1px solid red';
+*/
+    this.loadNewAsset('image', {
+      id: 'xrmenu-element-canvas',
+      canvas: canvas,
+      transparent: true,
+    });
+    this.plane.image_id = 'xrmenu-element-canvas';
+    this.canvas = canvas;
+    elation.events.add(canvas, 'asset_update', ev => this.refresh());
+
+    element.updateStylesheets(elation.engine.assets.corsproxy).then(d => {
+      element.updateCanvas();
+      this.refresh();
+    });
+
+  },
+  initShadowStylesheets() {
+    let promises = [];
+    for (let i = 0; i < document.styleSheets.length; i++) {
+      //promises.push(new Promise(accept => {
+        if (document.styleSheets[i].href ) {
+          // external stylesheet
+          let styleel = document.createElement('link');
+          styleel.rel = 'stylesheet';
+          styleel.href = elation.engine.assets.corsproxy + document.styleSheets[i].href;
+          this.shadowdom.appendChild(styleel);
+        } else if (document.styleSheets[i].cssRules.length > 0) {
+          // inline <style>  definition
+          let txt = '';
+          let sheet = document.styleSheets[i];
+          for (let i = 0; i < sheet.cssRules.length; i++) {
+            txt += sheet.cssRules[i].cssText + '\n';
+          }
+          let styleel = document.createElement('style');
+          styleel.appendChild(document.createTextNode(txt));
+          this.shadowdom.appendChild(styleel);
+        }
+      //}));
+    }
+/*
+    Promise.all(promises).then(() => {
+console.log('stylesheets loaded!');
+setTimeout(() => {
+      this.element.updateCanvas().then(() => this.refresh());
+}, 400);
+    });
+*/
+  },
   handleMouse(ev) {
     if (this.element && this.canvas) {
       let mousexy = [ev.data.uv.x * this.canvas.width, (1 - ev.data.uv.y) * this.canvas.height];
@@ -245,6 +337,16 @@ canvas.style.border = '1px solid red';
             this.currenttarget.dispatchEvent(mouseout);
           }
           this.currenttarget = target;
+          let mousemove = new EventClass('mousemove', {
+            bubbles: true,
+            cancelable: true,
+            screenX: mousexy[0],
+            screenY: mousexy[1],
+            clientX: mousexy[0],
+            clientY: mousexy[1],
+            view: window,
+          });
+          this.currenttarget.dispatchEvent(mousemove);
           //let mouseover = elation.events.clone(fakeev, { type: 'mouseover' });
           let mouseover = new EventClass('mouseover', {
             bubbles: true,