Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bug fix in wall, wall Asset, floor , and decal selection and unselection, added decal deletion

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-08-26 14:43:38 +05:30
parent 0387d7a932
commit 547fd1af12
21 changed files with 558 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
app/src/modules/builder/Decal/decalInstance.tsx
View File

@@ -1,33 +1,132 @@
import * as THREE from 'three';
import { Decal } from '@react-three/drei'
import { useLoader } from '@react-three/fiber';
import { useToggleView } from '../../../store/builder/store';
import { useSocketStore, useToggleView, useToolMode } from '../../../store/builder/store';
import { useBuilderStore } from '../../../store/builder/useBuilderStore';
import defaultMaterial from '../../../assets/textures/floor/wall-tex.png';
import useModuleStore from '../../../store/useModuleStore';
import { useSceneContext } from '../../scene/sceneContext';
import { useEffect } from 'react';
import { getUserData } from '../../../functions/getUserData';
import { useVersionContext } from '../version/versionContext';
import { useParams } from 'react-router-dom';
function DecalInstance({ visible = true, decal, zPosition = decal.decalPosition[2] }: { visible?: boolean, decal: Decal, zPosition?: number }) {
const { setSelectedWall, setSelectedFloor, selectedDecal, setSelectedDecal } = useBuilderStore();
const { togglView } = useToggleView();
// import { upsertWallApi } from '../../../services/factoryBuilder/wall/upsertWallApi';
// import { upsertFloorApi } from '../../../services/factoryBuilder/floor/upsertFloorApi';
function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalPosition[2] }: { parent: Wall | Floor; visible?: boolean, decal: Decal, zPosition?: number }) {
const { setSelectedWall, setSelectedFloor, selectedDecal, deletableDecal, setSelectedDecal, setDeletableDecal } = useBuilderStore();
const { wallStore, floorStore } = useSceneContext();
const { removeDecal: removeDecalFromWall } = wallStore();
const { removeDecal: removeDecalFromFloor } = floorStore();
const { toolMode } = useToolMode();
const { toggleView } = useToggleView();
const { activeModule } = useModuleStore();
const { userId, organization } = getUserData();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { projectId } = useParams();
const { socket } = useSocketStore();
const material = useLoader(THREE.TextureLoader, defaultMaterial);
useEffect(() => {
if (!toggleView && activeModule === 'builder') {
if (toolMode !== 'cursor') {
if (selectedDecal) setSelectedDecal(null);
}
if (toolMode !== '3D-Delete') {
if (deletableDecal) setDeletableDecal(null);
}
} else {
if (selectedDecal) setSelectedDecal(null);
if (deletableDecal) setDeletableDecal(null);
}
}, [toggleView, toolMode, activeModule, selectedDecal, deletableDecal]);
const deleteDecal = (decalUuid: string, parent: Wall | Floor) => {
if ('wallUuid' in parent) {
const updatedWall = removeDecalFromWall(decalUuid);
if (projectId && updatedWall) {
// API
// upsertWallApi(projectId, selectedVersion?.versionId || '', updatedWall);
// SOCKET
const data = {
wallData: updatedWall,
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization
}
socket.emit('v1:model-Wall:add', data);
}
} else if ('floorUuid' in parent) {
const updatedFloor = removeDecalFromFloor(decalUuid);
if (projectId && updatedFloor) {
// API
// upsertFloorApi(projectId, selectedVersion?.versionId || '', updatedFloor);
// SOCKET
const data = {
floorData: updatedFloor,
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization
}
socket.emit('v1:model-Floor:add', data);
}
}
}
return (
<Decal
// debug
visible={visible}
position={[decal.decalPosition[0], decal.decalPosition[1], zPosition]}
rotation={[0, 0, decal.decalRotation]}
rotation={[0, 0, 0]}
scale={[decal.decalScale, decal.decalScale, 0.01]}
userData={decal}
onClick={(e) => {
if (visible && !togglView && activeModule === 'builder') {
if (visible && !toggleView && activeModule === 'builder') {
if (e.object.userData.decalUuid) {
e.stopPropagation();
setSelectedDecal(e.object);
setSelectedWall(null);
setSelectedFloor(null);
if (toolMode === 'cursor') {
setSelectedDecal(e.object);
setSelectedWall(null);
setSelectedFloor(null);
} else if (toolMode === '3D-Delete') {
deleteDecal(e.object.userData.decalUuid, parent);
}
}
}
}}
onPointerEnter={(e) => {
if (visible && !toggleView && activeModule === 'builder') {
if (e.object.userData.decalUuid) {
e.stopPropagation();
if (toolMode === '3D-Delete') {
setDeletableDecal(e.object);
}
}
}
}}
onPointerLeave={(e) => {
if (visible && !toggleView && activeModule === 'builder') {
if (e.object.userData.decalUuid) {
e.stopPropagation();
if (toolMode === '3D-Delete' && deletableDecal && deletableDecal?.userData.decalUuid === e.object.userData.decalUuid) {
setDeletableDecal(null);
}
}
}
}}

4
app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx
View File

@@ -28,7 +28,7 @@ import material4MetalicMap from "../../../../../assets/textures/floor/tex3/metal
import material4NormalMap from "../../../../../assets/textures/floor/tex3/metal_plate_nor_gl_1k.png";
function FloorInstance({ floor }: { floor: Floor }) {
const { togglView } = useToggleView();
const { toggleView } = useToggleView();
const { activeModule } = useModuleStore();
const { selectedFloor, setSelectedFloor, setSelectedDecal } = useBuilderStore();
const savedTheme = localStorage.getItem("theme");
@@ -159,7 +159,7 @@ function FloorInstance({ floor }: { floor: Floor }) {
position={[0, !floor.isBeveled ? floor.floorDepth - 0.1 : floor.floorDepth - 0.2, 0,]}
userData={floor}
onDoubleClick={(e) => {
if (!togglView && activeModule === "builder") {
if (!toggleView && activeModule === "builder") {
if (e.object.userData.floorUuid) {
e.stopPropagation();
setSelectedFloor(e.object);

17
app/src/modules/builder/floor/Instances/floorInstances.tsx
View File

@@ -2,21 +2,36 @@ import React, { useEffect, useMemo } from 'react';
import { Vector3 } from 'three';
import { Html } from '@react-three/drei';
import { useSceneContext } from '../../../scene/sceneContext';
import { useToggleView } from '../../../../store/builder/store';
import { useToggleView, useToolMode } from '../../../../store/builder/store';
import Line from '../../line/line';
import Point from '../../point/point';
import FloorInstance from './Instance/floorInstance';
import Floor2DInstance from './Instance/floor2DInstance';
import useModuleStore from '../../../../store/useModuleStore';
import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
function FloorInstances() {
const { floorStore } = useSceneContext();
const { floors } = floorStore();
const { setSelectedFloor, selectedFloor } = useBuilderStore();
const { toolMode } = useToolMode();
const { toggleView } = useToggleView();
const { activeModule } = useModuleStore();
useEffect(() => {
// console.log('floors: ', floors);
}, [floors])
useEffect(() => {
if (!toggleView && activeModule === 'builder') {
if (toolMode !== 'cursor') {
if (selectedFloor) setSelectedFloor(null);
}
} else {
if (selectedFloor) setSelectedFloor(null);
}
}, [toggleView, toolMode, activeModule, selectedFloor]);
const allPoints = useMemo(() => {
const points: Point[] = [];
const seenUuids = new Set<string>();

6
app/src/modules/builder/floor/floorGroup.tsx
View File

@@ -10,7 +10,7 @@ import FloorInstances from './Instances/floorInstances';
import { getFloorsApi } from '../../../services/factoryBuilder/floor/getFloorsApi';
function FloorGroup() {
const { togglView } = useToggleView();
const { toggleView } = useToggleView();
const { setSelectedFloor, setSelectedDecal } = useBuilderStore();
const { activeModule } = useModuleStore();
const { activeTool } = useActiveTool();
@@ -21,11 +21,11 @@ function FloorGroup() {
const { projectId } = useParams();
useEffect(() => {
if (togglView || activeModule !== 'builder') {
if (toggleView || activeModule !== 'builder') {
setSelectedFloor(null);
setSelectedDecal(null);
}
}, [togglView, activeModule, activeTool])
}, [toggleView, activeModule, activeTool])
useEffect(() => {
if (projectId && selectedVersion) {

20
app/src/modules/builder/wall/Instances/instance/wall.tsx
View File

@@ -17,11 +17,11 @@ import material1 from '../../../../../assets/textures/floor/factory wall texture
function Wall({ wall }: { readonly wall: Wall }) {
const { wallStore, wallAssetStore } = useSceneContext();
const { walls } = wallStore();
const { walls, addDecal } = wallStore();
const { wallAssets, getWallAssetsByWall, setVisibility } = wallAssetStore();
const assets = getWallAssetsByWall(wall.wallUuid);
const { selectedWall, setSelectedWall, setSelectedDecal } = useBuilderStore();
const { togglView } = useToggleView();
const { toggleView } = useToggleView();
const { activeModule } = useModuleStore();
const { camera } = useThree();
const { wallVisibility } = useWallVisibility();
@@ -154,11 +154,23 @@ function Wall({ wall }: { readonly wall: Wall }) {
userData={wall}
name={`WallReference_${wall.wallUuid}`}
onDoubleClick={(e) => {
if (visible && !togglView && activeModule === 'builder') {
if (visible && !toggleView && activeModule === 'builder') {
if (e.object.userData.wallUuid) {
e.stopPropagation();
setSelectedWall(e.object);
setSelectedDecal(null);
if (wall.decals.length > 0) return;
const decal: Decal = {
decalUuid: THREE.MathUtils.generateUUID(),
decalName: 'Decal',
decalId: 'Default Decal',
decalPosition: [0, 0, wall.wallThickness / 2 + 0.001],
decalRotation: 0,
decalScale: 1,
decalType: { type: 'Wall', wallUuid: wall.wallUuid }
}
addDecal(wall.wallUuid, decal);
}
}
}}
@@ -171,7 +183,7 @@ function Wall({ wall }: { readonly wall: Wall }) {
<MeshDiscardMaterial />
{wall.decals.map((decal) => (
<DecalInstance zPosition={wall.wallThickness / 2 + 0.001} visible={visible} key={decal.decalUuid} decal={decal} />
<DecalInstance parent={wall} zPosition={wall.wallThickness / 2 + 0.001} visible={visible} key={decal.decalUuid} decal={decal} />
))}
</mesh>
</mesh>

19
app/src/modules/builder/wall/Instances/wallInstances.tsx
View File

@@ -2,8 +2,9 @@ import React, { useEffect, useMemo } from 'react';
import { DoubleSide, RepeatWrapping, Shape, SRGBColorSpace, TextureLoader, Vector2, Vector3 } from 'three';
import { Html, Extrude } from '@react-three/drei';
import { useLoader } from '@react-three/fiber';
import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
import { useSceneContext } from '../../../scene/sceneContext';
import { useToggleView } from '../../../../store/builder/store';
import { useToggleView, useToolMode } from '../../../../store/builder/store';
import { useWallClassification } from './instance/helpers/useWallClassification';
import Line from '../../line/line';
import Point from '../../point/point';
@@ -12,17 +13,31 @@ import * as Constants from '../../../../types/world/worldConstants';
import texturePath from "../../../../assets/textures/floor/white.png";
import texturePathDark from "../../../../assets/textures/floor/black.png";
import useModuleStore from '../../../../store/useModuleStore';
function WallInstances() {
const { wallStore } = useSceneContext();
const { setSelectedWall, selectedWall } = useBuilderStore();
const { toolMode } = useToolMode();
const { toggleView } = useToggleView();
const { activeModule } = useModuleStore();
const { walls } = wallStore();
const { rooms } = useWallClassification(walls);
const { toggleView } = useToggleView();
useEffect(() => {
// console.log('walls: ', walls);
}, [walls])
useEffect(() => {
if (!toggleView && activeModule === 'builder') {
if (toolMode !== 'cursor') {
if (selectedWall) setSelectedWall(null);
}
} else {
if (selectedWall) setSelectedWall(null);
}
}, [toggleView, toolMode, activeModule, selectedWall]);
const allPoints = useMemo(() => {
const points: Point[] = [];
const seenUuids = new Set<string>();

6
app/src/modules/builder/wall/wallGroup.tsx
View File

@@ -11,7 +11,7 @@ import WallInstances from './Instances/wallInstances';
import { getWallsApi } from '../../../services/factoryBuilder/wall/getWallsApi';
function WallGroup() {
const { togglView } = useToggleView();
const { toggleView } = useToggleView();
const { setSelectedWall, setSelectedDecal } = useBuilderStore();
const { activeModule } = useModuleStore();
const { activeTool } = useActiveTool();
@@ -22,11 +22,11 @@ function WallGroup() {
const { projectId } = useParams();
useEffect(() => {
if (togglView || activeModule !== 'builder') {
if (toggleView || activeModule !== 'builder') {
setSelectedWall(null);
setSelectedDecal(null);
}
}, [togglView, activeModule, activeTool])
}, [toggleView, activeModule, activeTool])
useEffect(() => {
if (projectId && selectedVersion) {

6
app/src/modules/builder/wallAsset/wallAssetCreator.tsx
View File

@@ -14,7 +14,7 @@ import closestPointOnLineSegment from '../line/helpers/getClosestPointOnLineSegm
function WallAssetCreator() {
const { socket } = useSocketStore();
const { pointer, camera, raycaster, scene, gl } = useThree();
const { togglView } = useToggleView();
const { toggleView } = useToggleView();
const { activeModule } = useModuleStore();
const { wallAssetStore } = useSceneContext();
const { addWallAsset } = wallAssetStore();
@@ -84,7 +84,7 @@ function WallAssetCreator() {
}
};
if (!togglView && activeModule === 'builder') {
if (!toggleView && activeModule === 'builder') {
canvasElement.addEventListener('drop', onDrop);
}
@@ -92,7 +92,7 @@ function WallAssetCreator() {
canvasElement.removeEventListener('drop', onDrop);
};
}, [gl, camera, togglView, activeModule, socket, selectedItem, setSelectedItem]);
}, [gl, camera, toggleView, activeModule, socket, selectedItem, setSelectedItem]);
return (
<>

14
app/src/modules/builder/wallAsset/wallAssetGroup.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect } from 'react';
import { useActiveTool, useToggleView } from '../../../store/builder/store';
import { useToggleView, useToolMode } from '../../../store/builder/store';
import { useBuilderStore } from '../../../store/builder/useBuilderStore';
import { useVersionContext } from '../version/versionContext';
import { useSceneContext } from '../../scene/sceneContext';
@@ -10,10 +10,10 @@ import WallAssetInstances from './Instances/wallAssetInstances'
import { getWallAssetsApi } from '../../../services/factoryBuilder/asset/wallAsset/getWallAssetsApi';
function WallAssetGroup() {
const { togglView } = useToggleView();
const { setSelectedFloorAsset, setDeletableWallAsset } = useBuilderStore();
const { toggleView } = useToggleView();
const { setSelectedWallAsset, setDeletableWallAsset } = useBuilderStore();
const { activeModule } = useModuleStore();
const { activeTool } = useActiveTool();
const { toolMode } = useToolMode();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { wallAssetStore } = useSceneContext();
@@ -21,11 +21,11 @@ function WallAssetGroup() {
const { projectId } = useParams();
useEffect(() => {
if (togglView || activeModule !== 'builder') {
setSelectedFloorAsset(null);
if (toggleView || activeModule !== 'builder' || toolMode !== 'cursor') {
setSelectedWallAsset(null);
}
setDeletableWallAsset(null);
}, [togglView, activeModule, activeTool])
}, [toggleView, activeModule, toolMode])
useEffect(() => {
if (projectId && selectedVersion) {

6
app/src/modules/builder/zone/zoneGroup.tsx
View File

@@ -11,7 +11,7 @@ import ZoneInstances from './Instances/zoneInstances';
import { getZonesApi } from '../../../services/factoryBuilder/zone/getZonesApi';
function ZoneGroup() {
const { togglView } = useToggleView();
const { toggleView } = useToggleView();
const { setSelectedZone } = useBuilderStore();
const { activeModule } = useModuleStore();
const { activeTool } = useActiveTool();
@@ -22,10 +22,10 @@ function ZoneGroup() {
const { projectId } = useParams();
useEffect(() => {
if (togglView || activeModule !== 'builder') {
if (toggleView || activeModule !== 'builder') {
setSelectedZone(null);
}
}, [togglView, activeModule, activeTool])
}, [toggleView, activeModule, activeTool])
useEffect(() => {
if (projectId && selectedVersion) {

37
app/src/modules/scene/postProcessing/postProcessing.tsx
View File

@@ -1,25 +1,19 @@
import { DepthOfField, Bloom, EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
import { useThree } from "@react-three/fiber";
import { BlendFunction } from "postprocessing";
import {
useDeletableFloorItem,
useSelectedWallItem,
useSelectedFloorItem,
} from "../../../store/builder/store";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { useDeletableEventSphere, useSelectedEventSphere, useSelectedPoints } from "../../../store/simulation/useSimulationStore";
import { useEffect } from "react";
import { BlendFunction } from "postprocessing";
import { DepthOfField, Bloom, EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
import { useDeletableFloorItem, useSelectedWallItem, useSelectedFloorItem, } from "../../../store/builder/store";
import { useDeletableEventSphere, useSelectedEventSphere, useSelectedPoints } from "../../../store/simulation/useSimulationStore";
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
import * as CONSTANTS from "../../../types/world/worldConstants";
export default function PostProcessing() {
const { scene } = useThree();
const { selectedPoints } = useSelectedPoints();
const { deletableFloorItem } = useDeletableFloorItem();
const { selectedWallItem } = useSelectedWallItem();
const { selectedFloorItem } = useSelectedFloorItem();
const { selectedEventSphere } = useSelectedEventSphere();
const { deletableEventSphere } = useDeletableEventSphere();
const { selectedAisle, selectedWall, selectedDecal, selectedFloor, selectedWallAsset, deletableWallAsset } = useBuilderStore();
const { selectedAisle, selectedWall, selectedDecal, selectedFloor, selectedWallAsset, deletableWallAsset, deletableDecal } = useBuilderStore();
function flattenChildren(children: any[]) {
const allChildren: any[] = [];
@@ -68,6 +62,10 @@ export default function PostProcessing() {
// console.log('selectedPoints: ', selectedPoints);
}, [selectedPoints])
useEffect(() => {
// console.log('deletableDecal: ', deletableDecal);
}, [deletableDecal])
return (
<EffectComposer autoClear={false}>
<N8AO
@@ -180,6 +178,21 @@ export default function PostProcessing() {
xRay={true}
/>
)}
{deletableDecal && (
<Outline
selection={deletableDecal}
selectionLayer={10}
width={3000}
blendFunction={BlendFunction.ALPHA}
edgeStrength={5}
resolutionScale={2}
pulseSpeed={0}
visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
blur={true}
xRay={true}
/>
)}
{deletableFloorItem && (
<Outline
selection={flattenChildren(deletableFloorItem.children)}