@inweb/viewer-visualize 26.10.2 → 26.10.4

package/dist/viewer-visualize.js

@@ -1266,6 +1266,161 @@
         }
     }
 
+    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);
@@ -1275,15 +1430,19 @@
             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();
@@ -1294,7 +1453,7 @@
             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);
@@ -1334,6 +1493,8 @@
             }
             this.subject.update(true);
             this.subject.options.enableZoomWheel = this.enableZoomWheelPreviousValue;
+            this.joyStickOverlayElement.remove();
+            this.joyStickDragger.cleanup();
         }
         keydown(ev) {
             switch (ev.code) {
@@ -1375,31 +1536,32 @@
             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;
         }
@@ -1485,6 +1647,58 @@
             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;
@@ -1501,10 +1715,34 @@
             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();
@@ -1555,6 +1793,8 @@
             }
             this.subject.update(true);
             this.subject.options.enableZoomWheel = this.enableZoomWheelPreviousValue;
+            this.joyStickOverlayElement.remove();
+            this.joyStickDragger.cleanup();
         }
         keydown(ev) {
             switch (ev.code) {
@@ -1685,6 +1925,37 @@
             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 {
@@ -2875,6 +3146,46 @@
     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) => {
@@ -3157,6 +3468,7 @@
     }
 
     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));
@@ -17036,16 +17348,17 @@
             this._markupContainer = document.createElement("div");
             this._markupContainer.id = "markup-container";
             this._markupContainer.style.position = "absolute";
-            this._markupContainer.style.top = "0px";
-            this._markupContainer.style.left = "0px";
             this._markupContainer.style.outline = "0px";
             this._markupContainer.style.pointerEvents = "none";
             const parentDiv = this._container.parentElement;
             parentDiv.appendChild(this._markupContainer);
-            if (viewer)
+            if (viewer) {
                 this._viewer.addEventListener("resize", this.resizeViewer);
-            else
+            }
+            else {
                 this._resizeObserver = new ResizeObserver(debounce(this.resizeContainer, 100));
+                this._resizeObserver.observe(parentDiv);
+            }
             this._markupColor.setColor(255, 0, 0);
             this.initializeKonva();
             if (this._viewer) {