import React, { useEffect, useMemo } from 'react'; import { useAisleStore } from '../../../../store/builder/useAisleStore'; import { useToggleView } from '../../../../store/builder/store'; import AisleInstance from './instance/aisleInstance'; import Point from '../../point/point'; import { Html } from '@react-three/drei'; import { Vector3 } from 'three'; function AisleInstances() { const { aisles } = useAisleStore(); const { toggleView } = useToggleView(); const allPoints = useMemo(() => { const points: Point[] = []; const seenUuids = new Set(); aisles.forEach(aisle => { aisle.points.forEach(point => { if (!seenUuids.has(point.pointUuid)) { seenUuids.add(point.pointUuid); points.push(point); } }); }); return points; }, [aisles]); return ( <> {toggleView && {allPoints.map((point) => ( ))} } {aisles.map((aisle) => { const textPosition = new Vector3().addVectors(new Vector3(...aisle.points[0].position), new Vector3(...aisle.points[1].position)).divideScalar(2); const distance = new Vector3(...aisle.points[0].position).distanceTo(new Vector3(...aisle.points[1].position)); return ( < React.Fragment key={aisle.aisleUuid}> {toggleView &&

{distance.toFixed(2)} m

} ) })} ) } export default AisleInstances