Merge pull request 'simulation' (#4) from simulation into main
Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/4
This commit is contained in:
commit
6971fff571
|
|
@ -1,28 +1,29 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
|
||||
# remove zip
|
||||
*.zip
|
||||
**/temp/
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/package-lock.json
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
|
||||
# remove zip
|
||||
*.zip
|
||||
**/temp/
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,466 +1,509 @@
|
|||
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, useDeleteModels, 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 { deleteModels, setDeleteModels } = useDeleteModels();
|
||||
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,
|
||||
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);
|
||||
setDeleteModels(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 input = {
|
||||
userId: userId,
|
||||
organization: organization,
|
||||
zoneData: {
|
||||
zoneName: zone.zoneName,
|
||||
zoneId: zone.zoneId,
|
||||
points: zone.points,
|
||||
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 input = {
|
||||
userId: userId,
|
||||
organization: organization,
|
||||
zoneData: {
|
||||
zoneName: zone.zoneName,
|
||||
zoneId: zone.zoneId,
|
||||
points: zone.points,
|
||||
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.wallConfig.height;
|
||||
|
||||
const midpoint = new THREE.Vector3((point1.x + point2.x) / 2, (CONSTANTS.wallConfig.height / 2) + ((zone.layer - 1) * CONSTANTS.wallConfig.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>
|
||||
);
|
||||
};
|
||||
|
||||
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, useDeleteModels, 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 { deleteModels, setDeleteModels } = useDeleteModels();
|
||||
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,
|
||||
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);
|
||||
setDeleteModels(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], 75, 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], 75, 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.wallConfig.height;
|
||||
|
||||
const midpoint = new THREE.Vector3((point1.x + point2.x) / 2, (CONSTANTS.wallConfig.height / 2) + ((zone.layer - 1) * CONSTANTS.wallConfig.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;
|
||||
Loading…
Reference in New Issue