89 lines
3.6 KiB
JavaScript
89 lines
3.6 KiB
JavaScript
import { useEffect, useState } from "react"
|
|
import { getLines } from "../../services/factoryBuilder/lines/getLinesApi";
|
|
import * as THREE from "three";
|
|
import { useActiveLayer, useDeletedLines, useNewLines, useToggleView } from "../../store/store";
|
|
import objectLinesToArray from "../scene/geomentries/lines/lineConvertions/objectLinesToArray";
|
|
import { Html } from "@react-three/drei";
|
|
|
|
|
|
const DistanceText = () => {
|
|
const [lines, setLines] = useState([]);
|
|
const { activeLayer } = useActiveLayer();
|
|
const { toggleView } = useToggleView();
|
|
const { newLines, setNewLines } = useNewLines();
|
|
const { deletedLines, setDeletedLines } = useDeletedLines();
|
|
|
|
useEffect(() => {
|
|
const email = localStorage.getItem('email')
|
|
const organization = (email.split("@")[1]).split(".")[0];
|
|
|
|
getLines(organization).then((data) => {
|
|
data = objectLinesToArray(data);
|
|
|
|
const lines = data.filter(line => line[0][2] === activeLayer)
|
|
.map(line => {
|
|
const point1 = new THREE.Vector3(line[0][0].x, line[0][0].y, line[0][0].z);
|
|
const point2 = new THREE.Vector3(line[1][0].x, line[1][0].y, line[1][0].z);
|
|
const distance = point1.distanceTo(point2);
|
|
const midpoint = new THREE.Vector3().addVectors(point1, point2).divideScalar(2);
|
|
return {
|
|
distance: distance.toFixed(1),
|
|
position: midpoint,
|
|
userData: line,
|
|
layer: activeLayer,
|
|
};
|
|
});
|
|
setLines(lines)
|
|
})
|
|
}, [activeLayer])
|
|
|
|
useEffect(() => {
|
|
if (newLines.length > 0) {
|
|
if (newLines[0][0][2] !== activeLayer ) return;
|
|
const newLinesData = newLines.map((line) => {
|
|
const point1 = new THREE.Vector3(line[0][0].x, line[0][0].y, line[0][0].z);
|
|
const point2 = new THREE.Vector3(line[1][0].x, line[1][0].y, line[1][0].z);
|
|
const distance = point1.distanceTo(point2);
|
|
const midpoint = new THREE.Vector3().addVectors(point1, point2).divideScalar(2);
|
|
|
|
return {
|
|
distance: distance.toFixed(1),
|
|
position: midpoint,
|
|
userData: line,
|
|
layer: activeLayer,
|
|
};
|
|
});
|
|
setLines((prevLines) => [...prevLines, ...newLinesData]);
|
|
setNewLines([]);
|
|
}
|
|
}, [newLines, activeLayer]);
|
|
|
|
|
|
useEffect(() => {
|
|
if (deletedLines.length > 0) {
|
|
setLines((prevLines) =>
|
|
prevLines.filter(
|
|
(line) => !deletedLines.some((deletedLine) => deletedLine[0][1] === line.userData[0][1] && deletedLine[1][1] === line.userData[1][1])
|
|
)
|
|
);
|
|
setDeletedLines([]);
|
|
}
|
|
}, [deletedLines]);
|
|
|
|
return (
|
|
<>
|
|
{toggleView && (
|
|
<group name='Distance_Text'>
|
|
{lines.map((text) => (
|
|
<Html key={`${text.userData[0][1]}_${text.userData[1][1]}`} transform sprite userData={text.userData} scale={5} position={[text.position.x, 1, text.position.z]} style={{ pointerEvents: 'none' }} >
|
|
<div key={`${text.userData[0][1]}_${text.userData[1][1]}`} className={`Distance line-${text.userData[0][1]}_${text.userData[1][1]}_${text.layer}`} >{text.distance} m</div>
|
|
</Html>
|
|
))}
|
|
</group>
|
|
)}
|
|
</>
|
|
)
|
|
|
|
}
|
|
|
|
export default DistanceText; |