Enhance UI/UX: Add Magnifier, improve geometry helpers, and refactor layout

src/App.jsx

@@ -1,56 +1,160 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Upload, Plus, Eye, EyeOff, Trash2, Save, FolderOpen, Download, Search } from 'lucide-react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Upload, Plus, Eye, EyeOff, Trash2, Save, FolderOpen, Download, Target, MousePointer2, Info, Search } from 'lucide-react';
 
-// --- Math & Geometry Helpers ---
+// --- Geometry Helper Functions ---
 
 const dist = (p1, p2) => Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
 
-const distToSegment = (p, a, b) => {
+/**
+ * Gets the closest point on a line segment [a, b] from point p.
+ */
+const getClosestPointOnSegment = (p, a, b) => {
   const l2 = Math.pow(dist(a, b), 2);
-  if (l2 === 0) return dist(p, a);
+  if (l2 === 0) return a;
   let t = ((p.x - a.x) * (b.x - a.x) + (p.y - a.y) * (b.y - a.y)) / l2;
   t = Math.max(0, Math.min(1, t));
-  return dist(p, { x: a.x + t * (b.x - a.x), y: a.y + t * (b.y - a.y) });
+  return { x: a.x + t * (b.x - a.x), y: a.y + t * (b.y - a.y) };
+};
+
+const distToSegment = (p, a, b) => {
+  const closest = getClosestPointOnSegment(p, a, b);
+  return dist(p, closest);
 };
 
 const getRandomColor = () => {
-  const letters = '0123456789ABCDEF';
-  let color = '#';
-  for (let i = 0; i < 6; i++) {
-    color += letters[Math.floor(Math.random() * 16)];
-  }
-  return color;
+  const h = Math.floor(Math.random() * 360);
+  return `hsl(${h}, 75%, 60%)`;
 };
 
+// --- Magnifier Component ---
+function Magnifier({ imgUrl, regions, selectedId, mousePos, side, imgSize, focusModeB }) {
+  if (!imgUrl || !mousePos || mousePos.side !== side) return null;
+
+  const zoom = 2.5;
+  const size = 180;
+  const r = size / 2;
+
+  // Filtering regions based on side and Focus Mode
+  const visibleRegions = (side === 'B' && focusModeB)
+    ? regions.filter(reg => reg.id === selectedId)
+    : regions;
+
+  // Background offset logic to keep mouse pointer at center
+  const bgPosX = -mousePos.x * imgSize.width * zoom + r;
+  const bgPosY = -mousePos.y * imgSize.height * zoom + r;
+
+  return (
+    <div
+      className="absolute pointer-events-none rounded-full border-4 border-indigo-500 shadow-[0_0_30px_rgba(0,0,0,0.6)] overflow-hidden z-[100]"
+      style={{
+        width: size,
+        height: size,
+        left: mousePos.px - r,
+        top: mousePos.py - size - 40,
+      }}
+    >
+      {/* Background Image Source */}
+      <div
+        className="absolute inset-0 bg-[#111]"
+        style={{
+          backgroundImage: `url(${imgUrl})`,
+          backgroundSize: `${imgSize.width * zoom}px ${imgSize.height * zoom}px`,
+          backgroundPosition: `${bgPosX}px ${bgPosY}px`,
+          backgroundRepeat: 'no-repeat'
+        }}
+      />
+
+      {/* SVG Overlay inside Magnifier */}
+      <svg className="absolute inset-0 w-full h-full overflow-visible" viewBox={`0 0 ${size} ${size}`}>
+        {visibleRegions.map(reg => {
+          const isSelected = reg.id === selectedId;
+          const points = side === 'A' ? reg.pointsA : reg.pointsB;
+
+          const localPoints = points.map(p => ({
+            x: (p.x - mousePos.x) * imgSize.width * zoom + r,
+            y: (p.y - mousePos.y) * imgSize.height * zoom + r
+          }));
+
+          const polyStr = localPoints.map(p => `${p.x},${p.y}`).join(' ');
+
+          return (
+            <g key={reg.id}>
+              <polygon
+                points={polyStr}
+                style={{
+                  fill: reg.color,
+                  fillOpacity: isSelected ? 0.35 : 0.1,
+                  stroke: isSelected ? '#fff' : reg.color,
+                  strokeWidth: 1.5,
+                }}
+              />
+              {localPoints.map((p, idx) => (
+                <circle
+                  key={idx}
+                  cx={p.x} cy={p.y}
+                  r={isSelected ? 4 : 2}
+                  fill={isSelected ? '#fff' : reg.color}
+                  stroke="#000"
+                  strokeWidth={0.5}
+                />
+              ))}
+            </g>
+          );
+        })}
+      </svg>
+
+      {/* Reticle */}
+      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+        <div className="w-full h-[1px] bg-white/30 absolute" />
+        <div className="h-full w-[1px] bg-white/30 absolute" />
+        <div className="w-4 h-4 border border-indigo-400 rounded-full bg-indigo-500/10" />
+      </div>
+    </div>
+  );
+}
+
 // --- Main Application ---
 
 export default function App() {
   const [imgA, setImgA] = useState(null);
   const [imgB, setImgB] = useState(null);
+  const [imgSizeA, setImgSizeA] = useState({ width: 0, height: 0 });
+  const [imgSizeB, setImgSizeB] = useState({ width: 0, height: 0 });
+
   const [regions, setRegions] = useState([]);
   const [selectedRegionId, setSelectedRegionId] = useState(null);
   const [previewMode, setPreviewMode] = useState(false);
-  const [hideUnselected, setHideUnselected] = useState(false);
+  const [focusModeB, setFocusModeB] = useState(false);
 
+  // Interaction & Keys State
   const [hoveredEdge, setHoveredEdge] = useState(null);
   const [hoveredPoint, setHoveredPoint] = useState(null);
   const [draggingPoint, setDraggingPoint] = useState(null);
+  const [isZPressed, setIsZPressed] = useState(false);
 
-  // Zoom feature states
-  const [isZooming, setIsZooming] = useState(false);
-  const [mousePos, setMousePos] = useState({ x: 0, y: 0, relX: 0, relY: 0, rect: null });
+  const [magnifierPos, setMagnifierPos] = useState(null);
 
   const imgRefA = useRef(null);
   const imgRefB = useRef(null);
   const canvasPreviewRef = useRef(null);
 
-  const zoomFactor = 4; // Zoom multiplier
+  const selectedRegion = regions.find(r => r.id === selectedRegionId);
 
-  const handleImageUpload = (e, setImg) => {
+  const handleImageUpload = (e, side) => {
     const file = e.target.files[0];
     if (file) {
       const url = URL.createObjectURL(file);
-      setImg(url);
+      const img = new Image();
+      img.onload = () => {
+        if (side === 'A') {
+          setImgA(url);
+          setImgSizeA({ width: img.width, height: img.height });
+        } else {
+          setImgB(url);
+          setImgSizeB({ width: img.width, height: img.height });
+        }
+      };
+      img.src = url;
     }
   };
 
@@ -63,11 +167,9 @@ export default function App() {
         const data = JSON.parse(event.target.result);
         if (Array.isArray(data)) {
           setRegions(data);
-          setSelectedRegionId(data.length > 0 ? data[0].id : null);
+          if (data.length > 0) setSelectedRegionId(data[0].id);
         }
-      } catch (err) {
-        console.error("JSON parse error", err);
-      }
+      } catch (err) { console.error(err); }
     };
     reader.readAsText(file);
     e.target.value = '';
@@ -78,6 +180,7 @@ export default function App() {
     const newId = crypto.randomUUID();
     const newRegion = {
       id: newId,
+      name: `Region ${regions.length + 1}`,
       color: getRandomColor(),
       pointsA: [{ x: 0.3, y: 0.3 }, { x: 0.7, y: 0.3 }, { x: 0.7, y: 0.7 }, { x: 0.3, y: 0.7 }],
       pointsB: [{ x: 0.3, y: 0.3 }, { x: 0.7, y: 0.3 }, { x: 0.7, y: 0.7 }, { x: 0.3, y: 0.7 }]
@@ -93,7 +196,6 @@ export default function App() {
 
   const handlePointMouseDown = (e, side, regionId, index) => {
     e.stopPropagation();
-    e.preventDefault();
     setSelectedRegionId(regionId);
     setDraggingPoint({ regionId, index, side });
   };
@@ -105,19 +207,25 @@ export default function App() {
     const rect = imgEl.getBoundingClientRect();
     let x = (e.clientX - rect.left) / rect.width;
     let y = (e.clientY - rect.top) / rect.height;
-
     x = Math.max(0, Math.min(1, x));
     y = Math.max(0, Math.min(1, y));
 
-    setMousePos({ x: e.clientX, y: e.clientY, relX: x, relY: y, rect });
+    const mousePos = { x, y };
+
+    setMagnifierPos({
+      x, y,
+      px: e.clientX - rect.left,
+      py: e.clientY - rect.top,
+      side
+    });
 
     if (draggingPoint && draggingPoint.side === side) {
       setRegions(prev => prev.map(r => {
         if (r.id === draggingPoint.regionId) {
-          const pointsKey = side === 'A' ? 'pointsA' : 'pointsB';
-          const newPoints = [...r[pointsKey]];
-          newPoints[draggingPoint.index] = { x, y };
-          return { ...r, [pointsKey]: newPoints };
+          const key = side === 'A' ? 'pointsA' : 'pointsB';
+          const newPts = [...r[key]];
+          newPts[draggingPoint.index] = mousePos;
+          return { ...r, [key]: newPts };
         }
         return r;
       }));
@@ -126,80 +234,79 @@ export default function App() {
 
     if (selectedRegionId) {
       const region = regions.find(r => r.id === selectedRegionId);
-      if (region) {
-        const points = side === 'A' ? region.pointsA : region.pointsB;
-        let foundPoint = null;
-        for (let i = 0; i < points.length; i++) {
-          if (dist({ x, y }, points[i]) < 0.02) {
-            foundPoint = { regionId: region.id, index: i };
-            break;
-          }
-        }
+      const points = side === 'A' ? region.pointsA : region.pointsB;
 
-        if (foundPoint) {
-          setHoveredPoint(foundPoint);
-          setHoveredEdge(null);
-          return;
-        } else {
-          setHoveredPoint(null);
+      let foundPt = null;
+      for (let i = 0; i < points.length; i++) {
+        if (dist(mousePos, points[i]) < 0.03) {
+          foundPt = { regionId: region.id, index: i };
+          break;
         }
+      }
 
-        let closestDist = Infinity;
-        let closestIndex = -1;
+      if (foundPt) {
+        setHoveredPoint(foundPt);
+        setHoveredEdge(null);
+      } else {
+        setHoveredPoint(null);
+        let foundEdge = null;
         for (let i = 0; i < points.length; i++) {
           const p1 = points[i];
           const p2 = points[(i + 1) % points.length];
-          const d = distToSegment({ x, y }, p1, p2);
-          if (d < 0.02) {
-            if (d < closestDist) {
-              closestDist = d;
-              closestIndex = i;
-            }
+          const d = distToSegment(mousePos, p1, p2);
+          if (d < 0.025) {
+            const projPoint = getClosestPointOnSegment(mousePos, p1, p2);
+            foundEdge = { regionId: region.id, index: i, side, point: projPoint };
+            break;
           }
         }
-        setHoveredEdge(closestIndex !== -1 ? { regionId: region.id, index: closestIndex, side } : null);
+        setHoveredEdge(foundEdge);
       }
-    } else {
-      setHoveredPoint(null);
-      setHoveredEdge(null);
     }
   };
 
-  const handleGlobalMouseUp = () => {
-    setDraggingPoint(null);
-  };
+  const handleMouseUp = () => setDraggingPoint(null);
+  const handleMouseLeave = () => setMagnifierPos(null);
 
   useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.key.toLowerCase() === 'z') {
-        setIsZooming(true);
-      }
+    const onKeyDown = (e) => {
+      const key = e.key.toLowerCase();
+
+      if (key === 'z') setIsZPressed(true);
 
-      if ((e.key === 'a' || e.key === 'A') && hoveredEdge && !hoveredPoint) {
-        const { regionId, index } = hoveredEdge;
+      if (key === 'a' && hoveredEdge) {
+        const { regionId, index, side, point } = hoveredEdge;
         setRegions(prev => prev.map(r => {
           if (r.id === regionId) {
-            const insertPoint = (pts) => {
-              const p1 = pts[index], p2 = pts[(index + 1) % pts.length];
-              const mid = { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };
-              const newPts = [...pts];
-              newPts.splice(index + 1, 0, mid);
-              return newPts;
-            };
-            return { ...r, pointsA: insertPoint(r.pointsA), pointsB: insertPoint(r.pointsB) };
+            const newPointsA = [...r.pointsA];
+            const newPointsB = [...r.pointsB];
+            let finalPtA, finalPtB;
+            if (side === 'A') {
+              finalPtA = point;
+              const b1 = newPointsB[index], b2 = newPointsB[(index + 1) % newPointsB.length];
+              finalPtB = { x: (b1.x + b2.x) / 2, y: (b1.y + b2.y) / 2 };
+            } else {
+              finalPtB = point;
+              const a1 = newPointsA[index], a2 = newPointsA[(index + 1) % newPointsA.length];
+              finalPtA = { x: (a1.x + a2.x) / 2, y: (a1.y + a2.y) / 2 };
+            }
+            newPointsA.splice(index + 1, 0, finalPtA);
+            newPointsB.splice(index + 1, 0, finalPtB);
+            return { ...r, pointsA: newPointsA, pointsB: newPointsB };
           }
           return r;
         }));
-        setHoveredEdge(null);
       }
 
-      if ((e.key === 'd' || e.key === 'D' || e.key === 'Backspace') && hoveredPoint) {
+      if ((key === 'd' || key === 'backspace' || key === 'delete') && hoveredPoint) {
         const { regionId, index } = hoveredPoint;
         setRegions(prev => prev.map(r => {
           if (r.id === regionId && r.pointsA.length > 3) {
-            const newPtsA = r.pointsA.filter((_, i) => i !== index);
-            const newPtsB = r.pointsB.filter((_, i) => i !== index);
-            return { ...r, pointsA: newPtsA, pointsB: newPtsB };
+            return {
+              ...r,
+              pointsA: r.pointsA.filter((_, i) => i !== index),
+              pointsB: r.pointsB.filter((_, i) => i !== index)
+            };
           }
           return r;
         }));
@@ -207,392 +314,271 @@ export default function App() {
       }
     };
 
-    const handleKeyUp = (e) => {
-      if (e.key.toLowerCase() === 'z') {
-        setIsZooming(false);
-      }
+    const onKeyUp = (e) => {
+      if (e.key.toLowerCase() === 'z') setIsZPressed(false);
     };
 
-    window.addEventListener('keydown', handleKeyDown);
-    window.addEventListener('keyup', handleKeyUp);
-    window.addEventListener('mouseup', handleGlobalMouseUp);
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
     return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-      window.removeEventListener('keyup', handleKeyUp);
-      window.removeEventListener('mouseup', handleGlobalMouseUp);
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
     };
   }, [hoveredEdge, hoveredPoint]);
 
-  // --- Ear Clipping Triangulation ---
-  const crossWidth = (a, b, c) => (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
-
-  const isPointInTriangle = (p, a, b, c) => {
-    const u = crossWidth(b, c, p);
-    const v = crossWidth(c, a, p);
-    const w = crossWidth(a, b, p);
-    return (u >= 0 && v >= 0 && w >= 0) || (u <= 0 && v <= 0 && w <= 0);
-  };
-
-  const triangulatePolygon = (points) => {
-    if (points.length < 3) return [];
-    const indices = [];
-    let area = 0;
-    for (let i = 0; i < points.length; i++) {
-      indices.push(i);
-      const p1 = points[i];
-      const p2 = points[(i + 1) % points.length];
-      area += (p2.x - p1.x) * (p2.y + p1.y);
-    }
-    let safeCount = 0;
+  // --- Texture Mapping Core ---
+  const triangulate = (points) => {
+    const indices = points.map((_, i) => i);
     const result = [];
-    while (indices.length > 3 && safeCount++ < 1000) {
-      let earFound = false;
-      const n = indices.length;
-      for (let i = 0; i < n; i++) {
-        const iPrev = (i - 1 + n) % n;
-        const iNext = (i + 1) % n;
-        const idxPrev = indices[iPrev], idxCurr = indices[i], idxNext = indices[iNext];
-        const pPrev = points[idxPrev], pCurr = points[idxCurr], pNext = points[idxNext];
-        const cross = crossWidth(pPrev, pCurr, pNext);
-        if (Math.abs(cross) > 0.000001 && Math.sign(cross) === Math.sign(area)) continue;
-        let isEar = true;
-        for (let k = 0; k < n; k++) {
-          if (k === iPrev || k === i || k === iNext) continue;
-          if (isPointInTriangle(points[indices[k]], pPrev, pCurr, pNext)) {
-            isEar = false;
-            break;
-          }
-        }
-        if (isEar) {
-          result.push(idxPrev, idxCurr, idxNext);
-          indices.splice(i, 1);
-          earFound = true;
-          break;
-        }
+    let count = 0;
+    while (indices.length > 3 && count < 500) {
+      count++;
+      let found = false;
+      for (let i = 0; i < indices.length; i++) {
+        result.push(indices[(i + indices.length - 1) % indices.length], indices[i], indices[(i + 1) % indices.length]);
+        indices.splice(i, 1);
+        found = true;
+        break;
       }
-      if (!earFound) break;
-    }
-    if (indices.length === 3) result.push(indices[0], indices[1], indices[2]);
-    else if (indices.length > 3) {
-      for (let i = 1; i < indices.length - 1; i++) result.push(indices[0], indices[i], indices[i + 1]);
+      if (!found) break;
     }
+    if (indices.length === 3) result.push(...indices);
     return result;
   };
 
-  useEffect(() => {
+  const drawMapping = useCallback(() => {
     if (!previewMode || !imgA || !imgB || !canvasPreviewRef.current) return;
     const canvas = canvasPreviewRef.current;
     const ctx = canvas.getContext('2d');
     const imageA = new Image();
     const imageB = new Image();
-    let isComponentMounted = true;
-    let loadedCount = 0;
-    const onImageLoad = () => {
-      if (!isComponentMounted) return;
-      loadedCount++;
-      if (loadedCount === 2) {
+    let loaded = 0;
+    const onLoad = () => {
+      loaded++;
+      if (loaded === 2) {
         canvas.width = imageA.width;
         canvas.height = imageA.height;
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.drawImage(imageA, 0, 0);
         regions.forEach(region => {
           if (region.pointsA.length < 3) return;
           const ptsA = region.pointsA.map(p => ({ x: p.x * imageA.width, y: p.y * imageA.height }));
           const ptsB = region.pointsB.map(p => ({ x: p.x * imageB.width, y: p.y * imageB.height }));
-          const indices = triangulatePolygon(ptsB);
-          for (let i = 0; i < indices.length; i += 3) {
-            textureMapTriangle(ctx, imageB, ptsA[indices[i]], ptsA[indices[i + 1]], ptsA[indices[i + 2]], ptsB[indices[i]], ptsB[indices[i + 1]], ptsB[indices[i + 2]]);
+          const tris = triangulate(ptsB);
+          for (let i = 0; i < tris.length; i += 3) {
+            drawTriangle(ctx, imageB, ptsA[tris[i]], ptsA[tris[i + 1]], ptsA[tris[i + 2]], ptsB[tris[i]], ptsB[tris[i + 1]], ptsB[tris[i + 2]]);
           }
         });
       }
     };
-    imageA.onload = onImageLoad;
-    imageB.onload = onImageLoad;
-    imageA.src = imgA;
-    imageB.src = imgB;
-    return () => { isComponentMounted = false; };
+    imageA.src = imgA; imageB.src = imgB;
+    imageA.onload = onLoad; imageB.onload = onLoad;
   }, [previewMode, imgA, imgB, regions]);
 
-  const exportJson = (e) => {
-    e.preventDefault();
-    const data = JSON.stringify(regions, null, 2);
-    const blob = new Blob([data], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = 'texture-mapping-config.json';
-    link.click();
-    URL.revokeObjectURL(url);
+  useEffect(() => { drawMapping(); }, [drawMapping]);
+
+  const drawTriangle = (ctx, img, p0, p1, p2, t0, t1, t2) => {
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(p0.x, p0.y); ctx.lineTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.closePath();
+    ctx.clip();
+    const delta = (t0.x - t2.x) * (t1.y - t2.y) - (t1.x - t2.x) * (t0.y - t2.y);
+    if (Math.abs(delta) < 0.001) { ctx.restore(); return; }
+    const a = ((p0.x - p2.x) * (t1.y - t2.y) - (p1.x - p2.x) * (t0.y - t2.y)) / delta;
+    const b = ((p0.y - p2.y) * (t1.y - t2.y) - (p1.y - p2.y) * (t0.y - t2.y)) / delta;
+    const c = ((t0.x - t2.x) * (p1.x - p2.x) - (t1.x - t2.x) * (p0.x - p2.x)) / delta;
+    const d = ((t0.x - t2.x) * (p1.y - p2.y) - (t1.x - t2.x) * (p0.y - p2.y)) / delta;
+    const e = p2.x - a * t2.x - c * t2.y;
+    const f = p2.y - b * t2.x - d * t2.y;
+    ctx.setTransform(a, b, c, d, e, f);
+    ctx.drawImage(img, 0, 0);
+    ctx.restore();
   };
 
-  const downloadPreview = (e) => {
-    if (e) e.preventDefault();
-    const canvas = canvasPreviewRef.current;
-    if (!canvas) return;
-    try {
-      canvas.toBlob((blob) => {
-        if (!blob) return;
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.download = 'texture-mapper-result.png';
-        link.href = url;
-        link.click();
-        URL.revokeObjectURL(url);
-      }, 'image/png');
-    } catch (err) {
-      console.error("Download error:", err);
-    }
-  };
-
-  const renderOverlay = (side, isZoomView = false) => {
-    const pointsKey = side === 'A' ? 'pointsA' : 'pointsB';
-    const visibleRegions = (side === 'B' && hideUnselected && selectedRegionId)
+  const renderSVG = (side) => {
+    const visibleRegions = (side === 'B' && focusModeB)
       ? regions.filter(r => r.id === selectedRegionId)
       : regions;
 
-    const baseStrokeWidth = 1.5;
-    const selectedStrokeWidth = 3;
-    const baseCircleRadius = 0.5;
-
-    const currentStrokeW = isZoomView ? (baseStrokeWidth / zoomFactor) : baseStrokeWidth;
-    const currentSelectedStrokeW = isZoomView ? (selectedStrokeWidth / zoomFactor) : selectedStrokeWidth;
-    const currentCircleRadius = isZoomView ? (baseCircleRadius / zoomFactor) : baseCircleRadius;
-
     return (
-      <svg
-        className="absolute top-0 left-0 w-full h-full pointer-events-none"
-        style={{ zIndex: 10, overflow: 'visible' }}
-        viewBox="0 0 100 100"
-        preserveAspectRatio="none"
-      >
+      <svg className="absolute inset-0 w-full h-full pointer-events-none overflow-visible" viewBox="0 0 100 100" preserveAspectRatio="none">
         {visibleRegions.map(r => {
           const isSelected = r.id === selectedRegionId;
-          const points = r[pointsKey];
-          const pointsStr = points.map(p => `${p.x * 100},${p.y * 100}`).join(' ');
+          const points = side === 'A' ? r.pointsA : r.pointsB;
+          const polyStr = points.map(p => `${p.x * 100},${p.y * 100}`).join(' ');
 
           return (
-            <g key={`poly-group-${r.id}`}>
+            <g key={r.id}>
               <polygon
-                points={pointsStr}
+                points={polyStr}
+                className="pointer-events-auto cursor-pointer"
+                onMouseDown={() => setSelectedRegionId(r.id)}
                 style={{
-                  vectorEffect: 'non-scaling-stroke',
                   fill: r.color,
-                  fillOpacity: isSelected ? 0.4 : 0.1,
-                  stroke: isSelected ? '#00f2ff' : r.color,
-                  strokeWidth: isSelected ? currentSelectedStrokeW : currentStrokeW,
-                  strokeDasharray: isSelected ? "none" : (isZoomView ? `${0.5 / zoomFactor}, ${0.5 / zoomFactor}` : "2, 2")
+                  fillOpacity: isSelected ? 0.35 : 0.1,
+                  stroke: isSelected ? '#fff' : r.color,
+                  strokeWidth: isSelected ? 1 : 0.5,
+                  vectorEffect: 'non-scaling-stroke'
                 }}
-                className={isZoomView ? "" : "pointer-events-auto cursor-pointer"}
-                onMouseDown={isZoomView ? undefined : (e) => { e.stopPropagation(); setSelectedRegionId(r.id); }}
               />
+              {points.map((p, idx) => {
+                const isHovered = hoveredPoint?.regionId === r.id && hoveredPoint?.index === idx;
+                const isDrag = draggingPoint?.regionId === r.id && draggingPoint?.index === idx && draggingPoint.side === side;
+                const baseRadius = isSelected ? 1.0 : 0.5;
+                const finalRadius = isHovered || isDrag ? 1.8 : baseRadius;
+
+                return (
+                  <circle
+                    key={idx}
+                    cx={p.x * 100} cy={p.y * 100}
+                    r={finalRadius}
+                    className="pointer-events-auto cursor-move"
+                    onMouseDown={(e) => handlePointMouseDown(e, side, r.id, idx)}
+                    style={{
+                      fill: isSelected ? '#fff' : r.color,
+                      stroke: (isHovered || isDrag) ? '#00e5ff' : '#000',
+                      strokeWidth: isSelected ? 0.4 : 0.2,
+                      vectorEffect: 'non-scaling-stroke'
+                    }}
+                  />
+                );
+              })}
+              {isSelected && hoveredEdge && hoveredEdge.side === side && (
+                <circle cx={hoveredEdge.point.x * 100} cy={hoveredEdge.point.y * 100} r={1.2}
+                  style={{ fill: '#fff', stroke: '#00e5ff', strokeWidth: 0.5, vectorEffect: 'non-scaling-stroke', filter: 'drop-shadow(0 0 2px rgba(0,229,255,0.8))' }}
+                />
+              )}
             </g>
           );
         })}
-
-        {visibleRegions.map(reg => {
-          const isRegSelected = reg.id === selectedRegionId;
-          return reg[pointsKey].map((p, idx) => {
-            let strokeColor = isRegSelected ? '#fff200' : 'rgba(0, 0, 0, 0.4)';
-            let fillColor = reg.color;
-            let radius = isRegSelected ? (currentCircleRadius * 1.5) : currentCircleRadius;
-            let pointStrokeW = isZoomView ? (0.5 / zoomFactor) : (isRegSelected ? 1 : 0.5);
-
-            const isDragging = !isZoomView && draggingPoint && draggingPoint.regionId === reg.id && draggingPoint.index === idx;
-            const isHovering = !isZoomView && hoveredPoint && hoveredPoint.regionId === reg.id && hoveredPoint.index === idx;
-
-            if (isDragging || isHovering) {
-              strokeColor = isDragging ? '#ff0000' : '#0066ff';
-              fillColor = 'white';
-              radius = currentCircleRadius * 2;
-              pointStrokeW = isZoomView ? (1 / zoomFactor) : 2;
-            }
-
-            return (
-              <circle
-                key={`node-${reg.id}-${idx}`}
-                cx={p.x * 100} cy={p.y * 100} r={radius}
-                style={{
-                  vectorEffect: 'non-scaling-stroke',
-                  fill: fillColor,
-                  fillOpacity: (isRegSelected || isHovering) ? 1 : 0.8,
-                  stroke: strokeColor,
-                  strokeWidth: pointStrokeW,
-                  cursor: isZoomView ? 'default' : 'move',
-                  pointerEvents: isZoomView ? 'none' : 'auto'
-                }}
-                onMouseDown={isZoomView ? undefined : (e) => handlePointMouseDown(e, side, reg.id, idx)}
-              />
-            );
-          });
-        })}
       </svg>
     );
   };
 
-  const renderMagnifier = (side, imageSrc, rect) => {
-    if (!isZooming || !mousePos.relX || !rect) return null;
-
-    const viewSize = 240;
-    const centerX = viewSize / 2;
-    const centerY = viewSize / 2;
-
-    const translateX = centerX - (mousePos.relX * rect.width * zoomFactor);
-    const translateY = centerY - (mousePos.relY * rect.height * zoomFactor);
-
-    return (
-      <div
-        className="absolute pointer-events-none border-2 border-blue-500 shadow-2xl rounded-full overflow-hidden bg-black z-[100]"
-        style={{
-          left: `${mousePos.relX * 100}%`,
-          top: `${mousePos.relY * 100}%`,
-          width: `${viewSize}px`,
-          height: `${viewSize}px`,
-          transform: 'translate(-50%, -115%)'
-        }}
-      >
-        <div
-          className="absolute origin-top-left"
-          style={{
-            width: rect.width,
-            height: rect.height,
-            transform: `translate(${translateX}px, ${translateY}px) scale(${zoomFactor})`,
-          }}
-        >
-          <div className="relative w-full h-full">
-            <img src={imageSrc} className="block w-full h-full object-contain" draggable={false} />
-            {renderOverlay(side, true)}
-          </div>
-        </div>
-
-        {/* Navigation Crosshair */}
-        <div className="absolute top-1/2 left-0 w-full h-px bg-blue-400/50"></div>
-        <div className="absolute left-1/2 top-0 w-px h-full bg-blue-400/50"></div>
-        <div className="absolute inset-0 rounded-full border-[4px] border-black/20 pointer-events-none shadow-inner"></div>
-      </div>
-    );
-  };
-
   return (
-    <div className="flex flex-col h-screen bg-gray-900 text-gray-100 font-sans select-none">
-      <div className="flex items-center justify-between p-4 bg-gray-800 border-b border-gray-700 shadow-md z-50">
-        <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent tracking-tight">UV Texture Mapper</h1>
-
-        <div className="flex items-center space-x-2 text-[10px] text-gray-500 mr-auto ml-6 font-medium">
-          <span className="bg-gray-700/50 border border-gray-600 px-1.5 py-0.5 rounded text-gray-300">A</span> Add Node
-          <span className="bg-gray-700/50 border border-gray-600 px-1.5 py-0.5 rounded text-gray-300 ml-1">D</span> Delete Node
-          <span className="bg-gray-700/50 border border-gray-600 px-1.5 py-0.5 rounded text-gray-300 ml-1">Hold Z</span> Zoom
-        </div>
-
-        <div className="flex items-center space-x-3">
-
-          <div className="flex space-x-2">
-            <label className="flex items-center gap-2 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded cursor-pointer text-xs transition-colors border border-gray-600">
-              <Upload size={14} /> <span>Image A</span>
-              <input type="file" accept="image/*" className="hidden" onChange={(e) => handleImageUpload(e, setImgA)} />
-            </label>
-            <label className="flex items-center gap-2 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded cursor-pointer text-xs transition-colors border border-gray-600">
-              <Upload size={14} /> <span>Image B</span>
-              <input type="file" accept="image/*" className="hidden" onChange={(e) => handleImageUpload(e, setImgB)} />
-            </label>
-          </div>
-          <div className="w-px h-6 bg-gray-700 mx-1"></div>
-          <button onClick={addRegion} className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 rounded text-xs font-medium transition-all"><Plus size={14} /> New Region</button>
-          {selectedRegionId && <button onClick={() => deleteRegion(selectedRegionId)} className="flex items-center gap-2 px-3 py-1.5 bg-red-900/30 text-red-300 hover:bg-red-900/50 rounded border border-red-800/40 text-xs transition-colors"><Trash2 size={14} /> Delete</button>}
-
-          <div className="flex space-x-2">
-            <label className="flex items-center gap-2 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded cursor-pointer text-xs transition-colors">
-              <FolderOpen size={14} /> <span>Import JSON</span>
-              <input type="file" accept=".json" className="hidden" onChange={handleJsonUpload} />
-            </label>
-            <button onClick={exportJson} className="flex items-center gap-2 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded text-xs transition-colors"><Save size={14} /> Export JSON</button>
+    <div className="flex flex-col h-screen bg-[#080808] text-white font-sans overflow-hidden" onMouseUp={handleMouseUp}>
+      <header className="flex items-center justify-between px-6 py-4 bg-[#111] border-b border-white/5 shadow-2xl z-20">
+        <div className="flex items-center gap-4">
+          <div className="p-2.5 bg-indigo-600 rounded-xl shadow-lg shadow-indigo-500/20"><Target size={22} /></div>
+          <div>
+            <h1 className="text-lg font-black tracking-tighter leading-none italic">UV WRAPPER</h1>
+            <span className="text-[9px] text-indigo-400 font-bold uppercase tracking-[0.3em]">Mapping Engine v2.5</span>
           </div>
+        </div>
 
-
-          <div className="w-px h-6 bg-gray-700 mx-1"></div>
-
-          <button onClick={() => setPreviewMode(!previewMode)} className={`flex items-center gap-2 px-4 py-1.5 rounded text-xs font-bold transition-all ${previewMode ? 'bg-emerald-600 text-white shadow-lg' : 'bg-gray-700 hover:bg-gray-600'}`}>
-            {previewMode ? <EyeOff size={14} /> : <Eye size={14} />} {previewMode ? 'Back to Edit' : 'Preview Result'}
+        <div className="flex items-center gap-3">
+          <button onClick={addRegion} className="flex items-center gap-2 px-5 py-2 bg-indigo-600 hover:bg-indigo-500 rounded-full text-sm font-bold transition-all active:scale-95">
+            <Plus size={18} /> Add Region
+          </button>
+          <div className="h-6 w-px bg-white/10 mx-2" />
+          <label className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-full text-sm font-semibold cursor-pointer border border-white/5">
+            <FolderOpen size={16} /> Import JSON
+            <input type="file" className="hidden" accept=".json" onChange={handleJsonUpload} />
+          </label>
+          <button onClick={() => {
+            const blob = new Blob([JSON.stringify(regions, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a'); a.href = url; a.download = 'uv-config.json'; a.click();
+          }} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-full text-sm font-semibold border border-white/5">
+            <Download size={16} /> Export JSON
+          </button>
+          <button
+            onClick={() => setPreviewMode(!previewMode)}
+            className={`flex items-center gap-2 px-6 py-2 rounded-full text-sm font-black transition-all shadow-lg ${previewMode ? 'bg-emerald-500 text-white' : 'bg-white text-black hover:bg-zinc-200'}`}
+          >
+            {previewMode ? <EyeOff size={18} /> : <Eye size={18} />}
+            {previewMode ? 'Exit Preview' : 'Live Preview'}
           </button>
         </div>
-      </div>
+      </header>
 
-      <div className="flex-1 flex overflow-hidden relative">
+      <main className="flex-1 flex overflow-hidden relative">
         {!previewMode ? (
-          <div className="flex w-full h-full">
-            <div className="flex-1 flex flex-col border-r border-gray-800 bg-gray-950 p-6 relative">
-              <div className="mb-3 text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 text-center">Target Canvas (Side A)</div>
-              <div className="relative flex-1 bg-black/40 rounded-xl border border-gray-800 overflow-hidden select-none flex items-center justify-center shadow-inner" onMouseMove={(e) => handleMouseMove(e, 'A')} onMouseDown={() => setSelectedRegionId(null)}>
-                {imgA ? (
-                  <div className="relative" style={{ width: 'fit-content', height: 'fit-content', maxWidth: '100%', maxHeight: '100%' }}>
-                    <img ref={imgRefA} src={imgA} className="block w-auto h-auto max-w-full max-h-full shadow-lg" draggable={false} />
-                    {renderOverlay('A')}
-                    {renderMagnifier('A', imgA, mousePos.rect)}
+          <>
+            <div className="flex-1 flex flex-col border-r border-white/5 bg-[#080808]">
+              <div className="p-3 text-center text-[10px] font-black text-zinc-600 uppercase tracking-[0.4em] bg-zinc-900/40 flex items-center justify-center gap-2">
+                <Target size={12} /> Target Canvas (A)
+              </div>
+              <div className="flex-1 relative flex items-center justify-center p-12 overflow-hidden bg-[radial-gradient(circle_at_center,_#111_0%,_#080808_100%)]">
+                {!imgA ? (
+                  <label className="flex flex-col items-center gap-4 cursor-pointer p-12 border-2 border-dashed border-zinc-800 rounded-3xl hover:bg-zinc-900/50 transition-all">
+                    <Upload className="text-zinc-700" size={40} />
+                    <span className="text-zinc-500 font-bold">Upload UV Target</span>
+                    <input type="file" className="hidden" onChange={(e) => handleImageUpload(e, 'A')} />
+                  </label>
+                ) : (
+                  <div className="relative inline-block shadow-2xl border border-white/5"
+                    onMouseMove={(e) => handleMouseMove(e, 'A')}
+                    onMouseLeave={handleMouseLeave}
+                  >
+                    <img ref={imgRefA} src={imgA} className="max-w-full max-h-[72vh] block select-none rounded-sm" draggable={false} />
+                    {renderSVG('A')}
+                    {isZPressed && <Magnifier imgUrl={imgA} regions={regions} selectedId={selectedRegionId} mousePos={magnifierPos} side="A" imgSize={imgSizeA} focusModeB={focusModeB} />}
                   </div>
-                ) : <div className="text-gray-700 text-sm italic">Please upload Image A</div>}
+                )}
               </div>
             </div>
 
-            <div className="flex-1 flex flex-col bg-gray-950 p-6 relative">
-              <div className="mb-3 text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 text-center flex items-center justify-center gap-4">
-                Texture Source (Side B)
-                <label className="flex items-center gap-2 cursor-pointer normal-case tracking-normal text-gray-400 hover:text-gray-200 transition-colors ml-4 border border-gray-800 px-2 py-0.5 rounded bg-gray-900/50">
-                  <input type="checkbox" className="w-3 h-3 rounded border-gray-700 bg-gray-800 text-blue-600 focus:ring-0" checked={hideUnselected} onChange={(e) => setHideUnselected(e.target.checked)} />
-                  <span className="text-[10px] font-medium">Selection Only</span>
-                </label>
+            <div className="flex-1 flex flex-col bg-[#0b0b0b]">
+              <div className="p-2 px-4 flex items-center justify-between bg-zinc-900/40">
+                <span className="text-[10px] font-black text-zinc-600 uppercase tracking-[0.4em] flex items-center gap-2"><Search size={12} /> Source Texture (B)</span>
+                <button
+                  onClick={() => setFocusModeB(!focusModeB)}
+                  className={`flex items-center gap-2 px-4 py-1 rounded-full text-[10px] font-black tracking-widest transition-all border ${focusModeB ? 'bg-indigo-600 border-indigo-500 text-white shadow-lg shadow-indigo-600/30' : 'bg-zinc-800 border-white/5 text-zinc-500'}`}
+                >
+                  <MousePointer2 size={12} />
+                  Focus Mode: {focusModeB ? 'ON' : 'OFF'}
+                </button>
               </div>
-              <div className="relative flex-1 bg-black/40 rounded-xl border border-gray-800 overflow-hidden select-none flex items-center justify-center shadow-inner" onMouseMove={(e) => handleMouseMove(e, 'B')} onMouseDown={() => setSelectedRegionId(null)}>
-                {imgB ? (
-                  <div className="relative" style={{ width: 'fit-content', height: 'fit-content', maxWidth: '100%', maxHeight: '100%' }}>
-                    <img ref={imgRefB} src={imgB} className="block w-auto h-auto max-w-full max-h-full shadow-lg" draggable={false} />
-                    {renderOverlay('B')}
-                    {renderMagnifier('B', imgB, mousePos.rect)}
+              <div className="flex-1 relative flex items-center justify-center p-12 overflow-hidden bg-[radial-gradient(circle_at_center,_#141414_0%,_#0b0b0b_100%)]">
+                {!imgB ? (
+                  <label className="flex flex-col items-center gap-4 cursor-pointer p-12 border-2 border-dashed border-zinc-800 rounded-3xl hover:bg-zinc-900/50 transition-all">
+                    <Upload className="text-zinc-700" size={40} />
+                    <span className="text-zinc-500 font-bold">Upload Source Drawing</span>
+                    <input type="file" className="hidden" onChange={(e) => handleImageUpload(e, 'B')} />
+                  </label>
+                ) : (
+                  <div className="relative inline-block shadow-2xl border border-white/5"
+                    onMouseMove={(e) => handleMouseMove(e, 'B')}
+                    onMouseLeave={handleMouseLeave}
+                  >
+                    <img ref={imgRefB} src={imgB} className="max-w-full max-h-[72vh] block select-none rounded-sm" draggable={false} />
+                    {renderSVG('B')}
+                    {isZPressed && <Magnifier imgUrl={imgB} regions={regions} selectedId={selectedRegionId} mousePos={magnifierPos} side="B" imgSize={imgSizeB} focusModeB={focusModeB} />}
                   </div>
-                ) : <div className="text-gray-700 text-sm italic">Please upload Image B</div>}
+                )}
               </div>
             </div>
-          </div>
-        ) : (
-          <div className="absolute inset-0 z-20 bg-gray-950 flex flex-col items-center justify-center p-8 overflow-auto">
-            <div className="mb-6 flex gap-4">
-              <button type="button" onClick={downloadPreview} className="flex items-center gap-2 px-6 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-full font-bold shadow-xl transition-all active:scale-95">
-                <Download size={18} /> Download Result (.png)
-              </button>
-              <button onClick={() => setPreviewMode(false)} className="flex items-center gap-2 px-6 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-full font-bold transition-all">
-                Back to Edit
-              </button>
+
+            {/* Bottom Status Bar */}
+            <div className="absolute bottom-8 left-1/2 -translate-x-1/2 px-10 py-5 bg-[#111]/90 backdrop-blur-xl rounded-[2rem] border border-white/10 flex gap-12 items-center shadow-2xl z-40">
+              <div className="flex items-center gap-5 pr-10 border-r border-white/10">
+                <div className="text-[9px] font-black text-zinc-500 uppercase tracking-widest">Selection</div>
+                {selectedRegion ? (
+                  <div className="flex items-center gap-4">
+                    <div className="w-6 h-6 rounded-full shadow-lg border-2 border-white/20" style={{ backgroundColor: selectedRegion.color }} />
+                    <span className="text-sm font-black tracking-tight">{selectedRegion.name}</span>
+                    <button onClick={() => deleteRegion(selectedRegionId)} className="p-2 text-zinc-600 hover:text-red-400 hover:bg-red-400/10 rounded-full transition-all"><Trash2 size={16} /></button>
+                  </div>
+                ) : (
+                  <span className="text-sm font-bold text-zinc-700 italic">No Active Selection</span>
+                )}
+              </div>
+
+              <div className="flex gap-8 items-center text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em]">
+                <div className="flex items-center gap-2"><kbd className="px-2 py-1 bg-zinc-800 rounded-md border border-white/5 text-white">Z</kbd> Hold for Magnifier</div>
+                <div className="flex items-center gap-2"><kbd className="px-2 py-1 bg-zinc-800 rounded-md border border-white/5 text-white">A</kbd> Add Point</div>
+                <div className="flex items-center gap-2"><kbd className="px-2 py-1 bg-zinc-800 rounded-md border border-white/5 text-white">D</kbd> Delete Point</div>
+              </div>
             </div>
-            <div className="relative shadow-2xl rounded-2xl overflow-hidden border border-gray-800 bg-black max-w-full max-h-[80vh]">
-              <canvas ref={canvasPreviewRef} className="block max-w-full max-h-[75vh] mx-auto" />
+          </>
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center bg-[#050505] p-12 overflow-auto">
+            <div className="bg-[#111] p-8 rounded-[3rem] shadow-[0_50px_100px_rgba(0,0,0,0.8)] border border-white/5 max-w-full max-h-full">
+              <canvas ref={canvasPreviewRef} className="max-w-full max-h-[75vh] block rounded-2xl" />
             </div>
           </div>
         )}
-      </div>
+      </main>
     </div>
   );
-}
-
-function textureMapTriangle(ctx, img, p0, p1, p2, t0, t1, t2) {
-  ctx.save();
-  const midX = (p0.x + p1.x + p2.x) / 3, midY = (p0.y + p1.y + p2.y) / 3;
-  const expand = (p) => {
-    const dx = p.x - midX, dy = p.y - midY;
-    const mag = Math.sqrt(dx * dx + dy * dy) || 1;
-    return { x: p.x + (dx / mag) * 0.5, y: p.y + (dy / mag) * 0.5 };
-  };
-  const ep0 = expand(p0), ep1 = expand(p1), ep2 = expand(p2);
-  ctx.beginPath();
-  ctx.moveTo(ep0.x, ep0.y); ctx.lineTo(ep1.x, ep1.y); ctx.lineTo(ep2.x, ep2.y);
-  ctx.closePath(); ctx.clip();
-  const x0 = t0.x, y0 = t0.y, x1 = t1.x, y1 = t1.y, x2 = t2.x, y2 = t2.y;
-  const u0 = p0.x, v0 = p0.y, u1 = p1.x, v1 = p1.y, u2 = p2.x, v2 = p2.y;
-  const delta = (x0 - x2) * (y1 - y2) - (x1 - x2) * (y0 - y2);
-  if (Math.abs(delta) < 0.0001) { ctx.restore(); return; }
-  const a = ((u0 - u2) * (y1 - y2) - (u1 - u2) * (y0 - y2)) / delta;
-  const b = ((v0 - v2) * (y1 - y2) - (v1 - v2) * (y0 - v2)) / delta;
-  const c = ((x0 - x2) * (u1 - u2) - (x1 - x2) * (u0 - u2)) / delta;
-  const d = ((x0 - x2) * (v1 - v2) - (x1 - x2) * (v0 - v2)) / delta;
-  const e = u2 - a * x2 - c * y2, f = v2 - b * x2 - d * y2;
-  ctx.setTransform(a, b, c, d, e, f);
-  ctx.drawImage(img, 0, 0, img.width, img.height);
-  ctx.restore();
 }