refactor: Conditionally render distance display for aisles and reference aisles based on toggleView state

This commit is contained in:
Jerald-Golden-B 2025-05-30 17:55:58 +05:30
parent b26ebcc4cc
commit 865bb9f2d3
2 changed files with 47 additions and 38 deletions

View File

@ -47,27 +47,32 @@ function AisleInstances() {
return ( return (
<> <>
<AisleInstance aisle={aisle} key={aisle.uuid} /> <AisleInstance aisle={aisle} key={aisle.uuid} />
<Html
// data {toggleView &&
key={aisle.uuid} <Html
userData={aisle} // data
position={[textPosition.x, 1, textPosition.z]}
// class
wrapperClass="distance-text-wrapper"
className="distance-text"
// other
zIndexRange={[1, 0]}
prepend
sprite
>
<div
key={aisle.uuid} key={aisle.uuid}
className={`distance ${aisle.uuid}`} userData={aisle}
position={[textPosition.x, 1, textPosition.z]}
// class
wrapperClass="distance-text-wrapper"
className="distance-text"
// other
zIndexRange={[1, 0]}
prepend
sprite
> >
{distance.toFixed(2)} m <div
</div> key={aisle.uuid}
</Html> className={`distance ${aisle.uuid}`}
>
{distance.toFixed(2)} m
</div>
</Html>
}
</> </>
) )
})} })}

View File

@ -178,26 +178,30 @@ function ReferenceAisle({ tempPoints }: Readonly<ReferenceAisleProps>) {
const rendertext = () => { const rendertext = () => {
return ( return (
<Html <>
// data {toggleView &&
key={tempAisle.uuid} <Html
userData={tempAisle} // data
position={[textPosition.x, 1, textPosition.z]} key={tempAisle.uuid}
// class userData={tempAisle}
wrapperClass="distance-text-wrapper" position={[textPosition.x, 1, textPosition.z]}
className="distance-text" // class
// other wrapperClass="distance-text-wrapper"
zIndexRange={[1, 0]} className="distance-text"
prepend // other
sprite zIndexRange={[1, 0]}
> prepend
<div sprite
key={tempAisle.uuid} >
className={`distance ${tempAisle.uuid}`} <div
> key={tempAisle.uuid}
{distance.toFixed(2)} m className={`distance ${tempAisle.uuid}`}
</div> >
</Html> {distance.toFixed(2)} m
</div>
</Html>
}
</>
) )
} }