Enhance builder functionality by implementing drag-and-drop for lines and points, adding hover effects, and improving wall distance display in the UI.

2025-06-23 13:38:26 +05:30
parent 329acbe397
commit f593fcd578
8 changed files with 237 additions and 53 deletions
--- a/app/src/modules/builder/wall/Instances/wallInstances.tsx
+++ b/app/src/modules/builder/wall/Instances/wallInstances.tsx
@@ -1,10 +1,12 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useWallStore } from '../../../../store/builder/useWallStore'
 import WallInstance from './instance/wallInstance';
 import Line from '../../line/line';
 import Point from '../../point/point';
 import { useToggleView } from '../../../../store/builder/store';
 import { Geometry } from '@react-three/csg';
+import { Vector3 } from 'three';
+import { Html } from '@react-three/drei';

 function WallInstances() {
    const { walls } = useWallStore();
@@ -34,21 +36,12 @@ function WallInstances() {
        <>

            {!toggleView && (
-
                <mesh name='Walls-Group'>
-                    {/* <Base name="base" geometry={box} scale={[3, 3, 3]} /> */}
-
                    <Geometry useGroups>
                        {walls.map((wall) => (
                            <WallInstance key={wall.wallUuid} wall={wall} />
                        ))}
                    </Geometry>
-
-                    {/* <Subtraction rotation={[0, Math.PI / 2, 0]} position={[-1.425, -0.45, 0]} scale={[1, 3, 1]}>
-                        <Geometry>
-                            <Base geometry={box} />
-                        </Geometry>
-                    </Subtraction> */}
                </mesh>
            )}

@@ -61,11 +54,42 @@ function WallInstances() {
                    </group>

                    <group name='Wall-Lines-Group'>
+
                        {walls.map((wall) => (
                            <React.Fragment key={wall.wallUuid}>
                                <Line points={wall.points} />
                            </React.Fragment>
                        ))}
+
+                        {walls.map((wall) => {
+                            const textPosition = new Vector3().addVectors(new Vector3(...wall.points[0].position), new Vector3(...wall.points[1].position)).divideScalar(2);
+                            const distance = new Vector3(...wall.points[0].position).distanceTo(new Vector3(...wall.points[1].position));
+
+                            return (
+                                < React.Fragment key={wall.wallUuid}>
+                                    {toggleView &&
+                                        <Html
+                                            key={`${wall.points[0].pointUuid}_${wall.points[1].pointUuid}`}
+                                            userData={wall}
+                                            position={[textPosition.x, 1, textPosition.z]}
+                                            wrapperClass="distance-text-wrapper"
+                                            className="distance-text"
+                                            zIndexRange={[1, 0]}
+                                            prepend
+                                            sprite
+                                        >
+                                            <div
+                                                key={wall.wallUuid}
+                                                className={`distance ${wall.wallUuid}`}
+                                            >
+                                                {distance.toFixed(2)} m
+                                            </div>
+                                        </Html>
+                                    }
+                                </React.Fragment>
+                            )
+                        })}
+
                    </group>
                </>
            )}