@inweb/viewer-visualize 26.10.2 → 26.10.4

package/lib/Viewer/Components/CameraComponent.d.ts

@@ -0,0 +1,11 @@
+import { CameraMode, IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+export declare class CameraComponent implements IComponent {
+    protected viewer: Viewer;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    getCameraMode(view: any): CameraMode;
+    switchCameraMode(mode: CameraMode): void;
+    optionsChange: () => void;
+    geometryEnd: () => void;
+}

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

@@ -0,0 +1,19 @@
+interface JoyStickStatus {
+    x: number;
+    y: number;
+    global: any;
+}
+export declare class OdJoyStickDragger {
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private drawExternal;
+    private drawInternal;
+    private canvas;
+    private onResize;
+    private hasEventListeners;
+    private container;
+    constructor(global: any, container: HTMLElement, callback: (status: JoyStickStatus) => void, canvasElement?: HTMLCanvasElement);
+    cleanup(): void;
+}
+export {};

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

@@ -1,6 +1,7 @@
 import { Viewer } from "../Viewer";
 import { Point2d } from "./Common/Geometry";
 import { OdBaseDragger } from "./Common/OdBaseDragger";
+import { OdJoyStickDragger } from "./OdJoyStickDragger";
 export declare class OdaFlyDragger extends OdBaseDragger {
     protected lastCoord: Point2d;
     protected speed: number;
@@ -17,6 +18,11 @@ export declare class OdaFlyDragger extends OdBaseDragger {
     protected deltaAngle: number;
     protected enableZoomWheelPreviousValue: boolean;
     protected dragPosition: Point2d;
+    protected lastJoyStickCoord: Point2d;
+    protected lastFrameJoyStickTS: number;
+    protected moving: boolean;
+    protected joyStickOverlayElement: HTMLDivElement;
+    protected joyStickDragger: OdJoyStickDragger;
     constructor(subject: Viewer);
     initialize(): void;
     dispose(): void;
@@ -28,4 +34,6 @@ export declare class OdaFlyDragger extends OdBaseDragger {
     turnLeft(angle: any): void;
     setupCamera(view: any): void;
     getMaxDimension(view: any): number;
+    processJoyMovement(timestamp: number): void;
+    moveTotal(currentDelta: number, forward: number, right: number): void;
 }

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

@@ -1,9 +1,9 @@
 import { Viewer } from "../Viewer";
 import { Point2d } from "./Common/Geometry";
 import { OdBaseDragger } from "./Common/OdBaseDragger";
+import { OdJoyStickDragger } from "./OdJoyStickDragger";
 export declare class OdaWalkDragger extends OdBaseDragger {
-    protected lastCoord: Point2d;
-    protected speed: number;
+    protected baseSpeed: number;
     protected delta: number;
     protected keyPressMap: Set<string>;
     protected oldWCSEnableValue: boolean;
@@ -13,21 +13,30 @@ export declare 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);
     initialize(): void;
     dispose(): void;
-    keydown(ev: any): void;
-    keyup(ev: any): void;
-    processMovement(timestamp: any): void;
+    keydown(ev: KeyboardEvent): void;
+    keyup(ev: KeyboardEvent): void;
+    processMovement(timestamp: number): void;
     start(x: number, y: number): void;
     drag(x: number, y: number): void;
-    moveForward(currentDelta: any): void;
-    moveBackward(currentDelta: any): void;
-    turnLeft(angle: any): void;
+    moveForward(currentDelta: number): void;
+    moveBackward(currentDelta: number): void;
+    turnLeft(angle: number): void;
     setupCamera(view: any): void;
     getMaxDimension(view: any): number;
+    private addJoyStickDragger;
+    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.10.2",
+  "version": "26.10.4",
   "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.10.2",
-    "@inweb/eventemitter2": "~26.10.2",
-    "@inweb/markup": "~26.10.2",
-    "@inweb/viewer-core": "~26.10.2"
+    "@inweb/client": "~26.10.4",
+    "@inweb/eventemitter2": "~26.10.4",
+    "@inweb/markup": "~26.10.4",
+    "@inweb/viewer-core": "~26.10.4"
   },
   "visualizeJS": "https://public-fhemb7e3embacwec.z02.azurefd.net/libs/visualizejs/master/Visualize.js"
 }

package/src/Viewer/Components/CameraComponent.ts

@@ -0,0 +1,78 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { CameraMode, IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class CameraComponent implements IComponent {
+  protected viewer: Viewer;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.viewer.addEventListener("databasechunk", this.geometryEnd);
+    this.viewer.addEventListener("clear", this.geometryEnd);
+    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("initialize", this.optionsChange);
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("databasechunk", this.geometryEnd);
+    this.viewer.removeEventListener("clear", this.geometryEnd);
+    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("initialize", this.optionsChange);
+  }
+
+  getCameraMode(view: any): CameraMode {
+    return view.perspective ? "perspective" : "orthographic";
+  }
+
+  switchCameraMode(mode: CameraMode) {
+    if (!mode) return;
+
+    const activeView = this.viewer.visViewer().activeView;
+
+    if (mode !== this.getCameraMode(activeView)) {
+      activeView.perspective = !activeView.perspective;
+
+      this.viewer.update();
+      this.viewer.emitEvent({ type: "changecameramode", mode });
+    }
+
+    activeView.delete();
+  }
+
+  optionsChange = () => {
+    this.switchCameraMode(this.viewer.options.cameraMode);
+  };
+
+  geometryEnd = () => {
+    const activeView = this.viewer.visViewer().activeView;
+
+    const mode = this.getCameraMode(activeView);
+
+    this.viewer.options.cameraMode = mode;
+    this.viewer.emitEvent({ type: "changecameramode", mode });
+
+    activeView.delete();
+  };
+}

package/src/Viewer/Components/index.ts

@@ -23,6 +23,7 @@
 
 import { IComponentsRegistry, componentsRegistry } from "@inweb/viewer-core";
 
+import { CameraComponent } from "./CameraComponent";
 import { RenderLoopComponent } from "./RenderLoopComponent";
 import { ResizeCanvasComponent } from "./ResizeCanvasComponent";
 import { ZoomWheelComponent } from "./ZoomWheelComponent";
@@ -71,6 +72,7 @@ export const components: IComponentsRegistry = componentsRegistry("visualizejs")
 
 // build-in components
 
+components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
 components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
 components.registerComponent("ZoomWheelComponent", (viewer) => new ZoomWheelComponent(viewer));

package/src/Viewer/Draggers/OdJoyStickDragger.ts

@@ -0,0 +1,222 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+// ===================== AI-CODE-FILE ======================
+// Source: Claude Sonnet 4.5
+// Date: 2025-10-07
+// Reviewer: vitaly.ivanov@opendesign.com
+// Issue: CLOUD-5851
+// Notes: Originally AI-generated, modified manually
+// =========================================================
+
+interface JoyStickStatus {
+  x: number;
+  y: number;
+  global: any;
+}
+
+export class OdJoyStickDragger {
+  private onMouseDown: (event?: any) => void;
+  private onMouseMove: (event: any) => void;
+  private onMouseUp: (event?: any) => void;
+  private drawExternal: () => void;
+  private drawInternal: () => void;
+  private canvas: HTMLCanvasElement;
+  private onResize: () => void;
+  private hasEventListeners: boolean = false;
+  private container: HTMLElement;
+
+  constructor(
+    global: any,
+    container: HTMLElement,
+    callback: (status: JoyStickStatus) => void,
+    canvasElement?: HTMLCanvasElement
+  ) {
+    const internalLineWidth = 2;
+    const internalStrokeColor = "#003300";
+    const externalLineWidth = 2;
+    const externalStrokeColor = "#35436E";
+
+    this.container = container;
+    this.container.style.touchAction = "none";
+
+    this.canvas = document.createElement("canvas");
+    this.canvas.id = "odJoyStickCanvas";
+    this.canvas.width = 200;
+    this.canvas.height = 200;
+    this.container.appendChild(this.canvas);
+    const context = this.canvas.getContext("2d")!;
+
+    let pressed = 0;
+    const circumference = 2 * Math.PI;
+    const internalRadius = (this.canvas.width - (this.canvas.width / 2 + 10)) / 2;
+    const maxMoveStick = internalRadius + 5;
+    const externalRadius = internalRadius + 30;
+    const centerX = this.canvas.width / 2;
+    const centerY = this.canvas.height / 2;
+    let movedX = centerX;
+    let movedY = centerY;
+
+    this.onMouseDown = () => {
+      event.preventDefault();
+      pressed = 1;
+    };
+
+    this.onMouseMove = (event) => {
+      event.preventDefault();
+      if (pressed === 1) {
+        movedX = event.pageX;
+        movedY = event.pageY;
+        if (this.canvas.offsetParent && (this.canvas.offsetParent as HTMLElement).tagName.toUpperCase() === "BODY") {
+          movedX -= this.canvas.offsetLeft;
+          movedY -= this.canvas.offsetTop;
+        } else if (this.canvas.offsetParent) {
+          movedX -= (this.canvas.offsetParent as HTMLElement).offsetLeft;
+          movedY -= (this.canvas.offsetParent as HTMLElement).offsetTop;
+        }
+        context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.drawExternal();
+        this.drawInternal();
+        callback({
+          x: 100 * ((movedX - centerX) / maxMoveStick),
+          y: 100 * ((movedY - centerY) / maxMoveStick) * -1,
+          global: global,
+        });
+      }
+    };
+
+    this.onMouseUp = () => {
+      event.preventDefault();
+      pressed = 0;
+      movedX = centerX;
+      movedY = centerY;
+      context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.drawExternal();
+      this.drawInternal();
+      callback({
+        x: 100 * ((movedX - centerX) / maxMoveStick),
+        y: 100 * ((movedY - centerY) / maxMoveStick) * -1,
+        global: global,
+      });
+    };
+
+    this.drawExternal = () => {
+      context.beginPath();
+      context.arc(centerX, centerY, externalRadius, 0, circumference, false);
+      context.lineWidth = externalLineWidth;
+      context.strokeStyle = externalStrokeColor;
+      context.globalAlpha = 0.5;
+      context.stroke();
+    };
+
+    this.drawInternal = () => {
+      context.beginPath();
+      if (movedX < internalRadius) {
+        movedX = maxMoveStick;
+      }
+      if (movedX + internalRadius > this.canvas.width) {
+        movedX = this.canvas.width - maxMoveStick;
+      }
+      if (movedY < internalRadius) {
+        movedY = maxMoveStick;
+      }
+      if (movedY + internalRadius > this.canvas.height) {
+        movedY = this.canvas.height - maxMoveStick;
+      }
+      context.arc(movedX, movedY, internalRadius, 0, circumference, false);
+      context.fillStyle = externalStrokeColor;
+      context.lineWidth = internalLineWidth;
+      context.strokeStyle = internalStrokeColor;
+      context.globalAlpha = 0.5;
+      context.fill();
+      context.stroke();
+    };
+
+    const addEventListeners = () => {
+      if (!this.hasEventListeners) {
+        this.canvas.addEventListener("pointerdown", this.onMouseDown, false);
+        document.addEventListener("pointermove", this.onMouseMove, false);
+        document.addEventListener("pointerup", this.onMouseUp, false);
+        this.hasEventListeners = true;
+      }
+    };
+
+    const removeEventListeners = () => {
+      if (this.hasEventListeners) {
+        this.canvas.removeEventListener("pointerdown", this.onMouseDown, false);
+        document.removeEventListener("pointermove", this.onMouseMove, false);
+        document.removeEventListener("pointerup", this.onMouseUp, false);
+        this.hasEventListeners = false;
+      }
+    };
+
+    const updateContainerPosition = () => {
+      if (canvasElement) {
+        const rect = canvasElement.getBoundingClientRect();
+        this.container.style.top = `${rect.height - 200}px`;
+        this.container.style.left = `${rect.left}px`;
+        this.container.style.width = `200px`;
+        this.container.style.height = `200px`;
+      }
+    };
+
+    const updateVisibility = () => {
+      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+      const isNarrowScreen = window.innerWidth < 1024;
+      const shouldShow = isMobile || isNarrowScreen;
+
+      if (shouldShow) {
+        this.container.style.display = "block";
+        addEventListeners();
+      } else {
+        this.container.style.display = "none";
+        removeEventListeners();
+      }
+    };
+
+    this.onResize = () => {
+      updateVisibility();
+      setTimeout(updateContainerPosition, 500);
+    };
+
+    updateVisibility();
+    updateContainerPosition();
+    window.addEventListener("resize", this.onResize, false);
+
+    this.drawExternal();
+    this.drawInternal();
+  }
+
+  cleanup(): void {
+    window.removeEventListener("resize", this.onResize, false);
+
+    if (this.hasEventListeners) {
+      this.canvas.removeEventListener("pointerdown", this.onMouseDown, false);
+      document.removeEventListener("pointermove", this.onMouseMove, false);
+      document.removeEventListener("pointerup", this.onMouseUp, false);
+      this.hasEventListeners = false;
+    }
+
+    this.canvas.remove();
+  }
+}

package/src/Viewer/Draggers/OdaFlyDragger.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;
 
@@ -46,6 +47,11 @@ export class OdaFlyDragger extends OdBaseDragger {
   protected deltaAngle: number;
   protected enableZoomWheelPreviousValue: boolean;
   protected dragPosition: Point2d;
+  protected lastJoyStickCoord: Point2d;
+  protected lastFrameJoyStickTS: number;
+  protected moving: boolean;
+  protected joyStickOverlayElement: HTMLDivElement;
+  protected joyStickDragger: OdJoyStickDragger;
 
   constructor(subject: Viewer) {
     super(subject);
@@ -59,11 +65,42 @@ export class OdaFlyDragger extends OdBaseDragger {
     this.keyup = this.keyup.bind(this);
 
     this.lastFrameTS = 0;
+    this.lastFrameJoyStickTS = 0;
     this.animationId = undefined;
     this.processMovement = this.processMovement.bind(this);
+    this.processJoyMovement = this.processJoyMovement.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
+    );
   }
 
   override initialize() {
@@ -137,6 +174,9 @@ export class OdaFlyDragger extends OdBaseDragger {
     // CLOUD-5359 Demo Viewer crashes after the Fly Mode
     this.subject.update(true);
     this.subject.options.enableZoomWheel = this.enableZoomWheelPreviousValue;
+
+    this.joyStickOverlayElement.remove();
+    this.joyStickDragger.cleanup();
   }
 
   keydown(ev) {
@@ -289,4 +329,38 @@ export class OdaFlyDragger extends OdBaseDragger {
     const volume = [xmax - xmin, ymax - ymin, zmax - zmin];
     return Math.max(...volume);
   }
+
+  processJoyMovement(timestamp: number) {
+    if (!this.moving) return;
+    this.animationId = requestAnimationFrame(this.processJoyMovement);
+
+    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.speed;
+        this.moveTotal(currentDelta, forward, right);
+      }
+    }
+
+    this.lastFrameJoyStickTS = timestamp;
+  }
+
+  moveTotal(currentDelta: number, forward: number, right: number): void {
+    if (forward !== 0) {
+      if (forward > 0) {
+        this.cameraFlyer.moveForward(currentDelta * forward);
+      } else {
+        this.cameraFlyer.moveBackward(currentDelta * Math.abs(forward));
+      }
+    }
+    if (right !== 0) {
+      this.cameraFlyer.moveRight(currentDelta * right);
+    }
+    this.subject.update();
+    this.subject.emitEvent({ type: "changecamera" });
+  }
 }