@inweb/viewer-visualize 26.10.2 → 26.10.4

package/dist/viewer-visualize.module.js

@@ -772,6 +772,161 @@ class MeasureLineDragger extends OdBaseDragger {
     }
 }
 
+class OdJoyStickDragger {
+    constructor(global, container, callback, canvasElement) {
+        this.hasEventListeners = false;
+        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.tagName.toUpperCase() === "BODY") {
+                    movedX -= this.canvas.offsetLeft;
+                    movedY -= this.canvas.offsetTop;
+                }
+                else if (this.canvas.offsetParent) {
+                    movedX -= this.canvas.offsetParent.offsetLeft;
+                    movedY -= this.canvas.offsetParent.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() {
+        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();
+    }
+}
+
 const FocalLengthConst$1 = 42.0;
 const calcFocalLength$1 = (lensLength, fieldWidth, fieldHeight) => {
     return (lensLength / FocalLengthConst$1) * Math.sqrt(fieldWidth * fieldWidth + fieldHeight * fieldHeight);
@@ -781,15 +936,19 @@ class OdaWalkDragger extends OdBaseDragger {
         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();
     }
     initialize() {
         super.initialize();
@@ -800,7 +959,7 @@ class OdaWalkDragger extends OdBaseDragger {
         this.viewer.setEnableWCS(false);
         const view = this.viewer.activeView;
         const maxDimension = this.getMaxDimension(view);
-        this.speed = maxDimension / 30000;
+        this.baseSpeed = maxDimension / 30000;
         this.subject.emitEvent({ type: "walkstart" });
         this.viewParams = this.getViewParams();
         this.setViewParams(this.viewParams);
@@ -840,6 +999,8 @@ class OdaWalkDragger extends OdBaseDragger {
         }
         this.subject.update(true);
         this.subject.options.enableZoomWheel = this.enableZoomWheelPreviousValue;
+        this.joyStickOverlayElement.remove();
+        this.joyStickDragger.cleanup();
     }
     keydown(ev) {
         switch (ev.code) {
@@ -881,31 +1042,32 @@ class OdaWalkDragger extends OdBaseDragger {
         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;
     }
@@ -991,6 +1153,58 @@ class OdaWalkDragger extends OdBaseDragger {
         const volume = [xmax - xmin, ymax - ymin, zmax - zmin];
         return Math.max(...volume);
     }
+    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) {
+        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, forward, right) {
+        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" });
+    }
 }
 
 const FocalLengthConst = 42.0;
@@ -1007,10 +1221,34 @@ class OdaFlyDragger extends OdBaseDragger {
         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.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);
     }
     initialize() {
         super.initialize();
@@ -1061,6 +1299,8 @@ class OdaFlyDragger extends OdBaseDragger {
         }
         this.subject.update(true);
         this.subject.options.enableZoomWheel = this.enableZoomWheelPreviousValue;
+        this.joyStickOverlayElement.remove();
+        this.joyStickDragger.cleanup();
     }
     keydown(ev) {
         switch (ev.code) {
@@ -1191,6 +1431,37 @@ class OdaFlyDragger extends OdBaseDragger {
         const volume = [xmax - xmin, ymax - ymin, zmax - zmin];
         return Math.max(...volume);
     }
+    processJoyMovement(timestamp) {
+        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, forward, right) {
+        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" });
+    }
 }
 
 class OdBaseCuttingPlaneDragger extends OdBaseDragger {
@@ -2381,6 +2652,46 @@ commands.registerCommandAlias("clearMarkup", "clearOverlay");
 commands.registerCommandAlias("clearSelected", "unselect");
 commands.registerCommandAlias("zoomToExtents", "zoomExtents");
 
+class CameraComponent {
+    constructor(viewer) {
+        this.optionsChange = () => {
+            this.switchCameraMode(this.viewer.options.cameraMode);
+        };
+        this.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();
+        };
+        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) {
+        return view.perspective ? "perspective" : "orthographic";
+    }
+    switchCameraMode(mode) {
+        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();
+    }
+}
+
 class RenderLoopComponent {
     constructor(viewer) {
         this.animate = (time = 0) => {
@@ -2663,6 +2974,7 @@ class ResetComponent {
 }
 
 const components = componentsRegistry("visualizejs");
+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));