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

refactor: Add distance display for aisles using Html component and Vector3 calculations

This commit is contained in:
Jerald-Golden-B 2025-05-30 17:54:23 +05:30
parent a2a068a732
commit b26ebcc4cc
3 changed files with 63 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/src/modules/builder/aisle/Instances/aisleInstances.tsx
View File

@ -3,6 +3,8 @@ import { useAisleStore } from '../../../../store/builder/useAisleStore';
import { useToggleView } from '../../../../store/builder/store';
import AisleInstance from './instance/aisleInstance';
import Point from '../../point/point';
import { Html } from '@react-three/drei';
import { Vector3 } from 'three';
function AisleInstances() {
const { aisles } = useAisleStore();
@ -39,9 +41,36 @@ function AisleInstances() {
}
<group name='Aisles-Group'>
{aisles.map((aisle) =>
<AisleInstance aisle={aisle} key={aisle.uuid} />
)}
{aisles.map((aisle) => {
const textPosition = new Vector3().addVectors(new Vector3(...aisle.points[0].position), new Vector3(...aisle.points[1].position)).divideScalar(2);
const distance = new Vector3(...aisle.points[0].position).distanceTo(new Vector3(...aisle.points[1].position));
return (
<>
<AisleInstance aisle={aisle} key={aisle.uuid} />
<Html
// data
key={aisle.uuid}
userData={aisle}
position={[textPosition.x, 1, textPosition.z]}
// class
wrapperClass="distance-text-wrapper"
className="distance-text"
// other
zIndexRange={[1, 0]}
prepend
sprite
>
<div
key={aisle.uuid}
className={`distance ${aisle.uuid}`}
>
{distance.toFixed(2)} m
</div>
</Html>
</>
)
})}
</group>
</>
)

32
app/src/modules/builder/aisle/aisleCreator/referenceAisle.tsx
View File

@ -3,7 +3,7 @@ import * as THREE from 'three';
import { useFrame, useThree } from '@react-three/fiber';
import { useActiveLayer, useToolMode, useToggleView } from '../../../../store/builder/store';
import * as Constants from '../../../../types/world/worldConstants';
import { Extrude } from '@react-three/drei';
import { Extrude, Html } from '@react-three/drei';
import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
import { useDirectionalSnapping } from '../../point/helpers/useDirectionalSnapping';
import { usePointSnapping } from '../../point/helpers/usePointSnapping';
@ -172,9 +172,39 @@ function ReferenceAisle({ tempPoints }: Readonly<ReferenceAisleProps>) {
}
};
const textPosition = new THREE.Vector3().addVectors(new THREE.Vector3(...tempAisle.points[0].position), new THREE.Vector3(...tempAisle.points[1].position)).divideScalar(2);
const distance = new THREE.Vector3(...tempAisle.points[0].position).distanceTo(new THREE.Vector3(...tempAisle.points[1].position));
const rendertext = () => {
return (
<Html
// data
key={tempAisle.uuid}
userData={tempAisle}
position={[textPosition.x, 1, textPosition.z]}
// class
wrapperClass="distance-text-wrapper"
className="distance-text"
// other
zIndexRange={[1, 0]}
prepend
sprite
>
<div
key={tempAisle.uuid}
className={`distance ${tempAisle.uuid}`}
>
{distance.toFixed(2)} m
</div>
</Html>
)
}
return (
<group name='Aisle-Reference-Group'>
{renderAisle()}
{rendertext()}
</group>
);
}

6
app/src/modules/builder/geomentries/lines/distanceText/distanceText.tsx
View File

@ -31,10 +31,6 @@ const DistanceText = () => {
const [linesState, setLinesState] = useState<Types.Lines>([]);
const { roomsState, setRoomsState } = useRoomsState();
useEffect(() => {
if (linesState.length === 0) return;
@ -67,8 +63,6 @@ const DistanceText = () => {
}
// return Math.abs(area) / 2;
// Build polygon and compute area