@tetacom/ng-components 1.7.0 → 1.7.1

package/component/chart-3d/services/chart3d-tooltip.service.d.ts

@@ -4,9 +4,10 @@ import * as i0 from "@angular/core";
 export declare class Chart3dTooltipService {
     private _raycaster;
     private _mouse;
+    findClosestPointOnCurveLocal(point: THREE.Vector3, curve: THREE.CatmullRomCurve3): THREE.Vector3;
     constructor();
     findIntersection(event: MouseEvent, canvas: HTMLCanvasElement, camera: THREE.Camera, wellMeshes: WellMeshData[]): IntersectionResult | null;
-    findClosestPointOnCurve(point: THREE.Vector3, curve: THREE.CatmullRomCurve3): THREE.Vector3;
+    private findClosestPointOnCurveToRay;
     private findClosestDataPoint;
     private calculateTVD;
     static ɵfac: i0.ɵɵFactoryDeclaration<Chart3dTooltipService, never>;

package/fesm2022/tetacom-ng-components.mjs

@@ -488,6 +488,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }], ctorParameters: () => [] });
 
 class Chart3dTooltipService {
+    // Kept for marker/orientation logic in the component (not used for MD now)
+    findClosestPointOnCurveLocal(point, curve) {
+        let closestPoint = new THREE.Vector3();
+        let minDistance = Infinity;
+        const samples = 200;
+        for (let i = 0; i <= samples; i++) {
+            const t = i / samples;
+            const curvePoint = curve.getPoint(t);
+            const distance = point.distanceTo(curvePoint);
+            if (distance < minDistance) {
+                minDistance = distance;
+                closestPoint = curvePoint;
+            }
+        }
+        return closestPoint;
+    }
     constructor() {
         this._raycaster = new THREE.Raycaster();
         this._mouse = new THREE.Vector2();
@@ -505,19 +521,29 @@ class Chart3dTooltipService {
         if (intersects.length === 0) {
             return null;
         }
+        // Prefer the closest intersection by distance (Three usually returns sorted,
+        // but keeping it explicit avoids surprises across versions)
+        intersects.sort((a, b) => a.distance - b.distance);
         // 3. Find well data
         const intersect = intersects[0];
         const wellData = wellMeshes.find((_) => _.mesh === intersect.object);
         if (!wellData) {
             return null;
         }
-        // 4. Calculate closest point on curve
-        const closestPoint = this.findClosestPointOnCurve(intersect.point, wellData.curve);
-        // 5. Find closest data point to get MD
+        // 4. Calculate closest point on the trajectory curve using the mouse ray.
+        // Using the curve parameter t makes the tooltip smooth even for very low-point trajectories (e.g. 3 points).
+        const hit = this.findClosestPointOnCurveToRay(this._raycaster.ray, wellData.curve, wellData.points);
+        const closestPoint = hit.point;
+        const intersectPoint = hit.hitPoint ?? intersect.point;
+        const intersectDistance = hit.hitDistance ?? intersect.distance;
+        // Override intersection with a stable point derived from ray→trajectory projection
+        intersect.point = intersectPoint;
+        intersect.distance = intersectDistance;
+        // 5. Find closest data point (useful for other fields)
         const closestDataPoint = this.findClosestDataPoint(closestPoint, wellData.points, wellData.scale);
-        // 6. Calculate TVD and get MD from data point
+        // 6. Calculate TVD and MD
         const tvd = this.calculateTVD(closestPoint, wellData.scale.y);
-        const md = closestDataPoint.md ?? 0;
+        const md = hit.md; // smoothly interpolated along curve parameter t
         return {
             wellData,
             intersectionPoint: intersect.point,
@@ -527,25 +553,81 @@ class Chart3dTooltipService {
             tvd,
         };
     }
-    findClosestPointOnCurve(point, curve) {
-        let closestPoint = new THREE.Vector3();
-        let minDistance = Infinity;
-        const samples = 100;
-        for (let i = 0; i <= samples; i++) {
-            const t = i / samples;
-            const curvePoint = curve.getPoint(t);
-            const distance = point.distanceTo(curvePoint);
-            if (distance < minDistance) {
-                minDistance = distance;
-                closestPoint = curvePoint;
+    findClosestPointOnCurveToRay(ray, curve, orderedDataPoints) {
+        // Compute closest point on the rendered curve to the mouse ray.
+        // We sample t densely (fast enough) and then refine with a few iterations.
+        // MD is interpolated along the dataPoints md range using the same t.
+        if (!orderedDataPoints.length) {
+            return { point: new THREE.Vector3(), md: 0 };
+        }
+        if (orderedDataPoints.length === 1) {
+            // Degenerate curve
+            const p = curve.getPoint(0);
+            const s = Math.max(0, ray.direction.dot(new THREE.Vector3().subVectors(p, ray.origin)));
+            const hitPoint = ray.at(s, new THREE.Vector3());
+            return {
+                point: p,
+                md: orderedDataPoints[0].md ?? 0,
+                hitPoint,
+                hitDistance: s,
+            };
+        }
+        const mdMin = orderedDataPoints[0].md ?? 0;
+        const mdMax = orderedDataPoints[orderedDataPoints.length - 1].md ?? mdMin;
+        const d = ray.direction.clone().normalize();
+        // IMPORTANT: use getPointAt(u) (u = arc-length parameter), not getPoint(t).
+        // CatmullRomCurve3 "t" is not proportional to arc length and causes MD to change non-uniformly,
+        // especially noticeable when there are very few control points.
+        const distSqAt = (u) => {
+            const p = curve.getPointAt(u);
+            const s = Math.max(0, d.dot(new THREE.Vector3().subVectors(p, ray.origin)));
+            const r = ray.at(s, new THREE.Vector3());
+            return { distSq: r.distanceToSquared(p), p, s, r };
+        };
+        // 1) coarse scan over arc-length parameter u
+        const samples = 400;
+        let bestU = 0;
+        let best = distSqAt(0);
+        for (let i = 1; i <= samples; i++) {
+            const u = i / samples;
+            const cur = distSqAt(u);
+            if (cur.distSq < best.distSq) {
+                best = cur;
+                bestU = u;
+            }
+        }
+        // 2) refine around bestU
+        let left = Math.max(0, bestU - 1 / samples);
+        let right = Math.min(1, bestU + 1 / samples);
+        for (let iter = 0; iter < 10; iter++) {
+            const u1 = left + (right - left) / 3;
+            const u2 = right - (right - left) / 3;
+            const f1 = distSqAt(u1);
+            const f2 = distSqAt(u2);
+            if (f1.distSq < f2.distSq) {
+                right = u2;
+                best = f1;
+                bestU = u1;
+            }
+            else {
+                left = u1;
+                best = f2;
+                bestU = u2;
             }
         }
-        return closestPoint;
+        // Final eval at bestU
+        const final = distSqAt(bestU);
+        const md = mdMin + (mdMax - mdMin) * bestU;
+        return {
+            point: final.p,
+            md,
+            hitPoint: final.r,
+            hitDistance: final.s,
+        };
     }
     findClosestDataPoint(curvePoint, dataPoints, scale) {
         let closestPoint = dataPoints[0];
         let minDistance = Infinity;
-        let closestIndex = 0;
         for (let i = 0; i < dataPoints.length; i++) {
             const point = dataPoints[i];
             // Convert data point to 3D space using scales
@@ -554,36 +636,6 @@ class Chart3dTooltipService {
             if (distance < minDistance) {
                 minDistance = distance;
                 closestPoint = point;
-                closestIndex = i;
-            }
-        }
-        // If MD is not available in the closest point, try to interpolate
-        if (closestPoint.md === undefined || closestPoint.md === null) {
-            // Find first point with MD
-            for (const point of dataPoints) {
-                if (point.md !== undefined && point.md !== null) {
-                    return point;
-                }
-            }
-        }
-        // Try to interpolate MD between two closest points
-        if (closestIndex > 0 && closestIndex < dataPoints.length - 1) {
-            const prevPoint = dataPoints[closestIndex - 1];
-            const nextPoint = dataPoints[closestIndex + 1];
-            if (prevPoint.md !== undefined &&
-                nextPoint.md !== undefined &&
-                closestPoint.md === undefined) {
-                // Linear interpolation
-                const prevScaled = new THREE.Vector3(scale.x(prevPoint.x), scale.y(prevPoint.y), scale.z(prevPoint.z));
-                const nextScaled = new THREE.Vector3(scale.x(nextPoint.x), scale.y(nextPoint.y), scale.z(nextPoint.z));
-                const totalDist = prevScaled.distanceTo(nextScaled);
-                const distFromPrev = curvePoint.distanceTo(prevScaled);
-                const t = distFromPrev / totalDist;
-                const interpolatedMD = prevPoint.md + (nextPoint.md - prevPoint.md) * t;
-                return {
-                    ...closestPoint,
-                    md: interpolatedMD,
-                };
             }
         }
         return closestPoint;
@@ -665,7 +717,8 @@ class Chart3dComponent {
             if (!data.points?.length) {
                 return;
             }
-            const points = data.points.map((_) => new THREE.Vector3(x(_.x), y(_.y), z(_.z)));
+            const orderedDataPoints = [...data.points].sort((a, b) => (a.md ?? 0) - (b.md ?? 0));
+            const points = orderedDataPoints.map((_) => new THREE.Vector3(x(_.x), y(_.y), z(_.z)));
             const color = d3.scaleOrdinal(d3.schemeTableau10);
             const material = new THREE.MeshBasicMaterial({
                 color: data?.color ?? color(idx.toString()),
@@ -680,7 +733,7 @@ class Chart3dComponent {
                 series: data,
                 scale: { x, y, z },
                 curve: curve,
-                points: data.points,
+                points: orderedDataPoints,
             });
         });
         const circles = x.ticks(this.SIDE_SIZE / 10);
@@ -951,8 +1004,8 @@ class Chart3dComponent {
             this._tooltipMarker.geometry.dispose();
             this._tooltipMarker.material.dispose();
         }
-        // Find the closest point on the curve using service
-        const pointOnCurve = this._tooltipService.findClosestPointOnCurve(intersectionPoint, curve);
+        // Closest point on curve (local helper, keep marker purely visual)
+        const pointOnCurve = this._tooltipService.findClosestPointOnCurveLocal(intersectionPoint, curve);
         // Find parameter t for tangent calculation
         let closestT = 0;
         let minDistance = Infinity;