feat: improve zone name positioning in ZoneGroup based on polygon center and average height

This commit is contained in:
Vishnu 2025-05-20 10:13:31 +05:30
parent 068af3f936
commit 74c1562c3c
1 changed files with 44 additions and 18 deletions

View File

@ -576,24 +576,50 @@ const ZoneGroup: React.FC = () => {
</mesh> </mesh>
); );
})} })}
{!toggleView && ( {!toggleView &&
<Html (() => {
// data const points3D = zone.points || [];
key={zone.zoneId} const coords2D = points3D.map((p: any) => [p[0], p[2]]);
position={[
zone.viewPortCenter[0], // Ensure the polygon is closed
zone.viewPortCenter[1] + 4, if (
zone.viewPortCenter[2], coords2D.length >= 3 &&
]} (coords2D[0][0] !== coords2D[coords2D.length - 1][0] ||
// class coords2D[0][1] !== coords2D[coords2D.length - 1][1])
className="zone-name-wrapper" ) {
// other coords2D.push(coords2D[0]);
center }
distanceFactor={20}
> const polygon = turf.polygon([coords2D]);
<div className="zone-name">{zone.zoneName}</div> const center2D = turf.center(polygon).geometry.coordinates;
</Html>
)} // Calculate the average Y value
const sumY = points3D.reduce(
(sum: number, p: any) => sum + p[1],
0
);
const avgY = points3D.length > 0 ? sumY / points3D.length : 0;
const htmlPosition: [number, number, number] = [
center2D[0],
avgY + (CONSTANTS.zoneConfig.height || 0) + 1.5,
center2D[1],
];
return (
<Html
// data
key={zone.zoneId}
position={htmlPosition}
// class
className="zone-name-wrapper"
// others
center
>
<div className="zone-name">{zone.zoneName}</div>
</Html>
);
})()}
</group> </group>
))} ))}
</group> </group>