feat: Implement wall creation and management features

- Added WallGroup component to manage wall creation and instances.
- Introduced WallCreator for handling wall creation logic, including mouse events and snapping.
- Created ReferenceWall component to visualize temporary wall during creation.
- Implemented WallInstances to render existing walls in the scene.
- Added useWallStore for state management of walls, including adding, updating, and removing walls.
- Enhanced Point and Line components to support wall-related functionalities.
- Updated builder store to include wall properties such as thickness and height.
- Refactored point snapping logic to accommodate wall snapping.
- Removed unused ReferencePoint component and adjusted imports accordingly.
- Updated world constants to include new wall-related configurations.
This commit is contained in:
2025-06-04 10:23:22 +05:30
parent 49ac226078
commit 20b6f84b38
21 changed files with 903 additions and 355 deletions

View File

@@ -22,35 +22,67 @@ function Point({ point }: { readonly point: Point }) {
const { deletePointOrLine } = useDeletePointOrLine();
const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
const defaultInnerColor = Constants.pointConfig.defaultInnerColor;
const defaultOuterColor = Constants.pointConfig.aisleOuterColor;
const defaultDeleteColor = Constants.pointConfig.deleteColor;
const colors = getColor(point);
function getColor(point: Point) {
if (point.pointType === 'Aisle') {
return {
defaultInnerColor: Constants.pointConfig.defaultInnerColor,
defaultOuterColor: Constants.pointConfig.aisleOuterColor,
defaultDeleteColor: Constants.pointConfig.deleteColor,
}
} else if (point.pointType === 'Floor') {
return {
defaultInnerColor: Constants.pointConfig.defaultInnerColor,
defaultOuterColor: Constants.pointConfig.floorOuterColor,
defaultDeleteColor: Constants.pointConfig.deleteColor,
}
} else if (point.pointType === 'Wall') {
return {
defaultInnerColor: Constants.pointConfig.defaultInnerColor,
defaultOuterColor: Constants.pointConfig.wallOuterColor,
defaultDeleteColor: Constants.pointConfig.deleteColor,
}
} else if (point.pointType === 'Zone') {
return {
defaultInnerColor: Constants.pointConfig.defaultInnerColor,
defaultOuterColor: Constants.pointConfig.zoneOuterColor,
defaultDeleteColor: Constants.pointConfig.deleteColor,
}
} else {
return {
defaultInnerColor: Constants.pointConfig.defaultInnerColor,
defaultOuterColor: Constants.pointConfig.defaultOuterColor,
defaultDeleteColor: Constants.pointConfig.deleteColor,
}
}
}
useEffect(() => {
if (materialRef.current && (toolMode === 'move' || deletePointOrLine)) {
let innerColor;
let outerColor;
if (isHovered) {
innerColor = deletePointOrLine ? defaultDeleteColor : defaultOuterColor;
outerColor = deletePointOrLine ? defaultDeleteColor : defaultOuterColor;
innerColor = deletePointOrLine ? colors.defaultDeleteColor : colors.defaultOuterColor;
outerColor = deletePointOrLine ? colors.defaultDeleteColor : colors.defaultOuterColor;
} else {
innerColor = defaultInnerColor;
outerColor = defaultOuterColor;
innerColor = colors.defaultInnerColor;
outerColor = colors.defaultOuterColor;
}
materialRef.current.uniforms.uInnerColor.value.set(innerColor);
materialRef.current.uniforms.uOuterColor.value.set(outerColor);
materialRef.current.uniformsNeedUpdate = true;
} else if (materialRef.current && toolMode !== 'move') {
materialRef.current.uniforms.uInnerColor.value.set(defaultInnerColor);
materialRef.current.uniforms.uOuterColor.value.set(defaultOuterColor);
materialRef.current.uniforms.uInnerColor.value.set(colors.defaultInnerColor);
materialRef.current.uniforms.uOuterColor.value.set(colors.defaultOuterColor);
materialRef.current.uniformsNeedUpdate = true;
}
}, [isHovered, defaultInnerColor, defaultOuterColor, toolMode, deletePointOrLine, defaultDeleteColor]);
}, [isHovered, colors.defaultInnerColor, colors.defaultOuterColor, colors.defaultDeleteColor, toolMode, deletePointOrLine]);
const uniforms = useMemo(() => ({
uOuterColor: { value: new THREE.Color(defaultOuterColor) },
uInnerColor: { value: new THREE.Color(defaultInnerColor) },
}), [defaultInnerColor, defaultInnerColor]);
uOuterColor: { value: new THREE.Color(colors.defaultOuterColor) },
uInnerColor: { value: new THREE.Color(colors.defaultInnerColor) },
}), [colors.defaultInnerColor, colors.defaultOuterColor]);
const handleDrag = (point: Point) => {
if (toolMode === 'move' && isHovered) {
@@ -76,10 +108,11 @@ function Point({ point }: { readonly point: Point }) {
const handlePointClick = (point: Point) => {
if (deletePointOrLine) {
const removedAisles = removePoint(point.pointUuid);
if (removedAisles.length > 0) {
setHoveredPoint(null);
console.log(removedAisles);
if (point.pointType === 'Aisle') {
const removedAisles = removePoint(point.pointUuid);
if (removedAisles.length > 0) {
setHoveredPoint(null);
}
}
}
}