@inweb/viewer-visualize 26.12.4 → 26.12.5

package/lib/Viewer/Draggers/OdaFlyDragger.d.ts

@@ -20,7 +20,7 @@ export declare class OdaFlyDragger extends OdBaseDragger {
     protected dragPosition: Point2d;
     protected lastJoyStickCoord: Point2d;
     protected lastFrameJoyStickTS: number;
-    protected moving: boolean;
+    protected isJoyStickMoving: boolean;
     protected joyStickOverlayElement: HTMLDivElement;
     protected joyStickDragger: OdJoyStickDragger;
     constructor(subject: Viewer);
@@ -34,6 +34,7 @@ export declare class OdaFlyDragger extends OdBaseDragger {
     turnLeft(angle: any): void;
     setupCamera(view: any): void;
     getMaxDimension(view: any): number;
-    processJoyMovement(timestamp: number): void;
+    addJoyStickDragger(parentElement: HTMLElement): void;
+    processJoyStickMovement(timestamp: number): void;
     moveTotal(currentDelta: number, forward: number, right: number): void;
 }

package/lib/Viewer/Draggers/OdaWalkDragger.d.ts

@@ -35,7 +35,7 @@ export declare class OdaWalkDragger extends OdBaseDragger {
     turnLeft(angle: number): void;
     setupCamera(view: any): void;
     getMaxDimension(view: any): number;
-    private addJoyStickDragger;
+    addJoyStickDragger(parentElement: HTMLElement): void;
     processJoyStickMovement(timestamp: number): void;
     moveTotal(currentDelta: number, forward: number, right: number): void;
     proceedChangeCamera(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-visualize",
-  "version": "26.12.4",
+  "version": "26.12.5",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using VisualizeJS",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -29,10 +29,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.12.4",
-    "@inweb/eventemitter2": "~26.12.4",
-    "@inweb/markup": "~26.12.4",
-    "@inweb/viewer-core": "~26.12.4"
+    "@inweb/client": "~26.12.5",
+    "@inweb/eventemitter2": "~26.12.5",
+    "@inweb/markup": "~26.12.5",
+    "@inweb/viewer-core": "~26.12.5"
   },
   "visualizeJS": "https://public-fhemb7e3embacwec.z02.azurefd.net/libs/visualizejs/master/Visualize.js"
 }

package/src/Viewer/Draggers/OdaFlyDragger.ts

@@ -49,7 +49,7 @@ export class OdaFlyDragger extends OdBaseDragger {
   protected dragPosition: Point2d;
   protected lastJoyStickCoord: Point2d;
   protected lastFrameJoyStickTS: number;
-  protected moving: boolean;
+  protected isJoyStickMoving: boolean;
   protected joyStickOverlayElement: HTMLDivElement;
   protected joyStickDragger: OdJoyStickDragger;
 
@@ -68,39 +68,13 @@ export class OdaFlyDragger extends OdBaseDragger {
     this.lastFrameJoyStickTS = 0;
     this.animationId = undefined;
     this.processMovement = this.processMovement.bind(this);
-    this.processJoyMovement = this.processJoyMovement.bind(this);
+    this.processJoyStickMovement = this.processJoyStickMovement.bind(this);
 
     this.deltaAngle = Math.PI / 3600;
     this.autoSelect = true;
 
-    this.moving = false;
-
-    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.moving) {
-            this.moving = true;
-            this.processJoyMovement(0);
-          }
-        } else {
-          this.moving = false;
-          window.cancelAnimationFrame(this.animationId);
-          this.animationId = undefined;
-          this.lastFrameJoyStickTS = 0;
-        }
-      },
-      this.m_module.canvas
-    );
+    this.isJoyStickMoving = false;
+    this.addJoyStickDragger(subject.canvas.parentElement);
   }
 
   override initialize() {
@@ -330,9 +304,38 @@ export class OdaFlyDragger extends OdBaseDragger {
     return Math.max(...volume);
   }
 
-  processJoyMovement(timestamp: number) {
-    if (!this.moving) return;
-    this.animationId = requestAnimationFrame(this.processJoyMovement);
+  addJoyStickDragger(parentElement: HTMLElement) {
+    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";
+    parentElement.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;

package/src/Viewer/Draggers/OdaWalkDragger.ts

@@ -73,7 +73,7 @@ export class OdaWalkDragger extends OdBaseDragger {
     this.autoSelect = true;
 
     this.isJoyStickMoving = false;
-    this.addJoyStickDragger();
+    this.addJoyStickDragger(subject.canvas.parentElement);
   }
 
   override initialize() {
@@ -329,13 +329,13 @@ export class OdaWalkDragger extends OdBaseDragger {
     return Math.max(...volume);
   }
 
-  private addJoyStickDragger() {
+  addJoyStickDragger(parentElement: HTMLElement) {
     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);
+    parentElement.appendChild(this.joyStickOverlayElement);
 
     this.joyStickDragger = new OdJoyStickDragger(
       this,