@inweb/viewer-visualize 26.10.2 → 26.10.3

package/dist/viewer-visualize.js

@@ -2875,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) => {
@@ -3157,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));
@@ -17036,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) {