janusweb 1.5.41 → 1.5.43

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

@@ -115,7 +115,8 @@ elation.elements.define('janus.ui.editor.panel', class extends elation.elements.
       'manipulate_out':   [ 'keyboard_e',  (ev) => this.editObjectManipulateOut(ev) ],
     });
     janus.engine.systems.controls.addContext('roomedit_paste', {
-      'paste':     [ 'keyboard_ctrl_v', (ev) => { if (ev.value == 1) this.editObjectPaste(ev); } ],
+      'add':     [ 'keyboard_ctrl_a', (ev) => { if (ev.value == 1) this.showCreateDialog(ev); } ],
+      'paste':     [ 'keyboard_ctrl_v', (ev) => { if (ev.value == 1) this.editObjectPaste(ev);} ],
     });
     janus.engine.systems.controls.activateContext('roomedit_paste');
 
@@ -134,6 +135,7 @@ elation.elements.define('janus.ui.editor.panel', class extends elation.elements.
     room.addEventListener('wheel', (ev) => this.editObjectMousewheel(ev));
     window.addEventListener('keydown', (ev) => this.editObjectKeydown(ev));
     window.addEventListener('keyup', (ev) => this.editObjectKeyup(ev));
+
   }
   initRoomEvents(room) {
     if (!this.initialized.has(room)) {
@@ -149,6 +151,40 @@ elation.elements.define('janus.ui.editor.panel', class extends elation.elements.
       room.addEventListener('thing_remove', (ev) => this.handleThingRemove(ev));
       this.initialized.add(room);
     }
+
+    if (!this.outliner_selected) {
+      this.outliner_selected = room.createObject('outliner', {
+        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);
+    }
   }
 
   getManipulator() {
@@ -226,7 +262,7 @@ elation.elements.define('janus.ui.editor.panel', class extends elation.elements.
     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';
@@ -329,6 +365,7 @@ console.log('set translation snap', ev.data, ev);
     return locked;
   }
   editObject(object, isnew) {
+    if (this.roomedit.object) this.editObjectStop()
     this.roomedit.object = object;
     this.roomedit.parentObject = null;
     this.roomedit.objectBoundingBox = false;
@@ -346,11 +383,13 @@ console.log('set translation snap', ev.data, ev);
     object.addEventListener('load', (ev) => {
       this.roomedit.objectBoundingBox = object.getBoundingBox(true);
       this.editObjectUpdate();
-      this.editObjectShowWireframe();
+      //this.editObjectShowWireframe();
+      this.editObjectShowOutline();
       console.log('update bbox', this.roomedit.objectBoundingBox);
     });
 
-    object.pickable = false;
+    //object.pickable = false;
+    //console.log('set object unpickable', object);
 
     room.addEventListener('mousemove', (ev) => this.editObjectMousemove(ev));
     elation.events.add(this, 'mousedown', this.editObjectClick);
@@ -374,7 +413,8 @@ console.log('set translation snap', ev.data, ev);
     // activate context
     janus.engine.systems.controls.activateContext('roomedit', this);
 
-    this.editObjectShowWireframe();
+    //this.editObjectShowWireframe();
+    this.editObjectShowOutline();
     this.editObjectShowInfo(object);
     let manipulator = this.getManipulator();
     manipulator.attach(object.objects['3d']);
@@ -393,6 +433,18 @@ console.log('set translation snap', ev.data, ev);
     inventorypanel.refresh();
   }
 
+  editObjectShowOutline() {
+    if (this.roomedit.object === room) {
+      this.outliner_selected.deselect();
+    } else {
+      this.outliner_selected.select(this.roomedit.object);
+    }
+  }
+  editObjectRemoveOutline() {
+    if (this.outliner_selected) {
+      this.outliner_selected.deselect();
+    }
+  }
   editObjectShowWireframe() {
     if (this.roomedit.wireframe) {
       this.editObjectRemoveWireframe();
@@ -518,7 +570,7 @@ console.log('set translation snap', ev.data, ev);
           // restore collider
           this.roomedit.object.collision_id = this.roomedit.collision_id;
           this.roomedit.collision_id = false;
-        } else {
+        } else if (false) {
           this.roomedit.object.collision_id = 'cube';
           this.roomedit.object.collision_trigger = true;
           this.roomedit.object.collision_scale = this.roomedit.objectBoundingBox.max.clone().sub(this.roomedit.objectBoundingBox.min);
@@ -534,11 +586,13 @@ console.log('set translation snap', ev.data, ev);
         this.roomedit.object.dispatchEvent({type: 'edit', bubbles: true});
       }
     }
-    this.roomedit.object.pickable = true;
+    //this.roomedit.object.pickable = true;
+    this.roomedit.object.sync = true;
     this.roomedit.object = false;
     this.roomedit.raycast = false;
     this.roomedit.parentObject = null;
-    this.editObjectRemoveWireframe();
+    //this.editObjectRemoveWireframe();
+    this.editObjectRemoveOutline();
     this.editObjectRemoveParentWireframe();
     let manipulator = this.getManipulator();
     manipulator.detach();
@@ -573,7 +627,22 @@ console.log('set translation snap', ev.data, ev);
     if (this.roomedit.object) {
       var obj = this.roomedit.object;
       if (this.roomedit.moving && this.roomedit.raycast && ev.element.getProxyObject() !== obj) {
-        this.roomedit.objectPosition = ev.data.point;
+        let raycast = player.raycast(V(0, 0, -1));
+        if (raycast) {
+          let hit;
+          for (let i = 0; i < raycast.length; i++) {
+            if (raycast[i].object !== obj) {
+              hit = raycast[i];
+              break;
+            }
+          }
+    
+          if (hit) {
+            this.roomedit.objectPosition = hit.point;
+          }
+        } else {
+          this.roomedit.objectPosition = ev.data.point;
+        }
         let manipulator = this.getManipulator();
         manipulator.enabled = false;
         this.editObjectUpdate();
@@ -641,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;
         }
@@ -659,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);
 
@@ -679,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;
@@ -707,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) {
@@ -831,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);
 
@@ -853,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;
@@ -1042,6 +1111,7 @@ console.log('change color', obj.col, vec);
     if (obj) {
       this.roomedit.pastebuffer = obj;
 
+/*
       let data = new DataTransfer();
       data.items.add('text/plain', 'blublub');
       //data.items.add('x-janus/x-' + obj.tag, 'cool huh');
@@ -1050,6 +1120,7 @@ console.log('change color', obj.col, vec);
       }, (e) => {
         console.log('FAILED!', e);
       });
+*/
     }
   }
   editObjectCut(ev) {
@@ -1159,6 +1230,9 @@ console.log('[editor] scene added a thing', ev);
               let parts = newobjargs[j].split('=');
               objargs[parts[0]] = decodeURIComponent(parts[1]);
             }
+            if (objargs.id) {
+              objargs.collision_id = objargs.id;
+            }
             newobject = room.createObject(objtype, objargs);
             objects.push(newobject);
             if (objects[0]) {
@@ -1361,6 +1435,9 @@ console.log('pastey!', ev.clipboardData.items[0], ev);
     this.loadObjectFromURIList(url);
     ev.preventDefault();
   }
+  showCreateDialog(ev) {
+    console.log('create thing?');
+  }
 });
 
 elation.elements.define('janus.ui.editor.objectinfo', class extends elation.elements.base {

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

@@ -54,8 +54,9 @@ ui-grid.models>* a {
   display: flex;
   align-items: center;
   justify-content: center;
-  text-align: Center;
+  text-align: center;
   text-decoration: none;
+  color: white;
 }
 ui-grid.models>* p {
   display: none;

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,
@@ -113,11 +113,18 @@ janus.registerElement('locomotion_teleporter', {
         onchange: ev => this.handleTeleportChange(ev),
         onactivate: ev => this.handleTeleportTurn(ev),
       },
-      'teleport_y': {
+      'teleport_y_right': {
         defaultbindings: 'gamepad_any_axis_1,gamepad_any_axis_3',
-        onchange: ev => this.handleTeleportChange(ev),
-        onactivate: ev => this.handleTeleportStart(ev),
+        onchange: ev => this.handleTeleportChange(ev, 'right'),
+        onactivate: ev => this.handleTeleportStart(ev, 'right'),
+      },
+/*
+      'teleport_y_left': {
+        defaultbindings: 'gamepad_6_axis_1,gamepad_6_axis_3',
+        onchange: ev => this.handleTeleportChange(ev, 'left'),
+        onactivate: ev => this.handleTeleportStart(ev, 'left'),
       },
+*/
       'teleport_trigger': {
         defaultbindings: 'gamepad_any_button_0',
         onactivate: ev => this.handleTeleportTrigger(ev),
@@ -147,6 +154,7 @@ janus.registerElement('locomotion_teleporter', {
       } else {
         startpoint = player.head.localToWorld(V(0,0,0));
         v0 = player.head.localToWorld(V(0,0,-speed)).sub(startpoint);
+        return; // Head-locked teleporter is awkward, do we really still support this?
       }
       let i = 0,
           p0 = startpoint.clone(),
@@ -210,7 +218,7 @@ janus.registerElement('locomotion_teleporter', {
     //if (!room.teleport) return;
     if (this.teleportactive) {
       let controls = this.activecontrols;
-      let xy = new THREE.Vector2(controls.teleport_x, controls.teleport_y),
+      let xy = new THREE.Vector2(controls.teleport_x, controls['teleport_y_' + this.teleporthand]),
           len = xy.length();
 
       if (len > .8) {
@@ -228,7 +236,7 @@ janus.registerElement('locomotion_teleporter', {
     if (!room.teleport) return;
     if (!this.teleportactive && Math.abs(ev.value) > .8) {
       this.teleportactive = true;
-      this.teleporthand = 'right';
+      this.teleporthand = hand || 'right';
       this.enableCursor();
       this.updateTeleportAngle();
     }
@@ -260,15 +268,17 @@ janus.registerElement('locomotion_teleporter', {
   },
   updateTeleportAngle() {
     let controls = this.activecontrols;
-    let controllerangle = Math.atan2(controls.teleport_x, controls.teleport_y);
+    let controllerangle = Math.atan2(controls.teleport_x, controls['teleport_y_' + this.teleporthand]);
     let playerangle = Math.atan2(this.pos.x, this.pos.z);
     this.teleportangle = (controllerangle + playerangle) + Math.PI;
   },
   handleMouseDown(ev) {
     if (!room.teleport) return;
     if (ev.button == 0 && (player.enabled || janus.hmd)) {
-      this.longpresstimer = setTimeout(() => { console.log('timer fired'); this.enableCursor(); }, this.longpresstime);
-      this.mousediff = [0,0];
+      if (!this.longpresstimer) {
+        //this.longpresstimer = setTimeout(() => { console.log('timer fired'); this.enableCursor(); }, this.longpresstime);
+        this.mousediff = [0,0];
+      }
       //this.active = true;
     }
   },
@@ -327,6 +337,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,43 +18,88 @@ janus.registerElement('xrmenu', {
     this.worlddir = V();
     this.playervec = V();
 
+    this.panels = {};
+
     let xrmenu = janus.ui.apps.default.apps.xrmenu;
     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),
           label: 'Home',
           image_id: 'xrmenu-button-home',
-          onactivate: (ev) => janus.navigateHome(),
+          //onactivate: (ev) => janus.navigateHome(),
         }),
         back: this.createObject('xrmenu-button', {
           pos: V(.20, 0, 0),
           label: 'Back',
           image_id: 'xrmenu-button-back',
-          onactivate: (ev) => janus.navigateBack(),
+          //onactivate: (ev) => janus.navigateBack(),
         }),
         reset: this.createObject('xrmenu-button', {
           pos: V(.32, 0, 0),
           label: 'Reset',
           image_id: 'xrmenu-button-reset',
-          onactivate: (ev) => player.reset_position(),
+          //onactivate: (ev) => player.reset_position(),
         }),
         reload: this.createObject('xrmenu-button', {
           pos: V(.44, 0, 0),
           label: 'Reload',
           image_id: 'xrmenu-button-reload',
-          onactivate: (ev) => location.reload(),
+          //onactivate: (ev) => location.reload(),
         }),
         exitvr: this.createObject('xrmenu-button', {
           pos: V(.56, 0, 0),
           label: 'Exit VR',
           //image_id: 'xrmenu-button-exitvr',
-          onactivate: (ev) => this.engine.client.stopXR(),
+          //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();
     });
   },
@@ -133,7 +178,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);
 
@@ -142,14 +187,9 @@ janus.registerElement('xrmenu-popup', {
     //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);
-
+console.log('LOADED????', janus.ui, janus.ui.apps.default);
+    this.initShadowStylesheets();
+}, 0);
     this.shadowdom.appendChild(element);
     document.body.appendChild(container);
 
@@ -167,24 +207,7 @@ container.style.opacity = 0;
 
 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',
@@ -205,6 +228,59 @@ 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,
+    });
+    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 => {
+        let styleel = document.createElement('link');
+        styleel.rel = 'stylesheet';
+        styleel.href = elation.engine.assets.corsproxy + document.styleSheets[i].href;
+        //styleel.onload = accept;
+        this.shadowdom.appendChild(styleel);
+console.log('add link', document.styleSheets[i].href);
+      //}));
+    }
+/*
+    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];
@@ -240,6 +316,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,
@@ -250,6 +336,7 @@ canvas.style.border = '1px solid red';
             clientY: mousexy[1],
             view: window,
           });
+console.log(mouseover);
           target.dispatchEvent(mouseover);
         }
       }

package/media/assets/webui/themes/default.css

@@ -426,12 +426,21 @@ ui-tooltip {
 ui-input {
   display: flex;
 }
+ui-input>ui-label {
+  min-width: 5em;
+}
 ui-input>input {
   flex: 1 1;
+  background: #999;
+  border: 1px solid black;
+  border-radius: 4px;
 }
+ui-input>input:hover,
 ui-input>input[hover] {
+  background: #aaa;
 }
 ui-input>input:focus {
+  background: #bbb;
 }
 ui-input>input:active {
 }
@@ -675,6 +684,18 @@ ui-slider-handle {
   cursor: pointer;
   box-shadow: 0 0 5px rgba(0,0,0,.8);
 }
+ui-slider-handle>ui-label {
+  pointer-events: none;
+  position: absolute;
+  left: 20px;
+  z-index: 100;
+  background: rgba(0,0,0,.5);
+  border-radius: 20px;
+  padding: 0 .4em;
+}
+ui-slider-track[hover] ui-slider-handle>ui-label {
+  display: block !important;
+}
 
 
 /***********
@@ -881,6 +902,10 @@ ui-select>select {
 ui-select:hover>select {
   background: #555;
 }
+ui-select>ui-label {
+  min-width: 5em;
+}
+
 
 ui-formgroup {
   position: relative;
@@ -1242,3 +1267,20 @@ ui-spinner[full] {
   right: 0;
   background: rgba(0,0,0,.1);
 }
+ui-image-picker {
+  display: block;
+}
+ui-image-picker ui-label {
+  vertical-align: top;
+  min-width: 5em;
+  display: inline-block;
+}
+ui-image-picker canvas {
+  width: 30px;
+  height: 30px;
+  border: 1px solid black;
+  border-radius: 2px;
+  padding: 2px;
+  display: inline-block;
+  vertical-align: top;
+}