{/* Trait de liaison vers la barre horizontale des subordonnés.
Sa hauteur est exactement la marge haute du conteneur des
subordonnés (mt-14 sm, mt-16 md) : il part du bas de la carte et
vient toucher la barre, sans mesure au moment du rendu.
Ces deux valeurs sont donc couplées, changer `mt-*` sur le
conteneur impose de reporter la hauteur ici. */}
{hasSubordinates && (
)}
{/* Subordonnés */}
{hasSubordinates && isExpanded && (
{/* Ligne horizontale */}
{lineStyle && (
)}
{/* Grille subordonnés, flex-row : tous au même niveau sur une seule ligne */}
{(() => {
return (
)
}
// ── Export principal ─────────────────────────────────────────────────────────
export default function OrgChart() {
const tTitles = useTranslations('organigram.titles')
const tDepartments = useTranslations('organigram.departments')
const [ref, inView] = useRevelationInView({ triggerOnce: true, threshold: 0.1 })
const orgData = getOrgData(tTitles, tDepartments)
const mapTranslations = (director: Director): Director => ({
...director,
title: director.titleKey ? tTitles(director.titleKey) : undefined,
department: director.departmentKey ? tDepartments(director.departmentKey) : undefined,
subordinates: director.subordinates?.map(mapTranslations),
})
const translatedOrgData = mapTranslations(orgData)
const flattenDirectorsBFS = (root: Director): Director[] => {
const result: Director[] = []
const queue: Director[] = [root]
while (queue.length > 0) {
const current = queue.shift()!
result.push(current)
if (current.subordinates) queue.push(...current.subordinates)
}
return result
}
const flatDirectors = flattenDirectorsBFS(translatedOrgData)
/* ── Arbre ou grille : mesure de l'encombrement horizontal ─────────────────
Le critère est la LARGEUR seule : si l'arbre tient en entier sur l'axe des
x, on l'affiche ; sinon on bascule sur la grille de cartes. Jamais d'état
intermédiaire, jamais d'arbre rogné.
Deux pièges que la mesure doit contourner :
1. `offsetWidth` de l'arbre vaut 1 216 px, la largeur de sa rangée de tête,
alors que les sous-arbres des deux extrémités débordent d'environ 208 px
de chaque côté en overflow-visible. Il faut donc l'étendue réelle,
obtenue en prenant l'union des rectangles de tous ses descendants.
2. La comparaison se fait avec la largeur de la SECTION, pas avec celle du
conteneur intérieur borné à max-w-7xl : le débordement n'est pas rogné
avant la section, l'arbre peut donc légitimement déborder du conteneur.
L'arbre reste monté en permanence, hors flux et invisible quand la grille
est affichée : c'est ce qui permet de le remesurer au redimensionnement et
de revenir à lui dès qu'il tient. Les photos étant les mêmes dans les deux
vues, ce doublon ne coûte aucune requête supplémentaire. */
const [mode, setMode] = useState<"arbre" | "cartes">("cartes")
const sectionRef = useRef(null)
const arbreRef = useRef(null)
useLayoutEffect(() => {
const evaluer = () => {
const section = sectionRef.current
const arbre = arbreRef.current
if (!section || !arbre) return
let gauche = Infinity
let droite = -Infinity
for (const noeud of arbre.querySelectorAll("*")) {
const r = noeud.getBoundingClientRect()
if (r.width === 0) continue
if (r.left < gauche) gauche = r.left
if (r.right > droite) droite = r.right
}
if (!Number.isFinite(gauche) || !Number.isFinite(droite)) return
setMode(droite - gauche <= section.clientWidth ? "arbre" : "cartes")
}
evaluer()
window.addEventListener("resize", evaluer)
const ro = new ResizeObserver(evaluer)
if (sectionRef.current) ro.observe(sectionRef.current)
// Les photos modifient l'encombrement en arrivant : on remesure après coup.
const t = setTimeout(evaluer, 700)
return () => {
window.removeEventListener("resize", evaluer)
ro.disconnect()
clearTimeout(t)
}
}, [])
return (
// Aucun rembourrage haut : l'organigramme démarre au ras de la barre
// d'onglets de /entreprise, l'écart est fixé par la section qui l'accueille.
{
ref(el)
sectionRef.current = el
}}
className="pt-0 pb-0 bg-white relative overflow-hidden w-full flex justify-center"
>
{/* Grille de cartes : affichée dès que l'arbre ne tient pas en entier */}
{mode === "cartes" && (
{flatDirectors.map((director, index) => (
))}
)}
{/* Arbre complet. `w-max` lui donne sa largeur naturelle, ce qui rend la
mesure possible ; hors mode arbre il sort du flux et devient
invisible, sans disparaître du DOM. */}