2025-06-10 05:48:39 +00:00
|
|
|
import React, { useEffect, useMemo, useRef } from 'react';
|
2025-06-04 04:53:22 +00:00
|
|
|
import { useWallStore } from '../../../../store/builder/useWallStore'
|
|
|
|
import WallInstance from './instance/wallInstance';
|
2025-06-04 09:49:37 +00:00
|
|
|
import Line from '../../line/line';
|
|
|
|
import Point from '../../point/point';
|
|
|
|
import { useToggleView } from '../../../../store/builder/store';
|
2025-06-10 05:48:39 +00:00
|
|
|
import { Base, Geometry, Subtraction } from '@react-three/csg';
|
|
|
|
import { BoxGeometry } from 'three';
|
2025-06-04 04:53:22 +00:00
|
|
|
|
|
|
|
function WallInstances() {
|
|
|
|
const { walls } = useWallStore();
|
2025-06-04 09:49:37 +00:00
|
|
|
const { toggleView } = useToggleView();
|
2025-06-10 05:48:39 +00:00
|
|
|
const ref = useRef<any>();
|
2025-06-04 04:53:22 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
// console.log('walls: ', walls);
|
|
|
|
}, [walls])
|
|
|
|
|
2025-06-05 06:25:46 +00:00
|
|
|
const allPoints = useMemo(() => {
|
|
|
|
const points: Point[] = [];
|
|
|
|
const seenUuids = new Set<string>();
|
2025-06-04 09:49:37 +00:00
|
|
|
|
2025-06-05 06:25:46 +00:00
|
|
|
walls.forEach(aisle => {
|
|
|
|
aisle.points.forEach(point => {
|
|
|
|
if (!seenUuids.has(point.pointUuid)) {
|
|
|
|
seenUuids.add(point.pointUuid);
|
|
|
|
points.push(point);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
2025-06-04 09:49:37 +00:00
|
|
|
|
2025-06-05 06:25:46 +00:00
|
|
|
return points;
|
|
|
|
}, [walls]);
|
2025-06-04 09:49:37 +00:00
|
|
|
|
2025-06-05 06:25:46 +00:00
|
|
|
return (
|
|
|
|
<>
|
2025-06-10 05:48:39 +00:00
|
|
|
<group name='Walls-Group' ref={ref}>
|
|
|
|
<Geometry computeVertexNormals>
|
|
|
|
|
2025-06-04 09:49:37 +00:00
|
|
|
{walls.map((wall) => (
|
2025-06-05 06:25:46 +00:00
|
|
|
<WallInstance key={wall.wallUuid} wall={wall} />
|
2025-06-04 09:49:37 +00:00
|
|
|
))}
|
2025-06-10 05:48:39 +00:00
|
|
|
|
|
|
|
{/* <Base geometry={new BoxGeometry()} >
|
|
|
|
<meshStandardMaterial />
|
|
|
|
</Base>
|
|
|
|
|
|
|
|
<Geometry>
|
|
|
|
<Subtraction scale={[5, 11, 5]} >
|
|
|
|
<Geometry>
|
|
|
|
<Base geometry={new BoxGeometry()} />
|
|
|
|
</Geometry>
|
|
|
|
</Subtraction>
|
|
|
|
</Geometry> */}
|
2025-06-05 06:25:46 +00:00
|
|
|
</Geometry>
|
|
|
|
</group>
|
|
|
|
|
|
|
|
{toggleView && (
|
|
|
|
<>
|
|
|
|
<group name='Wall-Points-Group'>
|
|
|
|
{allPoints.map((point) => (
|
|
|
|
<Point key={point.pointUuid} point={point} />
|
|
|
|
))}
|
|
|
|
</group>
|
|
|
|
|
|
|
|
<group name='Wall-Lines-Group'>
|
|
|
|
{walls.map((wall) => (
|
|
|
|
<React.Fragment key={wall.wallUuid}>
|
|
|
|
<Line points={wall.points} />
|
|
|
|
</React.Fragment>
|
|
|
|
))}
|
|
|
|
</group>
|
2025-06-04 09:49:37 +00:00
|
|
|
</>
|
|
|
|
)}
|
2025-06-04 04:53:22 +00:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default WallInstances
|