@inweb/viewer-visualize 26.10.1 → 26.10.3

package/dist/viewer-visualize.js

@@ -236,6 +236,7 @@
             enableGestures: true,
             geometryType: "vsfx",
             rulerUnit: "Default",
+            cameraMode: "perspective",
         };
     }
     class Options {
@@ -491,6 +492,13 @@
             this._data.rulerUnit = value;
             this.change();
         }
+        get cameraMode() {
+            return this._data.cameraMode || "perspective";
+        }
+        set cameraMode(value) {
+            this._data.cameraMode = value;
+            this.change();
+        }
     }
     const CanvasEvents = [
         "click",
@@ -1425,8 +1433,8 @@
             else {
                 move = Vector3d.createFromArray([0, currentDelta, 0]);
             }
-            let newPos = pos.add(move);
-            let newTarget = target.add(move);
+            const newPos = pos.add(move);
+            const newTarget = target.add(move);
             camera.setupCamera(newPos.toArray(), newTarget.toArray(), up.toArray());
         }
         moveBackward(currentDelta) {
@@ -2867,6 +2875,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) => {
@@ -3149,6 +3197,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));
@@ -17028,16 +17077,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) {