Hugging Face's logo

Spaces:
Abdfah
/
Map
Build error

App Files Community
Map / src /App.js
Abdfah's picture
Abdfah
Update src/App.js
e31cb5c verified
Raw History Blame Contribute Delete
21.2 kB
import React, { useRef, useState, useEffect } from "react";
// MindmapCreatorApp.jsx // Single-file React component (Tailwind CSS assumed) // Features implemented: // - Central node + add/edit/delete nodes // - Drag (mouse + touch) with momentum-less simple handling // - Pan & zoom (pinch + wheel + two-finger drag) // - Connect nodes (simple straight / curved link) // - Color picker, font size, node size // - Upload image into node (uses FileReader) // - Export as PNG and download JSON of project // - Templates and basic auto-layout (radial) // Notes: This component uses only built-in browser APIs so it can run without extra deps.
export default function MindmapCreatorApp() { // Node model: { id, x, y, r, title, color, textSize, image } const [nodes, setNodes] = useState(() => { const center = { id: "center", x: 800, y: 450, r: 90, title: "Central Topic", color: "#0ea5e9", textSize: 18 }; return [center]; }); const [links, setLinks] = useState([]); // { from, to } const svgRef = useRef(null); const containerRef = useRef(null);
// Canvas transform state (for pan/zoom) const [zoom, setZoom] = useState(1); const [offset, setOffset] = useState({ x: 0, y: 0 }); const panState = useRef({ dragging: false, start: null });
// Interaction state const [draggingNode, setDraggingNode] = useState(null); const dragTouchId = useRef(null);
// Selection & UI const [selectedNodeId, setSelectedNodeId] = useState(null); const [isConnecting, setIsConnecting] = useState(false); const [connectFrom, setConnectFrom] = useState(null);
// Utility helpers const generateId = (prefix = "n") => prefix + Math.random().toString(36).slice(2, 9);
// convert client coords to canvas (world) coords function clientToWorld(clientX, clientY) { const rect = svgRef.current.getBoundingClientRect(); const cx = clientX - rect.left; const cy = clientY - rect.top; return { x: (cx - offset.x) / zoom, y: (cy - offset.y) / zoom }; }
// Add node at point function addNodeAt(clientX, clientY) { const pos = clientToWorld(clientX, clientY); const id = generateId(); const newNode = { id, x: pos.x, y: pos.y, r: 60, title: "New Node", color: "#0284c7", textSize: 14 }; setNodes((s) => [...s, newNode]); setSelectedNodeId(id); }
// Delete node and its links function deleteNode(id) { setNodes((s) => s.filter((n) => n.id !== id)); setLinks((l) => l.filter((link) => link.from !== id && link.to !== id)); if (selectedNodeId === id) setSelectedNodeId(null); }
// Add link function addLink(a, b) { if (a === b) return; setLinks((s) => { // avoid duplicates (unordered pair) const exists = s.some((l) => (l.from === a && l.to === b) || (l.from === b && l.to === a)); if (exists) return s; return [...s, { id: generateId('l'), from: a, to: b }]; }); }
// Dragging nodes function onPointerDownNode(e, node) { e.stopPropagation(); e.preventDefault(); setDraggingNode(node.id); setSelectedNodeId(node.id);
// capture pointer for mouse/touch unified handling
const pid = e.pointerId;
dragTouchId.current = pid;
e.target.setPointerCapture && e.target.setPointerCapture(pid);
} function onPointerMoveNode(e) { if (!draggingNode) return; if (e.pointerId !== dragTouchId.current) return; const world = clientToWorld(e.clientX, e.clientY); setNodes((s) => s.map((n) => (n.id === draggingNode ? { ...n, x: world.x, y: world.y } : n))); } function onPointerUpNode(e) { if (!draggingNode) return; setDraggingNode(null); dragTouchId.current = null; }
// Global canvas pointer handlers for pan and adding nodes useEffect(() => { const svg = svgRef.current; if (!svg) return;
function onWheel(e) {
// zoom at mouse point
e.preventDefault();
const delta = -e.deltaY;
const zoomFactor = Math.exp(delta * 0.0012);
const rect = svg.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
// world coords BEFORE zoom
const wx = (mouseX - offset.x) / zoom;
const wy = (mouseY - offset.y) / zoom;
const newZoom = Math.max(0.2, Math.min(3, zoom * zoomFactor));
// adjust offset so zoom focuses at mouse
const nx = mouseX - wx * newZoom;
const ny = mouseY - wy * newZoom;
setZoom(newZoom);
setOffset({ x: nx, y: ny });
}
svg.addEventListener("wheel", onWheel, { passive: false });
return () => svg.removeEventListener("wheel", onWheel);
}, [zoom, offset]);
// Pan start function onPointerDownCanvas(e) { // ignore if clicking on node handlers (we check target) if (e.target.closest && e.target.closest('.node')) return; panState.current.dragging = true; panState.current.start = { x: e.clientX, y: e.clientY, off: { ...offset } }; const id = e.pointerId; panState.current.pointerId = id; e.target.setPointerCapture && e.target.setPointerCapture(id);
// double-tap or double-click add node
if (e.detail === 2) {
addNodeAt(e.clientX, e.clientY);
}
} function onPointerMoveCanvas(e) { if (!panState.current.dragging) return; if (e.pointerId !== panState.current.pointerId) return; const dx = e.clientX - panState.current.start.x; const dy = e.clientY - panState.current.start.y; setOffset({ x: panState.current.start.off.x + dx, y: panState.current.start.off.y + dy }); } function onPointerUpCanvas(e) { panState.current.dragging = false; panState.current.pointerId = null; }
// Touch pinch zoom handling useEffect(() => { const el = containerRef.current; if (!el) return; let touchState = { active: false, startDist: 0, startZoom: zoom, startOff: null, center: null };
function dist(a, b) {
return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
}
function centerPoint(a, b) {
return { x: (a.clientX + b.clientX) / 2, y: (a.clientY + b.clientY) / 2 };
}
function onTouchStart(e) {
if (e.touches && e.touches.length === 2) {
touchState.active = true;
touchState.startDist = dist(e.touches[0], e.touches[1]);
touchState.startZoom = zoom;
touchState.startOff = { ...offset };
touchState.center = centerPoint(e.touches[0], e.touches[1]);
}
}
function onTouchMove(e) {
if (!touchState.active) return;
if (e.touches.length !== 2) return;
const d = dist(e.touches[0], e.touches[1]);
const factor = d / touchState.startDist;
const newZoom = Math.max(0.2, Math.min(3, touchState.startZoom * factor));
// zoom around center
const rect = svgRef.current.getBoundingClientRect();
const mouseX = touchState.center.x - rect.left;
const mouseY = touchState.center.y - rect.top;
const wx = (mouseX - touchState.startOff.x) / touchState.startZoom;
const wy = (mouseY - touchState.startOff.y) / touchState.startZoom;
const nx = mouseX - wx * newZoom;
const ny = mouseY - wy * newZoom;
setZoom(newZoom);
setOffset({ x: nx, y: ny });
e.preventDefault();
}
function onTouchEnd(e) {
if (e.touches.length < 2) touchState.active = false;
}
el.addEventListener('touchstart', onTouchStart, { passive: false });
el.addEventListener('touchmove', onTouchMove, { passive: false });
el.addEventListener('touchend', onTouchEnd);
return () => {
el.removeEventListener('touchstart', onTouchStart);
el.removeEventListener('touchmove', onTouchMove);
el.removeEventListener('touchend', onTouchEnd);
};
}, [zoom, offset]);
// Export SVG to PNG async function exportPNG() { const svgNode = svgRef.current; const serializer = new XMLSerializer(); const svgString = serializer.serializeToString(svgNode); const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' }); const url = URL.createObjectURL(blob);
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = svgNode.clientWidth * 2; // high res
canvas.height = svgNode.clientHeight * 2;
const ctx = canvas.getContext('2d');
// white background
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
const dataUrl = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = dataUrl;
a.download = 'mindmap.png';
a.click();
URL.revokeObjectURL(url);
};
img.crossOrigin = 'anonymous';
img.src = url;
}
// Save / Load JSON function exportJSON() { const data = { nodes, links, zoom, offset }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'mindmap.json'; a.click(); URL.revokeObjectURL(url); } function importJSON(file) { const reader = new FileReader(); reader.onload = (e) => { try { const parsed = JSON.parse(e.target.result); setNodes(parsed.nodes || []); setLinks(parsed.links || []); setZoom(parsed.zoom || 1); setOffset(parsed.offset || { x: 0, y: 0 }); } catch (err) { alert('Invalid JSON'); } }; reader.readAsText(file); }
// Image upload into selected node function handleImageUpload(file) { if (!selectedNodeId) return alert('Select a node first'); const reader = new FileReader(); reader.onload = (e) => { const src = e.target.result; setNodes((s) => s.map((n) => (n.id === selectedNodeId ? { ...n, image: src } : n))); }; reader.readAsDataURL(file); }
// Templates function applyTemplate(type) { if (type === 'birthday') { const center = { id: 'center', x: 800, y: 450, r: 90, title: 'Plan a Birthday', color: '#06b6d4', textSize: 18 }; const kids = [ { id: 't1', x: 1000, y: 350, r: 60, title: 'Theme', color: '#fb7185', textSize: 14 }, { id: 't2', x: 1200, y: 500, r: 60, title: 'Budget', color: '#34d399', textSize: 14 }, { id: 't3', x: 600, y: 550, r: 60, title: 'Food', color: '#f59e0b', textSize: 14 }, ]; setNodes([center, ...kids]); setLinks([{ id: 'l1', from: 'center', to: 't1' }, { id: 'l2', from: 'center', to: 't2' }, { id: 'l3', from: 'center', to: 't3' }]); } else if (type === 'guidelines') { // simple example setNodes([ { id: 'center', x: 800, y: 450, r: 90, title: 'Mind Map Guidelines', color: '#0ea5e9', textSize: 18 }, { id: 'g1', x: 600, y: 300, r: 50, title: 'Clarity', color: '#0369a1', textSize: 13 }, { id: 'g2', x: 1000, y: 300, r: 50, title: 'Style', color: '#0369a1', textSize: 13 }, { id: 'g3', x: 600, y: 600, r: 50, title: 'Use', color: '#0369a1', textSize: 13 }, ]); setLinks([{ id: 'l1', from: 'center', to: 'g1' }, { id: 'l2', from: 'center', to: 'g2' }, { id: 'l3', from: 'center', to: 'g3' }]); } }
// Simple radial auto-layout around center node function radialLayout(centerId = 'center') { const center = nodes.find((n) => n.id === centerId); if (!center) return; const children = nodes.filter((n) => n.id !== centerId); const count = children.length; const radius = 220; const updated = nodes.map((n, i) => { if (n.id === centerId) return n; const idx = i - 1; // skip center const angle = (2 * Math.PI * idx) / Math.max(1, count); return { ...n, x: center.x + Math.cos(angle) * radius, y: center.y + Math.sin(angle) * radius }; }); setNodes(updated); }
// keyboard handlers useEffect(() => { function onKey(e) { if (e.key === 'Delete' && selectedNodeId) deleteNode(selectedNodeId); if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); exportJSON(); } } window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [selectedNodeId, nodes]);
// render links as curved paths function renderLink(link) { const a = nodes.find((n) => n.id === link.from); const b = nodes.find((n) => n.id === link.to); if (!a || !b) return null; const dx = b.x - a.x; const dy = b.y - a.y; const dist = Math.hypot(dx, dy); const offsetDist = Math.min(80, dist * 0.3); const nx = a.x + (dx / dist) * (a.r + 6); const ny = a.y + (dy / dist) * (a.r + 6); const mx = b.x - (dx / dist) * (b.r + 6); const my = b.y - (dy / dist) * (b.r + 6); const cx1 = nx + -dy * 0.2; const cy1 = ny + dx * 0.2; const cx2 = mx + dy * 0.2; const cy2 = my + -dx * 0.2; return ( <path key={link.id} d={M ${nx} ${ny} C ${cx1} ${cy1} ${cx2} ${cy2} ${mx} ${my}} stroke="#0ea5e9" strokeWidth={3} fill="none" strokeLinecap="round" opacity={0.95} /> ); }
return ( <div className="flex h-screen w-screen bg-gray-50"> {/* Left UI panel */} <div className="w-80 bg-white p-4 border-r overflow-auto"> <h2 className="text-xl font-bold mb-3">MindMap Creator</h2> <div className="space-y-3"> <button onClick={() => applyTemplate('birthday')} className="w-full py-2 rounded bg-gradient-to-r from-sky-500 to-cyan-400 text-white font-semibold" > Apply Birthday Template </button>
<button
onClick={() => applyTemplate('guidelines')}
className="w-full py-2 rounded border text-sky-600 font-semibold"
>
Apply Guidelines Template
</button>
<div className="bg-gray-50 p-2 rounded">
<div className="mb-2 font-semibold">Selected Node</div>
{selectedNodeId ? (
(() => {
const sel = nodes.find((n) => n.id === selectedNodeId);
if (!sel) return <div>Not found.</div>;
return (
<div className="space-y-2">
<input
className="w-full p-2 border rounded"
value={sel.title}
onChange={(e) => setNodes((s) => s.map((n) => (n.id === sel.id ? { ...n, title: e.target.value } : n)))}
/>
<div className="flex gap-2">
<label className="flex-1">
Color
<input
type="color"
value={sel.color}
onChange={(e) => setNodes((s) => s.map((n) => (n.id === sel.id ? { ...n, color: e.target.value } : n)))}
className="w-full h-8 mt-1"
/>
</label>
<label className="w-20">
Size
<input
type="range"
min={30}
max={140}
value={sel.r}
onChange={(e) => setNodes((s) => s.map((n) => (n.id === sel.id ? { ...n, r: Number(e.target.value) } : n)))}
/>
</label>
</div>
<label>
Upload Image
<input
type="file"
accept="image/*"
onChange={(e) => e.target.files && handleImageUpload(e.target.files[0])}
className="w-full mt-1"
/>
</label>
<div className="flex gap-2">
<button
className="flex-1 py-2 rounded border"
onClick={() => {
setNodes((s) => s.map((n) => (n.id === sel.id ? { ...n, image: null } : n)));
}}
>
Remove Image
</button>
<button className="bg-red-500 text-white px-3 py-2 rounded" onClick={() => deleteNode(sel.id)}>
Delete
</button>
</div>
</div>
);
})()
) : (
<div className="text-sm text-gray-500">No node selected. Tap a node to edit.</div>
)}
</div>
<div className="bg-gray-50 p-2 rounded">
<div className="font-semibold mb-1">Canvas</div>
<div className="flex gap-2">
<button onClick={() => radialLayout()} className="flex-1 py-2 rounded border">
Auto Layout
</button>
<button onClick={() => setZoom(1)} className="py-2 px-3 rounded border">
Reset Zoom
</button>
</div>
<div className="mt-2 flex gap-2">
<button onClick={exportPNG} className="flex-1 py-2 rounded bg-sky-600 text-white">
Export PNG
</button>
<button onClick={exportJSON} className="py-2 px-3 rounded border">
Save
</button>
</div>
<label className="block mt-2 text-sm text-gray-600">
Load JSON
<input
type="file"
accept="application/json"
onChange={(e) => e.target.files && importJSON(e.target.files[0])}
className="w-full mt-1"
/>
</label>
</div>
<div className="bg-gray-50 p-2 rounded">
<div className="font-semibold mb-1">Connect Mode</div>
<div className="flex gap-2">
<button
className={`flex-1 py-2 rounded ${isConnecting ? 'bg-emerald-500 text-white' : 'border'}`}
onClick={() => {
setIsConnecting(!isConnecting);
setConnectFrom(null);
}}
>
{isConnecting ? 'Connecting: ON' : 'Connect Nodes'}
</button>
<button
onClick={() => {
setLinks([]);
}}
className="py-2 px-3 rounded border text-red-600"
>
Clear Links
</button>
</div>
<div className="text-xs text-gray-500 mt-2">Tap a node then another to create a link. Double-tap canvas to add node.</div>
</div>
<div className="text-xs text-gray-500 mt-6">Touch & mobile-friendly: use pinch to zoom, drag to pan, long-press nodes to drag them.</div>
</div>
</div>
{/* Canvas area */}
<div className="flex-1 relative overflow-hidden" ref={containerRef}>
<svg
ref={svgRef}
xmlns="http://www.w3.org/2000/svg"
width="1600"
height="900"
viewBox={`0 0 1600 900`}
className="w-full h-full touch-none"
onPointerDown={onPointerDownCanvas}
onPointerMove={onPointerMoveCanvas}
onPointerUp={onPointerUpCanvas}
>
{/* Invisible rect background to capture events */}
<rect width="1600" height="900" fill="#fafafa" />
{/* group with transform for pan/zoom */}
<g transform={`translate(${offset.x}, ${offset.y}) scale(${zoom})`}>
{/* render links */}
<g>{links.map((l) => renderLink(l))}</g>
{/* render nodes */}
{nodes.map((n) => (
<g
key={n.id}
className="node"
transform={`translate(${n.x}, ${n.y})`}
onPointerDown={(e) => onPointerDownNode(e, n)}
onPointerMove={onPointerMoveNode}
onPointerUp={onPointerUpNode}
style={{ touchAction: 'none', cursor: 'grab' }}
>
{/* node shadow */}
<circle cx={0} cy={0} r={n.r + 6} fill="rgba(2,6,23,0.06)" />
{/* node body */}
<circle cx={0} cy={0} r={n.r} fill={n.color} stroke="#0f172a" strokeWidth={1} />
{/* image inside node if available */}
{n.image && (
<clipPath id={`clip-${n.id}`}>
<circle cx={0} cy={0} r={n.r - 8} />
</clipPath>
)}
{n.image && (
<image
href={n.image}
x={-(n.r - 8)}
y={-(n.r - 8)}
width={(n.r - 8) * 2}
height={(n.r - 8) * 2}
clipPath={`url(#clip-${n.id})`}
preserveAspectRatio="xMidYMid slice"
/>
)}
{/* text */}
<text
x={0}
y={n.r + 18}
textAnchor="middle"
style={{ fontSize: n.textSize, fontFamily: 'Inter, sans-serif', pointerEvents: 'none' }}
>
{n.title}
</text>
{/* small connect indicator */}
<circle
cx={n.r - 12}
cy={-(n.r - 12)}
r={10}
fill="#fff"
stroke="#0ea5e9"
strokeWidth={2}
onClick={(ev) => {
ev.stopPropagation();
if (!isConnecting) return;
if (!connectFrom) {
setConnectFrom(n.id);
} else {
addLink(connectFrom, n.id);
setConnectFrom(null);
}
}}
/>
</g>
))}
{/* temporary connecting line while connecting */}
{isConnecting && connectFrom && (() => {
const fromNode = nodes.find((x) => x.id === connectFrom);
if (!fromNode) return null;
// get pointer position for line from window mouse
return (
<line x1={fromNode.x} y1={fromNode.y} x2={fromNode.x + 1} y2={fromNode.y + 1} stroke="transparent" />
);
})()}
</g>
</svg>
{/* Floating quick controls for touch devices */}
<div className="absolute right-4 bottom-4 grid gap-2">
<button
className="p-3 rounded-full bg-white shadow-lg"
title="Add node at center"
onClick={(e) => {
// add at center of viewport
const rect = svgRef.current.getBoundingClientRect();
addNodeAt(rect.left + rect.width / 2, rect.top + rect.height / 2);
}}
>
+
</button>
<label className="p-3 rounded-full bg-white shadow-lg cursor-pointer">
📁
<input
type="file"
accept="image/*"
style={{ display: 'none' }}
onChange={(e) => e.target.files && handleImageUpload(e.target.files[0])}
/>
</label>
</div>
</div>
</div>
); }