"use client"; import dynamic from "next/dynamic"; import { useCallback, useEffect, useRef, useState } from "react"; import { useEditor, EditorContent } from "@tiptap/react"; import StarterKit from "@tiptap/starter-kit"; import Placeholder from "@tiptap/extension-placeholder"; import { AlignLeft, Bold, Brain, ChevronRight, Italic, List, ListOrdered, Plus, Sparkles, Trash2, X, } from "lucide-react"; import { cn } from "@/lib/utils"; import { useMindMaps, type MindMap, type MindNode, type MindDrawing, type NodeColor } from "@/hooks/use-mind-maps"; // ─── Types ──────────────────────────────────────────────────────────────────── interface DrawingPoint { x: number; y: number } type DrawMode = "select" | "sketch" | "line" | "arrow"; // ─── Constants ──────────────────────────────────────────────────────────────── const NODE_W = 200; const NODE_H = 56; const LEVEL_GAP = 280; const MIN_V_GAP = 80; const COLOR_STYLES: Record = { amber: { border: "border-amber-500/[0.28]", bg: "bg-amber-500/[0.07]", text: "text-amber-100", dot: "bg-amber-400", glow: "rgba(245,158,11,0.22)", ring: "ring-amber-500/25" }, violet: { border: "border-violet-500/[0.28]", bg: "bg-violet-500/[0.07]", text: "text-violet-100", dot: "bg-violet-400", glow: "rgba(139,92,246,0.22)", ring: "ring-violet-500/25" }, emerald: { border: "border-emerald-500/[0.28]", bg: "bg-emerald-500/[0.07]", text: "text-emerald-100", dot: "bg-emerald-400", glow: "rgba(16,185,129,0.22)", ring: "ring-emerald-500/25" }, sky: { border: "border-sky-500/[0.28]", bg: "bg-sky-500/[0.07]", text: "text-sky-100", dot: "bg-sky-400", glow: "rgba(14,165,233,0.22)", ring: "ring-sky-500/25" }, rose: { border: "border-rose-500/[0.28]", bg: "bg-rose-500/[0.07]", text: "text-rose-100", dot: "bg-rose-400", glow: "rgba(244,63,94,0.22)", ring: "ring-rose-500/25" }, }; const NODE_COLORS: NodeColor[] = ["amber", "violet", "emerald", "sky", "rose"]; // ─── Helpers ────────────────────────────────────────────────────────────────── function uid() { return Math.random().toString(36).slice(2, 10); } function stripHtml(html: string): string { return html.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim(); } // ─── Layout ─────────────────────────────────────────────────────────────────── interface NodePos { x: number; y: number } function computeLayout(map: MindMap): Record { const positions: Record = {}; function subtreeSize(nodeId: string): number { const node = map.nodes[nodeId]; if (!node || node.children.length === 0) return 1; return node.children.reduce((sum, cid) => sum + subtreeSize(cid), 0); } function place(nodeId: string, level: number, yTop: number, slots: number): void { const node = map.nodes[nodeId]; if (!node) return; const x = 60 + level * LEVEL_GAP; const totalH = slots * MIN_V_GAP; const y = yTop + totalH / 2 - NODE_H / 2; positions[nodeId] = node.manualPosition ?? { x, y }; if (!node.children.length) return; let childY = yTop; for (const cid of node.children) { const s = subtreeSize(cid); place(cid, level + 1, childY, s); childY += s * MIN_V_GAP; } } place(map.rootId, 0, 0, subtreeSize(map.rootId)); return positions; } function canvasSize(positions: Record) { const xs = Object.values(positions).map((p) => p.x + NODE_W + 80); const ys = Object.values(positions).map((p) => p.y + NODE_H + 80); return { width: Math.max(1200, Math.max(...xs)), height: Math.max(700, Math.max(...ys)), }; } // ─── SVG Helpers ────────────────────────────────────────────────────────────── const STROKE_COLORS: Record = { amber: "rgba(251,191,36,0.40)", violet: "rgba(167,139,250,0.40)", emerald: "rgba(52,211,153,0.40)", sky: "rgba(56,189,248,0.40)", rose: "rgba(251,113,133,0.40)", }; function Connection({ x1, y1, x2, y2, color }: { x1: number; y1: number; x2: number; y2: number; color: NodeColor }) { const cx1 = x1 + NODE_W, cy1 = y1 + NODE_H / 2; const cx2 = x2, cy2 = y2 + NODE_H / 2; const mx = (cx1 + cx2) / 2; return ( ); } function pointsToPath(pts: DrawingPoint[]) { if (!pts.length) return ""; return pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" "); } function arrowHead(s: DrawingPoint, e: DrawingPoint): string { const a = Math.atan2(e.y - s.y, e.x - s.x); const l = 14, sp = Math.PI / 7; return `${e.x},${e.y} ${e.x - l * Math.cos(a - sp)},${e.y - l * Math.sin(a - sp)} ${e.x - l * Math.cos(a + sp)},${e.y - l * Math.sin(a + sp)}`; } // ─── Node Detail Panel ──────────────────────────────────────────────────────── interface DetailPanelProps { node: MindNode; isRoot: boolean; onUpdateTitle: (id: string, title: string) => void; onUpdateDescription: (id: string, desc: string) => void; onUpdateColor: (id: string, color: NodeColor) => void; onAddChild: () => void; onDelete: () => void; onClose: () => void; } function NodeDetailPanel({ node, isRoot, onUpdateTitle, onUpdateDescription, onUpdateColor, onAddChild, onDelete, onClose, }: DetailPanelProps) { const [localTitle, setLocalTitle] = useState(node.title); useEffect(() => { setLocalTitle(node.title); }, [node.id, node.title]); const editor = useEditor({ immediatelyRender: false, extensions: [ StarterKit, Placeholder.configure({ placeholder: "Beschreibung, Gedanken, Stichpunkte…" }), ], content: node.description || "", editorProps: { attributes: { class: "outline-none min-h-[100px] text-[13px] leading-relaxed text-white/75 prose-mindmap", }, }, onBlur: ({ editor }) => { const html = editor.getHTML(); if (html !== node.description) onUpdateDescription(node.id, html); }, }); useEffect(() => { if (!editor) return; const cur = editor.getHTML(); const target = node.description || ""; if (cur !== target) editor.commands.setContent(target); // eslint-disable-next-line react-hooks/exhaustive-deps }, [node.id]); const btnBase = "h-7 w-7 flex items-center justify-center rounded-lg transition-colors text-white/40 hover:text-white/80 hover:bg-white/[0.06]"; const btnActive = "bg-white/[0.10] text-white/90"; return ( ); } // ─── Canvas ─────────────────────────────────────────────────────────────────── interface CanvasProps { map: MindMap; selectedId: string | null; editingId: string | null; editingTitle: string; onSelect: (id: string | null) => void; onEditStart: (id: string) => void; onEditChange: (v: string) => void; onEditCommit: () => void; onMoveNode: (id: string, pos: DrawingPoint) => void; onAddChild: (parentId: string) => void; drawMode: DrawMode; drawColor: NodeColor; onCreateDrawing: (d: MindDrawing) => void; } function MindMapCanvas({ map, selectedId, editingId, editingTitle, onSelect, onEditStart, onEditChange, onEditCommit, onMoveNode, onAddChild, drawMode, drawColor, onCreateDrawing, }: CanvasProps) { const containerRef = useRef(null); const positions = computeLayout(map); const { width, height } = canvasSize(positions); // Drawing state const [draftDrawing, setDraftDrawing] = useState(null); const [isDrawing, setIsDrawing] = useState(false); // Node drag state const [dragNodeId, setDragNodeId] = useState(null); const [dragPosition, setDragPosition] = useState(null); const dragOffsetRef = useRef(null); const dragMovedRef = useRef(false); // Pan state const panningRef = useRef(false); const panStartRef = useRef<{ cx: number; cy: number; sl: number; st: number } | null>(null); const panMovedRef = useRef(false); const [isPanning, setIsPanning] = useState(false); const resolvedPositions = dragNodeId && dragPosition ? { ...positions, [dragNodeId]: dragPosition } : positions; const connections: { parentId: string; childId: string }[] = []; for (const node of Object.values(map.nodes)) { for (const cid of node.children) connections.push({ parentId: node.id, childId: cid }); } const getPoint = useCallback((clientX: number, clientY: number): DrawingPoint | null => { const c = containerRef.current; if (!c) return null; const r = c.getBoundingClientRect(); return { x: clientX - r.left + c.scrollLeft, y: clientY - r.top + c.scrollTop }; }, []); // ── Pan handlers (container background) ───────────────────────────────── const handleContainerPointerDown = useCallback((e: React.PointerEvent) => { if (drawMode !== "select") return; if (e.button !== 0) return; panningRef.current = true; panMovedRef.current = false; setIsPanning(true); const c = containerRef.current; panStartRef.current = { cx: e.clientX, cy: e.clientY, sl: c?.scrollLeft || 0, st: c?.scrollTop || 0 }; e.currentTarget.setPointerCapture(e.pointerId); }, [drawMode]); const handleContainerPointerMove = useCallback((e: React.PointerEvent) => { if (!panningRef.current || !panStartRef.current) return; const dx = e.clientX - panStartRef.current.cx; const dy = e.clientY - panStartRef.current.cy; if (Math.abs(dx) > 4 || Math.abs(dy) > 4) panMovedRef.current = true; if (containerRef.current) { containerRef.current.scrollLeft = panStartRef.current.sl - dx; containerRef.current.scrollTop = panStartRef.current.st - dy; } }, []); const handleContainerPointerUp = useCallback((e: React.PointerEvent) => { if (!panningRef.current) return; panningRef.current = false; setIsPanning(false); try { e.currentTarget.releasePointerCapture(e.pointerId); } catch { /* noop */ } if (!panMovedRef.current) onSelect(null); panMovedRef.current = false; panStartRef.current = null; }, [onSelect]); // ── Drawing handlers (SVG) ─────────────────────────────────────────────── const handleSvgPointerDown = useCallback((e: React.PointerEvent) => { if (drawMode === "select") return; const p = getPoint(e.clientX, e.clientY); if (!p) return; e.preventDefault(); e.stopPropagation(); const draft: MindDrawing = drawMode === "sketch" ? { id: uid(), type: "sketch", color: drawColor, points: [p] } : { id: uid(), type: drawMode, color: drawColor, start: p, end: p }; setDraftDrawing(draft); setIsDrawing(true); e.currentTarget.setPointerCapture(e.pointerId); }, [drawColor, drawMode, getPoint]); const handleSvgPointerMove = useCallback((e: React.PointerEvent) => { if (!isDrawing || !draftDrawing) return; const p = getPoint(e.clientX, e.clientY); if (!p) return; setDraftDrawing((cur) => { if (!cur) return cur; if (cur.type === "sketch") return { ...cur, points: [...cur.points, p] }; return { ...cur, end: p }; }); }, [draftDrawing, getPoint, isDrawing]); const finishDrawing = useCallback((ptId?: number, tgt?: EventTarget & SVGSVGElement) => { if (ptId !== undefined && tgt?.hasPointerCapture(ptId)) tgt.releasePointerCapture(ptId); if (draftDrawing && ( (draftDrawing.type === "sketch" && draftDrawing.points.length > 1) || (draftDrawing.type !== "sketch" && (Math.abs(draftDrawing.start.x - draftDrawing.end.x) > 4 || Math.abs(draftDrawing.start.y - draftDrawing.end.y) > 4)) )) onCreateDrawing(draftDrawing); setDraftDrawing(null); setIsDrawing(false); }, [draftDrawing, onCreateDrawing]); // ── Node drag handlers ─────────────────────────────────────────────────── const handleNodePointerDown = useCallback((e: React.PointerEvent, nodeId: string) => { if (drawMode !== "select") return; e.stopPropagation(); const p = getPoint(e.clientX, e.clientY); const origin = positions[nodeId]; if (!p || !origin) return; dragOffsetRef.current = { x: p.x - origin.x, y: p.y - origin.y }; dragMovedRef.current = false; setDragNodeId(nodeId); setDragPosition(origin); e.currentTarget.setPointerCapture(e.pointerId); }, [drawMode, getPoint, positions]); const handleNodePointerMove = useCallback((e: React.PointerEvent) => { if (!dragNodeId || !dragOffsetRef.current) return; const p = getPoint(e.clientX, e.clientY); if (!p) return; dragMovedRef.current = true; setDragPosition({ x: p.x - dragOffsetRef.current.x, y: p.y - dragOffsetRef.current.y }); }, [dragNodeId, getPoint]); const finishNodeDrag = useCallback((ptId?: number, tgt?: EventTarget & HTMLDivElement) => { if (ptId !== undefined && tgt?.hasPointerCapture(ptId)) tgt.releasePointerCapture(ptId); if (dragNodeId && dragPosition && dragMovedRef.current) onMoveNode(dragNodeId, dragPosition); setDragNodeId(null); setDragPosition(null); dragOffsetRef.current = null; dragMovedRef.current = false; }, [dragNodeId, dragPosition, onMoveNode]); const handleNodePointerUp = useCallback((e: React.PointerEvent, nodeId: string) => { const moved = dragMovedRef.current; finishNodeDrag(e.pointerId, e.currentTarget); if (!moved) onSelect(nodeId); }, [finishNodeDrag, onSelect]); return (
{/* SVG layer */} { if (isDrawing) { e.preventDefault(); finishDrawing(e.pointerId, e.currentTarget); } }} onPointerLeave={(e) => { if (isDrawing) finishDrawing(e.pointerId, e.currentTarget); }} > {connections.map(({ parentId, childId }) => { const p = resolvedPositions[parentId], c = resolvedPositions[childId]; const pn = map.nodes[parentId]; if (!p || !c || !pn) return null; return ; })} {map.drawings.map((d) => { const stroke = STROKE_COLORS[d.color]; if (d.type === "sketch") return ( ); return ( {d.type === "arrow" && } ); })} {draftDrawing && (draftDrawing.type === "sketch" ? ( ) : ( {draftDrawing.type === "arrow" && } ))} {/* Node layer */} {Object.values(map.nodes).map((node) => { const pos = resolvedPositions[node.id]; if (!pos) return null; const s = COLOR_STYLES[node.color]; const isSelected = selectedId === node.id; const isEditing = editingId === node.id; const preview = node.description ? stripHtml(node.description).slice(0, 50) : ""; return (
handleNodePointerDown(e, node.id)} onPointerMove={handleNodePointerMove} onPointerUp={(e) => handleNodePointerUp(e, node.id)} onPointerCancel={(e) => finishNodeDrag(e.pointerId, e.currentTarget)} onDoubleClick={(e) => { if (drawMode !== "select" || dragMovedRef.current) return; e.stopPropagation(); onEditStart(node.id); }} >
{isEditing ? ( onEditChange(e.target.value)} onBlur={onEditCommit} onKeyDown={(e) => { if (e.key === "Enter" || e.key === "Escape") onEditCommit(); }} className="bg-transparent border-none outline-none text-[13px] font-semibold text-white w-full" onClick={(e) => e.stopPropagation()} /> ) : ( {node.title} )} {preview && !isEditing && ( {preview} )} {!preview && node.children.length > 0 && (
{node.children.length}
)}
{node.description && ( )}
{drawMode === "select" && ( )}
); })}
); } // ─── Modals ─────────────────────────────────────────────────────────────────── function Modal({ children, onClose }: { children: React.ReactNode; onClose: () => void }) { return (
e.stopPropagation()}>{children}
); } function NewMapModal({ onSave, onClose }: { onSave: (t: string) => void; onClose: () => void }) { const [title, setTitle] = useState(""); return (

Neue Mind Map

setTitle(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && title.trim()) onSave(title.trim()); if (e.key === "Escape") onClose(); }} className="w-full rounded-xl border border-violet-500/[0.18] bg-violet-500/[0.06] px-4 py-3 text-sm text-white placeholder:text-white/30 outline-none focus:border-violet-500/[0.35] transition-colors" />
); } function AddChildModal({ onSave, onClose, defaultColor }: { onSave: (t: string, c: NodeColor) => void; onClose: () => void; defaultColor: NodeColor }) { const [title, setTitle] = useState(""); const [color, setColor] = useState(defaultColor); return (

Child Node

setTitle(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && title.trim()) onSave(title.trim(), color); if (e.key === "Escape") onClose(); }} className="w-full rounded-xl border border-violet-500/[0.18] bg-violet-500/[0.06] px-4 py-3 text-sm text-white placeholder:text-white/30 outline-none focus:border-violet-500/[0.35] transition-colors mb-4" />
{NODE_COLORS.map((c) => (
); } // ─── Main Page ──────────────────────────────────────────────────────────────── function MindMapPage() { const { maps, loading: mapsLoading, createMap: dbCreateMap, updateMap: dbUpdateMap, deleteMap: dbDeleteMap } = useMindMaps(); const [activeMindMapId, setActiveMindMapId] = useState(null); const [selectedNodeId, setSelectedNodeId] = useState(undefined); const [editingNodeId, setEditingNodeId] = useState(null); const [editingTitle, setEditingTitle] = useState(""); const [showNewMapModal, setShowNewMapModal] = useState(false); const [showAddChildModal, setShowAddChildModal] = useState(false); const [drawMode, setDrawMode] = useState("select"); const [drawColor, setDrawColor] = useState("violet"); const [mapError, setMapError] = useState(null); const [mapsListOpen, setMapsListOpen] = useState(false); const currentMindMapId = activeMindMapId ?? maps[0]?.id ?? null; const activeMap = maps.find((m) => m.id === currentMindMapId) ?? null; const currentSelectedNodeId = selectedNodeId === undefined ? activeMap?.rootId ?? null : selectedNodeId; const selectedNode = activeMap && currentSelectedNodeId ? activeMap.nodes[currentSelectedNodeId] ?? null : null; // Tab shortcut useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key !== "Tab" || !currentSelectedNodeId || !activeMap) return; const tag = (e.target as HTMLElement).tagName; if (tag === "INPUT" || tag === "TEXTAREA" || (e.target as HTMLElement).contentEditable === "true") return; e.preventDefault(); setShowAddChildModal(true); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [currentSelectedNodeId, activeMap]); // Debounced save helper to avoid hammering Supabase on every node drag const saveTimer = useRef | null>(null); const handleMapActionError = useCallback((error: unknown, fallback: string) => { const message = error instanceof Error && error.message ? error.message : error && typeof error === "object" && "message" in error && typeof (error as { message?: unknown }).message === "string" ? (error as { message: string }).message : fallback; setMapError(message); }, []); const updateMap = useCallback((updater: (m: MindMap) => MindMap) => { if (!currentMindMapId) return; const current = maps.find((m) => m.id === currentMindMapId); if (!current) return; const updated = updater(current); setMapError(null); if (saveTimer.current) clearTimeout(saveTimer.current); saveTimer.current = setTimeout(() => { void dbUpdateMap(currentMindMapId, { nodes: updated.nodes, drawings: updated.drawings }).catch((error: unknown) => { handleMapActionError(error, "Mind map could not be saved."); }); }, 400); // Optimistic update via the hook's local state isn't available here, // but dbUpdateMap already updates local state immediately void dbUpdateMap(currentMindMapId, { nodes: updated.nodes, drawings: updated.drawings }).catch((error: unknown) => { handleMapActionError(error, "Mind map could not be saved."); }); }, [currentMindMapId, maps, dbUpdateMap, handleMapActionError]); async function handleCreateMap(title: string) { try { setMapError(null); const rootId = uid(); const rootNode: MindNode = { id: rootId, title, description: "", color: "violet", parentId: null, children: [], manualPosition: null }; const newMap = await dbCreateMap(title, rootId, rootNode); setActiveMindMapId(newMap.id); setSelectedNodeId(newMap.rootId); setShowNewMapModal(false); } catch (error) { handleMapActionError(error, "Mind map could not be created."); } } async function handleDeleteMap(mapId: string) { try { setMapError(null); await dbDeleteMap(mapId); if (currentMindMapId === mapId) { const remaining = maps.filter((m) => m.id !== mapId); setActiveMindMapId(remaining[0]?.id ?? null); setSelectedNodeId(remaining[0]?.rootId ?? null); } } catch (error) { handleMapActionError(error, "Mind map could not be deleted."); } } function handleAddChild(title: string, color: NodeColor) { if (!currentSelectedNodeId || !activeMap) return; const childId = uid(); updateMap((m) => ({ ...m, nodes: { ...m.nodes, [currentSelectedNodeId]: { ...m.nodes[currentSelectedNodeId], children: [...m.nodes[currentSelectedNodeId].children, childId] }, [childId]: { id: childId, title, description: "", color, parentId: currentSelectedNodeId, children: [], manualPosition: null }, }, })); setShowAddChildModal(false); } function handleDeleteNode() { if (!currentSelectedNodeId || !activeMap) return; const node = activeMap.nodes[currentSelectedNodeId]; if (!node?.parentId) return; function collectIds(id: string): string[] { const n = activeMap!.nodes[id]; return n ? [id, ...n.children.flatMap(collectIds)] : []; } const toDelete = new Set(collectIds(currentSelectedNodeId)); updateMap((m) => { const newNodes = { ...m.nodes }; toDelete.forEach((id) => delete newNodes[id]); if (node.parentId && newNodes[node.parentId]) { newNodes[node.parentId] = { ...newNodes[node.parentId], children: newNodes[node.parentId].children.filter((c) => c !== currentSelectedNodeId) }; } return { ...m, nodes: newNodes }; }); setSelectedNodeId(null); } function handleUpdateTitle(nodeId: string, title: string) { updateMap((m) => ({ ...m, nodes: { ...m.nodes, [nodeId]: { ...m.nodes[nodeId], title } } })); } function handleUpdateDescription(nodeId: string, description: string) { updateMap((m) => ({ ...m, nodes: { ...m.nodes, [nodeId]: { ...m.nodes[nodeId], description } } })); } function handleUpdateColor(nodeId: string, color: NodeColor) { updateMap((m) => ({ ...m, nodes: { ...m.nodes, [nodeId]: { ...m.nodes[nodeId], color } } })); } function handleEditStart(nodeId: string) { const node = activeMap?.nodes[nodeId]; if (!node) return; setEditingNodeId(nodeId); setEditingTitle(node.title); setSelectedNodeId(nodeId); } function handleEditCommit() { if (!editingNodeId || !editingTitle.trim()) { setEditingNodeId(null); return; } handleUpdateTitle(editingNodeId, editingTitle.trim()); setEditingNodeId(null); } const nodeCount = activeMap ? Object.keys(activeMap.nodes).length : 0; const drawingCount = activeMap?.drawings.length ?? 0; return (
{/* ── Header ──────────────────────────────────────────────────────── */}
Mind Map {activeMap && {nodeCount} Nodes}
{/* Toolbar */}
{/* Draw modes */}
{(["select", "sketch", "line", "arrow"] as DrawMode[]).map((mode) => ( ))}
{/* Draw colors */}
{NODE_COLORS.map((c) => (
{activeMap && drawingCount > 0 && ( <> )}
{mapError && (
{mapError}
)} {/* ── Body ──────────────────────────────────────────────────────────── */}
{/* Left: maps list */} {mapsListOpen && (
setMapsListOpen(false)} /> )} {/* Center: canvas */}
{!activeMap ? (

Keine Map ausgewählt
Erstelle eine neue Map links

) : ( updateMap((m) => ({ ...m, nodes: { ...m.nodes, [id]: { ...m.nodes[id], manualPosition: pos } } }))} onAddChild={(parentId) => { setSelectedNodeId(parentId); setShowAddChildModal(true); }} drawMode={drawMode} drawColor={drawColor} onCreateDrawing={(d) => updateMap((m) => ({ ...m, drawings: [...m.drawings, d] }))} /> )}
{/* Right: node detail panel */} {selectedNode && ( setShowAddChildModal(true)} onDelete={() => handleDeleteNode()} onClose={() => setSelectedNodeId(null)} /> )}
{showNewMapModal && void handleCreateMap(t)} onClose={() => setShowNewMapModal(false)} />} {showAddChildModal && selectedNode && ( setShowAddChildModal(false)} defaultColor={selectedNode.color} /> )}
); } export default dynamic(() => Promise.resolve(MindMapPage), { ssr: false });