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 &&
(() => {
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 <Html
// data // data
key={zone.zoneId} key={zone.zoneId}
position={[ position={htmlPosition}
zone.viewPortCenter[0],
zone.viewPortCenter[1] + 4,
zone.viewPortCenter[2],
]}
// class // class
className="zone-name-wrapper" className="zone-name-wrapper"
// other // others
center center
distanceFactor={20}
> >
<div className="zone-name">{zone.zoneName}</div> <div className="zone-name">{zone.zoneName}</div>
</Html> </Html>
)} );
})()}
</group> </group>
))} ))}
</group> </group>