Create Index.html

Index.html

@@ -0,0 +1,418 @@
+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>
+
+); }
+