Smaller fixes on the flexible camera control (#4362)

* Initial commit

* Update reveal.api.md

* Update FlexibleControlsOptions.ts

viewer/packages/camera-manager/src/Flexible/FlexibleControls.ts

@@ -64,11 +64,6 @@ export class FlexibleControls extends EventDispatcher<FlexibleControlsEvent> {
   private readonly _touchEvents: Array<PointerEvent> = [];
   private _getPickedPointByPixelCoordinates: GetPickedPointByPixelCoordinates | undefined;
 
-  // This is a hack for overcome problems with the setting the Quaternion direction.
-  // This is normally done in animation of movements using setCameraState,
-  // which arguments does not fit into this control. (no direction is given for instance)
-  private _rawCameraRotation: Quaternion | undefined = undefined;
-
   // Temporary objects used for calculations to avoid allocations
   private readonly _reusableVector3s = new ReusableVector3s();
   private readonly _rotationHelper = new FlexibleControlsRotationHelper();
@@ -299,22 +294,18 @@ export class FlexibleControls extends EventDispatcher<FlexibleControlsEvent> {
     const vector = this.newVector3().subVectors(target, position);
     vector.normalize();
     this._cameraVector.copy(vector);
-    this._rawCameraRotation = undefined;
     this.updateCameraAndTriggerCameraChangeEvent();
   }
 
   public setPosition(position: Vector3): void {
     this._cameraPosition.copy(position);
-    this._rawCameraRotation = undefined;
     this.updateCameraAndTriggerCameraChangeEvent();
   }
 
   public setPositionAndDirection(position: Vector3, direction: Vector3): void {
     this.isInitialized = true;
     this._cameraPosition.copy(position);
     this._cameraVector.copy(direction);
-    this._rawCameraRotation = undefined;
-
     this.updateCameraAndTriggerCameraChangeEvent();
   }
 
@@ -325,8 +316,6 @@ export class FlexibleControls extends EventDispatcher<FlexibleControlsEvent> {
     const cameraVector = this.newVector3().set(0, 0, -1);
     cameraVector.applyQuaternion(rotation);
 
-    this._rawCameraRotation = rotation.clone();
-
     if (DampedSpherical.isVertical(cameraVector)) {
       // Looking from top or bottom, the theta must be defined in a proper way
       const upVector = this.newVector3().set(0, 1, 0);
@@ -654,13 +643,8 @@ export class FlexibleControls extends EventDispatcher<FlexibleControlsEvent> {
     this._camera.position.copy(this._cameraPosition.value);
     this._camera.updateProjectionMatrix();
 
-    if (this._rawCameraRotation) {
-      this._camera.setRotationFromQuaternion(this._rawCameraRotation);
-      this._camera.updateProjectionMatrix();
-    } else {
-      this._camera.lookAt(this.getLookAt());
-      this._camera.updateProjectionMatrix();
-    }
+    this._camera.lookAt(this.getLookAt());
+    this._camera.updateProjectionMatrix();
     if (!isChange) {
       return false;
     }
@@ -676,8 +660,7 @@ export class FlexibleControls extends EventDispatcher<FlexibleControlsEvent> {
     let prevPosition = getMousePosition(this._domElement, initialEvent.clientX, initialEvent.clientY);
 
     const onTouchMove = (event: PointerEvent) => {
-      if (!this.isEnabled) return;
-      if (this._touchEvents.length !== 1) {
+      if (!this.isEnabled || this._touchEvents.length !== 1) {
         return;
       }
       const position = this.getMousePosition(event);
@@ -686,9 +669,8 @@ export class FlexibleControls extends EventDispatcher<FlexibleControlsEvent> {
     };
 
     const onTouchStart = (_event: PointerEvent) => {
-      if (!this.isEnabled) return;
       // if num fingers used don't equal 1 then we stop touch rotation
-      if (this._touchEvents.length !== 1) {
+      if (!this.isEnabled || this._touchEvents.length !== 1) {
         removeEventListeners();
       }
     };
@@ -953,22 +935,23 @@ export class FlexibleControls extends EventDispatcher<FlexibleControlsEvent> {
   }
 
   private handleRotationFromKeyboard(timeScale: number): boolean {
+    const speedFactor = this._keyboard.isShiftPressed() ? this._options.keyboardFastRotationFactor : 1;
+
     const deltaAzimuthAngle =
       this._options.keyboardRotationSpeedAzimuth *
+      speedFactor *
       this._keyboard.getKeyboardMovementValue('ArrowLeft', 'ArrowRight') *
       timeScale;
 
     const deltaPolarAngle =
       this._options.keyboardRotationSpeedPolar *
+      speedFactor *
       this._keyboard.getKeyboardMovementValue('ArrowUp', 'ArrowDown') *
       timeScale;
 
     if (deltaAzimuthAngle === 0 && deltaPolarAngle === 0) {
       return false;
     }
-    if (!this.isStationary) {
-      this.setControlsType(FlexibleControlsType.FirstPerson);
-    }
     this.rotateByAngles(-deltaAzimuthAngle, -deltaPolarAngle);
     return true;
   }

viewer/packages/camera-manager/src/Flexible/FlexibleControlsOptions.ts

@@ -8,7 +8,7 @@ import { FlexibleMouseActionType } from './FlexibleMouseActionType';
 import { FlexibleWheelZoomType } from './FlexibleWheelZoomType';
 
 const DEFAULT_POINTER_ROTATION_SPEED = (0.5 * Math.PI) / 360; // half degree per pixel
-const DEFAULT_KEYBOARD_ROTATION_SPEED = DEFAULT_POINTER_ROTATION_SPEED * 2.5;
+const DEFAULT_KEYBOARD_ROTATION_SPEED = DEFAULT_POINTER_ROTATION_SPEED * 5;
 const DEFAULT_MIN_POLAR_ANGLE = 0.0001;
 
 /**
@@ -59,6 +59,7 @@ export class FlexibleControlsOptions {
   public mouseRotationSpeedPolar = DEFAULT_POINTER_ROTATION_SPEED;
   public keyboardRotationSpeedAzimuth = DEFAULT_KEYBOARD_ROTATION_SPEED;
   public keyboardRotationSpeedPolar = DEFAULT_KEYBOARD_ROTATION_SPEED * 0.8;
+  public keyboardFastRotationFactor = 2;
 
   // Wheel settings
   public zoomFraction = 0.05;

viewer/reveal.api.md

@@ -911,6 +911,8 @@ export class FlexibleControlsOptions {
     // (undocumented)
     keyboardFastMoveFactor: number;
     // (undocumented)
+    keyboardFastRotationFactor: number;
+    // (undocumented)
     keyboardPanSpeed: number;
     // (undocumented)
     keyboardRotationSpeedAzimuth: number;