@inweb/viewer-visualize 26.10.2 → 26.10.4

package/src/Viewer/Draggers/OdaWalkDragger.ts

@@ -23,6 +23,7 @@
 import { Viewer } from "../Viewer";
 import { Point2d, Vector3 } from "./Common/Geometry";
 import { OdBaseDragger } from "./Common/OdBaseDragger";
+import { OdJoyStickDragger } from "./OdJoyStickDragger";
 
 const FocalLengthConst = 42.0;
 
@@ -31,8 +32,7 @@ const calcFocalLength = (lensLength: number, fieldWidth: number, fieldHeight: nu
 };
 
 export class OdaWalkDragger extends OdBaseDragger {
-  protected lastCoord: Point2d;
-  protected speed: number;
+  protected baseSpeed: number;
   protected delta: number;
   protected keyPressMap: Set<string>;
   protected oldWCSEnableValue: boolean;
@@ -42,28 +42,38 @@ export class OdaWalkDragger extends OdBaseDragger {
   protected viewer: any;
   protected multiplier: number;
   protected lastFrameTS: number;
+  protected lastFrameJoyStickTS: number;
   protected animationId: any;
   protected deltaAngle: number;
   protected enableZoomWheelPreviousValue: boolean;
   protected dragPosition: Point2d;
+  protected joyStickOverlayElement: HTMLDivElement;
+  protected joyStickDragger: OdJoyStickDragger;
+  protected isJoyStickMoving: boolean;
+  protected lastJoyStickCoord: Point2d;
 
   constructor(subject: Viewer) {
     super(subject);
     this.viewer = undefined;
 
     this.multiplier = 5;
-    this.speed = 1;
+    this.baseSpeed = 1;
 
     this.keyPressMap = new Set();
     this.keydown = this.keydown.bind(this);
     this.keyup = this.keyup.bind(this);
 
     this.lastFrameTS = 0;
+    this.lastFrameJoyStickTS = 0;
     this.animationId = undefined;
     this.processMovement = this.processMovement.bind(this);
+    this.processJoyStickMovement = this.processJoyStickMovement.bind(this);
 
     this.deltaAngle = Math.PI / 3600;
     this.autoSelect = true;
+
+    this.isJoyStickMoving = false;
+    this.addJoyStickDragger();
   }
 
   override initialize() {
@@ -78,7 +88,7 @@ export class OdaWalkDragger extends OdBaseDragger {
 
     const view = this.viewer.activeView;
     const maxDimension = this.getMaxDimension(view);
-    this.speed = maxDimension / 30000;
+    this.baseSpeed = maxDimension / 30000;
 
     this.subject.emitEvent({ type: "walkstart" });
 
@@ -137,9 +147,12 @@ export class OdaWalkDragger extends OdBaseDragger {
     // CLOUD-5359 Demo Viewer crashes after the Walk Mode
     this.subject.update(true);
     this.subject.options.enableZoomWheel = this.enableZoomWheelPreviousValue;
+
+    this.joyStickOverlayElement.remove();
+    this.joyStickDragger.cleanup();
   }
 
-  keydown(ev) {
+  keydown(ev: KeyboardEvent) {
     switch (ev.code) {
       case "NumpadSubtract":
       case "Minus":
@@ -167,7 +180,7 @@ export class OdaWalkDragger extends OdBaseDragger {
     }
   }
 
-  keyup(ev) {
+  keyup(ev: KeyboardEvent) {
     this.keyPressMap.delete(ev.code);
     if (this.keyPressMap.size < 1 && this.animationId) {
       window.cancelAnimationFrame(this.animationId);
@@ -176,38 +189,39 @@ export class OdaWalkDragger extends OdBaseDragger {
     }
   }
 
-  processMovement(timestamp) {
+  processMovement(timestamp: number) {
     this.animationId = requestAnimationFrame(this.processMovement);
 
     if (this.lastFrameTS !== 0) {
       const deltaTS = timestamp - this.lastFrameTS;
-      const currentDelta = this.multiplier * deltaTS * this.speed;
-
-      for (const keyCode of this.keyPressMap) {
-        switch (keyCode) {
-          case "KeyW":
-            this.moveForward(currentDelta);
-            break;
-          case "KeyS":
-            this.moveBackward(currentDelta);
-            break;
-          case "KeyA":
-            this.cameraWalker.moveLeft(currentDelta);
-            break;
-          case "KeyD":
-            this.cameraWalker.moveRight(currentDelta);
-            break;
-          case "KeyQ":
-            this.cameraWalker.moveUp(currentDelta);
-            break;
-          case "KeyE":
-            this.cameraWalker.moveDown(currentDelta);
-            break;
-        }
+      if (deltaTS > 0) {
+        const currentDelta = this.multiplier * deltaTS * this.baseSpeed;
+
+        Array.from(this.keyPressMap).forEach((keyCode) => {
+          switch (keyCode) {
+            case "KeyW":
+              this.moveForward(currentDelta);
+              break;
+            case "KeyS":
+              this.moveBackward(currentDelta);
+              break;
+            case "KeyA":
+              this.cameraWalker.moveLeft(currentDelta);
+              break;
+            case "KeyD":
+              this.cameraWalker.moveRight(currentDelta);
+              break;
+            case "KeyQ":
+              this.cameraWalker.moveUp(currentDelta);
+              break;
+            case "KeyE":
+              this.cameraWalker.moveDown(currentDelta);
+              break;
+          }
+        });
+
+        this.proceedChangeCamera();
       }
-
-      this.subject.update();
-      this.subject.emitEvent({ type: "changecamera" });
     }
 
     this.lastFrameTS = timestamp;
@@ -231,7 +245,7 @@ export class OdaWalkDragger extends OdBaseDragger {
     }
   }
 
-  moveForward(currentDelta) {
+  moveForward(currentDelta: number) {
     const { Vector3d } = this.m_module;
 
     const camera = this.cameraWalker.camera().openObjectAsCamera();
@@ -252,11 +266,11 @@ export class OdaWalkDragger extends OdBaseDragger {
     camera.setupCamera(newPos.toArray(), newTarget.toArray(), up.toArray());
   }
 
-  moveBackward(currentDelta) {
+  moveBackward(currentDelta: number) {
     this.moveForward(-currentDelta);
   }
 
-  turnLeft(angle) {
+  turnLeft(angle: number) {
     //TODO: migrate to VisualizeJS
     const pCamera = this.cameraWalker.camera().openObjectAsCamera();
     const dir = this.toVector(pCamera.direction());
@@ -273,7 +287,7 @@ export class OdaWalkDragger extends OdBaseDragger {
     pCamera.delete();
   }
 
-  setupCamera(view) {
+  setupCamera(view: any) {
     const pCamera = this.cameraId.openObjectAsCamera();
     const target = view.viewTarget;
 
@@ -308,10 +322,73 @@ export class OdaWalkDragger extends OdBaseDragger {
     pCamera.delete();
   }
 
-  getMaxDimension(view) {
+  getMaxDimension(view: any) {
     const [xmax, ymax, zmax] = view.sceneExtents.max();
     const [xmin, ymin, zmin] = view.sceneExtents.min();
     const volume = [xmax - xmin, ymax - ymin, zmax - zmin];
     return Math.max(...volume);
   }
+
+  private addJoyStickDragger() {
+    this.joyStickOverlayElement = document.createElement("div");
+    this.joyStickOverlayElement.id = "joyStickDiv";
+    this.joyStickOverlayElement.style.background = "rgba(0,0,0,0)";
+    this.joyStickOverlayElement.style.position = "fixed";
+    this.joyStickOverlayElement.style.zIndex = "0";
+    document.body.appendChild(this.joyStickOverlayElement);
+
+    this.joyStickDragger = new OdJoyStickDragger(
+      this,
+      this.joyStickOverlayElement,
+      (stickData) => {
+        if (Math.sqrt(stickData.x * stickData.x + stickData.y * stickData.y) > 20) {
+          this.lastJoyStickCoord = { x: stickData.x, y: stickData.y };
+          if (!this.animationId && !this.isJoyStickMoving) {
+            this.isJoyStickMoving = true;
+            this.processJoyStickMovement(0);
+          }
+        } else {
+          this.isJoyStickMoving = false;
+          window.cancelAnimationFrame(this.animationId);
+          this.animationId = undefined;
+          this.lastFrameJoyStickTS = 0;
+        }
+      },
+      this.m_module.canvas
+    );
+  }
+
+  processJoyStickMovement(timestamp: number) {
+    if (!this.isJoyStickMoving) return;
+    this.animationId = requestAnimationFrame(this.processJoyStickMovement);
+
+    if (this.lastFrameJoyStickTS !== 0) {
+      const deltaTS = timestamp - this.lastFrameJoyStickTS;
+      if (deltaTS > 0) {
+        const maxJoystickDistance = 100;
+        const forward = this.lastJoyStickCoord.y / maxJoystickDistance;
+        const right = this.lastJoyStickCoord.x / maxJoystickDistance;
+
+        const currentDelta = this.multiplier * deltaTS * this.baseSpeed;
+        this.moveTotal(currentDelta, forward, right);
+      }
+    }
+
+    this.lastFrameJoyStickTS = timestamp;
+  }
+
+  moveTotal(currentDelta: number, forward: number, right: number): void {
+    if (forward !== 0) {
+      this.moveForward(currentDelta * forward);
+    }
+    if (right !== 0) {
+      this.cameraWalker.moveRight(currentDelta * right);
+    }
+    this.proceedChangeCamera();
+  }
+
+  proceedChangeCamera() {
+    this.subject.update();
+    this.subject.emitEvent({ type: "changecamera" });
+  }
 }