@inweb/viewer-three 26.10.4 → 26.10.6

package/dist/viewer-three.module.js

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { draggersRegistry, commandsRegistry, componentsRegistry, Loader, loadersRegistry, Options, CANVAS_EVENTS } from '@inweb/viewer-core';
+import { draggersRegistry, commandsRegistry, Options, componentsRegistry, Loader, loadersRegistry, CANVAS_EVENTS } from '@inweb/viewer-core';
 export * from '@inweb/viewer-core';
 import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Matrix4, Vector4, MathUtils, Raycaster, EdgesGeometry, Controls, Clock, Sphere, Box3, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
@@ -752,6 +752,9 @@ class OrbitDragger {
             this.orbit.object = this.viewer.camera;
             this.orbit.update();
         };
+        this.optionsChange = ({ data: options }) => {
+            this.orbit.zoomSpeed = Math.abs(this.orbit.zoomSpeed) * (options.reverseZoomWheel ? -1 : 1);
+        };
         this.controlsStart = () => {
             this.changed = false;
         };
@@ -807,6 +810,7 @@ class OrbitDragger {
         this.viewer.addEventListener("zoom", this.updateControls);
         this.viewer.addEventListener("drawviewpoint", this.updateControls);
         this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
+        this.viewer.addEventListener("optionschange", this.optionsChange);
         this.viewer.addEventListener("contextmenu", this.stopContextMenu);
         this.updateControls();
     }
@@ -817,6 +821,7 @@ class OrbitDragger {
         this.viewer.removeEventListener("zoom", this.updateControls);
         this.viewer.removeEventListener("drawviewpoint", this.updateControls);
         this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
+        this.viewer.removeEventListener("optionschange", this.optionsChange);
         this.viewer.removeEventListener("contextmenu", this.stopContextMenu);
         this.orbit.removeEventListener("start", this.controlsStart);
         this.orbit.removeEventListener("change", this.controlsChange);
@@ -1126,12 +1131,14 @@ class MeasureSnapper {
 class MeasureOverlay {
     constructor(camera, canvas) {
         this.lines = [];
-        this.resizeContainer = (entries) => {
-            const { width, height } = entries[0].contentRect;
-            if (!width || !height)
+        this.resizeContainer = () => {
+            const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = this.canvas;
+            if (!offsetWidth || !offsetHeight)
                 return;
-            this.container.style.width = `${width}px`;
-            this.container.style.height = `${height}px`;
+            this.container.style.left = `${offsetLeft}px`;
+            this.container.style.top = `${offsetTop}px`;
+            this.container.style.width = `${offsetWidth}px`;
+            this.container.style.height = `${offsetHeight}px`;
         };
         this.camera = camera;
         this.canvas = canvas;
@@ -1148,7 +1155,7 @@ class MeasureOverlay {
         if (!this.canvas.parentElement)
             return;
         this.canvas.parentElement.appendChild(this.container);
-        this.resizeObserver.observe(this.canvas.parentElement);
+        this.resizeObserver.observe(this.canvas);
     }
     dispose() {
         this.clear();
@@ -2701,8 +2708,9 @@ class HighlighterComponent {
         });
     }
     syncHighlightColors() {
-        const { facesColor, facesTransparancy, facesOverlap } = this.viewer.options;
-        const { edgesColor, edgesVisibility, edgesOverlap } = this.viewer.options;
+        const options = this.viewer.options.enableCustomHighlight ? this.viewer.options : Options.defaults();
+        const { facesColor, facesTransparancy, facesOverlap } = options;
+        const { edgesColor, edgesVisibility, edgesOverlap } = options;
         this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
         this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
         this.facesMaterial.depthTest = !facesOverlap;