// 1Radar — Whiteboard (Miro-style infinite canvas) // Pan/zoom, sticky notes, text blocks, shapes, frames, pen, images, connectors. // Connectors: hover any element to reveal 4 side-ports, drag from port to port. // Pen strokes: selectable, movable, editable like other elements. const WB_STICKY_PALETTE = ['#FFCB5C','#FF8FA3','#A5D8FF','#B7F0AD','#F3A0F9','#FFD6B0','#FFFFFF','#1A1A2E']; const WB_SHAPE_PALETTE = ['#335CFF','#7B5BFF','#10B981','#F59E0B','#E5484D','#F97316','#06B6D4','#EC4899','#FFFFFF','#1A1A2E']; const WB_PEN_PALETTE = ['#1A1A2E','#335CFF','#E5484D','#10B981','#F59E0B','#7B5BFF','#F97316','#FFFFFF']; const WB_TEXT_PALETTE = ['#1A1A2E','#335CFF','#E5484D','#10B981','#F59E0B','#7B5BFF','#94A3B8','#FFFFFF']; const WB_FRAME_PALETTE = ['#335CFF','#7B5BFF','#10B981','#F59E0B','#E5484D','#F97316','#EC4899','#94A3B8']; let _wbIdCtr = 1; const wbId = () => `w${_wbIdCtr++}`; const INITIAL_WB_ELEMENTS = [ { id:'wi0', type:'frame', x:60, y:80, w:500, h:340, title:'Campaign Brief', color:'#335CFF' }, { id:'wi1', type:'sticky', x:100, y:140, w:185, h:145, text:'Target audience:\nWomen 25–40, health-conscious urban lifestyle', color:'#FFCB5C', size:13, align:'left' }, { id:'wi2', type:'sticky', x:310, y:140, w:200, h:145, text:'Key message:\n"Feel good in your skin — naturally"', color:'#A5D8FF', size:13, align:'left' }, { id:'wi3', type:'sticky', x:100, y:310, w:410, h:80, text:'Budget: $15k/month · Channels: Meta + TikTok · Launch: Q2', color:'#B7F0AD', size:13, align:'left' }, { id:'wi4', type:'text', x:630, y:90, w:280, h:46, text:'Mood Board', size:30, bold:true, color:'#1A1A2E', align:'left' }, { id:'wi5', type:'shape', x:630, y:155, w:120, h:120, shape:'rect', fill:'#335CFF', stroke:'none', opacity:1 }, { id:'wi6', type:'shape', x:770, y:155, w:120, h:120, shape:'circle', fill:'#10B981', stroke:'none', opacity:1 }, { id:'wi7', type:'shape', x:630, y:295, w:120, h:120, shape:'diamond', fill:'#F59E0B', stroke:'none', opacity:1 }, { id:'wi8', type:'shape', x:770, y:295, w:120, h:120, shape:'triangle', fill:'#E5484D', stroke:'none', opacity:1 }, { id:'wi9', type:'sticky', x:60, y:500, w:190, h:155, text:'Competitor A:\n→ Too formal\n→ Weak UGC\n→ No storytelling', color:'#FFD6B0', size:12, align:'left' }, { id:'wi10',type:'sticky', x:280, y:500, w:190, h:155, text:'Competitor B:\n→ Good hooks\n→ Strong CTA\n→ High spend', color:'#F3A0F9', size:12, align:'left' }, { id:'wi11',type:'sticky', x:500, y:500, w:190, h:155, text:'Our advantage:\n→ Authentic UGC\n→ Strong brand story\n→ Better targeting', color:'#FFCB5C', size:12, align:'left' }, { id:'wi12',type:'text', x:60, y:685, w:200, h:36, text:'Next Steps', size:20, bold:true, color:'#1A1A2E', align:'left' }, { id:'wi13',type:'text', x:60, y:725, w:620, h:30, text:'1. Finalize creative brief · 2. Book UGC creators · 3. Set up Meta campaigns · 4. Review on May 30', size:13, bold:false, color:'#64748B', align:'left' }, ]; // Connectors now carry fromPort / toPort ('top'|'right'|'bottom'|'left') const INITIAL_WB_CONNECTORS = [ { id:'wc1', fromId:'wi1', fromPort:'right', toId:'wi2', toPort:'left', style:'arrow', color:'#94A3B8' }, { id:'wc2', fromId:'wi0', fromPort:'bottom', toId:'wi9', toPort:'top', style:'dashed', color:'#94A3B8' }, { id:'wc3', fromId:'wi0', fromPort:'bottom', toId:'wi10', toPort:'top', style:'dashed', color:'#94A3B8' }, { id:'wc4', fromId:'wi0', fromPort:'bottom', toId:'wi11', toPort:'top', style:'dashed', color:'#94A3B8' }, ]; // ───────────────────────────────────────────────────────────────────────────── const MINI_W = 168, MINI_H = 105; const SNAP_PX = 6; const SIDES = ['top','right','bottom','left']; // Port position on an element (canvas coords) const portPos = (el, side) => { const cx = el.x + el.w / 2, cy = el.y + el.h / 2; switch (side) { case 'top': return { x: cx, y: el.y }; case 'right': return { x: el.x+el.w, y: cy }; case 'bottom': return { x: cx, y: el.y+el.h }; case 'left': return { x: el.x, y: cy }; default: return { x: cx, y: cy }; } }; // Control-point direction per port side (unit vector) const portDir = (side) => { switch (side) { case 'top': return { dx: 0, dy: -1 }; case 'right': return { dx: 1, dy: 0 }; case 'bottom': return { dx: 0, dy: 1 }; case 'left': return { dx: -1, dy: 0 }; default: return { dx: 1, dy: 0 }; } }; // Bounding box for a pen stroke const penBBox = (el) => { if (!el.points?.length) return { x:0, y:0, w:0, h:0 }; const xs = el.points.map(p => p.x), ys = el.points.map(p => p.y); const x = Math.min(...xs), y = Math.min(...ys); return { x, y, w: Math.max(...xs)-x, h: Math.max(...ys)-y }; }; // ── Custom range slider (matches workflow/canvas design) ───────────────────── const WbSlider = ({ value, min=0, max=100, step=1, unit='', onChange, onCommit }) => { const pct = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)); return (
onChange(parseFloat(e.target.value))} onMouseUp={onCommit} style={{ flex:1, height:4, WebkitAppearance:'none', appearance:'none', border:'none', background:`linear-gradient(to right,var(--accent) ${pct}%,var(--border) ${pct}%)`, borderRadius:999, outline:'none', cursor:'pointer', }}/> {step<1?value.toFixed(1):Math.round(value)}{unit}
); }; // ── Saved Ads side panel ───────────────────────────────────────────────────── const WbAdsPanel = ({ onAdd, onClose }) => { const [search, setSearch] = React.useState(''); const [openFolders, setOpenFolders] = React.useState(new Set(['all'])); const folders = (window.SAVE_FOLDERS_V3 || []).filter(f => f.id !== 'trash'); const allAds = window.ADS_V3 || []; const toggle = (id) => setOpenFolders(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); const getFolderAds = (folderId) => { if (folderId === 'all') return allAds; const fi = folders.findIndex(f => f.id === folderId); const seed = (fi + 1) * 7; return allAds.filter((_, i) => (i * seed) % 11 < 5); }; const filterAds = (ads) => !search ? ads : ads.filter(a => a.brand.toLowerCase().includes(search.toLowerCase()) || (a.headline || '').toLowerCase().includes(search.toLowerCase()) ); const AdGrid = ({ folderId }) => { const ads = filterAds(getFolderAds(folderId)); if (!ads.length) return (
No ads found
); return (
{ads.map(ad => (
onAdd(ad)} title={`${ad.brand} — ${ad.headline || ad.primaryText}`} style={{borderRadius:7,overflow:'hidden',border:'1px solid var(--border)', cursor:'pointer',background:'var(--bg-soft)',transition:'transform 80ms,box-shadow 80ms'}} onMouseEnter={e=>{e.currentTarget.style.transform='scale(1.04)';e.currentTarget.style.boxShadow='0 4px 14px rgba(0,0,0,0.13)';}} onMouseLeave={e=>{e.currentTarget.style.transform='';e.currentTarget.style.boxShadow='';}}> {ad.brand}
{ad.brand}
{ad.type} · {ad.platform}
))}
); }; function FolderRow({ folder, depth }) { const isOpen = openFolders.has(folder.id); const subFolders = folders.filter(f => f.parentId === folder.id); return ( <> {isOpen && ( <> {subFolders.map(sf => )} )} ); } const sysAll = folders.find(f => f.id === 'all'); const rootFolders = folders.filter(f => !f.system && !f.parentId); const isAllOpen = openFolders.has('all'); return (
e.stopPropagation()} style={{position:'absolute',left:58,top:0,bottom:0,width:272, background:'var(--bg-surface)',borderRight:'1px solid var(--border)', display:'flex',flexDirection:'column',zIndex:55, boxShadow:'4px 0 24px rgba(0,0,0,0.10)'}}> {/* Header */}
Saved Ads
{/* Search */}
setSearch(e.target.value)} placeholder="Search brand or headline…" style={{flex:1,background:'none',border:'none',outline:'none', fontSize:12,color:'var(--text)',minWidth:0}}/> {search && ( )}
{/* Folder tree */}
{/* All saved */} {sysAll && ( <> {isAllOpen && } )} {/* User folder tree */} {rootFolders.length > 0 && (
{rootFolders.map(f => )}
)}
{/* Footer hint */}
Click an ad to place it on the canvas
); }; // ───────────────────────────────────────────────────────────────────────────── const WhiteboardV1 = () => { const [elements, setElements] = React.useState(INITIAL_WB_ELEMENTS); const [connectors, setConnectors] = React.useState(INITIAL_WB_CONNECTORS); const [selected, setSelected] = React.useState(new Set()); const [zoom, setZoom] = React.useState(0.85); const [pan, setPan] = React.useState({ x: 60, y: 20 }); const [tool, setTool] = React.useState('select'); const [shapeType, setShapeType] = React.useState('rect'); const [editingId, setEditingId] = React.useState(null); const [panning, setPanning] = React.useState(false); const [boxSel, setBoxSel] = React.useState(null); const [drawing, setDrawing] = React.useState(null); // { fromId, fromPort } while dragging a new connector from a port const [connecting, setConnecting] = React.useState(null); const [selectedConns, setSelectedConns] = React.useState(new Set()); const [editingConnId, setEditingConnId] = React.useState(null); const [editLabel, setEditLabel] = React.useState(''); // mouse position in viewport-relative coords for in-progress connector const [connMouse, setConnMouse] = React.useState({ x:0, y:0 }); // which element is hovered (to show its 4 ports) const [hoveredElId, setHoveredElId] = React.useState(null); const [stickyColor, setStickyColor] = React.useState('#FFCB5C'); const [shapeColor, setShapeColor] = React.useState('#335CFF'); const [penColor, setPenColor] = React.useState('#1A1A2E'); const [penWidth, setPenWidth] = React.useState(2.5); const [textColor, setTextColor] = React.useState('#1A1A2E'); const [showShapePicker, setShowShapePicker] = React.useState(false); const [guides, setGuides] = React.useState({ x:null, y:null }); const [showMini, setShowMini] = React.useState(true); const [showAdsPanel, setShowAdsPanel] = React.useState(false); const viewportRef = React.useRef(null); const spaceRef = React.useRef(false); const elementsRef = React.useRef(elements); const connectorsRef = React.useRef(connectors); const connectingRef = React.useRef(null); // mirrors connecting for port handlers const connCompletedRef = React.useRef(false); // did a port mouseup complete the conn? const imgInputRef = React.useRef(null); React.useEffect(() => { elementsRef.current = elements; }, [elements]); React.useEffect(() => { connectorsRef.current = connectors; }, [connectors]); React.useEffect(() => { connectingRef.current = connecting; }, [connecting]); // ── Undo / Redo ───────────────────────────────────────────────────────────── const histRef = React.useRef([{ elements: INITIAL_WB_ELEMENTS, connectors: INITIAL_WB_CONNECTORS }]); const histIdx = React.useRef(0); const pushHist = (els, cons) => { const h = histRef.current.slice(0, histIdx.current + 1); h.push({ elements: els, connectors: cons }); if (h.length > 80) h.shift(); histRef.current = h; histIdx.current = h.length - 1; }; const undoFn = React.useRef(null); const redoFn = React.useRef(null); undoFn.current = () => { if (histIdx.current <= 0) return; histIdx.current--; const s = histRef.current[histIdx.current]; setElements(s.elements); setConnectors(s.connectors); setSelected(new Set()); setEditingId(null); }; redoFn.current = () => { if (histIdx.current >= histRef.current.length - 1) return; histIdx.current++; const s = histRef.current[histIdx.current]; setElements(s.elements); setConnectors(s.connectors); setSelected(new Set()); setEditingId(null); }; // ── Coordinate helpers ─────────────────────────────────────────────────────── const toCanvas = React.useCallback((sx, sy) => { const rect = viewportRef.current?.getBoundingClientRect() || { left:0, top:0 }; return { x: (sx - rect.left - pan.x) / zoom, y: (sy - rect.top - pan.y) / zoom }; }, [pan, zoom]); // Canvas coords → viewport-relative const toViewport = (cx, cy) => ({ x: cx * zoom + pan.x, y: cy * zoom + pan.y }); // ── Wheel zoom ─────────────────────────────────────────────────────────────── React.useEffect(() => { const el = viewportRef.current; if (!el) return; const handler = (e) => { e.preventDefault(); const rect = el.getBoundingClientRect(); const mx = e.clientX - rect.left, my = e.clientY - rect.top; const factor = e.deltaY > 0 ? 0.9 : 1.11; setZoom(z => { const nz = Math.min(5, Math.max(0.08, z * factor)); const scale = nz / z; setPan(p => ({ x: mx - (mx - p.x)*scale, y: my - (my - p.y)*scale })); return nz; }); }; el.addEventListener('wheel', handler, { passive: false }); return () => el.removeEventListener('wheel', handler); }, []); // ── Space key ──────────────────────────────────────────────────────────────── React.useEffect(() => { const dn = (e) => { if (e.code !== 'Space') return; const t = e.target?.tagName?.toLowerCase(); if (t === 'input' || t === 'textarea' || e.target?.isContentEditable) return; if (!spaceRef.current) spaceRef.current = true; e.preventDefault(); }; const up = (e) => { if (e.code === 'Space') spaceRef.current = false; }; window.addEventListener('keydown', dn); window.addEventListener('keyup', up); return () => { window.removeEventListener('keydown', dn); window.removeEventListener('keyup', up); }; }, []); // ── Keyboard shortcuts ─────────────────────────────────────────────────────── React.useEffect(() => { const onKey = (e) => { const tag = e.target?.tagName?.toLowerCase(); if (tag === 'input' || tag === 'textarea' || e.target?.isContentEditable) return; if ((e.metaKey||e.ctrlKey) && e.key==='z' && !e.shiftKey) { e.preventDefault(); undoFn.current(); return; } if ((e.metaKey||e.ctrlKey) && (e.key==='y' || (e.key==='z' && e.shiftKey))) { e.preventDefault(); redoFn.current(); return; } if ((e.metaKey||e.ctrlKey) && e.key==='a') { e.preventDefault(); setSelected(new Set(elementsRef.current.map(el=>el.id))); return; } if ((e.metaKey||e.ctrlKey) && e.key==='d') { e.preventDefault(); const sel=[...selected]; if (!sel.length) return; const copies = elementsRef.current.filter(el=>sel.includes(el.id)) .map(el => ({ ...el, id:wbId(), x:el.x+24, y:el.y+24, ...(el.type==='pen' ? { points: el.points.map(p=>({...p, x:p.x+24, y:p.y+24})) } : {}) })); const newEls = [...elementsRef.current, ...copies]; setElements(newEls); pushHist(newEls, connectorsRef.current); setSelected(new Set(copies.map(c=>c.id))); return; } if (e.key==='Escape') { if (connecting) { setConnecting(null); return; } setTool('select'); setSelected(new Set()); setSelectedConns(new Set()); setEditingId(null); return; } if ((e.key==='Delete'||e.key==='Backspace') && (selected.size || selectedConns.size)) { const ids = selected; const connIds = selectedConns; const newEls = elementsRef.current.filter(el => !ids.has(el.id)); const newCons = connectorsRef.current.filter(c => !ids.has(c.fromId) && !ids.has(c.toId) && !connIds.has(c.id) ); setElements(newEls); setConnectors(newCons); pushHist(newEls, newCons); setSelected(new Set()); setSelectedConns(new Set()); return; } if (!e.metaKey && !e.ctrlKey && !e.altKey) { if (e.key==='v'||e.key==='V') setTool('select'); if (e.key==='h'||e.key==='H') setTool('grab'); if (e.key==='s'||e.key==='S') setTool('sticky'); if (e.key==='t'||e.key==='T') setTool('text'); if (e.key==='r'||e.key==='R') { setTool('shape'); setShapeType('rect'); } if (e.key==='p'||e.key==='P') setTool('pen'); if (e.key==='f'||e.key==='F') setTool('frame'); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [selected, connecting, selectedConns]); // ── Snap helpers ───────────────────────────────────────────────────────────── const snapToOthers = (x, y, w, h, excludeSet) => { const others = elementsRef.current.filter(e => !excludeSet.has(e.id) && e.type!=='pen' && e.w && e.h); let nx=x, ny=y, gx=null, gy=null, bestX=SNAP_PX+1, bestY=SNAP_PX+1; for (const o of others) { for (const [a,b] of [[x,o.x],[x+w,o.x],[x,o.x+o.w],[x+w,o.x+o.w],[x+w/2,o.x+o.w/2]]) { const d=Math.abs(a-b); if (d { const all = elementsRef.current; const vp = viewportRef.current?.getBoundingClientRect(); if (!vp || !all.length) { setZoom(1); setPan({x:0,y:0}); return; } const bboxes = all.map(e => e.type==='pen' ? penBBox(e) : {x:e.x,y:e.y,w:e.w||0,h:e.h||0}); const xs = bboxes.flatMap(b=>[b.x,b.x+b.w]); const ys = bboxes.flatMap(b=>[b.y,b.y+b.h]); const bx=Math.min(...xs), by=Math.min(...ys), bw=Math.max(...xs)-bx, bh=Math.max(...ys)-by; const z = Math.max(0.08, Math.min((vp.width-80)/(bw||1),(vp.height-80)/(bh||1),1.5)); setZoom(z); setPan({ x:(vp.width-bw*z)/2-bx*z, y:(vp.height-bh*z)/2-by*z }); }; // ── Element mutations ──────────────────────────────────────────────────────── const addEl = (el) => { const newEls = [...elementsRef.current, el]; setElements(newEls); pushHist(newEls, connectorsRef.current); }; const patchEl = (id, patch) => setElements(es => es.map(e => e.id===id ? {...e,...patch} : e)); const patchAndPush = (id, patch) => { const newEls = elementsRef.current.map(e => e.id===id ? {...e,...patch} : e); setElements(newEls); pushHist(newEls, connectorsRef.current); }; const addAdToCanvas = (ad) => { const vp = viewportRef.current?.getBoundingClientRect() || { width: 900, height: 600 }; const p = toCanvas( vp.width / 2 + (Math.random() * 60 - 30), vp.height / 2 + (Math.random() * 60 - 30), ); const id = wbId(); addEl({ id, type: 'ad', x: p.x - 110, y: p.y - 160, w: 220, h: 310, ad }); setSelected(new Set([id])); }; // ── Drag elements ──────────────────────────────────────────────────────────── const startDrag = (e, id) => { if (e.button!==0 || spaceRef.current || tool==='grab') return; if (editingId) return; setSelectedConns(new Set()); const wasSel = selected.has(id); if (!wasSel) { if (!e.shiftKey) setSelected(new Set([id])); else setSelected(s => { const n=new Set(s); n.has(id)?n.delete(id):n.add(id); return n; }); } const currentSel = wasSel ? new Set(selected) : new Set([id]); const startMX=e.clientX, startMY=e.clientY; // Store starting positions AND pen points const startPos = new Map( elementsRef.current.filter(el=>currentSel.has(el.id)).map(el => [ el.id, el.type==='pen' ? { penPoints: el.points.map(p=>({...p})) } : { x:el.x, y:el.y } ]) ); let moved = false; // Accumulated canvas-space displacement from auto-scroll panning let autoPanX = 0, autoPanY = 0; let lastEv = { clientX: e.clientX, clientY: e.clientY }; let rafId = null; // Apply positions given current mouse + accumulated auto-pan const applyPositions = (evX, evY) => { const dx = (evX - startMX) / zoom + autoPanX; const dy = (evY - startMY) / zoom + autoPanY; // Single-element snap (only for non-pen) if (currentSel.size===1) { const el = elementsRef.current.find(x=>x.id===id); if (el && el.type!=='pen') { const sp = startPos.get(id); const { x:sx, y:sy, gx, gy } = snapToOthers(sp.x+dx, sp.y+dy, el.w, el.h, currentSel); setGuides({ x:gx, y:gy }); const snapDx=sx-sp.x, snapDy=sy-sp.y; setElements(es => es.map(el2 => { const sp2=startPos.get(el2.id); if(!sp2) return el2; if (el2.id===id) return {...el2, x:sx, y:sy}; return el2.type==='pen' ? {...el2, points: sp2.penPoints.map(p=>({x:p.x+snapDx, y:p.y+snapDy}))} : {...el2, x:sp2.x+snapDx, y:sp2.y+snapDy}; })); return; } } setGuides({ x:null, y:null }); setElements(es => es.map(el2 => { const sp=startPos.get(el2.id); if(!sp) return el2; return el2.type==='pen' ? {...el2, points: sp.penPoints.map(p=>({x:p.x+dx, y:p.y+dy}))} : {...el2, x:sp.x+dx, y:sp.y+dy}; })); }; // Edge auto-scroll: speed proportional to proximity to edge const EDGE_MARGIN = 64, MAX_SPEED = 14; const edgeSpeed = (pos, lo, hi) => { if (pos < lo + EDGE_MARGIN) return MAX_SPEED * (1 - (pos - lo) / EDGE_MARGIN); if (pos > hi - EDGE_MARGIN) return -MAX_SPEED * (1 - (hi - pos) / EDGE_MARGIN); return 0; }; const autoScroll = () => { const vpRect = viewportRef.current?.getBoundingClientRect(); if (!vpRect) { rafId = null; return; } const dpx = edgeSpeed(lastEv.clientX, vpRect.left, vpRect.right); const dpy = edgeSpeed(lastEv.clientY, vpRect.top, vpRect.bottom); if (dpx !== 0 || dpy !== 0) { // Pan the canvas (screen px), and accumulate the inverse in canvas coords // so the element follows the cursor into the newly revealed area autoPanX -= dpx / zoom; autoPanY -= dpy / zoom; setPan(p => ({ x: p.x + dpx, y: p.y + dpy })); applyPositions(lastEv.clientX, lastEv.clientY); rafId = requestAnimationFrame(autoScroll); } else { rafId = null; } }; const onMove = (ev) => { lastEv = ev; if (!moved && Math.abs(ev.clientX-startMX)<2 && Math.abs(ev.clientY-startMY)<2) return; moved = true; applyPositions(ev.clientX, ev.clientY); // Kick off auto-scroll loop if mouse is near a viewport edge const vpRect = viewportRef.current?.getBoundingClientRect(); if (vpRect) { const near = ev.clientX < vpRect.left + EDGE_MARGIN || ev.clientX > vpRect.right - EDGE_MARGIN || ev.clientY < vpRect.top + EDGE_MARGIN || ev.clientY > vpRect.bottom - EDGE_MARGIN; if (near && !rafId) rafId = requestAnimationFrame(autoScroll); } }; const onUp = () => { if (rafId) { cancelAnimationFrame(rafId); rafId = null; } setGuides({x:null,y:null}); if (moved) pushHist(elementsRef.current, connectorsRef.current); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); }; window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); e.stopPropagation(); }; // ── Resize ─────────────────────────────────────────────────────────────────── const startResize = (e, id, handle) => { e.stopPropagation(); e.preventDefault(); const el = elementsRef.current.find(x=>x.id===id); if(!el) return; const startX=e.clientX, startY=e.clientY; const orig={x:el.x,y:el.y,w:el.w,h:el.h}; const onMove = (ev) => { const dx=(ev.clientX-startX)/zoom, dy=(ev.clientY-startY)/zoom; let {x,y,w,h}=orig; if(handle.includes('e')) w=Math.max(60,orig.w+dx); if(handle.includes('s')) h=Math.max(30,orig.h+dy); if(handle.includes('w')){x=orig.x+dx;w=Math.max(60,orig.w-dx);} if(handle.includes('n')){y=orig.y+dy;h=Math.max(30,orig.h-dy);} patchEl(id,{x,y,w,h}); }; const onUp = () => { pushHist(elementsRef.current, connectorsRef.current); window.removeEventListener('mousemove',onMove); window.removeEventListener('mouseup',onUp); }; window.addEventListener('mousemove',onMove); window.addEventListener('mouseup',onUp); }; // ── Port connection handlers ───────────────────────────────────────────────── const onPortMD = (elId, side, e) => { e.stopPropagation(); e.preventDefault(); connCompletedRef.current = false; setConnecting({ fromId:elId, fromPort:side }); const rect = viewportRef.current?.getBoundingClientRect()||{left:0,top:0}; setConnMouse({ x:e.clientX-rect.left, y:e.clientY-rect.top }); // Cancel the connection if the mouse is released anywhere except a port const onUp = () => { if (!connCompletedRef.current) setConnecting(null); window.removeEventListener('mouseup', onUp); }; window.addEventListener('mouseup', onUp); }; const onPortMU = (elId, side, e) => { e.stopPropagation(); const conn = connectingRef.current; if (!conn) return; if (conn.fromId===elId) { setConnecting(null); return; } connCompletedRef.current = true; const newCon = { id:wbId(), fromId:conn.fromId, fromPort:conn.fromPort, toId:elId, toPort:side, style:'arrow', color:'#94A3B8', }; const newCons = [...connectorsRef.current, newCon]; setConnectors(newCons); pushHist(elementsRef.current, newCons); setConnecting(null); }; // ── Canvas mouse down ──────────────────────────────────────────────────────── const onCanvasMD = (e) => { if (e.button!==0 && e.button!==1) return; if (editingId) { setEditingId(null); return; } const wantPan = e.button===1 || spaceRef.current || tool==='grab'; if (wantPan) { e.preventDefault(); setPanning(true); const ox=pan.x,oy=pan.y,sx=e.clientX,sy=e.clientY; const onMove=(ev)=>setPan({x:ox+ev.clientX-sx,y:oy+ev.clientY-sy}); const onUp=()=>{setPanning(false);window.removeEventListener('mousemove',onMove);window.removeEventListener('mouseup',onUp);}; window.addEventListener('mousemove',onMove); window.addEventListener('mouseup',onUp); return; } if (e.button!==0) return; const p = toCanvas(e.clientX, e.clientY); if (tool==='pen') { e.preventDefault(); const id=wbId(); setElements(es=>[...es,{id,type:'pen',points:[p],color:penColor,width:penWidth}]); const onMove=(ev)=>{ const pp=toCanvas(ev.clientX,ev.clientY); setElements(es=>es.map(el=>el.id===id?{...el,points:[...el.points,pp]}:el)); }; const onUp=()=>{ pushHist(elementsRef.current,connectorsRef.current); window.removeEventListener('mousemove',onMove); window.removeEventListener('mouseup',onUp); }; window.addEventListener('mousemove',onMove); window.addEventListener('mouseup',onUp); return; } if (tool==='sticky') { e.preventDefault(); const id=wbId(); const el={id,type:'sticky',x:p.x-90,y:p.y-70,w:185,h:145,text:'',color:stickyColor,size:13,align:'left'}; addEl(el); setSelected(new Set([id])); setEditingId(id); setTool('select'); return; } if (tool==='text') { e.preventDefault(); const id=wbId(); const el={id,type:'text',x:p.x-100,y:p.y-18,w:220,h:36,text:'',size:18,bold:false,color:textColor,align:'left'}; addEl(el); setSelected(new Set([id])); setEditingId(id); setTool('select'); return; } if (tool==='shape') { e.preventDefault(); const start={...p}; setDrawing({kind:'shape',x:start.x,y:start.y,w:0,h:0}); const onMove=(ev)=>{const pp=toCanvas(ev.clientX,ev.clientY);setDrawing({kind:'shape',x:Math.min(start.x,pp.x),y:Math.min(start.y,pp.y),w:Math.abs(pp.x-start.x),h:Math.abs(pp.y-start.y)});}; const onUp=(ev)=>{ const pp=toCanvas(ev.clientX,ev.clientY);const w=Math.abs(pp.x-start.x),h=Math.abs(pp.y-start.y); if(w>10&&h>10){const id=wbId();addEl({id,type:'shape',x:Math.min(start.x,pp.x),y:Math.min(start.y,pp.y),w,h,shape:shapeType,fill:'none',stroke:'#335CFF',opacity:1});setSelected(new Set([id]));} setDrawing(null);setTool('select');window.removeEventListener('mousemove',onMove);window.removeEventListener('mouseup',onUp); }; window.addEventListener('mousemove',onMove);window.addEventListener('mouseup',onUp); return; } if (tool==='frame') { e.preventDefault(); const start={...p}; setDrawing({kind:'frame',x:start.x,y:start.y,w:0,h:0}); const onMove=(ev)=>{const pp=toCanvas(ev.clientX,ev.clientY);setDrawing({kind:'frame',x:Math.min(start.x,pp.x),y:Math.min(start.y,pp.y),w:Math.abs(pp.x-start.x),h:Math.abs(pp.y-start.y)});}; const onUp=(ev)=>{ const pp=toCanvas(ev.clientX,ev.clientY);const w=Math.abs(pp.x-start.x),h=Math.abs(pp.y-start.y); if(w>40&&h>40){const id=wbId();const n=elementsRef.current.filter(e=>e.type==='frame').length+1;addEl({id,type:'frame',x:Math.min(start.x,pp.x),y:Math.min(start.y,pp.y),w,h,title:`Frame ${n}`,color:'#335CFF'});setSelected(new Set([id]));} setDrawing(null);setTool('select');window.removeEventListener('mousemove',onMove);window.removeEventListener('mouseup',onUp); }; window.addEventListener('mousemove',onMove);window.addEventListener('mouseup',onUp); return; } // Box select if (tool==='select'||tool==='grab') { const additive=e.shiftKey; const baseSel=additive?new Set(selected):new Set(); if(!additive){ setSelected(new Set()); setSelectedConns(new Set()); } setBoxSel({x1:p.x,y1:p.y,x2:p.x,y2:p.y}); const onMove=(ev)=>{const pp=toCanvas(ev.clientX,ev.clientY);setBoxSel(b=>b?{...b,x2:pp.x,y2:pp.y}:null);}; const onUp=(ev)=>{ const ep=toCanvas(ev.clientX,ev.clientY); const moved=Math.abs(ev.clientX-e.clientX)>4||Math.abs(ev.clientY-e.clientY)>4; if(moved){ const xMin=Math.min(p.x,ep.x),xMax=Math.max(p.x,ep.x); const yMin=Math.min(p.y,ep.y),yMax=Math.max(p.y,ep.y); const hit=elementsRef.current.filter(el=>{ const bb=el.type==='pen'?penBBox(el):{x:el.x,y:el.y,w:el.w||0,h:el.h||0}; return bb.xxMin&&bb.yyMin; }).map(el=>el.id); const next=new Set(baseSel);hit.forEach(id=>next.add(id));setSelected(next); } setBoxSel(null);window.removeEventListener('mousemove',onMove);window.removeEventListener('mouseup',onUp); }; window.addEventListener('mousemove',onMove);window.addEventListener('mouseup',onUp); } }; // ── Connector bezier path ──────────────────────────────────────────────────── const connBezier = (A, fromPort, B, toPort) => { const dx = B.x - A.x, dy = B.y - A.y; const dist = Math.max(1, Math.sqrt(dx*dx + dy*dy)); const dA = portDir(fromPort||'right'), dB = portDir(toPort||'left'); // Alignment of each port direction with the A→B vector (−1 = opposing, +1 = aligned) const alignA = (dA.dx*dx + dA.dy*dy) / dist; const alignB = (-dB.dx*dx - dB.dy*dy) / dist; // Base is purely proportional — NO fixed minimum. // A fixed min (e.g. 60px) causes control points to cross each other on close elements → S-loop. // With base = dist*0.42, the max chord usage is 2*0.42*dist = 0.84*dist < dist → never cross. const base = dist * 0.42; const lenA = Math.max(8, base * Math.max(0.12, (alignA + 1) / 2)); const lenB = Math.max(8, base * Math.max(0.12, (alignB + 1) / 2)); const cp1 = { x:A.x+dA.dx*lenA, y:A.y+dA.dy*lenA }; const cp2 = { x:B.x+dB.dx*lenB, y:B.y+dB.dy*lenB }; const mid = { x:(A.x+3*cp1.x+3*cp2.x+B.x)/8, y:(A.y+3*cp1.y+3*cp2.y+B.y)/8 }; return { d:`M ${A.x} ${A.y} C ${cp1.x} ${cp1.y}, ${cp2.x} ${cp2.y}, ${B.x} ${B.y}`, cp1, cp2, mid }; }; const deleteConn = (id) => { const newCons = connectorsRef.current.filter(c => c.id !== id); setConnectors(newCons); pushHist(elementsRef.current, newCons); setSelectedConns(new Set()); setEditingConnId(null); }; const patchConn = (id, patch) => { const newCons = connectorsRef.current.map(c => c.id===id ? {...c,...patch} : c); setConnectors(newCons); pushHist(elementsRef.current, newCons); }; const startConnLabelEdit = (id, current) => { setEditingConnId(id); setEditLabel(current || ''); setSelectedConns(new Set([id])); setSelected(new Set()); }; const saveConnLabel = (id) => { patchConn(id, { label: editLabel.trim() || undefined }); setEditingConnId(null); setSelectedConns(new Set([id])); // keep connector selected → toolbar stays visible }; // ── Render connectors ──────────────────────────────────────────────────────── const renderConnectors = () => connectors.map(con => { const fromEl = elementsRef.current.find(e=>e.id===con.fromId); const toEl = elementsRef.current.find(e=>e.id===con.toId); if (!fromEl || !toEl) return null; const A = portPos(fromEl, con.fromPort||'right'); const B = portPos(toEl, con.toPort||'left'); const { d, cp1, cp2, mid } = connBezier(A, con.fromPort, B, con.toPort); const angEnd = Math.atan2(B.y-cp2.y, B.x-cp2.x)*180/Math.PI; const angStart = Math.atan2(A.y-cp1.y, A.x-cp1.x)*180/Math.PI; const isConnSel = selectedConns.has(con.id); const isElSel = selected.has(con.fromId) || selected.has(con.toId); const isSel = isConnSel || isElSel; const isEditing = editingConnId === con.id; const c = con.color || '#94A3B8'; // Style props (with defaults) const lineStyle = con.lineStyle || 'solid'; const endArrow = con.endArrow !== undefined ? con.endArrow : 'arrow'; const startArrow = con.startArrow || 'none'; const sw = con.strokeWidth || 2; const dashArr = lineStyle==='dashed' ? '10,6' : lineStyle==='dotted' ? '2,6' : undefined; const hasLabel = con.label && con.label.trim(); const showGap = hasLabel || isEditing; // cut the line as soon as edit starts const labelFs = con.fontSize || 11; // gap half-width scales with font size const gapHW = Math.max(44, labelFs * 4); // Tangent direction at t=0.5 on the cubic bezier → used to orient the label gap // Derivative at t=0.5: 3*[0.25*(cp1-A) + 0.5*(cp2-cp1) + 0.25*(B-cp2)] const tanX = 0.75 * (B.x + cp2.x - cp1.x - A.x); const tanY = 0.75 * (B.y + cp2.y - cp1.y - A.y); const tanAngle = Math.atan2(tanY, tanX) * 180 / Math.PI; // SVG mask id unique per connector const maskId = `lm-${con.id}`; return ( {/* SVG mask — cuts a gap aligned with the curve tangent */} {showGap && ( )} {/* Wide hit target */} { ev.stopPropagation(); if (isEditing) return; setSelected(new Set()); setSelectedConns(s => { const n = ev.shiftKey ? new Set(s) : new Set(); n.has(con.id) ? n.delete(con.id) : n.add(con.id); return n; }); }} onDoubleClick={ev=>{ ev.stopPropagation(); startConnLabelEdit(con.id, con.label||''); }}/> {/* Selection glow */} {isSel && ( )} {/* Visible stroke */} {/* End arrowhead */} {endArrow!=='none' && ( )} {/* Start arrowhead */} {startArrow==='arrow' && ( )} {/* Label — inline editable */} {isEditing ? ( setEditLabel(e.target.value)} onBlur={()=>saveConnLabel(con.id)} onKeyDown={e=>{ if(e.key==='Enter'||e.key==='Escape') saveConnLabel(con.id); e.stopPropagation(); }} style={{width:'100%',height:'100%',textAlign:'center',fontSize:labelFs, fontFamily:'inherit',border:'none',borderRadius:4, background:'transparent',color:'var(--text-1)', padding:'0 6px',outline:'none',boxSizing:'border-box'}}/> ) : hasLabel ? ( {ev.stopPropagation();startConnLabelEdit(con.id,con.label);}} transform={`rotate(${tanAngle},${mid.x},${mid.y})`}> {con.label} ) : null} ); }); // ── Minimap ────────────────────────────────────────────────────────────────── const miniData = React.useMemo(() => { const all = elements; if (!all.length) return null; const bboxes = all.map(e => e.type==='pen' ? penBBox(e) : {x:e.x,y:e.y,w:e.w||0,h:e.h||0}); const xs=bboxes.flatMap(b=>[b.x,b.x+b.w]), ys=bboxes.flatMap(b=>[b.y,b.y+b.h]); const bx=Math.min(...xs),by=Math.min(...ys),bw=Math.max(Math.max(...xs)-bx,1),bh=Math.max(Math.max(...ys)-by,1); const scale=Math.min((MINI_W-16)/bw,(MINI_H-16)/bh)*0.9; const ox=(MINI_W-bw*scale)/2-bx*scale, oy=(MINI_H-bh*scale)/2-by*scale; return { bboxes, scale, ox, oy }; }, [elements]); // ── Derived selection ──────────────────────────────────────────────────────── const selId = selected.size===1 ? [...selected][0] : null; const selEl = selId ? elements.find(e=>e.id===selId) : null; const selConnId = selectedConns.size===1 ? [...selectedConns][0] : null; const selConn = selConnId ? connectors.find(c=>c.id===selConnId) : null; // Should ports be visible for a given element? const showPortsFor = (elId) => { if (tool==='pen'||tool==='shape'||tool==='frame'||tool==='sticky'||tool==='text') return false; return hoveredElId===elId || connecting!==null; }; // ── Render one element ─────────────────────────────────────────────────────── const renderEl = (el) => { const isSel = selected.has(el.id); const isEdit = editingId===el.id; const base = { position:'absolute', left:el.x, top:el.y, width:el.w, height:el.h, boxSizing:'border-box', cursor:'default' }; if (el.type==='frame') { return (
startDrag(e,el.id)} onMouseEnter={()=>setHoveredElId(el.id)} onMouseLeave={()=>setHoveredElId(v=>v===el.id?null:v)} onDoubleClick={()=>{ setEditingId(el.id); setSelected(new Set([el.id])); }} style={{...base, borderRadius:12, border:`2.5px solid ${el.color||'#335CFF'}`, background:`${el.color||'#335CFF'}0C`}}>
{isEdit ? {patchAndPush(el.id,{title:e2.target.value});setEditingId(null);}} onKeyDown={e2=>{if(e2.key==='Enter'){patchAndPush(el.id,{title:e2.target.value});setEditingId(null);}e2.stopPropagation();}} onMouseDown={e2=>e2.stopPropagation()} style={{pointerEvents:'all',fontSize:12,fontWeight:700,color:el.color||'#335CFF',border:0,outline:0,background:'transparent',fontFamily:'inherit'}}/> : {el.title||'Frame'} }
); } if (el.type==='sticky') { const dark=el.color==='#1A1A2E'; const textC=dark?'rgba(255,255,255,0.92)':'rgba(20,20,35,0.85)'; return (
startDrag(e,el.id)} onMouseEnter={()=>setHoveredElId(el.id)} onMouseLeave={()=>setHoveredElId(v=>v===el.id?null:v)} onDoubleClick={()=>{ setEditingId(el.id); setSelected(new Set([el.id])); }} style={{...base,background:el.color||'#FFCB5C',borderRadius:3,boxShadow:'3px 5px 16px rgba(0,0,0,0.18)',padding:13,display:'flex',flexDirection:'column',overflow:'hidden'}}>
{isEdit ?