Refactor wall creator and socket responses; update nav mesh components and remove unused pillar functions
- Updated import path for getClosestIntersection in wallCreator.tsx - Cleaned up socketResponses.dev.tsx by removing unused imports and code, simplifying the component structure - Modified navMesh.tsx to remove lines prop and adjust NavMeshDetails accordingly - Refactored navMeshDetails.tsx to remove lines dependency in useEffect - Updated polygonGenerator.tsx to remove lines prop and commented out unused code - Added getClosestIntersection helper function for better modularity - Removed unused pillar-related functions and commented out code in addAndUpdateReferencePillar.ts, addPillar.ts, deletableHoveredPillar.ts, deletePillar.ts, and updateReferencePolesheight.ts
This commit is contained in:
@@ -1,291 +1,291 @@
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
useObjectPosition,
|
||||
useObjectRotation,
|
||||
useSelectedWallItem,
|
||||
useSocketStore,
|
||||
useWallItems,
|
||||
useSelectedItem,
|
||||
useToolMode,
|
||||
} from "../../../store/builder/store";
|
||||
import { Csg } from "../csg/csg";
|
||||
import * as Types from "../../../types/world/worldTypes";
|
||||
import * as CONSTANTS from "../../../types/world/worldConstants";
|
||||
import * as THREE from "three";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
import handleMeshMissed from "../eventFunctions/handleMeshMissed";
|
||||
import DeleteWallItems from "../geomentries/walls/deleteWallItems";
|
||||
import loadInitialWallItems from "../IntialLoad/loadInitialWallItems";
|
||||
import AddWallItems from "../geomentries/walls/addWallItems";
|
||||
import useModuleStore from "../../../store/useModuleStore";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { getUserData } from "../../../functions/getUserData";
|
||||
import { useVersionContext } from "../version/versionContext";
|
||||
// import { useEffect } from "react";
|
||||
// import {
|
||||
// useObjectPosition,
|
||||
// useObjectRotation,
|
||||
// useSelectedWallItem,
|
||||
// useSocketStore,
|
||||
// useWallItems,
|
||||
// useSelectedItem,
|
||||
// useToolMode,
|
||||
// } from "../../../store/builder/store";
|
||||
// import { Csg } from "../csg/csg";
|
||||
// import * as Types from "../../../types/world/worldTypes";
|
||||
// import * as CONSTANTS from "../../../types/world/worldConstants";
|
||||
// import * as THREE from "three";
|
||||
// import { useThree } from "@react-three/fiber";
|
||||
// import handleMeshMissed from "../eventFunctions/handleMeshMissed";
|
||||
// import DeleteWallItems from "../geomentries/walls/deleteWallItems";
|
||||
// import loadInitialWallItems from "../IntialLoad/loadInitialWallItems";
|
||||
// import AddWallItems from "../geomentries/walls/addWallItems";
|
||||
// import useModuleStore from "../../../store/useModuleStore";
|
||||
// import { useParams } from "react-router-dom";
|
||||
// import { getUserData } from "../../../functions/getUserData";
|
||||
// import { useVersionContext } from "../version/versionContext";
|
||||
|
||||
const WallItemsGroup = ({
|
||||
currentWallItem,
|
||||
hoveredDeletableWallItem,
|
||||
selectedItemsIndex,
|
||||
setSelectedItemsIndex,
|
||||
CSGGroup,
|
||||
}: any) => {
|
||||
const state = useThree();
|
||||
const { socket } = useSocketStore();
|
||||
const { pointer, camera, raycaster } = state;
|
||||
const { toolMode } = useToolMode();
|
||||
const { wallItems, setWallItems } = useWallItems();
|
||||
const { setObjectPosition } = useObjectPosition();
|
||||
const { setObjectRotation } = useObjectRotation();
|
||||
const { setSelectedWallItem } = useSelectedWallItem();
|
||||
const { activeModule } = useModuleStore();
|
||||
const { selectedItem } = useSelectedItem();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
const { selectedVersion } = selectedVersionStore();
|
||||
const { projectId } = useParams();
|
||||
const { userId, organization } = getUserData();
|
||||
// const WallItemsGroup = ({
|
||||
// currentWallItem,
|
||||
// hoveredDeletableWallItem,
|
||||
// selectedItemsIndex,
|
||||
// setSelectedItemsIndex,
|
||||
// CSGGroup,
|
||||
// }: any) => {
|
||||
// const state = useThree();
|
||||
// const { socket } = useSocketStore();
|
||||
// const { pointer, camera, raycaster } = state;
|
||||
// const { toolMode } = useToolMode();
|
||||
// const { wallItems, setWallItems } = useWallItems();
|
||||
// const { setObjectPosition } = useObjectPosition();
|
||||
// const { setObjectRotation } = useObjectRotation();
|
||||
// const { setSelectedWallItem } = useSelectedWallItem();
|
||||
// const { activeModule } = useModuleStore();
|
||||
// const { selectedItem } = useSelectedItem();
|
||||
// const { selectedVersionStore } = useVersionContext();
|
||||
// const { selectedVersion } = selectedVersionStore();
|
||||
// const { projectId } = useParams();
|
||||
// const { userId, organization } = getUserData();
|
||||
|
||||
useEffect(() => {
|
||||
// Load Wall Items from the backend
|
||||
if (!projectId || !selectedVersion) return;
|
||||
loadInitialWallItems(setWallItems, projectId, selectedVersion?.versionId);
|
||||
}, [selectedVersion?.versionId]);
|
||||
// useEffect(() => {
|
||||
// // Load Wall Items from the backend
|
||||
// if (!projectId || !selectedVersion) return;
|
||||
// loadInitialWallItems(setWallItems, projectId, selectedVersion?.versionId);
|
||||
// }, [selectedVersion?.versionId]);
|
||||
|
||||
////////// Update the Position value changes in the selected item //////////
|
||||
// ////////// Update the Position value changes in the selected item //////////
|
||||
|
||||
useEffect(() => {
|
||||
const canvasElement = state.gl.domElement;
|
||||
function handlePointerMove(e: any) {
|
||||
if (selectedItemsIndex !== null && toolMode === 'cursor' && e.buttons === 1) {
|
||||
const Raycaster = state.raycaster;
|
||||
const intersects = Raycaster.intersectObjects(CSGGroup.current?.children[0].children!, true);
|
||||
const Object = intersects.find((child) => child.object.name.includes("WallRaycastReference"));
|
||||
// useEffect(() => {
|
||||
// const canvasElement = state.gl.domElement;
|
||||
// function handlePointerMove(e: any) {
|
||||
// if (selectedItemsIndex !== null && toolMode === 'cursor' && e.buttons === 1) {
|
||||
// const Raycaster = state.raycaster;
|
||||
// const intersects = Raycaster.intersectObjects(CSGGroup.current?.children[0].children!, true);
|
||||
// const Object = intersects.find((child) => child.object.name.includes("WallRaycastReference"));
|
||||
|
||||
if (Object) {
|
||||
(state.controls as any)!.enabled = false;
|
||||
setWallItems((prevItems: any) => {
|
||||
const updatedItems = [...prevItems];
|
||||
let position: [number, number, number] = [0, 0, 0];
|
||||
// if (Object) {
|
||||
// (state.controls as any)!.enabled = false;
|
||||
// setWallItems((prevItems: any) => {
|
||||
// const updatedItems = [...prevItems];
|
||||
// let position: [number, number, number] = [0, 0, 0];
|
||||
|
||||
if (updatedItems[selectedItemsIndex].type === "fixed-move") {
|
||||
position = [
|
||||
Object!.point.x,
|
||||
Math.floor(Object!.point.y / CONSTANTS.wallConfig.height) *
|
||||
CONSTANTS.wallConfig.height,
|
||||
Object!.point.z,
|
||||
];
|
||||
} else if (updatedItems[selectedItemsIndex].type === "free-move") {
|
||||
position = [Object!.point.x, Object!.point.y, Object!.point.z];
|
||||
}
|
||||
// if (updatedItems[selectedItemsIndex].type === "fixed-move") {
|
||||
// position = [
|
||||
// Object!.point.x,
|
||||
// Math.floor(Object!.point.y / CONSTANTS.wallConfig.height) *
|
||||
// CONSTANTS.wallConfig.height,
|
||||
// Object!.point.z,
|
||||
// ];
|
||||
// } else if (updatedItems[selectedItemsIndex].type === "free-move") {
|
||||
// position = [Object!.point.x, Object!.point.y, Object!.point.z];
|
||||
// }
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
setObjectPosition(new THREE.Vector3(...position));
|
||||
setObjectRotation({
|
||||
x: THREE.MathUtils.radToDeg(Object!.object.rotation.x),
|
||||
y: THREE.MathUtils.radToDeg(Object!.object.rotation.y),
|
||||
z: THREE.MathUtils.radToDeg(Object!.object.rotation.z),
|
||||
});
|
||||
});
|
||||
// requestAnimationFrame(() => {
|
||||
// setObjectPosition(new THREE.Vector3(...position));
|
||||
// setObjectRotation({
|
||||
// x: THREE.MathUtils.radToDeg(Object!.object.rotation.x),
|
||||
// y: THREE.MathUtils.radToDeg(Object!.object.rotation.y),
|
||||
// z: THREE.MathUtils.radToDeg(Object!.object.rotation.z),
|
||||
// });
|
||||
// });
|
||||
|
||||
updatedItems[selectedItemsIndex] = {
|
||||
...updatedItems[selectedItemsIndex],
|
||||
position: position,
|
||||
quaternion: Object!.object.quaternion.clone() as Types.QuaternionType,
|
||||
};
|
||||
// updatedItems[selectedItemsIndex] = {
|
||||
// ...updatedItems[selectedItemsIndex],
|
||||
// position: position,
|
||||
// quaternion: Object!.object.quaternion.clone() as Types.QuaternionType,
|
||||
// };
|
||||
|
||||
return updatedItems;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
// return updatedItems;
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
async function handlePointerUp() {
|
||||
const Raycaster = state.raycaster;
|
||||
const intersects = Raycaster.intersectObjects(
|
||||
CSGGroup.current?.children[0].children!,
|
||||
true
|
||||
);
|
||||
const Object = intersects.find((child) =>
|
||||
child.object.name.includes("WallRaycastReference")
|
||||
);
|
||||
if (Object) {
|
||||
if (selectedItemsIndex !== null) {
|
||||
let currentItem: any = null;
|
||||
setWallItems((prevItems: any) => {
|
||||
const updatedItems = [...prevItems];
|
||||
const WallItemsForStorage = updatedItems.map((item) => {
|
||||
const { model, ...rest } = item;
|
||||
return {
|
||||
...rest,
|
||||
modelUuid: model?.uuid,
|
||||
};
|
||||
});
|
||||
// async function handlePointerUp() {
|
||||
// const Raycaster = state.raycaster;
|
||||
// const intersects = Raycaster.intersectObjects(
|
||||
// CSGGroup.current?.children[0].children!,
|
||||
// true
|
||||
// );
|
||||
// const Object = intersects.find((child) =>
|
||||
// child.object.name.includes("WallRaycastReference")
|
||||
// );
|
||||
// if (Object) {
|
||||
// if (selectedItemsIndex !== null) {
|
||||
// let currentItem: any = null;
|
||||
// setWallItems((prevItems: any) => {
|
||||
// const updatedItems = [...prevItems];
|
||||
// const WallItemsForStorage = updatedItems.map((item) => {
|
||||
// const { model, ...rest } = item;
|
||||
// return {
|
||||
// ...rest,
|
||||
// modelUuid: model?.uuid,
|
||||
// };
|
||||
// });
|
||||
|
||||
currentItem = updatedItems[selectedItemsIndex];
|
||||
localStorage.setItem("WallItems", JSON.stringify(WallItemsForStorage));
|
||||
return updatedItems;
|
||||
});
|
||||
// currentItem = updatedItems[selectedItemsIndex];
|
||||
// localStorage.setItem("WallItems", JSON.stringify(WallItemsForStorage));
|
||||
// return updatedItems;
|
||||
// });
|
||||
|
||||
setTimeout(async () => {
|
||||
// setTimeout(async () => {
|
||||
|
||||
//REST
|
||||
// //REST
|
||||
|
||||
// await setWallItem(
|
||||
// organization,
|
||||
// currentItem?.model?.uuid,
|
||||
// currentItem.modelName,
|
||||
// currentItem.assetId,
|
||||
// currentItem.type!,
|
||||
// currentItem.csgposition!,
|
||||
// currentItem.csgscale!,
|
||||
// currentItem.position,
|
||||
// currentItem.quaternion,
|
||||
// currentItem.scale!,
|
||||
// )
|
||||
// // await setWallItem(
|
||||
// // organization,
|
||||
// // currentItem?.model?.uuid,
|
||||
// // currentItem.modelName,
|
||||
// // currentItem.assetId,
|
||||
// // currentItem.type!,
|
||||
// // currentItem.csgposition!,
|
||||
// // currentItem.csgscale!,
|
||||
// // currentItem.position,
|
||||
// // currentItem.quaternion,
|
||||
// // currentItem.scale!,
|
||||
// // )
|
||||
|
||||
//SOCKET
|
||||
// //SOCKET
|
||||
|
||||
const data = {
|
||||
organization,
|
||||
modelUuid: currentItem.model?.uuid!,
|
||||
assetId: currentItem.assetId,
|
||||
modelName: currentItem.modelName!,
|
||||
type: currentItem.type!,
|
||||
csgposition: currentItem.csgposition!,
|
||||
csgscale: currentItem.csgscale!,
|
||||
position: currentItem.position!,
|
||||
quaternion: currentItem.quaternion,
|
||||
scale: currentItem.scale!,
|
||||
socketId: socket.id,
|
||||
versionId: selectedVersion?.versionId || '',
|
||||
projectId,
|
||||
userId
|
||||
};
|
||||
// const data = {
|
||||
// organization,
|
||||
// modelUuid: currentItem.model?.uuid!,
|
||||
// assetId: currentItem.assetId,
|
||||
// modelName: currentItem.modelName!,
|
||||
// type: currentItem.type!,
|
||||
// csgposition: currentItem.csgposition!,
|
||||
// csgscale: currentItem.csgscale!,
|
||||
// position: currentItem.position!,
|
||||
// quaternion: currentItem.quaternion,
|
||||
// scale: currentItem.scale!,
|
||||
// socketId: socket.id,
|
||||
// versionId: selectedVersion?.versionId || '',
|
||||
// projectId,
|
||||
// userId
|
||||
// };
|
||||
|
||||
// console.log('data: ', data);
|
||||
socket.emit("v1:wallItems:set", data);
|
||||
}, 0);
|
||||
(state.controls as any)!.enabled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
// // console.log('data: ', data);
|
||||
// socket.emit("v1:wallItems:set", data);
|
||||
// }, 0);
|
||||
// (state.controls as any)!.enabled = true;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
canvasElement.addEventListener("pointermove", handlePointerMove);
|
||||
canvasElement.addEventListener("pointerup", handlePointerUp);
|
||||
// canvasElement.addEventListener("pointermove", handlePointerMove);
|
||||
// canvasElement.addEventListener("pointerup", handlePointerUp);
|
||||
|
||||
return () => {
|
||||
canvasElement.removeEventListener("pointermove", handlePointerMove);
|
||||
canvasElement.removeEventListener("pointerup", handlePointerUp);
|
||||
};
|
||||
}, [selectedItemsIndex, selectedVersion?.versionId]);
|
||||
// return () => {
|
||||
// canvasElement.removeEventListener("pointermove", handlePointerMove);
|
||||
// canvasElement.removeEventListener("pointerup", handlePointerUp);
|
||||
// };
|
||||
// }, [selectedItemsIndex, selectedVersion?.versionId]);
|
||||
|
||||
useEffect(() => {
|
||||
const canvasElement = state.gl.domElement;
|
||||
let drag = false;
|
||||
let isLeftMouseDown = false;
|
||||
// useEffect(() => {
|
||||
// const canvasElement = state.gl.domElement;
|
||||
// let drag = false;
|
||||
// let isLeftMouseDown = false;
|
||||
|
||||
const onMouseDown = (evt: any) => {
|
||||
if (evt.button === 0) {
|
||||
isLeftMouseDown = true;
|
||||
drag = false;
|
||||
}
|
||||
};
|
||||
// const onMouseDown = (evt: any) => {
|
||||
// if (evt.button === 0) {
|
||||
// isLeftMouseDown = true;
|
||||
// drag = false;
|
||||
// }
|
||||
// };
|
||||
|
||||
const onMouseUp = (evt: any) => {
|
||||
if (evt.button === 0) {
|
||||
isLeftMouseDown = false;
|
||||
if (!drag && toolMode === '3D-Delete' && activeModule === "builder") {
|
||||
DeleteWallItems(
|
||||
hoveredDeletableWallItem,
|
||||
setWallItems,
|
||||
wallItems,
|
||||
socket,
|
||||
projectId,
|
||||
selectedVersion?.versionId || '',
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
// const onMouseUp = (evt: any) => {
|
||||
// if (evt.button === 0) {
|
||||
// isLeftMouseDown = false;
|
||||
// if (!drag && toolMode === '3D-Delete' && activeModule === "builder") {
|
||||
// DeleteWallItems(
|
||||
// hoveredDeletableWallItem,
|
||||
// setWallItems,
|
||||
// wallItems,
|
||||
// socket,
|
||||
// projectId,
|
||||
// selectedVersion?.versionId || '',
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
const onMouseMove = () => {
|
||||
if (isLeftMouseDown) {
|
||||
drag = true;
|
||||
}
|
||||
};
|
||||
// const onMouseMove = () => {
|
||||
// if (isLeftMouseDown) {
|
||||
// drag = true;
|
||||
// }
|
||||
// };
|
||||
|
||||
const onDrop = (event: any) => {
|
||||
if (selectedItem.category !== 'Fenestration') return;
|
||||
// const onDrop = (event: any) => {
|
||||
// if (selectedItem.category !== 'Fenestration') return;
|
||||
|
||||
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
||||
// pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
// pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
||||
|
||||
raycaster.setFromCamera(pointer, camera);
|
||||
// raycaster.setFromCamera(pointer, camera);
|
||||
|
||||
if (selectedItem.id && selectedVersion && projectId) {
|
||||
if (selectedItem.subCategory) {
|
||||
AddWallItems(
|
||||
selectedItem,
|
||||
raycaster,
|
||||
CSGGroup,
|
||||
setWallItems,
|
||||
socket,
|
||||
projectId,
|
||||
selectedVersion?.versionId || '',
|
||||
);
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
// if (selectedItem.id && selectedVersion && projectId) {
|
||||
// if (selectedItem.subCategory) {
|
||||
// AddWallItems(
|
||||
// selectedItem,
|
||||
// raycaster,
|
||||
// CSGGroup,
|
||||
// setWallItems,
|
||||
// socket,
|
||||
// projectId,
|
||||
// selectedVersion?.versionId || '',
|
||||
// );
|
||||
// }
|
||||
// event.preventDefault();
|
||||
// }
|
||||
// };
|
||||
|
||||
const onDragOver = (event: any) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
// const onDragOver = (event: any) => {
|
||||
// event.preventDefault();
|
||||
// };
|
||||
|
||||
canvasElement.addEventListener("mousedown", onMouseDown);
|
||||
canvasElement.addEventListener("mouseup", onMouseUp);
|
||||
canvasElement.addEventListener("mousemove", onMouseMove);
|
||||
canvasElement.addEventListener("drop", onDrop);
|
||||
canvasElement.addEventListener("dragover", onDragOver);
|
||||
// canvasElement.addEventListener("mousedown", onMouseDown);
|
||||
// canvasElement.addEventListener("mouseup", onMouseUp);
|
||||
// canvasElement.addEventListener("mousemove", onMouseMove);
|
||||
// canvasElement.addEventListener("drop", onDrop);
|
||||
// canvasElement.addEventListener("dragover", onDragOver);
|
||||
|
||||
return () => {
|
||||
canvasElement.removeEventListener("mousedown", onMouseDown);
|
||||
canvasElement.removeEventListener("mouseup", onMouseUp);
|
||||
canvasElement.removeEventListener("mousemove", onMouseMove);
|
||||
canvasElement.removeEventListener("drop", onDrop);
|
||||
canvasElement.removeEventListener("dragover", onDragOver);
|
||||
};
|
||||
}, [toolMode, wallItems, selectedItem, camera, selectedVersion?.versionId]);
|
||||
// return () => {
|
||||
// canvasElement.removeEventListener("mousedown", onMouseDown);
|
||||
// canvasElement.removeEventListener("mouseup", onMouseUp);
|
||||
// canvasElement.removeEventListener("mousemove", onMouseMove);
|
||||
// canvasElement.removeEventListener("drop", onDrop);
|
||||
// canvasElement.removeEventListener("dragover", onDragOver);
|
||||
// };
|
||||
// }, [toolMode, wallItems, selectedItem, camera, selectedVersion?.versionId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (toolMode && activeModule === "builder") {
|
||||
handleMeshMissed(
|
||||
currentWallItem,
|
||||
setSelectedWallItem,
|
||||
setSelectedItemsIndex
|
||||
);
|
||||
setSelectedWallItem(null);
|
||||
setSelectedItemsIndex(null);
|
||||
}
|
||||
}, [toolMode]);
|
||||
// useEffect(() => {
|
||||
// if (toolMode && activeModule === "builder") {
|
||||
// handleMeshMissed(
|
||||
// currentWallItem,
|
||||
// setSelectedWallItem,
|
||||
// setSelectedItemsIndex
|
||||
// );
|
||||
// setSelectedWallItem(null);
|
||||
// setSelectedItemsIndex(null);
|
||||
// }
|
||||
// }, [toolMode]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{wallItems.map((item: Types.WallItem, index: number) => (
|
||||
<group
|
||||
key={index}
|
||||
position={item.position}
|
||||
quaternion={item.quaternion}
|
||||
scale={item.scale}
|
||||
>
|
||||
<Csg
|
||||
position={item.csgposition!}
|
||||
scale={item.csgscale!}
|
||||
model={item.model!}
|
||||
hoveredDeletableWallItem={hoveredDeletableWallItem}
|
||||
/>
|
||||
</group>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
// return (
|
||||
// <>
|
||||
// {wallItems.map((item: Types.WallItem, index: number) => (
|
||||
// <group
|
||||
// key={index}
|
||||
// position={item.position}
|
||||
// quaternion={item.quaternion}
|
||||
// scale={item.scale}
|
||||
// >
|
||||
// <Csg
|
||||
// position={item.csgposition!}
|
||||
// scale={item.csgscale!}
|
||||
// model={item.model!}
|
||||
// hoveredDeletableWallItem={hoveredDeletableWallItem}
|
||||
// />
|
||||
// </group>
|
||||
// ))}
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
|
||||
export default WallItemsGroup;
|
||||
// export default WallItemsGroup;
|
||||
|
||||
Reference in New Issue
Block a user