Enhance: Improve Triangulation Logic and Magnifier UI v2.7

src/App.jsx

@@ -27,19 +27,17 @@ const getRandomColor = () => {
 };
 
 // --- Magnifier Component ---
-function Magnifier({ imgUrl, regions, selectedId, mousePos, side, imgSize, focusModeB }) {
+function Magnifier({ imgUrl, regions, selectedId, mousePos, side, imgSize, focusModeB, hoveredPoint }) {
   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;
 
@@ -53,7 +51,6 @@ function Magnifier({ imgUrl, regions, selectedId, mousePos, side, imgSize, focus
         top: mousePos.py - size - 40,
       }}
     >
-      {/* Background Image Source */}
       <div
         className="absolute inset-0 bg-[#111]"
         style={{
@@ -64,7 +61,6 @@ function Magnifier({ imgUrl, regions, selectedId, mousePos, side, imgSize, focus
         }}
       />
 
-      {/* 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;
@@ -88,22 +84,24 @@ function Magnifier({ imgUrl, regions, selectedId, mousePos, side, imgSize, focus
                   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}
-                />
-              ))}
+              {localPoints.map((p, idx) => {
+                const isHovered = hoveredPoint?.regionId === reg.id && hoveredPoint?.index === idx;
+                return (
+                  <circle
+                    key={idx}
+                    cx={p.x} cy={p.y}
+                    r={isSelected ? 4 : 2}
+                    fill={isHovered ? '#00ffff' : (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" />
@@ -126,7 +124,6 @@ export default function App() {
   const [previewMode, setPreviewMode] = 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);
@@ -326,21 +323,67 @@ export default function App() {
     };
   }, [hoveredEdge, hoveredPoint]);
 
-  // --- Texture Mapping Core ---
+  // --- Texture Mapping Core (Improved Ear Clipping) ---
   const triangulate = (points) => {
+    if (points.length < 3) return [];
     const indices = points.map((_, i) => i);
     const result = [];
-    let count = 0;
-    while (indices.length > 3 && count < 500) {
-      count++;
-      let found = false;
+
+    // Signed area for orientation
+    let area = 0;
+    for (let i = 0; i < points.length; i++) {
+      const p1 = points[i];
+      const p2 = points[(i + 1) % points.length];
+      area += (p2.x - p1.x) * (p2.y + p1.y);
+    }
+    const clockwise = area > 0;
+
+    const isPointInTriangle = (p, a, b, c) => {
+      const areaOrig = Math.abs((b.x - a.x) * (c.y - a.y) - (c.x - a.x) * (b.y - a.y));
+      const area1 = Math.abs((a.x - p.x) * (b.y - p.y) - (b.x - p.x) * (a.y - p.y));
+      const area2 = Math.abs((b.x - p.x) * (c.y - p.y) - (c.x - p.x) * (b.y - p.y));
+      const area3 = Math.abs((c.x - p.x) * (a.y - p.y) - (a.x - p.x) * (c.y - p.y));
+      return Math.abs(area1 + area2 + area3 - areaOrig) < 0.0001;
+    };
+
+    const isConvex = (pPrev, pCurr, pNext) => {
+      const val = (pCurr.x - pPrev.x) * (pNext.y - pPrev.y) - (pCurr.y - pPrev.y) * (pNext.x - pPrev.x);
+      return clockwise ? val < 0 : val > 0;
+    };
+
+    let limit = points.length * 10;
+    while (indices.length > 3 && limit > 0) {
+      limit--;
+      let earFound = 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;
+        const prevIdx = indices[(i + indices.length - 1) % indices.length];
+        const currIdx = indices[i];
+        const nextIdx = indices[(i + 1) % indices.length];
+
+        const pPrev = points[prevIdx];
+        const pCurr = points[currIdx];
+        const pNext = points[nextIdx];
+
+        if (!isConvex(pPrev, pCurr, pNext)) continue;
+
+        let hasPointInside = false;
+        for (let j = 0; j < indices.length; j++) {
+          const pIdx = indices[j];
+          if (pIdx === prevIdx || pIdx === currIdx || pIdx === nextIdx) continue;
+          if (isPointInTriangle(points[pIdx], pPrev, pCurr, pNext)) {
+            hasPointInside = true;
+            break;
+          }
+        }
+
+        if (!hasPointInside) {
+          result.push(prevIdx, currIdx, nextIdx);
+          indices.splice(i, 1);
+          earFound = true;
+          break;
+        }
       }
-      if (!found) break;
+      if (!earFound) break;
     }
     if (indices.length === 3) result.push(...indices);
     return result;
@@ -421,10 +464,11 @@ export default function App() {
                 }}
               />
               {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;
+                const isHoveredOrDragging = (hoveredPoint?.regionId === r.id && hoveredPoint?.index === idx) ||
+                  (draggingPoint?.regionId === r.id && draggingPoint?.index === idx && draggingPoint.side === side);
+
+                // Point size logic: increased selected point size by 0.25
+                const finalRadius = isSelected ? 0.75 : 0.25;
 
                 return (
                   <circle
@@ -434,9 +478,9 @@ export default function App() {
                     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,
+                      fill: isHoveredOrDragging ? '#00ffff' : (isSelected ? '#fff' : r.color),
+                      stroke: isHoveredOrDragging ? '#fff' : '#000',
+                      strokeWidth: 0.2,
                       vectorEffect: 'non-scaling-stroke'
                     }}
                   />
@@ -461,7 +505,7 @@ export default function App() {
           <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>
+            <span className="text-[9px] text-indigo-400 font-bold uppercase tracking-[0.3em]">Mapping Engine v2.7</span>
           </div>
         </div>
 
@@ -512,7 +556,7 @@ export default function App() {
                   >
                     <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} />}
+                    {isZPressed && <Magnifier imgUrl={imgA} regions={regions} selectedId={selectedRegionId} mousePos={magnifierPos} side="A" imgSize={imgSizeA} focusModeB={focusModeB} hoveredPoint={hoveredPoint} />}
                   </div>
                 )}
               </div>
@@ -543,7 +587,7 @@ export default function App() {
                   >
                     <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} />}
+                    {isZPressed && <Magnifier imgUrl={imgB} regions={regions} selectedId={selectedRegionId} mousePos={magnifierPos} side="B" imgSize={imgSizeB} focusModeB={focusModeB} hoveredPoint={hoveredPoint} />}
                   </div>
                 )}
               </div>