// Screen: MAP TỔNG / Workflow canvas // Drag nodes freely. Drag from output port to input port of another node to connect. // Drag library items onto canvas to create new nodes. const ScreenMap = ({ mapState, onUpdateMap }) => { const { nodes, edges, selectedId } = mapState; const stageRef = React.useRef(null); const [dragging, setDragging] = React.useState(null); // {id, offsetX, offsetY} const [drawing, setDrawing] = React.useState(null); // {fromId, fromSide, x, y} const [hoverPort, setHoverPort] = React.useState(null);// {id, side} const [mouse, setMouse] = React.useState({ x: 0, y: 0 }); const [optPrompt, setOptPrompt] = React.useState( 'Tối ưu cho ROAS > 3.5 trong 7 ngày. Ưu tiên persona Linh Minh & Tuấn Anh. Push creative angle "agency replacement".' ); // Stable references for handlers const stageRect = () => stageRef.current && stageRef.current.getBoundingClientRect(); const onMouseMove = (e) => { const rect = stageRect(); if (!rect) return; const x = e.clientX - rect.left; const y = e.clientY - rect.top; setMouse({ x, y }); if (dragging) { onUpdateMap({ nodes: nodes.map(n => n.id === dragging.id ? { ...n, x: x - dragging.offsetX, y: y - dragging.offsetY } : n ), }); } else if (drawing) { setDrawing(d => ({ ...d, x, y })); } }; const onMouseUp = () => { if (drawing && hoverPort && hoverPort.id !== drawing.fromId) { // create edge const exists = edges.some(e => (e.from === drawing.fromId && e.to === hoverPort.id) || (e.from === hoverPort.id && e.to === drawing.fromId)); if (!exists) { const from = drawing.fromSide === 'out' ? drawing.fromId : hoverPort.id; const to = drawing.fromSide === 'out' ? hoverPort.id : drawing.fromId; onUpdateMap({ edges: [...edges, { id: `e-${Date.now()}`, from, to }], }); } } setDragging(null); setDrawing(null); }; const onNodeMouseDown = (e, node) => { if (e.target.closest('.map-port')) return; e.stopPropagation(); const rect = stageRect(); onUpdateMap({ selectedId: node.id }); setDragging({ id: node.id, offsetX: e.clientX - rect.left - node.x, offsetY: e.clientY - rect.top - node.y, }); }; const onPortMouseDown = (e, node, side) => { e.stopPropagation(); const rect = stageRect(); setDrawing({ fromId: node.id, fromSide: side, x: e.clientX - rect.left, y: e.clientY - rect.top, }); }; const onStageMouseDown = (e) => { if (e.target === stageRef.current || e.target.classList.contains('canvas-bg')) { onUpdateMap({ selectedId: null }); } }; // Drop from library const onDrop = (e) => { e.preventDefault(); const kind = e.dataTransfer.getData('flow/kind'); const label = e.dataTransfer.getData('flow/label'); const sub = e.dataTransfer.getData('flow/sub'); if (!kind) return; const rect = stageRect(); const x = e.clientX - rect.left - 110; const y = e.clientY - rect.top - 35; const newNode = { id: `n-${Date.now()}`, kind, x, y, title: label, sub: sub || '—', meta: `${kind} · added`, }; onUpdateMap({ nodes: [...nodes, newNode], selectedId: newNode.id }); }; // Delete selected on Backspace React.useEffect(() => { const h = (e) => { if ((e.key === 'Backspace' || e.key === 'Delete') && selectedId && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') { e.preventDefault(); onUpdateMap({ nodes: nodes.filter(n => n.id !== selectedId), edges: edges.filter(e => e.from !== selectedId && e.to !== selectedId), selectedId: null, }); } }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, [selectedId, nodes, edges]); const portPos = (node, side) => { const w = node.kind === 'result' ? 270 : 220; return { x: node.x + (side === 'out' ? w : 0), y: node.y + (node.kind === 'result' ? 60 : 50), }; }; const bezier = (x1, y1, x2, y2) => { const dx = Math.max(50, Math.abs(x2 - x1) * 0.5); return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`; }; const selectedNode = nodes.find(n => n.id === selectedId); return (
{/* Library */}
Saved files Kéo thả vào canvas để dùng
{['product', 'persona', 'content', 'ads', 'data'].map(kind => { const items = MAP_LIBRARY.filter(l => l.kind === kind); const conf = NODE_KIND[kind]; const labels = { product: 'Sản phẩm', persona: 'Chân dung KH', content: 'Content plans', ads: 'Digital Ads', data: 'Ads data (CSV)', }; return (
● {labels[kind]}
{items.map(item => (
{ e.dataTransfer.setData('flow/kind', item.kind); e.dataTransfer.setData('flow/label', item.label); e.dataTransfer.setData('flow/sub', item.sub); e.dataTransfer.effectAllowed = 'copy'; }} >
{item.label} {item.sub}
))}
); })}
{/* Stage */}
e.preventDefault()} onDrop={onDrop} > {/* Top right: Run */}
setOptPrompt(e.target.value)} />
Run workflow
{/* SVG layer for connectors */} {edges.map(edge => { const from = nodes.find(n => n.id === edge.from); const to = nodes.find(n => n.id === edge.to); if (!from || !to) return null; const a = portPos(from, 'out'); const b = portPos(to, 'in'); return ( ); })} {drawing && (() => { const from = nodes.find(n => n.id === drawing.fromId); if (!from) return null; const a = portPos(from, drawing.fromSide); return ( ); })()} {/* Nodes */} {nodes.map(node => ( onNodeMouseDown(e, node)} onPortMouseDown={onPortMouseDown} onPortEnter={(side) => setHoverPort({ id: node.id, side })} onPortLeave={() => setHoverPort(null)} hoverPort={hoverPort} /> ))} {nodes.length === 0 && (
Canvas trống
Kéo saved file từ sidebar trái để bắt đầu
)} {/* Selected node detail */} {selectedNode && (
{selectedNode.title}
{selectedNode.sub}
{selectedNode.meta}
{selectedNode.kind !== 'result' && (
AI Model
)}
Style
{STYLE_PRESETS.filter(s => s.id !== 'custom').map(s => ( ))}
Prompt overlay cho node