G GO·PASSIF
Mesure sur plan
{ctxMod &&
}
switchMode('releve')}>
switchMode('dessin')}>
switchMode('ventil')}>
à venir
{MZ_PAGES.map((p, i) => {
const cnt = measures.filter((m) => m.page === i + 1).length;
return (
setPage(i)}>
{cnt} }
);
})}
{onExport &&
}
{onImport &&
}
{tools.map((t) =>
setTool(t.id)}>
{t.l}
)}
setAiOpen((o) => !o)} title="Assistant IA (I)">
IA
setShortcutsOpen((o) => !o)} title="Raccourcis (?)">
Touches
{hasPlan ?
{/* overlay de dessin en coordonnées naturelles de l'image */}
{/* mesures déjà relevées sur cette page */}
{measures.filter((m) => m.page === page + 1 && m.planPts && m.planPts.length).map((m) => {
const pts = m.planPts.map((p) => `${p.x},${p.y}`).join(' ');
return m.kind === 'surface' ?
{ventActive &&
}
:
}
{mode === 'ventil' && hasPlan &&
}
{hasPlan &&
{!pxPerFt ?
<>Échelle requise — outil Échelle : cliquez 2 points sur une cote connue, puis entrez sa longueur réelle. :
mode === 'ventil' && isVentLine ?
<>Cliquez pour router le conduit. Double-clic pour terminer. :
tool === 'surface' ?
<>Cliquez chaque sommet de la surface. Double-clic pour fermer et calculer l’aire. :
tool === 'ligne' ?
<>Cliquez chaque point de la ligne. Double-clic pour terminer et calculer la longueur. :
<>Échelle calée : {pxPerFt.toFixed(1)} px/pi . Choisissez Ligne ou Surface à gauche.}
}
setZoom((z) => Math.max(8, z - 4))}>−
{zoom}%
setZoom((z) => Math.min(200, z + 4))}>+
{aiOpen &&
setAiOpen(false)} zModById={zModById} containerRef={canvasRef} />}
Plan actif
Échelle
{mode === 'ventil' ?
Réseau de ventilation
Chaque outil de gauche trace un élément réel sur le plan. Son libellé est une propriété de l’objet, pas un texte affiché au centre.
{tool === 'select' ? 'Sélection' : (VENT_BY_ID[tool] || {}).full}
{isVentLine ? 'Cliquez pour router, double-clic pour finir' : isVentPoint ? 'Cliquez pour placer sur le plan' : 'Choisissez un outil de tracé'}
{isVentLine && draft &&
}
:
<>
Module cible de la forme
setTarget(e.target.value)} style={{ marginBottom: 10 }}>
{ZMODS.map((m) => {m.name} )}
{/* Tracé en cours sur le plan → bouton Terminer */}
{hasPlan && (tool === 'ligne' || tool === 'surface') && dpts.length > 0 &&
}
{/* Saisie manuelle (sans plan, ou complément) — valeur réelle saisie, jamais aléatoire */}
{
const isLine = ctx === 'fondation';
const raw = window.prompt(`Valeur ${isLine ? 'de longueur (pi lin.)' : 'de surface (pi²)'} à saisir manuellement :`, '');
if (raw == null) return;
const v = parseFloat(String(raw).replace(',', '.'));
if (!(v > 0)) { alert('Entrez un nombre positif.'); return; }
addShape({ kind: isLine ? 'ligne' : 'surface', val: +v.toFixed(isLine ? 1 : 0), unit: isLine ? 'pi lin.' : 'pi²', source: 'manuel' });
}}>
}
Mesures du projet
{measures.length}
{measures.map((m) => {
const mMod = zModById(m.target);
const dim = ctx && m.target !== ctx;
const isComp = m.kind === 'composant';
return (
{m.name}
delShape(m.id)}>
{isComp ? '1 composant' : `${zFmt(m.val, m.kind === 'ligne' ? 1 : 0)} ${m.unit}`}
{mMod ? mMod.name : m.target}
{m.source === 'ia' &&
);
})}
{shortcutsOpen &&
setShortcutsOpen(false)} />}
);
}
// ── Assistant IA — flottant, déplaçable, redimensionnable, ancrable ──
const AI_GEO_KEY = 'gp_ai_panel_geo';
const AI_ANCHORS = ['tl', 'tc', 'tr', 'ml', 'cc', 'mr', 'bl', 'bc', 'br'];
function AIPanel({ actions, msgs, sug, onAction, onAccept, onIgnore, onClose, zModById, containerRef }) {
const [input, setInput] = React.useState('');
const [picker, setPicker] = React.useState(false);
const [rz, setRz] = React.useState(0); // recompute trigger on container resize
const [geo, setGeo] = React.useState(() => {
try {const s = JSON.parse(localStorage.getItem(AI_GEO_KEY));if (s && typeof s.w === 'number') return s;} catch (e) {}
return { anchor: 'tr', x: null, y: null, w: 330, h: 560 };
});
const bodyRef = React.useRef(null);
React.useEffect(() => {if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;}, [msgs.length, sug.length]);
React.useEffect(() => {try {localStorage.setItem(AI_GEO_KEY, JSON.stringify(geo));} catch (e) {}}, [geo]);
const cont = () => containerRef && containerRef.current;
const M = 14;
const xyForAnchor = (anchor, w, h) => {
const p = cont();if (!p) return { x: M, y: M };
const cw = p.clientWidth,ch = p.clientHeight;
const xs = { l: M, c: Math.max(M, (cw - w) / 2), r: Math.max(M, cw - w - M) };
const ys = { t: M, c: Math.max(M, (ch - h) / 2), b: Math.max(M, ch - h - M) };
const col = { tl: 'l', tc: 'c', tr: 'r', ml: 'l', cc: 'c', mr: 'r', bl: 'l', bc: 'c', br: 'r' }[anchor];
const row = { tl: 't', tc: 't', tr: 't', ml: 'c', cc: 'c', mr: 'c', bl: 'b', bc: 'b', br: 'b' }[anchor];
return { x: xs[col], y: ys[row] };
};
// (re)positionne quand l'ancrage / la taille / le conteneur changent
React.useLayoutEffect(() => {
const p = cont();if (!p) return;
const cw = p.clientWidth,ch = p.clientHeight;
const w = Math.min(geo.w, cw - 2 * M),h = Math.min(geo.h, ch - 2 * M);
let x, y;
if (geo.anchor !== 'free') {({ x, y } = xyForAnchor(geo.anchor, w, h));} else
{x = Math.max(M, Math.min(geo.x == null ? M : geo.x, cw - w - M));
y = Math.max(M, Math.min(geo.y == null ? M : geo.y, ch - h - M));}
setGeo((g) => g.x === x && g.y === y && g.w === w && g.h === h ? g : { ...g, x, y, w, h });
}, [geo.anchor, geo.w, geo.h, rz]);
React.useEffect(() => {
const onR = () => setRz((n) => n + 1);
window.addEventListener('resize', onR);
return () => window.removeEventListener('resize', onR);
}, []);
const startDrag = (e) => {
if (e.target.closest('button')) return;
e.preventDefault();
const p = cont();if (!p) return;
const sx = e.clientX,sy = e.clientY,ox = geo.x || M,oy = geo.y || M;
const move = (ev) => {
const cw = p.clientWidth,ch = p.clientHeight;
let nx = Math.max(M, Math.min(ox + (ev.clientX - sx), cw - geo.w - M));
let ny = Math.max(M, Math.min(oy + (ev.clientY - sy), ch - geo.h - M));
setGeo((g) => ({ ...g, anchor: 'free', x: nx, y: ny }));
};
const up = () => {window.removeEventListener('pointermove', move);window.removeEventListener('pointerup', up);};
window.addEventListener('pointermove', move);window.addEventListener('pointerup', up);
};
const startResize = (dir) => (e) => {
e.preventDefault();e.stopPropagation();
const p = cont();if (!p) return;
const sx = e.clientX,sy = e.clientY,ow = geo.w,oh = geo.h,ox = geo.x || M,oy = geo.y || M;
const move = (ev) => {
const cw = p.clientWidth,ch = p.clientHeight;
const dx = ev.clientX - sx,dy = ev.clientY - sy;
let nx = ox,ny = oy,nw = ow,nh = oh;
if (dir.includes('e')) nw = Math.max(296, Math.min(ow + dx, cw - ox - M));
if (dir.includes('s')) nh = Math.max(300, Math.min(oh + dy, ch - oy - M));
if (dir.includes('w')) {const x = Math.min(Math.max(M, ox + dx), ox + ow - 296);nw = ow + (ox - x);nx = x;}
if (dir.includes('n')) {const y = Math.min(Math.max(M, oy + dy), oy + oh - 300);nh = oh + (oy - y);ny = y;}
setGeo((g) => ({ ...g, anchor: 'free', x: nx, y: ny, w: nw, h: nh }));
};
const up = () => {window.removeEventListener('pointermove', move);window.removeEventListener('pointerup', up);};
window.addEventListener('pointermove', move);window.addEventListener('pointerup', up);
};
const style = { left: geo.x == null ? 14 : geo.x, top: geo.y == null ? 14 : geo.y, width: geo.w, height: geo.h };
return (
{/* overlay de dessin en coordonnées naturelles de l'image */}