Index.html

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>

); }