{ downOnBackdrop.current = e.target === e.currentTarget; }}
onPointerUp={syncZoom} onWheel={() => setTimeout(syncZoom, 0)}
onClick={(e) => { if (e.target === e.currentTarget && downOnBackdrop.current) done(); }}>
,
document.body
);
};
// Reusable photo surface with a single bottom-left options menu (replaces the
// image-slot's built-in Replace/Remove chrome). Menu: replace/add · change the
// tree-avatar crop · show/hide on the tree · remove. `mode='avatar'` shows the
// framed avatar (drawer/quick card); `mode='story'` shows the full photo (life
// story). Replace/remove always act on the underlying moment photo (ph-…).
window.PhotoMenuSlot = function PhotoMenuSlot({ personId, idx, mode = 'story', shape = 'rounded', radius = '12', style, placeholder, onImageClick }) {
const store = window.ImageSlotStore;
const [, force] = React.useReducer((x) => x + 1, 0);
React.useEffect(() => { if (store) return store.subscribe(() => force()); }, []);
const storyId = `ph-${personId}-e${idx}`;
const avId = `av-${personId}-e${idx}`;
const key = `${personId}-e${idx}`;
const hasPhoto = !!(store && store.has(storyId));
const photoUrl = ((store && store.get(storyId)) || {}).u || '';
const displayId = mode === 'avatar' ? avId : storyId;
const [open, setOpen] = React.useState(false);
const [crop, setCrop] = React.useState(false);
const [inTree, setInTree] = React.useState(() => !(window.FTtree && window.FTtree.isExcluded(key)));
const wrapRef = React.useRef(null);
const storyRef = React.useRef(null);
const avRef = React.useRef(null);
const hideCtl = (el) => {
if (el && el.shadowRoot && !el.shadowRoot.querySelector('style[data-hidectl]')) {
const s = document.createElement('style'); s.setAttribute('data-hidectl', '');
s.textContent = '.ctl{display:none!important}';
el.shadowRoot.appendChild(s);
}
};
const setDisp = (el) => { hideCtl(el); if (mode !== 'avatar') storyRef.current = el; };
const setStory = (el) => { storyRef.current = el; };
const setAv = (el) => { avRef.current = el; hideCtl(el); };
React.useEffect(() => {
if (!open) return;
const h = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
document.addEventListener('pointerdown', h, true);
return () => document.removeEventListener('pointerdown', h, true);
}, [open]);
const shadowClick = (ref, act) => {
const el = ref.current; if (!el) return;
const b = el.shadowRoot && el.shadowRoot.querySelector('[data-act=' + act + ']');
if (b) { b.click(); return; }
if (act === 'replace' && el._input) el._input.click();
};
const doReplace = () => { setOpen(false); shadowClick(storyRef, 'replace'); };
const doRemove = () => { setOpen(false); setCrop(false); shadowClick(storyRef, 'clear'); };
const doCrop = () => { setOpen(false); setCrop((c) => !c); };
const doTree = () => { const next = !inTree; setInTree(next); window.FTtree && window.FTtree.setExcluded(key, !next); setOpen(false); };
return (
e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
Drag to reposition, drag a corner to zoom. Sets how this person appears on the tree.
applyZoom(+e.target.value)} />
{ e.stopPropagation(); if (onImageClick) onImageClick(); }}>
{mode === 'avatar'
// Avatar surface: crops are square-authored (see crop overlay), so render
// the slot as a centred square of the frame's longer side; .av-frame clips.
?
);
};
// Icon-button photo tools overlaid on a photo surface (used on the focus-view
// projector's centre frame). Same actions as PhotoMenuSlot but as a row of
// individual icon buttons: replace · avatar crop · show/hide on tree · remove.
window.PhotoIconTools = function PhotoIconTools({ personId, idx }) {
const store = window.ImageSlotStore;
const [, force] = React.useReducer((x) => x + 1, 0);
React.useEffect(() => { if (store) return store.subscribe(() => force()); }, []);
const storyId = `ph-${personId}-e${idx}`;
const avId = `av-${personId}-e${idx}`;
const key = `${personId}-e${idx}`;
const hasPhoto = !!(store && store.has(storyId));
const photoUrl = ((store && store.get(storyId)) || {}).u || '';
const [crop, setCrop] = React.useState(false);
const [inTree, setInTree] = React.useState(() => !(window.FTtree && window.FTtree.isExcluded(key)));
const storyRef = React.useRef(null);
const shadowClick = (ref, act) => {
const el = ref.current; if (!el) return;
const b = el.shadowRoot && el.shadowRoot.querySelector('[data-act=' + act + ']');
if (b) { b.click(); return; }
if (act === 'replace' && el._input) el._input.click();
};
const doReplace = () => shadowClick(storyRef, 'replace');
const doRemove = () => { setCrop(false); shadowClick(storyRef, 'clear'); };
const doTree = () => { const next = !inTree; setInTree(next); window.FTtree && window.FTtree.setExcluded(key, !next); };
const stop = (e) => e.stopPropagation();
const SW = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.9, strokeLinecap: 'round', strokeLinejoin: 'round' };
return (
e.stopPropagation()}>
{hasPhoto && }
{hasPhoto && }
{hasPhoto && }
)}
{crop && hasPhoto && React.createElement(window.AvatarCropOverlay, { personId, idx, onClose: () => setCrop(false) })}
{hasPhoto && }
{hasPhoto && }
{hasPhoto && }
{crop && hasPhoto && React.createElement(window.AvatarCropOverlay, { personId, idx, onClose: () => setCrop(false) })}
{relEl}
{dead && }
);
}
if (style === 'tree') {
const isRebbe = (R.REBBE_IDS || []).indexOf(person.id) !== -1;
return (
{(() => {
const av = autoAvatar(person.id, year);
// Per-photo avatar slot: auto-fills from the added era photo (src),
// but the user can drop a different image or drag/resize to reframe —
// that override + crop persist per photo, independent of the story view.
const avId = av.idx !== -1 ? `av-${person.id}-e${av.idx}` : `av-${person.id}`;
// key is stable per person (NOT per photo) so scrubbing across
// milestones updates id/src on the same mounted element instead of
// remounting — a remount paints an empty frame until the new
// data-URL decodes.
// Crops are authored on a SQUARE canvas (the crop overlay), and the
// slot's framing offsets are frame-relative. Render the slot as a
// centred square FIXED at the adult frame's longer side — the photo
// itself never scales while the circle grows; the animating frame
// just unmasks more of it, and the saved crop reproduces at every
// frame aspect.
const S = 156;
// Ages 0–10: render slightly more zoomed OUT than the stored crop —
// the tight head crop clips small faces in the little circle frame.
// 20% out at age 0, easing linearly to 0% by age 10. Display-only.
const zoomMult = A < 10 ? 1 - 0.2 * (1 - A / 10) : 1;
const props = { key: 'av-' + person.id, id: avId, shape: 'rect', fit: 'cover', 'no-reframe': '', 'zoom-mult': zoomMult.toFixed(3),
style: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)',
width: S + 'px', height: S + 'px' }, placeholder: initials(person) };
// auto-picked face-framed avatar when a photo exists; otherwise the
// shared default/empty-state image (still droppable to replace).
props.src = av.u || person.record?.image || ''; props.placeholder = person.sex==='f'?'רבנית':'רב';
return person.record?.image ? ![]()
e.stopPropagation()} onClick={click} src={person.record.image} alt={person.record.imageInfo?.kind||person.name.he} style={{width:'100%',height:'100%',objectFit:person.id==='mitteler'||person.id==='maharash'?'contain':'cover'}}/> : ;
})()}
{yearsEl}
{relEl}
);
}
if (style === 'minimal') {
return (
{person.birth.year == null ? 'לידה לא ידועה' : window.heYear(person.birth.year) + (person.death?.year ? '–' + window.heYear(person.death.year) : '')}
{relEl}
);
}
if (style === 'portraits') {
return (
{yearsEl}
{relEl}
);
}
// cards (default)
return (
{yearsEl}
{dead ? `${person.birth.place.split(',')[0]}` : subLine}
{relEl}
);
}
const NODE_H = { cards: 78, portraits: 152, minimal: 52, photo: 188, tree: 56 };
const ROWGAP_FOR = (style) => style === 'tree' ? 44 : style === 'minimal' ? 60 : style === 'photo' ? 96 : 86;
function TreeCanvas({ layout, lang, style, year, showSideLinks, focusBranch, familyFocus, selectedId, onSelect, onOpenFocus, lifeEffects, editMode }) {
const R = window.REL;
// Re-render when saved photos finish loading (or any slot changes), so the
// auto-picked node avatars appear once the image store's sidecar lands.
const [, forceStore] = useState(0);
useEffect(() => window.ImageSlotStore && window.ImageSlotStore.subscribe(() => forceStore((n) => n + 1)), []);
// recompute avatars when a photo is shown/hidden from the tree in the person page
useEffect(() => {
const h = () => forceStore((n) => n + 1);
window.addEventListener('ft-tree-changed', h);
return () => window.removeEventListener('ft-tree-changed', h);
}, []);
const nodeH = NODE_H[style];
const rowH = nodeH + ROWGAP_FOR(style);
const yTop = (cy) => cy / R.ROW_H * rowH;
const yCenter = (cy) => yTop(cy) + nodeH / 2;
const wrapRef = useRef(null);
const contentRef = useRef(null);
const nodeEls = useRef({}); // id -> wrapper DOM node
const connEls = useRef({}); // connId -> DOM node
const sim = useRef(null);
const [conns, setConns] = useState([]);
// celebrations while scrubbing forward: fireworks (+ pixel heart) when a
// couple marries · boy/girl confetti when a baby is born
const confettiRef = useRef(null);
const prevYearRef = useRef(year);
useEffect(() => {
const prev = prevYearRef.current;
prevYearRef.current = year;
if (year <= prev || !sim.current) return; // forward crossings only
if (editMode) return; // edit mode: no celebrations (incl. the enter-edit year jump)
const fx = lifeEffects || 'hurray';
if (fx === 'off') return; // celebrations muted
// Nodes may not be in the sim yet (people enter the visible set AT the
// event year and pop in from scale 0) — retry on rAF until every node
// involved exists and has grown in, then run the effect.
const whenReady = (ids, fn) => {
const t0 = performance.now();
const tryIt = () => {
const N = (sim.current && sim.current.nodes) || {};
const ns = ids.map((i) => N[i]);
if (ns.every((n) => n && (n.s ?? 0) > 0.35)) fn(ns, (sim.current.geom && sim.current.geom.nodeH) || 0);
else if (performance.now() - t0 < 1600) requestAnimationFrame(tryIt);
};
tryIt();
};
// marriage → fireworks bursting above the couple, leaving a small pixel heart
R.F.unions.forEach((u) => {
if (!(prev < u.year && u.year <= year)) return;
whenReady([u.a, u.b], (ns, nodeH) => {
const mx = (ns[0].x + ns[1].x) / 2, my = (ns[0].y + ns[1].y) / 2;
// heart anchor: live midpoint between the two cards, riding on their TOP edge
const track = () => {
const N = (sim.current && sim.current.nodes) || {};
const a = N[u.a], b = N[u.b];
return a && b ? { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 - nodeH / 2 } : { x: mx, y: my - nodeH / 2 };
};
// rocket launches from the middle of the couple's cards and bursts right above them
if (fx === 'hurray') fireworksAt(confettiRef.current, mx, my - nodeH / 2 - 58 * FX_SCALE, my, track);
else confettiBurst(confettiRef.current, mx, my - nodeH / 2, ['#EB5757', '#F5928B', 'var(--amber)', '#FFFFFF'], { count: 16, scale: 0.72 }); // mild: a gentle warm puff, no rocket
});
});
// birth → confetti from the top of the newborn's card, blue/white for boys, pink/white for girls.
// A newborn card spawns near the parents and glides to its layout spot —
// wait until it has (nearly) arrived so the confetti pops where the card
// actually appears, not over the parents.
R.F.people.forEach((p) => {
if (!(prev < p.birth.year && p.birth.year <= year)) return;
const t0 = performance.now();
const colors = p.sex === 'f' ? GIRL_CONFETTI : BOY_CONFETTI;
const cfOpts = fx === 'mild' ? { count: 12, scale: 0.7 } : undefined;
const tryIt = () => {
const N = (sim.current && sim.current.nodes) || {};
const n = N[p.id];
const nodeH = (sim.current && sim.current.geom && sim.current.geom.nodeH) || 0;
if (n && (n.s ?? 0) > 0.5 && Math.hypot(n.tx - n.x, n.ty - n.y) < 24) {
confettiBurst(confettiRef.current, n.x, n.y - nodeH / 2 + 74, colors, cfOpts);
} else if (performance.now() - t0 >= 2600) {
if (n) confettiBurst(confettiRef.current, n.tx, n.ty - nodeH / 2 + 74, colors, cfOpts); // fallback: at the layout target
} else {
requestAnimationFrame(tryIt);
}
};
tryIt();
});
}, [year, lifeEffects]);
const [tip, setTip] = useState(null);
// one-time sim init
if (!sim.current) {
const nodes = {};
R.F.people.forEach((p) => {nodes[p.id] = { x: 0, y: 0, vx: 0, vy: 0, ax: 0, ay: 0, s: 0.01, sv: 0, tx: 0, ty: 0, ts: 0, init: false, dim: 1 };});
sim.current = { nodes, edges: [], conns: [], view: { scale: 1, tx: 0, ty: 0, vs: 0, vtx: 0, vty: 0 }, viewT: { scale: 1, tx: 0, ty: 0 }, viewInit: false, drag: null, pan: null, geom: { nodeH, year } };
}
sim.current.geom = { nodeH, year, ortho: style === 'tree' };
// fit → camera target (founders centred; eases via spring)
const computeFit = (full) => {
const el = wrapRef.current;if (!el) return null;
// while the side panel is open, fit into the space left of it. The fit
// target only refreshes on layout changes (scrubbing), resize or "Fit" —
// opening the panel alone does NOT move the camera.
const dEl = document.querySelector('.drawer');
const inset = dEl ? Math.min(el.clientWidth * 0.55, dEl.getBoundingClientRect().width + 28) : 0;
const W = el.clientWidth - inset,H = el.clientHeight,pad = 56;
const NH = NODE_H[style],rGap = ROWGAP_FOR(style);
const maxG = Math.max(0, ...Object.values(layout.pos).map((p) => p.gen));
const cw = Math.max(layout.width, 420),ch = Math.max((maxG + 1) * (NH + rGap), 240);
const scale = Math.max(Math.min((W - pad * 2) / cw, (H - pad * 2) / ch, 1.3), 0.035);
const midX = (layout.minX + layout.maxX) / 2;
const whole = { scale, tx: W / 2 - midX * scale, ty: Math.max(pad * 0.7, (H - ch * scale) / 2), fs: scale };
if (full) return whole;
// readable start: never smaller than a legible scale; stay centred on the founders (x = 0), top-down
const floor = W < 600 ? 0.62 : 0.5;
if (scale >= floor) return whole;
return { scale: floor, tx: W / 2, ty: W < 600 ? 150 : 150, fs: scale };
};
// ---- on layout / style change: update targets, edges, connectors, camera target ----
useEffect(() => {
const s = sim.current;
// people added in edit mode need sim entries before anything touches them
R.F.people.forEach((p) => { if (!s.nodes[p.id]) s.nodes[p.id] = { x: 0, y: 0, vx: 0, vy: 0, ax: 0, ay: 0, s: 0.01, sv: 0, tx: 0, ty: 0, ts: 0, init: false, dim: 1 }; });
const cyC = (cy) => cy / R.ROW_H * rowH + nodeH / 2;
// targets
R.F.people.forEach((p) => {
const n = s.nodes[p.id];
const pos = layout.pos[p.id];
if (pos) {
n.btx = pos.cx;
n.tx = pos.cx + (n.txOff || 0);n.ty = cyC(pos.cy);n.ts = 1;
if (!n.init) {
const par = R.parentsOf(p.id).map((id) => s.nodes[id]).find((pn) => pn && pn.init && pn.s > 0.15);
if (par) {n.x = par.x;n.y = par.y;} else {n.x = n.tx;n.y = n.ty;}
n.s = 0.01;n.sv = 0;n.init = true;
}
} else {
n.ts = 0;
const par = R.parentsOf(p.id).map((id) => s.nodes[id]).find((pn) => pn);
if (par) {n.tx = par.tx;n.ty = par.ty;}
}
});
// edges (springs at rest at the layout distance) — only among visible nodes
const edges = [];
const dist = (a, b) => Math.hypot(s.nodes[a].tx - s.nodes[b].tx, s.nodes[a].ty - s.nodes[b].ty) || 1;
R.F.unions.forEach((u) => {
if (!layout.pos[u.a] || !layout.pos[u.b]) return;
edges.push({ a: u.a, b: u.b, rest: dist(u.a, u.b), k: 0.022, year: u.year });
R.childrenOfUnion(u).forEach((cid) => {
if (!layout.pos[cid]) return;
edges.push({ a: u.a, b: cid, rest: dist(u.a, cid), k: 0.013 });
edges.push({ a: u.b, b: cid, rest: dist(u.b, cid), k: 0.013 });
});
});
// single-parent springs — keep un-partnered parents' children hanging below them
R.F.people.forEach((p) => {
if (!layout.pos[p.id] || !p.parents.length) return;
const unitedVis = p.parents.length === 2 && R.F.unions.some((u) => layout.pos[u.a] && layout.pos[u.b] && [u.a, u.b].every((x) => p.parents.includes(x)));
if (unitedVis) return;
p.parents.forEach((pid) => { if (layout.pos[pid]) edges.push({ a: pid, b: p.id, rest: dist(pid, p.id), k: 0.013 }); });
});
s.edges = edges;
// connectors metadata
s.conns = buildConnMeta(layout, showSideLinks, R);
setConns(s.conns);
// camera
const f = computeFit();
if (f) {s.viewT = { ...f };s.minScale = f.fs || f.scale;if (!s.viewInit) {s.view = { ...f, vs: 0, vtx: 0, vty: 0 };s.viewInit = true;}}
}, [layout, style, showSideLinks]);
// before a couple marries, hold their cards apart — so the moment they wed,
// the two cards visibly glide together (they'd otherwise sit side-by-side
// from birth as if married at age 0)
const UNWED_GAP = 34; // px each, ~68px extra daylight per couple
useEffect(() => {
const s = sim.current; if (!s) return;
const off = {};
R.F.unions.forEach((u) => {
if (year >= u.year) return;
const pa = layout.pos[u.a], pb = layout.pos[u.b];
if (!pa || !pb) return;
const dir = pa.cx <= pb.cx ? -1 : 1;
off[u.a] = (off[u.a] || 0) + dir * UNWED_GAP;
off[u.b] = (off[u.b] || 0) - dir * UNWED_GAP;
});
R.F.people.forEach((p) => {
const n = s.nodes[p.id];
if (!n || !layout.pos[p.id] || n.btx === undefined) return;
n.txOff = off[p.id] || 0;
n.tx = n.btx + n.txOff;
});
}, [year, layout, style]);
// ---- the animation loop ----
useEffect(() => {
const KT = 0.045,DAMP = 0.8,KS = 0.16,SDAMP = 0.74,KV = 0.16,VDAMP = 0.86;
const frame = () => {
const s = sim.current,N = s.nodes,g = s.geom;
const v = s.view,vt = s.viewT;
// sleep when fully settled — stops touching the DOM at rest (keeps image-slots calm)
let active = !!(s.drag || s.pan || s.repaint) ||
Math.abs(vt.scale - v.scale) > 0.0004 || Math.abs(vt.tx - v.tx) > 0.15 || Math.abs(vt.ty - v.ty) > 0.15;
if (!active) {
for (const id in N) {const n = N[id];
if (Math.abs(n.tx - n.x) > 0.15 || Math.abs(n.ty - n.y) > 0.15 || Math.abs(n.ts - n.s) > 0.004 ||
Math.abs(n.vx) > 0.04 || Math.abs(n.vy) > 0.04 || Math.abs(n.sv) > 0.004) {active = true;break;}
}
}
if (!active) return; // at rest — nothing to do
s.repaint = false; // one-shot wake (e.g. dim/connector refresh on selection)
// camera — smooth exponential ease toward target (no overshoot / no bounce)
const CAM = 0.18;
v.vs = 0;v.scale += (vt.scale - v.scale) * CAM;
const minS = s.minScale || 0.25;
if (v.scale < minS) v.scale = minS;
if (v.scale > 2.2) v.scale = 2.2;
v.vtx = 0;v.tx += (vt.tx - v.tx) * CAM;
v.vty = 0;v.ty += (vt.ty - v.ty) * CAM;
if (contentRef.current) contentRef.current.style.transform = `translate(${v.tx}px,${v.ty}px) scale(${v.scale})`;
// accumulate target-spring accel
for (const id in N) {const n = N[id];n.ax = (n.tx - n.x) * KT;n.ay = (n.ty - n.y) * KT;}
// edge springs (coupling) — only when both endpoints are present
for (const e of s.edges) {
const a = N[e.a],b = N[e.b];if (a.s < 0.05 || b.s < 0.05) continue;
if (e.year && g.year < e.year) continue; // marriage spring engages only once wed
const dx = b.x - a.x,dy = b.y - a.y,d = Math.hypot(dx, dy) || 1;
const f = (d - e.rest) / d * e.k;
a.ax += dx * f;a.ay += dy * f;b.ax -= dx * f;b.ay -= dy * f;
}
// integrate
for (const id in N) {
const n = N[id];
if (!(s.drag && s.drag.id === id)) {
n.vx = (n.vx + n.ax) * DAMP;n.vy = (n.vy + n.ay) * DAMP;
n.x += n.vx;n.y += n.vy;
}
const as = (n.ts - n.s) * KS;n.sv = (n.sv + as) * SDAMP;n.s += n.sv;
if (n.s < 0) {n.s = 0;n.sv = 0;}
const el = nodeEls.current[id];
if (el) {
el.style.transform = `translate(${n.x}px,${n.y}px) translate(-50%,-50%) scale(${n.s.toFixed(3)})`;
el.style.opacity = n.s < 0.02 ? '0' : '1';
el.style.pointerEvents = n.s > 0.55 ? 'auto' : 'none';
}
}
// connectors
updateConns(s, N, connEls.current, g);
};
let iv = null;
// defer the loop start so it doesn't race the image-slot web components mounting on load
const startT = setTimeout(() => {if (!window.__NOPHYS) iv = setInterval(frame, 1000 / 60);}, 450);
return () => {clearTimeout(startT);clearInterval(iv);};
}, []);
// resize → recompute camera target
useEffect(() => {
const onResize = () => {const f = computeFit();if (f) sim.current.viewT = { ...f };};
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, [layout, style]);
// ---- pointer: pan bg / drag node, with spring-back ----
const toTree = (e) => {
const r = wrapRef.current.getBoundingClientRect(),v = sim.current.view;
return { x: (e.clientX - r.left - v.tx) / v.scale, y: (e.clientY - r.top - v.ty) / v.scale };
};
const onNodeDown = (e, id) => {
e.stopPropagation();
wrapRef.current.setPointerCapture(e.pointerId);
sim.current.drag = { id, moved: false, sx: e.clientX, sy: e.clientY };
};
const onWrapDown = (e) => {
if (sim.current.drag) return;
wrapRef.current.setPointerCapture(e.pointerId);
const v = sim.current.view;
sim.current.pan = { x: e.clientX, y: e.clientY, tx: v.tx, ty: v.ty, moved: false };
wrapRef.current.style.cursor = 'grabbing';
};
const onMove = (e) => {
const s = sim.current;
if (s.drag) {
if (Math.hypot(e.clientX - s.drag.sx, e.clientY - s.drag.sy) > 4) s.drag.moved = true;
const p = toTree(e);const n = s.nodes[s.drag.id];
n.x = p.x;n.y = p.y;n.vx = 0;n.vy = 0;
} else if (s.pan) {
const dx = e.clientX - s.pan.x,dy = e.clientY - s.pan.y;
if (Math.hypot(dx, dy) > 4) s.pan.moved = true;
s.view.tx = s.pan.tx + dx;s.view.ty = s.pan.ty + dy;
s.view.vtx = 0;s.view.vty = 0;
s.viewT.tx = s.view.tx;s.viewT.ty = s.view.ty;
}
};
const onUp = (e) => {
const s = sim.current;
try {wrapRef.current.releasePointerCapture(e.pointerId);} catch (_) {}
if (s.drag) {if (!s.drag.moved) {
if (editMode) { window.dispatchEvent(new CustomEvent('ft-edit-open', { detail: s.drag.id })); }
else if (selectedId === s.drag.id) {onOpenFocus && onOpenFocus(s.drag.id);} else {onSelect(s.drag.id);}}s.drag = null;} else
if (s.pan && !s.pan.moved) {onSelect(null);}
if (s.pan) {s.pan = null;if (wrapRef.current) wrapRef.current.style.cursor = 'grab';}
};
const onWheel = (e) => {
e.preventDefault();
const s = sim.current,r = wrapRef.current.getBoundingClientRect();
const mx = e.clientX - r.left,my = e.clientY - r.top,vt = s.viewT;
const ns = Math.min(2.2, Math.max(s.minScale || 0.25, vt.scale * (e.deltaY < 0 ? 1.12 : 0.9)));
const k = ns / vt.scale;
s.viewT = { scale: ns, tx: mx - (mx - vt.tx) * k, ty: my - (my - vt.ty) * k };
};
const zoom = (dir) => {
const s = sim.current,el = wrapRef.current,W = el.clientWidth / 2,H = el.clientHeight / 2,vt = s.viewT;
const ns = Math.min(2.2, Math.max(s.minScale || 0.25, vt.scale * (dir > 0 ? 1.2 : 0.83)));
const k = ns / vt.scale;
s.viewT = { scale: ns, tx: W - (W - vt.tx) * k, ty: H - (H - vt.ty) * k };
};
const doFit = () => {const f = computeFit(true);if (f) sim.current.viewT = { ...f };};
// edit-toolbar zoom buttons (mag glass lives in the toolbar during edit mode)
useEffect(() => {
const h = (e) => { const d = e.detail; if (d === 'fit') doFit(); else zoom(d); };
window.addEventListener('ft-edit-zoom', h);
return () => window.removeEventListener('ft-edit-zoom', h);
}, []);
// branch highlighting
const litSet = useMemo(() => {
if (!focusBranch) return null;
const lit = new Set([focusBranch]);
const addLineage = (seed) => {
(function up(id) {R.parentsOf(id).forEach((p) => {if (!lit.has(p)) {lit.add(p);up(p);}});})(seed);
(function down(id) {R.childrenOf(id).forEach((c) => {if (!lit.has(c)) {lit.add(c);down(c);}});})(seed);
};
addLineage(focusBranch);
// add immediate spouses of everyone lit
const spouses = new Set();
[...lit].forEach((id) => R.unionsOf(id).forEach((u) => {[u.a, u.b].forEach((s) => {if (!lit.has(s)) spouses.add(s);lit.add(s);});}));
// family focus: also light each married-in spouse's own family (the in-law branches)
if (familyFocus) {
[...spouses].forEach(addLineage);
[...lit].forEach((id) => R.unionsOf(id).forEach((u) => {lit.add(u.a);lit.add(u.b);}));
}
return lit;
}, [focusBranch, familyFocus]);
// mirror the dim state onto the sim nodes so connectors fade with the cards they pass behind
useEffect(() => {
const N = sim.current.nodes;
for (const id in N) N[id].dim = litSet ? (litSet.has(id) ? 1 : 0.28) : 1;
sim.current.repaint = true;
}, [litSet]);
const tipAt = (e, text) => {const r = wrapRef.current.getBoundingClientRect();setTip({ x: e.clientX - r.left, y: e.clientY - r.top, text });};
const hideTip = () => setTip(null);
if (window.__STUB) return
{yearsEl}
{subLine}{!dead ? `, ${person.birth.place.split(',')[0]}` : ''}
stub
;
return (
{R.F.people.map((p) =>
{editMode && window.EditLayer && React.createElement(window.EditLayer, { simRef: sim, nodeEls, nodeH, wrapRef, onOpenFocus })}
{!editMode && nodeEls.current[p.id] = el}
style={{ left: 0, top: 0, opacity: 0 }} onPointerDown={(e) => onNodeDown(e, p.id)}
onDoubleClick={() => onOpenFocus && onOpenFocus(p.id)}>
)}
e.stopPropagation()}>
}
{tip && {tip.text}
}