fix: Gizmo handles now respond correctly to touch intereactions

 - cleaned up doc strings.

Author: phtaylor

src/Handles/ArcSlider.ts

@@ -149,15 +149,15 @@ class ArcSlider extends Handle {
   }
 
   /**
-   * Applies a special shinning shader to the handle to illustrate interaction with it.
+   * highlight the handle to indicate it is under the mouse.
    */
   highlight(): void {
     super.highlight()
     this.handleMat.getParameter('BaseColor').value = this.highlightColorParam.value
   }
 
   /**
-   * Removes the shining shader from the handle.
+   * Removes the highlight from the handle once the mouse moves away.
    */
   unhighlight(): void {
     super.unhighlight()

src/Handles/AxialRotationHandle.ts

@@ -1,36 +1,54 @@
-import { Color, Xfo, NumberParameter, GeomItem, Material, Torus, ZeaPointerEvent } from '@zeainc/zea-engine'
-
-import BaseAxialRotationHandle from './BaseAxialRotationHandle'
-import './Shaders/HandleShader'
+import {
+  MathFunctions,
+  Vec3,
+  Xfo,
+  XfoParameter,
+  ZeaPointerEvent,
+  ZeaMouseEvent,
+  ZeaTouchEvent,
+  NumberParameter,
+  GeomItem,
+  Material,
+  Color,
+  Torus,
+} from '@zeainc/zea-engine'
+import Handle from './Handle'
+import ParameterValueChange from '../UndoRedo/Changes/ParameterValueChange'
+import UndoRedoManager from '../UndoRedo/UndoRedoManager'
+import SelectionXfoChange from '../UndoRedo/Changes/SelectionXfoChange'
+import SelectionGroup from '../SelectionGroup'
+import { Change } from '../UndoRedo/Change'
 
 /**
- * Class representing an axial rotation scene widget. It has a `Torus` shape and is used to rotate objects around the specified axes.
- * You can do it by specifying the localXfo orientation:
- *
- * ```javascript
- * const xfo = new Xfo()
- * // This is rotation over `Y` axis
- * xfo.ori.setFromAxisAndAngle(new Vec3(0, 1, 0), Math.PI * 0.5)
- * axialRotationHandle.localXfoParam.value = xfo
- * ```
- * **Parameters**
- * * **Radius(`NumberParameter`):** Specifies the radius of the handler.
+ * Class representing an axial rotation scene widget.
  *
- * @extends BaseAxialRotationHandle
+ * @extends Handle
  */
-class AxialRotationHandle extends BaseAxialRotationHandle {
+class AxialRotationHandle extends Handle {
+  param: XfoParameter
   radiusParam: NumberParameter
+  private baseXfo: Xfo
+  private handleXfo: Xfo
+  private handleToTargetXfo: Xfo
+  private vec0: Vec3
+  private change: Change
   private handleMat: Material
-  handle: GeomItem
+  private handle: GeomItem
+
+  selectionGroup: SelectionGroup
+
   /**
    * Create an axial rotation scene widget.
    *
    * @param name - The name value.
-   * @param radius - The radius value.
-   * @param thickness - The thickness value.
-   * @param color - The color value.
    */
-  constructor(name: string, radius: number, thickness: number, color = new Color(1, 1, 0)) {
+  constructor(
+    name: string,
+    radius: number,
+    thickness: number,
+    radians: number = Math.PI * 0.5,
+    color = new Color(1, 1, 0)
+  ) {
     super(name)
 
     this.radiusParam = new NumberParameter('Radius', radius)
@@ -43,7 +61,7 @@ class AxialRotationHandle extends BaseAxialRotationHandle {
     this.handleMat.getParameter('Overlay').value = 0.9
 
     // const handleGeom = new Cylinder(radius, thickness * 2, 64, 2, false);
-    const handleGeom = new Torus(thickness, radius, 64, Math.PI * 0.5)
+    const handleGeom = new Torus(thickness, radius, 64, radians)
     this.handle = new GeomItem('handle', handleGeom, this.handleMat)
 
     this.radiusParam.on('valueChanged', () => {
@@ -60,55 +78,122 @@ class AxialRotationHandle extends BaseAxialRotationHandle {
   }
 
   /**
-   * Applies a special shinning shader to the handle to illustrate interaction with it.
+   * highlight the handle to indicate it is under the mouse.
    */
   highlight(): void {
     super.highlight()
     this.handleMat.getParameter('BaseColor').value = this.highlightColorParam.getValue()
   }
 
   /**
-   * Removes the shining shader from the handle.
+   * Removes the highlight from the handle once the mouse moves away.
    */
   unhighlight(): void {
     super.unhighlight()
     this.handleMat.getParameter('BaseColor').value = this.colorParam.getValue()
   }
 
   /**
-   * Returns handle's global Xfo
+   * Sets selectionGroup so this handle can modify the items.
    *
-   * @return {Xfo} - The Xfo value
+   * @param selectionGroup - The SelectionGroup.
    */
-  getBaseXfo(): Xfo {
-    return this.globalXfoParam.value
+  setSelectionGroup(selectionGroup: SelectionGroup): void {
+    this.selectionGroup = selectionGroup
   }
 
   /**
-   * Handles the initially drag interaction of the handle.
+   * Sets the target parameter for this manipulator.
+   * This parameter will be modified by interactions on the manipulator.
+   *
+   * @param param - The parameter that will be modified during manipulation
+   */
+  setTargetParam(param: XfoParameter): void {
+    this.param = param
+  }
+
+  /**
+   * Returns target's global xfo parameter.
+   *
+   * @return {Parameter} - returns parameter
+   */
+  getTargetParam(): XfoParameter {
+    return this.param ? this.param : this.globalXfoParam
+  }
+
+  /**
+   * Handles the initially drag of the handle.
    *
    * @param event - The event param.
    */
   onDragStart(event: ZeaPointerEvent): void {
-    super.onDragStart(event)
+    this.highlight()
+
+    this.baseXfo = this.globalXfoParam.value.clone()
+
+    this.vec0 = this.grabPos.subtract(this.baseXfo.tr)
+    this.vec0.normalizeInPlace()
+
+    // this.offsetXfo = this.localXfoParam.value.inverse()
+    if (this.selectionGroup) {
+      const items = this.selectionGroup.getItems()
+      this.change = new SelectionXfoChange(Array.from(items), this.baseXfo)
+      UndoRedoManager.getInstance().addChange(this.change)
+    } else {
+      const invBaseXfo = this.baseXfo.inverse()
+      const param = this.getTargetParam() as XfoParameter
+      this.handleToTargetXfo = invBaseXfo.multiply(param.value)
+      this.change = new ParameterValueChange(param)
+      UndoRedoManager.getInstance().addChange(this.change)
+    }
   }
 
   /**
-   * Handles drag interaction of the handle.
+   * Handles drag action of the handle.
    *
    * @param event - The event param.
    */
-  onDrag(event: ZeaPointerEvent) {
-    super.onDrag(event)
+  onDrag(event: ZeaPointerEvent): void {
+    const vec1 = this.holdPos.subtract(this.baseXfo.tr)
+    vec1.normalizeInPlace()
+    let angle = this.vec0.angleTo(vec1)
+    if (this.vec0.cross(vec1).dot(this.baseXfo.ori.getZaxis()) < 0) angle = -angle
+
+    if ((event instanceof ZeaMouseEvent || event instanceof ZeaTouchEvent) && event.shiftKey) {
+      // modulate the angle to X degree increments.
+      const increment = MathFunctions.degToRad(22.5)
+      angle = Math.floor(angle / increment) * increment
+    }
+
+    const deltaXfo = new Xfo()
+    deltaXfo.ori.setFromAxisAndAngle(this.baseXfo.ori.getZaxis(), angle)
+
+    if (this.selectionGroup) {
+      const selectionXfoChange = <SelectionXfoChange>this.change
+      selectionXfoChange.setDeltaXfo(deltaXfo)
+    } else {
+      // Add the values in global space.
+      const newBase = this.baseXfo.clone()
+      newBase.ori = deltaXfo.ori.multiply(newBase.ori)
+      const value = newBase.multiply(this.handleToTargetXfo)
+
+      this.change.update({
+        value,
+      })
+    }
   }
 
   /**
-   * Handles the end of dragging interaction with the handle.
+   * Handles the end of dragging the handle.
    *
    * @param event - The event param.
    */
   onDragEnd(event: ZeaPointerEvent): void {
-    super.onDragEnd(event)
+    if (this.selectionGroup) {
+      const selectionXfoChange = <SelectionXfoChange>this.change
+      selectionXfoChange.setDone()
+    }
+    this.change = null
   }
 }