refactor: enhance measurement tool functionality and styling

app/src/modules/scene/tools/measurementTool.tsx

@@ -2,33 +2,15 @@ import * as THREE from "three";
 import { useEffect, useRef, useState } from "react";
 import { useThree, useFrame } from "@react-three/fiber";
 import { useToolMode } from "../../../store/builder/store";
-import { Html } from "@react-three/drei";
+import { Html, Line } from "@react-three/drei";
 
 const MeasurementTool = () => {
   const { gl, raycaster, pointer, camera, scene } = useThree();
   const { toolMode } = useToolMode();
 
   const [points, setPoints] = useState<THREE.Vector3[]>([]);
-    const [tubeGeometry, setTubeGeometry] = useState<THREE.TubeGeometry | null>(
-        null
-    );
+  const [linePoints, setLinePoints] = useState<THREE.Vector3[] | null>(null);
   const groupRef = useRef<THREE.Group>(null);
-    const [startConePosition, setStartConePosition] =
-        useState<THREE.Vector3 | null>(null);
-    const [endConePosition, setEndConePosition] = useState<THREE.Vector3 | null>(
-        null
-    );
-    const [startConeQuaternion, setStartConeQuaternion] = useState(
-        new THREE.Quaternion()
-    );
-    const [endConeQuaternion, setEndConeQuaternion] = useState(
-        new THREE.Quaternion()
-    );
-    const [coneSize, setConeSize] = useState({ radius: 0.2, height: 0.5 });
-
-    const MIN_RADIUS = 0.001, MAX_RADIUS = 0.1;
-    const MIN_CONE_RADIUS = 0.01, MAX_CONE_RADIUS = 0.4;
-    const MIN_CONE_HEIGHT = 0.035, MAX_CONE_HEIGHT = 2.0;
 
   useEffect(() => {
     const canvasElement = gl.domElement;
@@ -54,7 +36,9 @@ const MeasurementTool = () => {
               !intersect.object.name.includes("zonePlane") &&
               !intersect.object.name.includes("SelectionGroup") &&
               !intersect.object.name.includes("selectionAssetGroup") &&
-                            !intersect.object.name.includes("SelectionGroupBoundingBoxLine") &&
+              !intersect.object.name.includes(
+                "SelectionGroupBoundingBoxLine"
+              ) &&
               !intersect.object.name.includes("SelectionGroupBoundingBox") &&
               !intersect.object.name.includes("SelectionGroupBoundingLine") &&
               intersect.object.type !== "GridHelper"
@@ -78,9 +62,8 @@ const MeasurementTool = () => {
     const onContextMenu = (evt: any) => {
       evt.preventDefault();
       if (!drag) {
-                evt.preventDefault();
         setPoints([]);
-                setTubeGeometry(null);
+        setLinePoints(null);
       }
     };
 
@@ -90,8 +73,8 @@ const MeasurementTool = () => {
       canvasElement.addEventListener("pointerup", onMouseUp);
       canvasElement.addEventListener("contextmenu", onContextMenu);
     } else {
-            resetMeasurement();
       setPoints([]);
+      setLinePoints(null);
     }
 
     return () => {
@@ -105,6 +88,7 @@ const MeasurementTool = () => {
 
   useFrame(() => {
     if (points.length === 1) {
+      // live preview for second point
       raycaster.setFromCamera(pointer, camera);
       const intersects = raycaster
         .intersectObjects(scene.children, true)
@@ -123,116 +107,79 @@ const MeasurementTool = () => {
         );
 
       if (intersects.length > 0) {
-                updateMeasurement(points[0], intersects[0].point);
+        const tempEnd = intersects[0].point.clone();
+        updateMeasurement(points[0], tempEnd);
       }
     } else if (points.length === 2) {
+      // second point already fixed
       updateMeasurement(points[0], points[1]);
     } else {
-            resetMeasurement();
+      setLinePoints(null);
     }
   });
 
   const updateMeasurement = (start: THREE.Vector3, end: THREE.Vector3) => {
-        const distance = start.distanceTo(end);
-
-        const radius = THREE.MathUtils.clamp(distance * 0.02, MIN_RADIUS, MAX_RADIUS);
-        const coneRadius = THREE.MathUtils.clamp(distance * 0.05, MIN_CONE_RADIUS, MAX_CONE_RADIUS);
-        const coneHeight = THREE.MathUtils.clamp(distance * 0.2, MIN_CONE_HEIGHT, MAX_CONE_HEIGHT);
-
-        setConeSize({ radius: coneRadius, height: coneHeight });
-
-        const direction = new THREE.Vector3().subVectors(end, start).normalize();
-
-        const offset = direction.clone().multiplyScalar(coneHeight * 0.5);
-
-        let tubeStart = start.clone().add(offset);
-        let tubeEnd = end.clone().sub(offset);
-
-        tubeStart.y = Math.max(tubeStart.y, 0);
-        tubeEnd.y = Math.max(tubeEnd.y, 0);
-
-        const curve = new THREE.CatmullRomCurve3([tubeStart, tubeEnd]);
-        setTubeGeometry(new THREE.TubeGeometry(curve, 20, radius, 8, false));
-
-        setStartConePosition(tubeStart);
-        setEndConePosition(tubeEnd);
-        setStartConeQuaternion(getArrowOrientation(start, end));
-        setEndConeQuaternion(getArrowOrientation(end, start));
+    setLinePoints([start.clone(), end.clone()]);
   };
 
-    const resetMeasurement = () => {
-        setTubeGeometry(null);
-        setStartConePosition(null);
-        setEndConePosition(null);
-    };
-
-    const getArrowOrientation = (start: THREE.Vector3, end: THREE.Vector3) => {
-        const direction = new THREE.Vector3()
-            .subVectors(end, start)
-            .normalize()
-            .negate();
-        const quaternion = new THREE.Quaternion();
-        quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
-        return quaternion;
-    };
-
-    useEffect(() => {
-        if (points.length === 2) {
-            // console.log(points[0].distanceTo(points[1]));
-        }
-    }, [points]);
-
   return (
     <group ref={groupRef} name="MeasurementGroup">
-            {startConePosition && (
-                <mesh
-                    name="MeasurementReference"
-                    position={startConePosition}
-                    quaternion={startConeQuaternion}
-                >
-                    <coneGeometry args={[coneSize.radius, coneSize.height, 16]} />
-                    <meshBasicMaterial color="yellow" />
-                </mesh>
-            )}
-            {endConePosition && (
-                <mesh
-                    name="MeasurementReference"
-                    position={endConePosition}
-                    quaternion={endConeQuaternion}
-                >
-                    <coneGeometry args={[coneSize.radius, coneSize.height, 16]} />
-                    <meshBasicMaterial color="yellow" />
-                </mesh>
-            )}
-            {tubeGeometry && (
-                <mesh name="MeasurementReference" geometry={tubeGeometry}>
-                    <meshBasicMaterial color="yellow" />
-                </mesh>
+      {linePoints && (
+        <>
+          {/* Outline line */}
+          <Line
+            points={linePoints}
+            color="black"
+            lineWidth={6} // thicker than main line
+            depthTest={false}
+            depthWrite={false}
+            renderOrder={998} // render behind main line
+          />
+
+          {/* Main line */}
+          <Line
+            points={linePoints}
+            color="#b18ef1"
+            lineWidth={2} // actual line width
+            depthTest={false}
+            depthWrite={false}
+            transparent={false}
+            opacity={1}
+            renderOrder={999} // render on top
+          />
+        </>
       )}
 
-            {startConePosition && endConePosition && (
+      {points.map((point, index) => (
         <Html
-                    scale={THREE.MathUtils.clamp(
-                        startConePosition.distanceTo(endConePosition) * 0.25,
-                        0,
-                        10
-                    )}
-                    position={[
-                        (startConePosition.x + endConePosition.x) / 2,
-                        (startConePosition.y + endConePosition.y) / 2,
-                        (startConePosition.z + endConePosition.z) / 2,
-                    ]}
-                    // class
-                    wrapperClass="distance-text-wrapper"
-                    className="distance-text"
-                    // other
+          key={index}
+          position={point}
+          scale={0.5}
+          wrapperClass="measurement-label-wrapper"
+          className="measurement-label"
           zIndexRange={[1, 0]}
           prepend
           sprite
         >
-                    <div>
-                        {(startConePosition.distanceTo(endConePosition) + (coneSize.height)).toFixed(2)} m
-                    </div>
+          <div className="measurement-point"></div>
+        </Html>
+      ))}
+
+      {linePoints && linePoints.length === 2 && (
+        <Html
+          position={[
+            (linePoints[0].x + linePoints[1].x) / 2,
+            (linePoints[0].y + linePoints[1].y) / 2,
+            (linePoints[0].z + linePoints[1].z) / 2,
+          ]}
+          scale={0.5}
+          wrapperClass="distance-text-wrapper"
+          className="distance-text"
+          zIndexRange={[2, 1]}
+          prepend
+          sprite
+        >
+          <div>{linePoints[0].distanceTo(linePoints[1]).toFixed(2)} m</div>
         </Html>
       )}
     </group>

app/src/styles/scene/scene.scss

@@ -142,3 +142,13 @@
   border-radius: 6px;
   overflow: hidden;
 }
+
+.measurement-point {
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  background: #b18ef1;
+  outline: 2px solid black;
+  outline-offset: -1px;
+  transform: translate(-50%, -50%);
+}