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(); const { toggleView } = useToggleView(); useEffect(() => { // console.log('walls: ', walls); }, [walls]) const allPoints = useMemo(() => { const points: Point[] = []; const seenUuids = new Set(); walls.forEach(aisle => { aisle.points.forEach(point => { if (!seenUuids.has(point.pointUuid)) { seenUuids.add(point.pointUuid); points.push(point); } }); }); return points; }, [walls]); return ( <> {!toggleView && ( {walls.map((wall) => ( ))} )} {toggleView && ( <> {allPoints.map((point) => ( ))} {walls.map((wall) => ( ))} {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 &&

{distance.toFixed(2)} m

} ) })} )} ) } export default WallInstances