84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
import { 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<string>();
|
|
|
|
aisles.forEach(aisle => {
|
|
aisle.points.forEach(point => {
|
|
if (!seenUuids.has(point.uuid)) {
|
|
seenUuids.add(point.uuid);
|
|
points.push(point);
|
|
}
|
|
});
|
|
});
|
|
|
|
return points;
|
|
}, [aisles]);
|
|
|
|
useEffect(() => {
|
|
// console.log('aisles: ', aisles);
|
|
}, [aisles]);
|
|
|
|
return (
|
|
<>
|
|
{toggleView &&
|
|
<group name='Aisle-Points-Group'>
|
|
{allPoints.map((point) => (
|
|
<Point key={point.uuid} point={point} />
|
|
))}
|
|
</group>
|
|
}
|
|
|
|
<group name='Aisles-Group'>
|
|
{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 (
|
|
<>
|
|
|
|
<AisleInstance aisle={aisle} key={aisle.uuid} />
|
|
|
|
{toggleView &&
|
|
<Html
|
|
// data
|
|
key={aisle.uuid}
|
|
userData={aisle}
|
|
position={[textPosition.x, 1, textPosition.z]}
|
|
// class
|
|
wrapperClass="distance-text-wrapper"
|
|
className="distance-text"
|
|
// other
|
|
zIndexRange={[1, 0]}
|
|
prepend
|
|
sprite
|
|
>
|
|
<div
|
|
key={aisle.uuid}
|
|
className={`distance ${aisle.uuid}`}
|
|
>
|
|
{distance.toFixed(2)} m
|
|
</div>
|
|
</Html>
|
|
}
|
|
|
|
</>
|
|
)
|
|
})}
|
|
</group>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default AisleInstances |