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>
);
})}
{!toggleView && (
<Html
// data
key={zone.zoneId}
position={[
zone.viewPortCenter[0],
zone.viewPortCenter[1] + 4,
zone.viewPortCenter[2],
]}
// class
className="zone-name-wrapper"
// other
center
distanceFactor={20}
>
<div className="zone-name">{zone.zoneName}</div>
</Html>
)}
{!toggleView &&
(() => {
const points3D = zone.points || [];
const coords2D = points3D.map((p: any) => [p[0], p[2]]);
// Ensure the polygon is closed
if (
coords2D.length >= 3 &&
(coords2D[0][0] !== coords2D[coords2D.length - 1][0] ||
coords2D[0][1] !== coords2D[coords2D.length - 1][1])
) {
coords2D.push(coords2D[0]);
}
const polygon = turf.polygon([coords2D]);
const center2D = turf.center(polygon).geometry.coordinates;
// 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>