2025-06-23 13:38:26 +05:30
|
|
|
import React, { useEffect, useMemo } from 'react';
|
2025-06-10 15:28:23 +05:30
|
|
|
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';
|
2025-06-23 09:37:53 +05:30
|
|
|
import { Geometry } from '@react-three/csg';
|
2025-06-23 13:38:26 +05:30
|
|
|
import { Vector3 } from 'three';
|
|
|
|
|
import { Html } from '@react-three/drei';
|
2025-06-10 15:28:23 +05:30
|
|
|
|
|
|
|
|
function WallInstances() {
|
|
|
|
|
const { walls } = useWallStore();
|
|
|
|
|
const { toggleView } = useToggleView();
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// console.log('walls: ', walls);
|
|
|
|
|
}, [walls])
|
|
|
|
|
|
|
|
|
|
const allPoints = useMemo(() => {
|
|
|
|
|
const points: Point[] = [];
|
|
|
|
|
const seenUuids = new Set<string>();
|
|
|
|
|
|
|
|
|
|
walls.forEach(aisle => {
|
|
|
|
|
aisle.points.forEach(point => {
|
|
|
|
|
if (!seenUuids.has(point.pointUuid)) {
|
|
|
|
|
seenUuids.add(point.pointUuid);
|
|
|
|
|
points.push(point);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return points;
|
|
|
|
|
}, [walls]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
|
2025-06-23 09:37:53 +05:30
|
|
|
{!toggleView && (
|
|
|
|
|
<mesh name='Walls-Group'>
|
|
|
|
|
<Geometry useGroups>
|
|
|
|
|
{walls.map((wall) => (
|
|
|
|
|
<WallInstance key={wall.wallUuid} wall={wall} />
|
|
|
|
|
))}
|
|
|
|
|
</Geometry>
|
|
|
|
|
</mesh>
|
|
|
|
|
)}
|
2025-06-10 15:28:23 +05:30
|
|
|
|
|
|
|
|
{toggleView && (
|
|
|
|
|
<>
|
|
|
|
|
<group name='Wall-Points-Group'>
|
|
|
|
|
{allPoints.map((point) => (
|
|
|
|
|
<Point key={point.pointUuid} point={point} />
|
|
|
|
|
))}
|
|
|
|
|
</group>
|
|
|
|
|
|
|
|
|
|
<group name='Wall-Lines-Group'>
|
2025-06-23 13:38:26 +05:30
|
|
|
|
2025-06-10 15:28:23 +05:30
|
|
|
{walls.map((wall) => (
|
|
|
|
|
<React.Fragment key={wall.wallUuid}>
|
|
|
|
|
<Line points={wall.points} />
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
))}
|
2025-06-23 13:38:26 +05:30
|
|
|
|
|
|
|
|
{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>
|
|
|
|
|
)
|
|
|
|
|
})}
|
|
|
|
|
|
2025-06-10 15:28:23 +05:30
|
|
|
</group>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2025-06-23 09:37:53 +05:30
|
|
|
export default WallInstances
|
