{ e.stopPropagation(); onSelect(node.id); onDragStart(e, node.id); }}
style={{
position: "absolute", left: node.x, top: node.y, width: NW,
background: "#141720", border: `1.5px solid ${selected ? def.color : "#1e2534"}`,
borderRadius: 8, boxShadow: selected ? `0 0 0 2px ${def.color}44` : "0 4px 20px rgba(0,0,0,.5)",
cursor: "grab", zIndex: selected ? 10 : 1, userSelect: "none",
}}
>
{/* header */}
{def.label}
{/* ports + fields */}
{/* INPUT ports */}
{inputs.map((p, i) => (
{ if (portRefs) portRefs.current[`${node.id}:in:${p.id}`] = el; }}
onMouseUp={e => { e.stopPropagation(); onPortMouseUp && onPortMouseUp(node.id, "in", p.id, e); }}
style={{ position: "absolute", left: -7, top: 10 + i * 24, width: 14, height: 14, borderRadius: "50%", background: "#1e2534", border: "2px solid #6b7280", cursor: "crosshair", zIndex: 20 }}
onMouseEnter={e => e.currentTarget.style.borderColor = def.color}
onMouseLeave={e => e.currentTarget.style.borderColor = "#6b7280"}
/>
))}
{/* OUTPUT ports */}
{outputs.map((p, i) => (
{ if (portRefs) portRefs.current[`${node.id}:out:${p.id}`] = el; }}
onMouseDown={e => { e.stopPropagation(); onPortMouseDown && onPortMouseDown(node.id, "out", p.id, e); }}
style={{ position: "absolute", right: -7, top: 10 + i * 24, width: 14, height: 14, borderRadius: "50%", background: "#1e2534", border: `2px solid ${p.id === "true" ? "#00e08a" : p.id === "false" ? "#e74c3c" : "#6b7280"}`, cursor: "crosshair", zIndex: 20, display: "flex", alignItems: "center" }}
onMouseEnter={e => e.currentTarget.style.borderColor = def.color}
onMouseLeave={e => e.currentTarget.style.borderColor = p.id === "true" ? "#00e08a" : p.id === "false" ? "#e74c3c" : "#6b7280"}
>
{p.label && {p.label}}
))}
{/* fields */}
{fields.length > 0 && selected && (
e.stopPropagation()}>
{fields.map(f => (
))}
)}
{/* résumé config (non sélectionné) */}
{fields.length > 0 && !selected && node.config && Object.values(node.config).filter(Boolean).length > 0 && (
{Object.entries(node.config).filter(([, v]) => v).slice(0, 2).map(([k, v]) => (
{k}: {v}
))}
)}
);
}
// ── Calcule la position d'un port dans le canvas ──────────────
function getPortCenter(portRefs, key, canvasRef) {
const el = portRefs.current[key];
if (!el || !canvasRef.current) return null;
const eRect = el.getBoundingClientRect();
const cRect = canvasRef.current.getBoundingClientRect();
return {
x: eRect.left + eRect.width / 2 - cRect.left,
y: eRect.top + eRect.height / 2 - cRect.top,
};
}
// ── Bezier entre deux points ──────────────────────────────────
function bezier(x1, y1, x2, y2) {
const dx = Math.abs(x2 - x1) * 0.6;
return `M${x1},${y1} C${x1 + dx},${y1} ${x2 - dx},${y2} ${x2},${y2}`;
}
// ── Canvas éditeur principal ──────────────────────────────────
function NodeCanvas({ graph, setGraph }) {
const canvasRef = React.useRef(null);
const portRefs = React.useRef({});
const [selected, setSelected] = React.useState(null);
// pan
const [pan, setPan] = React.useState({ x: 0, y: 0 });
const [zoom, setZoom] = React.useState(1);
const panRef = React.useRef(null);
// drag node
const dragRef = React.useRef(null);
// drawing wire
const [wire, setWire] = React.useState(null); // { fromNode, fromPort, mx, my }
const [, forceUpdate] = React.useReducer(x => x + 1, 0);
// canvas → world coords
const toWorld = (cx, cy) => ({ x: (cx - pan.x) / zoom, y: (cy - pan.y) / zoom });
// ── drop bloc depuis palette
const handleDrop = (e) => {
e.preventDefault();
const type = e.dataTransfer.getData("blockType");
if (!type) return;
const rect = canvasRef.current.getBoundingClientRect();
const { x, y } = toWorld(e.clientX - rect.left, e.clientY - rect.top);
const id = "n" + Date.now();
setGraph(g => ({ ...g, nodes: [...g.nodes, { id, type, x: x - NW / 2, y: y - 20, config: {} }] }));
};
// ── drag nœud
const onNodeDragStart = (e, nodeId) => {
const node = graph.nodes.find(n => n.id === nodeId);
dragRef.current = { nodeId, startMX: e.clientX, startMY: e.clientY, origX: node.x, origY: node.y };
};
// ── pan du canvas (clic fond)
const onCanvasMouseDown = (e) => {
if (e.target === canvasRef.current || e.target.tagName === "svg" || e.target.tagName === "path") {
setSelected(null);
panRef.current = { startMX: e.clientX, startMY: e.clientY, origPan: { ...pan } };
}
};
const onMouseMove = (e) => {
if (dragRef.current) {
const dx = (e.clientX - dragRef.current.startMX) / zoom;
const dy = (e.clientY - dragRef.current.startMY) / zoom;
setGraph(g => ({
...g,
nodes: g.nodes.map(n => n.id === dragRef.current.nodeId ? { ...n, x: dragRef.current.origX + dx, y: dragRef.current.origY + dy } : n),
}));
}
if (panRef.current) {
const dx = e.clientX - panRef.current.startMX;
const dy = e.clientY - panRef.current.startMY;
setPan({ x: panRef.current.origPan.x + dx, y: panRef.current.origPan.y + dy });
}
if (wire) {
const rect = canvasRef.current.getBoundingClientRect();
setWire(w => ({ ...w, mx: e.clientX - rect.left, my: e.clientY - rect.top }));
}
};
const onMouseUp = (e) => {
dragRef.current = null;
panRef.current = null;
if (wire && !wire.connected) setWire(null);
};
// ── port interactions
const onPortMouseDown = (nodeId, dir, portId, e) => {
e.stopPropagation();
const rect = canvasRef.current.getBoundingClientRect();
setWire({ fromNode: nodeId, fromPort: portId, mx: e.clientX - rect.left, my: e.clientY - rect.top, connected: false });
};
const onPortMouseUp = (nodeId, dir, portId, e) => {
if (!wire || wire.fromNode === nodeId) { setWire(null); return; }
// évite les doublons
const exists = graph.edges.some(ed => ed.from === wire.fromNode && ed.fromPort === wire.fromPort && ed.to === nodeId && ed.toPort === portId);
if (!exists) {
setGraph(g => ({ ...g, edges: [...g.edges, { id: `e${Date.now()}`, from: wire.fromNode, fromPort: wire.fromPort, to: nodeId, toPort: portId }] }));
}
setWire(null);
forceUpdate();
};
// ── zoom molette
const onWheel = (e) => {
e.preventDefault();
const factor = e.deltaY < 0 ? 1.1 : 0.9;
setZoom(z => Math.min(2.5, Math.max(0.2, z * factor)));
};
// ── supprime nœud ou edge sélectionné
const onKeyDown = (e) => {
if ((e.key === "Delete" || e.key === "Backspace") && selected && e.target.tagName !== "INPUT" && e.target.tagName !== "SELECT") {
setGraph(g => ({
nodes: g.nodes.filter(n => n.id !== selected),
edges: g.edges.filter(ed => ed.from !== selected && ed.to !== selected),
}));
setSelected(null);
}
};
React.useEffect(() => {
window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown);
}, [selected, graph]);
// ── rendu des fils
const [, tick] = React.useReducer(x => x + 1, 0);
React.useEffect(() => { tick(); }, [graph.nodes, graph.edges]);
const wireColor = (portId) => portId === "true" ? "#00e08a" : portId === "false" ? "#e74c3c" : portId === "out1" || portId === "out2" || portId === "out3" ? "#7c5cff" : "#3b82f6";
return (
e.preventDefault()} onDrop={handleDrop}
onWheel={onWheel}
>
{/* grille de points */}
{/* conteneur transformé */}
{/* SVG fils */}
{/* nœuds */}
{graph.nodes.map(node => (
))}
{/* hint bas */}
{graph.nodes.length === 0 && (
⚡
Glisse des blocs depuis la palette
Connecte les ports pour créer ta séquence
)}
{/* zoom indicator */}
{Math.round(zoom * 100)}%
{/* hint delete */}
{selected && (
Suppr / Backspace pour supprimer · Clic sur un fil pour le couper
)}
);
}
// ── Éditeur complet (barre + canvas) ─────────────────────────
function AutoEditor({ auto, onSave, onCancel }) {
const [name, setName] = React.useState(auto?.name || "Nouvelle automation");
const [graph, setGraph] = React.useState(auto?.graph || { nodes: [], edges: [] });
const save = () => {
onSave({ id: auto?.id || String(Date.now()), name, graph, enabled: auto?.enabled ?? true, created: auto?.created || new Date().toISOString() });
};
return (
{/* barre supérieure */}
setName(e.target.value)}
style={{ flex: "none", width: 260, padding: "6px 12px", background: "#141720", border: "1px solid #1e2534", borderRadius: 7, color: "#e2e8f0", fontSize: 14, fontWeight: 600, outline: "none" }} />
{graph.nodes.length} nœuds · {graph.edges.length} connexions
{/* palette + canvas */}
);
}
// ── Liste des automations ─────────────────────────────────────
function AutoList({ onNew, onEdit }) {
const store = useAutoStore();
const autos = store.list();
return (
Automations
{autos.length === 0 ? (
⚡
Aucune automation
Crée ta première automation pour piloter tes iPhones automatiquement
) : (
{autos.map(a => {
const nodeCount = (a.graph?.nodes || []).length;
const edgeCount = (a.graph?.edges || []).length;
const trigger = (a.graph?.nodes || []).find(n => n.type.startsWith("trigger_"));
const trigDef = trigger ? blockDef(trigger.type) : null;
return (
onEdit(a)}
style={{ padding: "14px 18px", background: "var(--surface,#111)", border: "1px solid var(--border,#222)", borderRadius: 12, display: "flex", alignItems: "center", gap: 14, cursor: "pointer", transition: "border-color .15s" }}
onMouseEnter={e => e.currentTarget.style.borderColor = "var(--border-2,#333)"}
onMouseLeave={e => e.currentTarget.style.borderColor = "var(--border,#222)"}
>
{/* toggle */}
{ e.stopPropagation(); store.update(a.id, { enabled: !a.enabled }); }}
style={{ width: 36, height: 20, borderRadius: 10, background: a.enabled ? "#00e08a" : "var(--surface-3,#1a1a1a)", border: "1px solid " + (a.enabled ? "#00e08a" : "var(--border,#222)"), cursor: "pointer", display: "flex", alignItems: "center", padding: "0 3px", flex: "none", transition: "background .2s" }}>
{a.name}
{trigDef && {trigDef.label}}
{nodeCount} nœud{nodeCount !== 1 ? "s" : ""} · {edgeCount} connexion{edgeCount !== 1 ? "s" : ""}
e.stopPropagation()}>
);
})}
)}
);
}
// ── Composant principal exporté ───────────────────────────────
function AdminAutomation() {
const store = useAutoStore();
const [view, setView] = React.useState("list");
const [editing, setEditing] = React.useState(null);
if (view === "editor") {
return (
{ editing ? store.update(a.id, a) : store.add(a); setView("list"); }}
onCancel={() => setView("list")} />
);
}
return (
{ setEditing(null); setView("editor"); }} onEdit={a => { setEditing(a); setView("editor"); }} />
);
}