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

decal bug fix

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-09-18 15:54:21 +05:30
parent 4c7b13190c
commit fc138b8345
3 changed files with 68 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/src/functions/objectDeepEqual.ts Normal file
View File

@@ -0,0 +1,19 @@
const deepEqual = (a: any, b: any): boolean => {
if (a === b) return true;
if (typeof a !== "object" || typeof b !== "object" || a == null || b == null) return false;
const keysA = Object.keys(a);
const keysB = Object.keys(b);
if (keysA.length !== keysB.length) return false;
for (const key of keysA) {
if (!keysB.includes(key)) return false;
if (!deepEqual(a[key], b[key])) return false;
}
return true;
};
export default deepEqual;

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

@@ -1,16 +1,17 @@
import * as THREE from 'three'; import * as THREE from "three";
import { Decal } from '@react-three/drei' import { Decal } from "@react-three/drei";
import { useToggleView, useToolMode } from '../../../../store/builder/store'; import { useToggleView, useToolMode } from "../../../../store/builder/store";
import { useBuilderStore } from '../../../../store/builder/useBuilderStore'; import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
import { retrieveImage, storeImage } from '../../../../utils/indexDB/idbUtils'; import { retrieveImage, storeImage } from "../../../../utils/indexDB/idbUtils";
import deepEqual from "../../../../functions/objectDeepEqual";
import defaultMaterial from '../../../../assets/image/fallback/fallback decal 1.png'; import defaultMaterial from "../../../../assets/image/fallback/fallback decal 1.png";
import useModuleStore from '../../../../store/ui/useModuleStore'; import useModuleStore from "../../../../store/ui/useModuleStore";
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from "react";
import { useDecalEventHandlers } from '../eventHandler/useDecalEventHandlers'; import { useDecalEventHandlers } from "../eventHandler/useDecalEventHandlers";
function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalPosition[2] }: Readonly<{ parent: Wall | Floor; visible?: boolean, decal: Decal, zPosition?: number }>) { function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalPosition[2] }: Readonly<{ parent: Wall | Floor; visible?: boolean; decal: Decal; zPosition?: number }>) {
const url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`; const url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
const { selectedDecal, deletableDecal, setSelectedDecal, setDeletableDecal } = useBuilderStore(); const { selectedDecal, deletableDecal, setSelectedDecal, setDeletableDecal } = useBuilderStore();
const { toolMode } = useToolMode(); const { toolMode } = useToolMode();
@@ -23,7 +24,19 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
setSelectedDecal({ decalData: selectedDecal.decalData, decalMesh: decalRef.current }); setSelectedDecal({ decalData: selectedDecal.decalData, decalMesh: decalRef.current });
} }
// eslint-disable-next-line // eslint-disable-next-line
}, [selectedDecal]) }, [selectedDecal]);
useEffect(() => {
if (selectedDecal?.decalData.decalUuid === decal.decalUuid && selectedDecal.decalMesh) {
if (!deepEqual(selectedDecal.decalData, decal)) {
setSelectedDecal({
decalData: decal,
decalMesh: selectedDecal.decalMesh,
});
}
}
// eslint-disable-next-line
}, [decal, selectedDecal]);
const { handlePointerMissed, handlePointerLeave, handleClick, handlePointerDown, handlePointerEnter } = useDecalEventHandlers({ parent, decal, visible }); const { handlePointerMissed, handlePointerLeave, handleClick, handlePointerDown, handlePointerEnter } = useDecalEventHandlers({ parent, decal, visible });
@@ -31,7 +44,7 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
const logDecalStatus = (decalId: string, status: string) => { const logDecalStatus = (decalId: string, status: string) => {
// console.log(decalId, status); // console.log(decalId, status);
} };
const loadDefaultTexture = () => { const loadDefaultTexture = () => {
const textureLoader = new THREE.TextureLoader(); const textureLoader = new THREE.TextureLoader();
@@ -40,7 +53,7 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
(fallbackTex) => { (fallbackTex) => {
fallbackTex.name = "default-decal"; fallbackTex.name = "default-decal";
setTexture(fallbackTex); setTexture(fallbackTex);
logDecalStatus(decal.decalId, 'default-loaded'); logDecalStatus(decal.decalId, "default-loaded");
}, },
undefined, undefined,
(error) => { (error) => {
@@ -50,12 +63,11 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
}; };
const loadDecalTexture = async (decalId: string) => { const loadDecalTexture = async (decalId: string) => {
try { try {
const cachedTexture = THREE.Cache.get(decalId); const cachedTexture = THREE.Cache.get(decalId);
if (cachedTexture) { if (cachedTexture) {
setTexture(cachedTexture); setTexture(cachedTexture);
logDecalStatus(decalId, 'cache-loaded'); logDecalStatus(decalId, "cache-loaded");
return; return;
} }
@@ -70,7 +82,7 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
tex.name = decalId; tex.name = decalId;
THREE.Cache.add(decalId, tex); THREE.Cache.add(decalId, tex);
setTexture(tex); setTexture(tex);
logDecalStatus(decalId, 'indexedDB-loaded'); logDecalStatus(decalId, "indexedDB-loaded");
}, },
undefined, undefined,
(error) => { (error) => {
@@ -90,7 +102,6 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
}; };
const loadFromBackend = (decalId: string) => { const loadFromBackend = (decalId: string) => {
const textureUrl = `${url_Backend_dwinzo}/api/v1/DecalImage/${decalId}`; const textureUrl = `${url_Backend_dwinzo}/api/v1/DecalImage/${decalId}`;
const textureLoader = new THREE.TextureLoader(); const textureLoader = new THREE.TextureLoader();
@@ -100,7 +111,7 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
tex.name = decalId; tex.name = decalId;
THREE.Cache.add(decalId, tex); THREE.Cache.add(decalId, tex);
setTexture(tex); setTexture(tex);
logDecalStatus(decalId, 'backend-loaded'); logDecalStatus(decalId, "backend-loaded");
try { try {
const response = await fetch(textureUrl); const response = await fetch(textureUrl);
@@ -128,11 +139,11 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
}, [decal.decalId]); }, [decal.decalId]);
useEffect(() => { useEffect(() => {
if (!toggleView && activeModule === 'builder') { if (!toggleView && activeModule === "builder") {
if (toolMode !== 'cursor' && selectedDecal) { if (toolMode !== "cursor" && selectedDecal) {
setSelectedDecal(null); setSelectedDecal(null);
} }
if (toolMode !== '3D-Delete' && deletableDecal) { if (toolMode !== "3D-Delete" && deletableDecal) {
setDeletableDecal(null); setDeletableDecal(null);
} }
} else { } else {
@@ -149,24 +160,25 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
ref={decalRef} ref={decalRef}
position={[decal.decalPosition[0], decal.decalPosition[1], zPosition]} position={[decal.decalPosition[0], decal.decalPosition[1], zPosition]}
rotation={[0, 0, decal.decalRotation * (Math.PI / 180)]} rotation={[0, 0, decal.decalRotation * (Math.PI / 180)]}
scale={[(decal.decalType.type === 'Floor' || zPosition < 0) ? -decal.decalScale : decal.decalScale, decal.decalScale, 0.01]} scale={[decal.decalType.type === "Floor" || zPosition < 0 ? -decal.decalScale : decal.decalScale, decal.decalScale, 0.01]}
userData={decal} userData={decal}
onPointerDown={(e) => { if (e.button === 0) handlePointerDown(e) }} onPointerDown={(e) => {
onClick={(e) => { handleClick(e) }} if (e.button === 0) handlePointerDown(e);
onPointerEnter={(e) => { handlePointerEnter(e) }} }}
onPointerLeave={(e) => { handlePointerLeave(e) }} onClick={(e) => {
handleClick(e);
}}
onPointerEnter={(e) => {
handlePointerEnter(e);
}}
onPointerLeave={(e) => {
handlePointerLeave(e);
}}
onPointerMissed={() => handlePointerMissed()} onPointerMissed={() => handlePointerMissed()}
> >
<meshBasicMaterial <meshBasicMaterial map={texture} side={THREE.DoubleSide} polygonOffset polygonOffsetFactor={-1} transparent opacity={decal.decalOpacity} />
map={texture}
side={THREE.DoubleSide}
polygonOffset
polygonOffsetFactor={-1}
transparent
opacity={decal.decalOpacity}
/>
</Decal> </Decal>
) );
} }
export default DecalInstance export default DecalInstance;

1
app/src/modules/collaboration/socket/builderResponses.tsx
View File

@@ -254,6 +254,7 @@ function BuilderResponses() {
echo.log(`Added wall: ${wall.wallUuid}`); echo.log(`Added wall: ${wall.wallUuid}`);
}); });
} else if (data.message === "Wall Updated Successfully") { } else if (data.message === "Wall Updated Successfully") {
console.log('data: ', data.data.decals);
const wall: Wall = { const wall: Wall = {
wallUuid: data.data.wallUuid, wallUuid: data.data.wallUuid,
points: data.data.points, points: data.data.points,