511 lines
20 KiB
TypeScript
511 lines
20 KiB
TypeScript
import React, { useState, useEffect, useMemo, useRef } from "react";
|
|
import { Line, Sphere } from "@react-three/drei";
|
|
import { useThree, useFrame } from "@react-three/fiber";
|
|
import * as THREE from "three";
|
|
import { useActiveLayer, useDeleteTool, useDeletePointOrLine, useMovePoint, useSocketStore, useToggleView, useToolMode, useRemovedLayer, useZones, useZonePoints } from "../../../store/store";
|
|
// import { setZonesApi } from "../../../services/factoryBuilder/zones/setZonesApi";
|
|
// import { deleteZonesApi } from "../../../services/factoryBuilder/zones/deleteZoneApi";
|
|
import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";
|
|
|
|
import * as CONSTANTS from '../../../types/world/worldConstants';
|
|
|
|
const ZoneGroup: React.FC = () => {
|
|
const { camera, pointer, gl, raycaster, scene, controls } = useThree();
|
|
const [startPoint, setStartPoint] = useState<THREE.Vector3 | null>(null);
|
|
const [endPoint, setEndPoint] = useState<THREE.Vector3 | null>(null);
|
|
const { zones, setZones } = useZones();
|
|
const { zonePoints, setZonePoints } = useZonePoints();
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const [draggedSphere, setDraggedSphere] = useState<THREE.Vector3 | null>(null);
|
|
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
|
|
const { toggleView } = useToggleView();
|
|
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
|
|
const { removedLayer, setRemovedLayer } = useRemovedLayer();
|
|
const { toolMode, setToolMode } = useToolMode();
|
|
const { movePoint, setMovePoint } = useMovePoint();
|
|
const { deleteTool, setDeleteTool } = useDeleteTool();
|
|
const { activeLayer, setActiveLayer } = useActiveLayer();
|
|
const { socket } = useSocketStore();
|
|
|
|
const groupsRef = useRef<any>();
|
|
|
|
const zoneMaterial = useMemo(() => new THREE.ShaderMaterial({
|
|
side: THREE.DoubleSide,
|
|
vertexShader: `
|
|
varying vec2 vUv;
|
|
void main(){
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
vUv = uv;
|
|
}
|
|
`,
|
|
fragmentShader: `
|
|
varying vec2 vUv;
|
|
uniform vec3 uColor;
|
|
void main(){
|
|
float alpha = 1.0 - vUv.y;
|
|
gl_FragColor = vec4(uColor, alpha);
|
|
}
|
|
`,
|
|
uniforms: {
|
|
uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) },
|
|
},
|
|
transparent: true,
|
|
}), []);
|
|
|
|
useEffect(() => {
|
|
const fetchZones = async () => {
|
|
const email = localStorage.getItem('email');
|
|
if (!email) return;
|
|
|
|
const organization = email.split("@")[1].split(".")[0];
|
|
const data = await getZonesApi(organization);
|
|
|
|
if (data.data && data.data.length > 0) {
|
|
const fetchedZones = data.data.map((zone: any) => ({
|
|
zoneId: zone.zoneId,
|
|
zoneName: zone.zoneName,
|
|
points: zone.points,
|
|
viewPortCenter: zone.viewPortCenter,
|
|
viewPortposition: zone.viewPortposition,
|
|
layer: zone.layer
|
|
}));
|
|
|
|
setZones(fetchedZones);
|
|
|
|
const fetchedPoints = data.data.flatMap((zone: any) =>
|
|
zone.points.slice(0, 4).map((point: [number, number, number]) => new THREE.Vector3(...point))
|
|
);
|
|
|
|
setZonePoints(fetchedPoints);
|
|
}
|
|
};
|
|
|
|
fetchZones();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
|
|
localStorage.setItem('zones', JSON.stringify(zones));
|
|
|
|
}, [zones])
|
|
|
|
useEffect(() => {
|
|
if (removedLayer) {
|
|
const updatedZones = zones.filter((zone: any) => zone.layer !== removedLayer);
|
|
setZones(updatedZones);
|
|
|
|
const updatedzonePoints = zonePoints.filter((_: any, index: any) => {
|
|
const zoneIndex = Math.floor(index / 4);
|
|
return zones[zoneIndex]?.layer !== removedLayer;
|
|
});
|
|
setZonePoints(updatedzonePoints);
|
|
|
|
zones.filter((zone: any) => zone.layer === removedLayer).forEach((zone: any) => {
|
|
deleteZoneFromBackend(zone.zoneId);
|
|
});
|
|
|
|
setRemovedLayer(null);
|
|
}
|
|
}, [removedLayer]);
|
|
|
|
useEffect(() => {
|
|
if (toolMode !== "Zone") {
|
|
setStartPoint(null);
|
|
setEndPoint(null);
|
|
} else {
|
|
setDeletePointOrLine(false);
|
|
setMovePoint(false);
|
|
setDeleteTool(false);
|
|
}
|
|
if (!toggleView) {
|
|
setStartPoint(null);
|
|
setEndPoint(null);
|
|
}
|
|
}, [toolMode, toggleView]);
|
|
|
|
|
|
const addZoneToBackend = async (zone: { zoneId: string; zoneName: string; points: [number, number, number][]; layer: string }) => {
|
|
|
|
const email = localStorage.getItem('email');
|
|
const userId = localStorage.getItem('userId');
|
|
const organization = (email!.split("@")[1]).split(".")[0];
|
|
|
|
const calculateCenter = (points: number[][]) => {
|
|
if (!points || points.length === 0) return null;
|
|
|
|
let sumX = 0, sumY = 0, sumZ = 0;
|
|
const numPoints = points.length;
|
|
|
|
points.forEach(([x, y, z]) => {
|
|
sumX += x;
|
|
sumY += y;
|
|
sumZ += z;
|
|
});
|
|
|
|
return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number];
|
|
};
|
|
|
|
const target: [number, number, number] | null = calculateCenter(zone.points);
|
|
if (!target) return;
|
|
const position = [target[0], 10, target[2]];
|
|
|
|
const input = {
|
|
userId: userId,
|
|
organization: organization,
|
|
zoneData: {
|
|
zoneName: zone.zoneName,
|
|
zoneId: zone.zoneId,
|
|
points: zone.points,
|
|
viewPortCenter: target,
|
|
viewPortposition: position,
|
|
layer: zone.layer
|
|
}
|
|
}
|
|
|
|
socket.emit('v2:zone:set', input);
|
|
};
|
|
|
|
const updateZoneToBackend = async (zone: { zoneId: string; zoneName: string; points: [number, number, number][]; layer: string }) => {
|
|
|
|
const email = localStorage.getItem('email');
|
|
const userId = localStorage.getItem('userId');
|
|
const organization = (email!.split("@")[1]).split(".")[0];
|
|
|
|
const calculateCenter = (points: number[][]) => {
|
|
if (!points || points.length === 0) return null;
|
|
|
|
let sumX = 0, sumY = 0, sumZ = 0;
|
|
const numPoints = points.length;
|
|
|
|
points.forEach(([x, y, z]) => {
|
|
sumX += x;
|
|
sumY += y;
|
|
sumZ += z;
|
|
});
|
|
|
|
return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number];
|
|
};
|
|
|
|
const target: [number, number, number] | null = calculateCenter(zone.points);
|
|
if (!target) return;
|
|
const position = [target[0], 10, target[2]];
|
|
|
|
const input = {
|
|
userId: userId,
|
|
organization: organization,
|
|
zoneData: {
|
|
zoneName: zone.zoneName,
|
|
zoneId: zone.zoneId,
|
|
points: zone.points,
|
|
viewPortCenter: target,
|
|
viewPortposition: position,
|
|
layer: zone.layer
|
|
}
|
|
}
|
|
|
|
socket.emit('v2:zone:set', input);
|
|
};
|
|
|
|
|
|
const deleteZoneFromBackend = async (zoneId: string) => {
|
|
|
|
const email = localStorage.getItem('email');
|
|
const userId = localStorage.getItem('userId');
|
|
const organization = (email!.split("@")[1]).split(".")[0];
|
|
|
|
const input = {
|
|
userId: userId,
|
|
organization: organization,
|
|
zoneId: zoneId
|
|
}
|
|
|
|
socket.emit('v2:zone:delete', input);
|
|
};
|
|
|
|
const handleDeleteZone = (zoneId: string) => {
|
|
const updatedZones = zones.filter((zone: any) => zone.zoneId !== zoneId);
|
|
setZones(updatedZones);
|
|
|
|
const zoneIndex = zones.findIndex((zone: any) => zone.zoneId === zoneId);
|
|
if (zoneIndex !== -1) {
|
|
const zonePointsToRemove = zonePoints.slice(zoneIndex * 4, zoneIndex * 4 + 4);
|
|
zonePointsToRemove.forEach((point: any) => groupsRef.current.remove(point));
|
|
const updatedzonePoints = zonePoints.filter((_: any, index: any) => index < zoneIndex * 4 || index >= zoneIndex * 4 + 4);
|
|
setZonePoints(updatedzonePoints);
|
|
}
|
|
|
|
deleteZoneFromBackend(zoneId);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!camera || !toggleView) return;
|
|
const canvasElement = gl.domElement;
|
|
|
|
let drag = false;
|
|
let isLeftMouseDown = false;
|
|
|
|
const onMouseDown = (evt: any) => {
|
|
if (evt.button === 0) {
|
|
isLeftMouseDown = true;
|
|
drag = false;
|
|
|
|
raycaster.setFromCamera(pointer, camera);
|
|
const intersects = raycaster.intersectObjects(groupsRef.current.children, true);
|
|
|
|
if (intersects.length > 0 && movePoint) {
|
|
const clickedObject = intersects[0].object;
|
|
const sphereIndex = zonePoints.findIndex((point: any) => point.equals(clickedObject.position));
|
|
if (sphereIndex !== -1) {
|
|
(controls as any).enabled = false;
|
|
setDraggedSphere(zonePoints[sphereIndex]);
|
|
setIsDragging(true);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const onMouseUp = (evt: any) => {
|
|
if (evt.button === 0 && !drag && !isDragging && !deletePointOrLine) {
|
|
isLeftMouseDown = false;
|
|
|
|
if (!startPoint && !movePoint) {
|
|
raycaster.setFromCamera(pointer, camera);
|
|
const intersectionPoint = new THREE.Vector3();
|
|
const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
|
|
if (point) {
|
|
setStartPoint(point);
|
|
setEndPoint(null);
|
|
}
|
|
} else if (startPoint && !movePoint) {
|
|
raycaster.setFromCamera(pointer, camera);
|
|
const intersectionPoint = new THREE.Vector3();
|
|
const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
|
|
if (!point) return;
|
|
|
|
const points = [
|
|
[startPoint.x, 0.15, startPoint.z],
|
|
[point.x, 0.15, startPoint.z],
|
|
[point.x, 0.15, point.z],
|
|
[startPoint.x, 0.15, point.z],
|
|
[startPoint.x, 0.15, startPoint.z],
|
|
] as [number, number, number][];
|
|
|
|
const zoneName = `Zone ${zones.length + 1}`;
|
|
const zoneId = THREE.MathUtils.generateUUID();
|
|
const newZone = {
|
|
zoneId,
|
|
zoneName,
|
|
points: points,
|
|
layer: activeLayer
|
|
};
|
|
|
|
const newZones = [...zones, newZone];
|
|
|
|
setZones(newZones);
|
|
|
|
const newzonePoints = [
|
|
new THREE.Vector3(startPoint.x, 0.15, startPoint.z),
|
|
new THREE.Vector3(point.x, 0.15, startPoint.z),
|
|
new THREE.Vector3(point.x, 0.15, point.z),
|
|
new THREE.Vector3(startPoint.x, 0.15, point.z),
|
|
];
|
|
|
|
const updatedZonePoints = [...zonePoints, ...newzonePoints];
|
|
setZonePoints(updatedZonePoints);
|
|
|
|
addZoneToBackend(newZone);
|
|
|
|
setStartPoint(null);
|
|
setEndPoint(null);
|
|
}
|
|
} else if (evt.button === 0 && !drag && !isDragging && deletePointOrLine) {
|
|
raycaster.setFromCamera(pointer, camera);
|
|
const intersects = raycaster.intersectObjects(groupsRef.current.children, true);
|
|
|
|
if (intersects.length > 0) {
|
|
const clickedObject = intersects[0].object;
|
|
|
|
const sphereIndex = zonePoints.findIndex((point: any) => point.equals(clickedObject.position));
|
|
if (sphereIndex !== -1) {
|
|
const zoneIndex = Math.floor(sphereIndex / 4);
|
|
const zoneId = zones[zoneIndex].zoneId;
|
|
handleDeleteZone(zoneId);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (evt.button === 0) {
|
|
if (isDragging && draggedSphere) {
|
|
setIsDragging(false);
|
|
setDraggedSphere(null);
|
|
|
|
const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere);
|
|
if (sphereIndex !== -1) {
|
|
const zoneIndex = Math.floor(sphereIndex / 4);
|
|
|
|
if (zoneIndex !== -1 && zones[zoneIndex]) {
|
|
updateZoneToBackend(zones[zoneIndex]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const onMouseMove = () => {
|
|
if (isLeftMouseDown) {
|
|
drag = true;
|
|
}
|
|
raycaster.setFromCamera(pointer, camera);
|
|
const intersects = raycaster.intersectObjects(groupsRef.current.children, true);
|
|
|
|
if (intersects.length > 0 && intersects[0].object.name.includes('point')) {
|
|
gl.domElement.style.cursor = movePoint ? "pointer" : "default";
|
|
} else {
|
|
gl.domElement.style.cursor = "default";
|
|
}
|
|
if (isDragging && draggedSphere) {
|
|
raycaster.setFromCamera(pointer, camera);
|
|
const intersectionPoint = new THREE.Vector3();
|
|
const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
|
|
if (point) {
|
|
draggedSphere.set(point.x, 0.15, point.z);
|
|
|
|
const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere);
|
|
if (sphereIndex !== -1) {
|
|
const zoneIndex = Math.floor(sphereIndex / 4);
|
|
const cornerIndex = sphereIndex % 4;
|
|
|
|
const updatedZones = zones.map((zone: any, index: number) => {
|
|
if (index === zoneIndex) {
|
|
const updatedPoints = [...zone.points];
|
|
updatedPoints[cornerIndex] = [point.x, 0.15, point.z];
|
|
updatedPoints[4] = updatedPoints[0];
|
|
return { ...zone, points: updatedPoints };
|
|
}
|
|
return zone;
|
|
});
|
|
|
|
setZones(updatedZones);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const onContext = (event: any) => {
|
|
event.preventDefault();
|
|
setStartPoint(null);
|
|
setEndPoint(null);
|
|
};
|
|
|
|
if (toolMode === 'Zone' || deletePointOrLine || movePoint) {
|
|
canvasElement.addEventListener("mousedown", onMouseDown);
|
|
canvasElement.addEventListener("mouseup", onMouseUp);
|
|
canvasElement.addEventListener("mousemove", onMouseMove);
|
|
canvasElement.addEventListener("contextmenu", onContext);
|
|
}
|
|
return () => {
|
|
canvasElement.removeEventListener("mousedown", onMouseDown);
|
|
canvasElement.removeEventListener("mouseup", onMouseUp);
|
|
canvasElement.removeEventListener("mousemove", onMouseMove);
|
|
canvasElement.removeEventListener("contextmenu", onContext);
|
|
};
|
|
}, [gl, camera, startPoint, toggleView, scene, toolMode, zones, isDragging, deletePointOrLine, zonePoints, draggedSphere, movePoint, activeLayer]);
|
|
|
|
useFrame(() => {
|
|
if (!startPoint) return;
|
|
raycaster.setFromCamera(pointer, camera);
|
|
const intersectionPoint = new THREE.Vector3();
|
|
const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
|
|
if (point) {
|
|
setEndPoint(point);
|
|
}
|
|
});
|
|
return (
|
|
<group ref={groupsRef} name='zoneGroup' >
|
|
<group name="zones" visible={!toggleView}>
|
|
{zones
|
|
.map((zone: any) => (
|
|
<group key={zone.zoneId} name={zone.zoneName}>
|
|
{zone.points.slice(0, -1).map((point: [number, number, number], index: number) => {
|
|
const nextPoint = zone.points[index + 1];
|
|
|
|
const point1 = new THREE.Vector3(point[0], point[1], point[2]);
|
|
const point2 = new THREE.Vector3(nextPoint[0], nextPoint[1], nextPoint[2]);
|
|
|
|
const planeWidth = point1.distanceTo(point2);
|
|
const planeHeight = CONSTANTS.zoneConfig.height;
|
|
|
|
const midpoint = new THREE.Vector3((point1.x + point2.x) / 2, (CONSTANTS.zoneConfig.height / 2) + ((zone.layer - 1) * CONSTANTS.zoneConfig.height), (point1.z + point2.z) / 2);
|
|
|
|
const angle = Math.atan2(point2.z - point1.z, point2.x - point1.x);
|
|
|
|
return (
|
|
<mesh
|
|
key={index}
|
|
position={midpoint}
|
|
rotation={[0, -angle, 0]}
|
|
>
|
|
<planeGeometry args={[planeWidth, planeHeight]} />
|
|
<primitive
|
|
object={zoneMaterial.clone()}
|
|
attach="material"
|
|
/>
|
|
</mesh>
|
|
);
|
|
})}
|
|
</group>
|
|
))}
|
|
</group>
|
|
<group name='zoneLines' visible={toggleView}>
|
|
{zones
|
|
.filter((zone: any) => zone.layer === activeLayer)
|
|
.map((zone: any) => (
|
|
<Line
|
|
key={zone.zoneId}
|
|
points={zone.points}
|
|
color="#007BFF"
|
|
lineWidth={3}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (deletePointOrLine) {
|
|
handleDeleteZone(zone.zoneId);
|
|
}
|
|
}}
|
|
/>
|
|
))}
|
|
</group>
|
|
<group name="zonePoints" visible={toggleView}>
|
|
{zones.filter((zone: any) => zone.layer === activeLayer).flatMap((zone: any) => (
|
|
zone.points.slice(0, 4).map((point: any, pointIndex: number) => (
|
|
<Sphere
|
|
key={`${zone.zoneId}-point-${pointIndex}`}
|
|
position={new THREE.Vector3(...point)}
|
|
args={[0.3, 16, 16]}
|
|
name={`point-${zone.zoneId}-${pointIndex}`}
|
|
>
|
|
<meshBasicMaterial color="red" />
|
|
</Sphere>
|
|
))
|
|
))}
|
|
</group>
|
|
<group name="tempGroup" visible={toggleView}>
|
|
{startPoint && endPoint && (
|
|
<Line
|
|
points={[
|
|
[startPoint.x, 0.15, startPoint.z],
|
|
[endPoint.x, 0.15, startPoint.z],
|
|
[endPoint.x, 0.15, endPoint.z],
|
|
[startPoint.x, 0.15, endPoint.z],
|
|
[startPoint.x, 0.15, startPoint.z],
|
|
]}
|
|
color="#C164FF"
|
|
lineWidth={3}
|
|
/>
|
|
)}
|
|
</group>
|
|
</group>
|
|
);
|
|
};
|
|
|
|
export default ZoneGroup; |