Update templates/index.html

templates/index.html

@@ -43,13 +43,15 @@
     <!-- Three.js Point Cloud Script -->
     <script>
         let scene, camera, renderer, points, raycaster, mouse, hoveredPoint = null;
+        let isDragging = false, previousMousePosition = { x: 0, y: 0 };
         const pointDetails = document.getElementById('point-details');
 
         function initPointCloud(parts) {
+            const canvas = document.getElementById('point-cloud');
             scene = new THREE.Scene();
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / 400, 0.1, 1000);
-            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('point-cloud') });
-            renderer.setSize(window.innerWidth * 0.9, 400);
+            camera = new THREE.PerspectiveCamera(75, canvas.offsetWidth / 400, 0.1, 1000);
+            renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true });
+            renderer.setSize(canvas.offsetWidth, 400);
 
             const positions = [];
             const colors = [];
@@ -72,47 +74,67 @@
 
             camera.position.z = 100;
             raycaster = new THREE.Raycaster();
+            raycaster.params.Points.threshold = 5; // Increase sensitivity
             mouse = new THREE.Vector2();
 
+            canvas.addEventListener('mousedown', onMouseDown);
+            canvas.addEventListener('mousemove', onMouseMove);
+            canvas.addEventListener('mouseup', onMouseUp);
             animate();
         }
 
         function animate() {
             requestAnimationFrame(animate);
-            points.rotation.y += 0.005;
             renderer.render(scene, camera);
         }
 
+        function onMouseDown(event) {
+            isDragging = true;
+            previousMousePosition = { x: event.clientX, y: event.clientY };
+        }
+
         function onMouseMove(event) {
             const rect = renderer.domElement.getBoundingClientRect();
             mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
             mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
 
-            raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObject(points);
-            if (intersects.length > 0) {
-                const index = intersects[0].index;
-                const part = window.parts.find(p => p.pointIndex === index * 3);
-                if (part && hoveredPoint !== part) {
-                    hoveredPoint = part;
-                    pointDetails.innerHTML = `
-                        <div class="text-gray-200">
-                            <strong>Category:</strong> ${part.category}<br>
-                            <strong>Node ID:</strong> ${part.node_id}<br>
-                            <strong>Parent Path:</strong> ${part.parent_path}<br>
-                            <strong>Level:</strong> ${part.level}<br>
-                            <strong>Location:</strong> Lines ${part.location[0]} to ${part.location[1]}<br>
-                            <strong>Vector:</strong> [${part.vector.join(', ')}]<br>
-                            <strong>Code:</strong><pre class="text-xs text-gray-300">${part.source}</pre>
-                        </div>
-                    `;
-                }
+            if (isDragging) {
+                const deltaX = event.clientX - previousMousePosition.x;
+                const deltaY = event.clientY - previousMousePosition.y;
+                points.rotation.y += deltaX * 0.005;
+                points.rotation.x += deltaY * 0.005;
+                previousMousePosition = { x: event.clientX, y: event.clientY };
             } else {
-                hoveredPoint = null;
-                pointDetails.innerHTML = '<p class="text-gray-400">Hover over a point to see details</p>';
+                raycaster.setFromCamera(mouse, camera);
+                const intersects = raycaster.intersectObject(points);
+                if (intersects.length > 0) {
+                    const index = intersects[0].index;
+                    const part = window.parts.find(p => p.pointIndex === index * 3);
+                    if (part && hoveredPoint !== part) {
+                        hoveredPoint = part;
+                        pointDetails.innerHTML = `
+                            <div class="text-gray-200">
+                                <strong>Category:</strong> ${part.category}<br>
+                                <strong>Node ID:</strong> ${part.node_id}<br>
+                                <strong>Parent Path:</strong> ${part.parent_path}<br>
+                                <strong>Level:</strong> ${part.level}<br>
+                                <strong>Location:</strong> Lines ${part.location[0]} to ${part.location[1]}<br>
+                                <strong>Vector:</strong> [${part.vector.join(', ')}]<br>
+                                <strong>Code:</strong><pre class="text-xs text-gray-300">${part.source}</pre>
+                            </div>
+                        `;
+                    }
+                } else {
+                    hoveredPoint = null;
+                    pointDetails.innerHTML = '<p class="text-gray-400">Hover over a point to see details</p>';
+                }
             }
         }
 
+        function onMouseUp() {
+            isDragging = false;
+        }
+
         function togglePointCloud() {
             const canvas = document.getElementById('point-cloud');
             const table = document.getElementById('results-table');
@@ -121,12 +143,10 @@
                 table.style.display = 'none';
                 if (!scene && window.parts) {
                     initPointCloud(window.parts);
-                    document.addEventListener('mousemove', onMouseMove);
                 }
             } else {
                 canvas.style.display = 'none';
                 table.style.display = 'block';
-                document.removeEventListener('mousemove', onMouseMove);
             }
         }
     </script>