diff --git a/app/src/modules/builder/wall/Instances/instance/wall.tsx b/app/src/modules/builder/wall/Instances/instance/wall.tsx
index 1a73bfe..163083d 100644
--- a/app/src/modules/builder/wall/Instances/instance/wall.tsx
+++ b/app/src/modules/builder/wall/Instances/instance/wall.tsx
@@ -16,8 +16,10 @@ import defaultMaterial from '../../../../../assets/textures/floor/wall-tex.png';
import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg';
function Wall({ wall }: { readonly wall: Wall }) {
- const { wallStore } = useSceneContext();
+ const { wallStore, wallAssetStore } = useSceneContext();
const { walls, addDecal } = wallStore();
+ const { getAssetsByWall } = wallAssetStore();
+ const assets = getAssetsByWall(wall.wallUuid);
const { selectedWall, setSelectedWall, setSelectedDecal } = useBuilderStore();
const { togglView } = useToggleView();
const { activeModule } = useModuleStore();
@@ -105,19 +107,35 @@ function Wall({ wall }: { readonly wall: Wall }) {
key={wall.wallUuid}
userData={wall}
>
-
- {materials.map((material, index) => (
-
- ))}
-
+ {(assets.length > 0 || walls[0].wallUuid === wall.wallUuid) ?
+
+ {materials.map((material, index) => (
+
+ ))}
+
+ :
+
+ {materials.map((material, index) => (
+
+ ))}
+
+ }
{
const canvasElement = gl.domElement;
- const onPointerUp = () => {
+ const onPointerUp = (e: PointerEvent) => {
draggingRef.current = false;
if (controls) {
(controls as any).enabled = true;
}
+
+ if (selectedWallAsset) {
+ pointer.x = (e.clientX / window.innerWidth) * 2 - 1;
+ pointer.y = -(e.clientY / window.innerHeight) * 2 + 1;
+
+ raycaster.setFromCamera(pointer, camera);
+ const intersects = raycaster.intersectObjects(scene.children, true);
+ const intersect = intersects.find((i: any) => i.object.name.includes('WallReference'));
+
+ if (intersect && intersect.object.userData.wallUuid && selectedWallAsset.userData.modelUuid === wallAsset.modelUuid) {
+ const newPoint = closestPointOnLineSegment(
+ new THREE.Vector3(intersect.point.x, 0, intersect.point.z),
+ new THREE.Vector3(...intersect.object.userData.points[0].position),
+ new THREE.Vector3(...intersect.object.userData.points[1].position)
+ );
+
+ const wallRotation = intersect.object.rotation.clone();
+
+ const updatedWallAsset = updateWallAsset(wallAsset.modelUuid, {
+ wallUuid: intersect.object.userData.wallUuid,
+ position: [newPoint.x, wallAsset.wallAssetType === 'fixed-move' ? 0 : intersect.point.y, newPoint.z],
+ rotation: [wallRotation.x, wallRotation.y, wallRotation.z],
+ });
+
+ if (projectId && updatedWallAsset) {
+
+ // API
+
+ // upsertWallAssetApi(projectId, selectedVersion?.versionId || '', updatedWallAsset);
+
+ // SOCKET
+
+ const data = {
+ wallAssetData: updatedWallAsset,
+ projectId: projectId,
+ versionId: selectedVersion?.versionId || '',
+ userId: userId,
+ organization: organization
+ }
+
+ socket.emit('v1:wall-asset:add', data);
+
+ }
+ }
+ }
};
const onPointerMove = (e: any) => {
@@ -142,31 +187,11 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
const wallRotation = intersect.object.rotation.clone();
- const updatedWallAsset = updateWallAsset(wallAsset.modelUuid, {
+ updateWallAsset(wallAsset.modelUuid, {
wallUuid: intersect.object.userData.wallUuid,
position: [newPoint.x, wallAsset.wallAssetType === 'fixed-move' ? 0 : intersect.point.y, newPoint.z],
rotation: [wallRotation.x, wallRotation.y, wallRotation.z],
});
-
- if (projectId && updatedWallAsset) {
-
- // API
-
- // upsertWallAssetApi(projectId, selectedVersion?.versionId || '', updatedWallAsset);
-
- // SOCKET
-
- const data = {
- wallAssetData: updatedWallAsset,
- projectId: projectId,
- versionId: selectedVersion?.versionId || '',
- userId: userId,
- organization: organization
- }
-
- socket.emit('v1:wall-asset:add', data);
-
- }
}
};
@@ -225,7 +250,7 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
}
}, [activeTool, deletableWallAsset]);
- if (!gltfScene || !boundingBox || !wall) { return null }
+ if (!gltfScene || !boundingBox) { return null }
const size = new THREE.Vector3();
boundingBox.getSize(size);
const center = new THREE.Vector3();
@@ -242,7 +267,7 @@ function WallAssetInstance({ wallAsset }: { wallAsset: WallAsset }) {
visible={wallAsset.isVisible}
userData={wallAsset}
>
-
+