103 lines
4.2 KiB
TypeScript
103 lines
4.2 KiB
TypeScript
import { useThree } from '@react-three/fiber';
|
|
import { useEffect } from 'react'
|
|
import useModuleStore from '../../../store/useModuleStore';
|
|
import { useSelectedItem, useSocketStore, useToggleView } from '../../../store/builder/store';
|
|
import { MathUtils, Vector3 } from 'three';
|
|
import { useSceneContext } from '../../scene/sceneContext';
|
|
import { useParams } from 'react-router-dom';
|
|
import { useVersionContext } from '../version/versionContext';
|
|
import { getUserData } from '../../../functions/getUserData';
|
|
import closestPointOnLineSegment from '../line/helpers/getClosestPointOnLineSegment';
|
|
|
|
// import { upsertWallAssetApi } from '../../../services/factoryBuilder/asset/wallAsset/upsertWallAssetApi';
|
|
|
|
function WallAssetCreator() {
|
|
const { socket } = useSocketStore();
|
|
const { pointer, camera, raycaster, scene, gl } = useThree();
|
|
const { toggleView } = useToggleView();
|
|
const { activeModule } = useModuleStore();
|
|
const { wallAssetStore } = useSceneContext();
|
|
const { addWallAsset } = wallAssetStore();
|
|
const { selectedItem, setSelectedItem } = useSelectedItem();
|
|
const { selectedVersionStore } = useVersionContext();
|
|
const { selectedVersion } = selectedVersionStore();
|
|
const { userId, organization } = getUserData();
|
|
const { projectId } = useParams();
|
|
|
|
useEffect(() => {
|
|
const canvasElement = gl.domElement;
|
|
|
|
const onDrop = (event: DragEvent) => {
|
|
if (!event.dataTransfer?.files[0]) return;
|
|
if (selectedItem.id !== "" && event.dataTransfer?.files[0] && selectedItem.category === 'Fenestration') {
|
|
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
|
|
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
|
|
|
raycaster.setFromCamera(pointer, camera);
|
|
const intersects = raycaster.intersectObjects(scene.children, true);
|
|
const intersect = intersects.find((intersect) => intersect.object.name.includes('WallReference'));
|
|
|
|
if (intersect) {
|
|
const wall = intersect.object.userData as Wall;
|
|
const closestPoint = closestPointOnLineSegment(
|
|
new Vector3(intersect.point.x, 0, intersect.point.z),
|
|
new Vector3(...wall.points[0].position),
|
|
new Vector3(...wall.points[1].position)
|
|
)
|
|
|
|
const wallRotation = intersect.object.rotation.clone();
|
|
|
|
const newWallAsset: WallAsset = {
|
|
modelName: selectedItem.name,
|
|
modelUuid: MathUtils.generateUUID(),
|
|
wallUuid: wall.wallUuid,
|
|
wallAssetType: selectedItem.subType,
|
|
assetId: selectedItem.id,
|
|
position: [closestPoint.x, selectedItem.subType === "fixedMove" ? 0 : intersect.point.y, closestPoint.z],
|
|
rotation: [wallRotation.x, wallRotation.y, wallRotation.z],
|
|
isLocked: false,
|
|
isVisible: true,
|
|
opacity: 1,
|
|
};
|
|
|
|
addWallAsset(newWallAsset);
|
|
if (projectId) {
|
|
|
|
// API
|
|
|
|
// upsertWallAssetApi(projectId, selectedVersion?.versionId || '', newWallAsset);
|
|
|
|
// SOCKET
|
|
|
|
const data = {
|
|
wallAssetData: newWallAsset,
|
|
projectId: projectId,
|
|
versionId: selectedVersion?.versionId || '',
|
|
userId: userId,
|
|
organization: organization
|
|
}
|
|
|
|
socket.emit('v1:wall-asset:add', data);
|
|
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
if (!toggleView && activeModule === 'builder') {
|
|
canvasElement.addEventListener('drop', onDrop);
|
|
}
|
|
|
|
return () => {
|
|
canvasElement.removeEventListener('drop', onDrop);
|
|
};
|
|
|
|
}, [gl, camera, toggleView, activeModule, socket, selectedItem, setSelectedItem]);
|
|
|
|
return (
|
|
<>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default WallAssetCreator |