Update vr controller UI (#200)

feat:  implemented Hold Object tool
feat:  Implemented Drop User tool
fix: Cleaned up VR UI tools. They appear to be working well.

fix: Cleaned up minor issues in the ToolManager.
feat: Toolmanager.pushTool can now accept a tool
fix: fixed bugs in the VRController UI
* VRControllerUI now works with generic DOM tree.
* opening the UI now requires an explicit button click.
fix: fixed issues with freehand line tool
feat: implemented VR FrameAll

* Big cleanup to the way tools greate geometries.

Author: phtaylor

package.json

@@ -64,7 +64,7 @@
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.6",
-    "@zeainc/zea-collab": "^6.0.1",
+    "@zeainc/zea-collab": "^6.3.2",
     "@zeainc/zea-engine": "next",
     "canvas": "^2.6.1",
     "copyfiles": "^2.4.1",

src/Handles/AxialRotationHandle.ts

@@ -68,13 +68,13 @@ class AxialRotationHandle extends Handle {
     this.handle = new GeomItem('handle', handleGeom, this.handleMat)
 
     this.radiusParam.on('valueChanged', () => {
-      radius = this.radiusParam.getValue()
+      radius = this.radiusParam.value
       handleGeom.outerRadiusParam.value = radius
       handleGeom.innerRadiusParam.value = radius * 0.02
     })
 
     this.colorParam.on('valueChanged', () => {
-      this.handleMat.getParameter('BaseColor').value = this.colorParam.getValue()
+      this.handleMat.getParameter('BaseColor').value = this.colorParam.value
     })
 
     this.addChild(this.handle)
@@ -85,15 +85,15 @@ class AxialRotationHandle extends Handle {
    */
   highlight(): void {
     super.highlight()
-    this.handleMat.getParameter('BaseColor').value = this.highlightColorParam.getValue()
+    this.handleMat.getParameter('BaseColor').value = this.highlightColorParam.value
   }
 
   /**
    * Removes the highlight from the handle once the mouse moves away.
    */
   unhighlight(): void {
     super.unhighlight()
-    this.handleMat.getParameter('BaseColor').value = this.colorParam.getValue()
+    this.handleMat.getParameter('BaseColor').value = this.colorParam.value
   }
 
   /**

src/Handles/BaseLinearMovementHandle.ts

@@ -1,4 +1,4 @@
-import { Vec3, ZeaPointerEvent, ZeaMouseEvent, ZeaTouchEvent, XRControllerEvent } from '@zeainc/zea-engine'
+import { Vec3, ZeaPointerEvent, ZeaMouseEvent, ZeaTouchEvent, XRControllerEvent, XRPoseEvent } from '@zeainc/zea-engine'
 
 import { getPointerRay } from '../utility'
 import Handle from './Handle'
@@ -74,7 +74,7 @@ class BaseLinearMovementHandle extends Handle {
    *
    * @param event - The event param.
    */
-  onVRControllerButtonDown(event: XRControllerEvent): void {
+  onXRControllerButtonDown(event: XRControllerEvent): void {
     this.gizmoRay = this.getManipulationPlane()
 
     this.activeController = event.controller
@@ -87,11 +87,11 @@ class BaseLinearMovementHandle extends Handle {
   }
 
   /**
-   * The onVRPoseChanged method.
+   * The onXRPoseChanged method.
    *
    * @param event - The event param.
    */
-  onVRPoseChanged(event: XRControllerEvent): void {
+  onXRPoseChanged(event: XRPoseEvent): void {
     const xfo = this.activeController.getTipXfo()
     const dist = xfo.tr.subtract(this.gizmoRay.start).dot(this.gizmoRay.dir)
     this.holdPos = this.gizmoRay.start.add(this.gizmoRay.dir.scale(dist))

src/Handles/Handle.ts

@@ -10,6 +10,7 @@ import {
   ZeaMouseEvent,
   ZeaTouchEvent,
   XRControllerEvent,
+  XRPoseEvent,
 } from '@zeainc/zea-engine' // , PointerEvent
 
 import { getPointerRay } from '../utility'
@@ -107,10 +108,10 @@ class Handle extends TreeItem {
       this.highlight()
     }
 
-    if (event.pointerType == 'mouse' || event.pointerType == 'touch') {
+    if (event instanceof ZeaMouseEvent || event instanceof ZeaTouchEvent) {
       this.handlePointerDown(event)
-    } else if (event.pointerType == 'xr') {
-      this.onVRControllerButtonDown(<XRControllerEvent>event)
+    } else if (event instanceof XRControllerEvent) {
+      this.onXRControllerButtonDown(event)
     }
   }
 
@@ -122,10 +123,10 @@ class Handle extends TreeItem {
   onPointerMove(event: ZeaPointerEvent): void {
     if (this.captured) {
       event.stopPropagation()
-      if (event.pointerType == 'mouse' || event.pointerType == 'touch') {
-        this.handlePointerMove(<ZeaMouseEvent>event)
-      } else if (event.pointerType == 'xr') {
-        this.onVRPoseChanged(<XRControllerEvent>event)
+      if (event instanceof ZeaMouseEvent || event instanceof ZeaTouchEvent) {
+        this.handlePointerMove(event)
+      } else if (event instanceof XRPoseEvent) {
+        this.onXRPoseChanged(event)
       }
     }
 
@@ -146,10 +147,10 @@ class Handle extends TreeItem {
       if (event instanceof ZeaTouchEvent) {
         this.unhighlight()
       }
-      if (event.pointerType == 'mouse' || event.pointerType == 'touch') {
-        this.handlePointerUp(<ZeaMouseEvent>event)
-      } else if (event.pointerType == 'xr') {
-        this.onVRControllerButtonUp(<XRControllerEvent>event)
+      if (event instanceof ZeaMouseEvent || event instanceof ZeaTouchEvent) {
+        this.handlePointerUp(event)
+      } else if (event instanceof XRControllerEvent) {
+        this.onVRControllerButtonUp(event)
       }
     }
   }
@@ -206,8 +207,8 @@ class Handle extends TreeItem {
    *
    * @param event - The event param.
    */
-  handlePointerUp(event: ZeaMouseEvent): void {
-    const ray = getPointerRay(event)
+  handlePointerUp(event: ZeaPointerEvent): void {
+    const ray = event.pointerRay
     if (ray) {
       const dist = ray.intersectRayPlane(this.gizmoRay)
       this.releasePos = ray.pointAtDist(dist)
@@ -224,7 +225,7 @@ class Handle extends TreeItem {
    *
    * @param event - The event param.
    */
-  onVRControllerButtonDown(event: XRControllerEvent): void {
+  onXRControllerButtonDown(event: XRControllerEvent): void {
     this.activeController = event.controller
     const xfo = this.activeController.getTipXfo().clone()
 
@@ -236,11 +237,11 @@ class Handle extends TreeItem {
   }
 
   /**
-   * The onVRPoseChanged method.
+   * The onXRPoseChanged method.
    *
    * @param event - The event param.
    */
-  onVRPoseChanged(event: XRControllerEvent): void {
+  onXRPoseChanged(event: XRPoseEvent): void {
     if (this.activeController) {
       const xfo = this.activeController.getTipXfo()
       const gizmoRay = this.getManipulationPlane()

src/Handles/LinearScaleHandle.ts

@@ -66,7 +66,7 @@ class LinearScaleHandle extends BaseLinearMovementHandle {
     transformVertices(tipGeom, tipXfo)
 
     this.colorParam.on('valueChanged', () => {
-      this.handleMat.getParameter('BaseColor').value = this.colorParam.getValue()
+      this.handleMat.getParameter('BaseColor').value = this.colorParam.value
     })
     this.addChild(handle)
     this.addChild(tip)
@@ -77,15 +77,15 @@ class LinearScaleHandle extends BaseLinearMovementHandle {
    */
   highlight(): void {
     super.highlight()
-    this.handleMat.getParameter('BaseColor').value = this.highlightColorParam.getValue()
+    this.handleMat.getParameter('BaseColor').value = this.highlightColorParam.value
   }
 
   /**
    * Removes the highlight from the handle once the mouse moves away.
    */
   unhighlight(): void {
     super.unhighlight()
-    this.handleMat.getParameter('BaseColor').value = this.colorParam.getValue()
+    this.handleMat.getParameter('BaseColor').value = this.colorParam.value
   }
 
   /**
@@ -122,9 +122,9 @@ class LinearScaleHandle extends BaseLinearMovementHandle {
    */
   onDragStart(event: ZeaPointerEvent): void {
     this.oriXfo = this.globalXfoParam.value
-    this.tmplocalXfo = this.localXfoParam.getValue()
+    this.tmplocalXfo = this.localXfoParam.value
     const param = this.getTargetParam()
-    this.baseXfo = <Xfo>param.getValue()
+    this.baseXfo = <Xfo>param.value
 
     if (this.selectionGroup) {
       const items = this.selectionGroup.getItems()
@@ -188,7 +188,7 @@ class LinearScaleHandle extends BaseLinearMovementHandle {
     this.localXfoParam.value = this.tmplocalXfo
 
     const tip = this.getChildByName('tip')
-    const tipXfo = tip.localXfoParam.getValue()
+    const tipXfo = tip.localXfoParam.value
     tipXfo.sc.set(1, 1, 1)
     tip.localXfoParam.value = tipXfo
   }

src/Handles/PlanarMovementHandle.ts

@@ -1,7 +1,7 @@
 import Handle from './Handle'
 import ParameterValueChange from '../UndoRedo/Changes/ParameterValueChange'
 import UndoRedoManager from '../UndoRedo/UndoRedoManager'
-import { Parameter, Vec3, Xfo, ZeaPointerEvent, XRControllerEvent, XfoParameter } from '@zeainc/zea-engine'
+import { Parameter, Vec3, Xfo, ZeaPointerEvent, XRControllerEvent, XfoParameter, XRPoseEvent } from '@zeainc/zea-engine'
 import { Change } from '..'
 import SelectionGroup from '../SelectionGroup'
 import SelectionXfoChange from '../UndoRedo/Changes/SelectionXfoChange'
@@ -118,23 +118,23 @@ class PlanarMovementHandle extends Handle {
    * @param event - The event param.
    * @return {boolean} The return value.
    */
-  onVRControllerButtonDown(event: XRControllerEvent): void {
+  onXRControllerButtonDown(event: XRControllerEvent): void {
     if (this.fullXfoManipulationInVR) {
       this.activeController = event.controller
       const xfo = this.activeController.getTipXfo()
       const handleXfo = this.globalXfoParam.value
       this.grabOffset = xfo.inverse().multiply(handleXfo)
     } else {
-      super.onVRControllerButtonDown(event)
+      super.onXRControllerButtonDown(event)
     }
   }
 
   /**
-   * The onVRPoseChanged method.
+   * The onXRPoseChanged method.
    *
    * @param event - The event param.
    */
-  onVRPoseChanged(event: XRControllerEvent): void {
+  onXRPoseChanged(event: XRPoseEvent): void {
     if (this.fullXfoManipulationInVR) {
       const xfo = this.activeController.getTipXfo()
       const newXfo = xfo.multiply(this.grabOffset)
@@ -147,7 +147,7 @@ class PlanarMovementHandle extends Handle {
         param.value = newXfo
       }
     } else {
-      super.onVRPoseChanged(event)
+      super.onXRPoseChanged(event)
     }
   }
 

src/Handles/Shaders/HandleShader.ts

@@ -231,13 +231,13 @@ void main(void) {
    */
   static getPackedMaterialData(material: Material): Float32Array {
     const matData = new Float32Array(8)
-    const baseColor = material.getParameter('BaseColor').getValue()
+    const baseColor = material.getParameter('BaseColor').value
     matData[0] = baseColor.r
     matData[1] = baseColor.g
     matData[2] = baseColor.b
     matData[3] = baseColor.a
-    matData[4] = material.getParameter('MaintainScreenSize').getValue()
-    matData[5] = material.getParameter('Overlay').getValue()
+    matData[4] = material.getParameter('MaintainScreenSize').value
+    matData[5] = material.getParameter('Overlay').value
     return matData
   }
 

src/Handles/SliderHandle.ts

@@ -63,7 +63,7 @@ class SliderHandle extends BaseLinearMovementHandle {
     this.colorParam.value = color
 
     this.handleMat = new Material('handle', 'FlatSurfaceShader')
-    this.handleMat.getParameter('BaseColor').value = this.colorParam.getValue()
+    this.handleMat.getParameter('BaseColor').value = this.colorParam.value
 
     const topBarMat = new Material('topBar', 'FlatSurfaceShader')
     topBarMat.getParameter('BaseColor').value = new Color(0.5, 0.5, 0.5)
@@ -76,16 +76,16 @@ class SliderHandle extends BaseLinearMovementHandle {
     this.topBar = new GeomItem('topBar', barGeom, topBarMat)
 
     this.barRadiusParam.on('valueChanged', () => {
-      barGeom.radiusParam.value = this.barRadiusParam.getValue()
+      barGeom.radiusParam.value = this.barRadiusParam.value
     })
     this.handleRadiusParam.on('valueChanged', () => {
-      handleGeom.radiusParam.value = this.handleRadiusParam.getValue()
+      handleGeom.radiusParam.value = this.handleRadiusParam.value
     })
     this.lengthParam.on('valueChanged', () => {
       this.__updateSlider(<number>this.value)
     })
     this.colorParam.on('valueChanged', () => {
-      this.handleMat.getParameter('BaseColor').value = this.colorParam.getValue()
+      this.handleMat.getParameter('BaseColor').value = this.colorParam.value
     })
 
     this.addChild(this.handle)
@@ -100,15 +100,15 @@ class SliderHandle extends BaseLinearMovementHandle {
    */
   highlight(): void {
     super.highlight()
-    this.handleMat.getParameter('BaseColor').value = this.highlightColorParam.getValue()
+    this.handleMat.getParameter('BaseColor').value = this.highlightColorParam.value
   }
 
   /**
    * Removes the highlight from the handle once the mouse moves away.
    */
   unhighlight(): void {
     super.unhighlight()
-    this.handleMat.getParameter('BaseColor').value = this.colorParam.getValue()
+    this.handleMat.getParameter('BaseColor').value = this.colorParam.value
   }
 
   /**
@@ -119,7 +119,7 @@ class SliderHandle extends BaseLinearMovementHandle {
   setTargetParam(param: Parameter<unknown>): void {
     this.param = param
     const __updateSlider = () => {
-      this.__updateSlider(<number>param.getValue())
+      this.__updateSlider(<number>param.value)
     }
     __updateSlider()
     param.on('valueChanged', __updateSlider)
@@ -136,7 +136,7 @@ class SliderHandle extends BaseLinearMovementHandle {
     const param = <NumberParameter>this.param
     const range = param && param.getRange() ? param.getRange() : [0, 1]
     const v = MathFunctions.remap(value, range[0], range[1], 0, 1)
-    const length = this.lengthParam.getValue()
+    const length = this.lengthParam.value
     this.baseBarXfo.sc.z = v * length
     this.handleXfo.tr.z = v * length
     this.topBarXfo.tr.z = v * length
@@ -172,7 +172,7 @@ class SliderHandle extends BaseLinearMovementHandle {
    * @param event - The event param.
    */
   onDrag(event: ZeaPointerEvent): void {
-    const length = this.lengthParam.getValue()
+    const length = this.lengthParam.value
     const param = <NumberParameter>this.param
     const range = param && param.getRange() ? param.getRange() : [0, 1]
     const value = MathFunctions.clamp(

src/Handles/SphericalRotationHandle.ts

@@ -54,7 +54,7 @@ class SphericalRotationHandle extends Handle {
     const maskGeomItem = new GeomItem('mask', maskGeom, this.maskMat)
 
     this.colorParam.on('valueChanged', () => {
-      this.maskMat.getParameter('BaseColor').value = this.colorParam.getValue()
+      this.maskMat.getParameter('BaseColor').value = this.colorParam.value
     })
 
     this.addChild(maskGeomItem)

src/Handles/ViewCube.ts

@@ -297,7 +297,7 @@ class ViewCube extends TreeItem {
     const target = camera.getTargetPosition()
     const dist = camera.getFocalDistance()
 
-    const startXfo = camera.globalXfoParam.getValue()
+    const startXfo = camera.globalXfoParam.value
     const startUp = startXfo.ori.getYaxis()
     startUp.subtractInPlace(normal.scale(startUp.dot(normal)))