import { Html } from '@react-three/drei';
import { useViewerStore } from '../../store/viewerStore';
import type { Vec3, ViewerPart } from '../../types/viewer';
export interface PartAnnotationsProps {
parts?: ViewerPart[];
}
export function PartAnnotations({ parts: explicitParts }: PartAnnotationsProps) {
const parts = useViewerStore((state) => explicitParts ?? state.parts);
const partSettings = useViewerStore((state) => state.partSettings);
const display = useViewerStore((state) => state.display);
const selectPart = useViewerStore((state) => state.selectPart);
if (!display.annotations) {
return null;
}
return (
<>
{parts.map((part) => {
if (!part.annotationPosition) {
return null;
}
const settings = partSettings[part.id] ?? { visible: true, opacity: 1 };
if (!settings.visible || settings.opacity < 0.12) {
return null;
}
const position = getExplodedAnnotationPosition(
part.annotationPosition,
part.explodeDirection,
display.exploded.enabled ? display.exploded.distance : 0
);
return (
);
})}
);
}
function getExplodedAnnotationPosition(
base: Vec3,
direction: Vec3 | undefined,
distance: number
): [number, number, number] {
if (!direction || distance <= 0) {
return [base[0], base[1], base[2]];
}
const length = Math.hypot(direction[0], direction[1], direction[2]) || 1;
const scale = distance / length;
return [
base[0] + direction[0] * scale,
base[1] + direction[1] * scale,
base[2] + direction[2] * scale
];
}