optimization and cleanup

Author: SeanPuller

index.html

@@ -222,6 +222,9 @@
             z-index: 1000;
             display: none;
             box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
+            top: 0;
+            left: 0;
+            will-change: transform;
         }
 
         /* Right Sidebar */
@@ -1520,8 +1523,9 @@ <h2 class="modal-title">Export Flow Map</h2>
 
                 if (clientX !== undefined && clientY !== undefined) {
                     const cursorRadius = size / 2;
-                    this.brushCursor.style.left = `${(clientX - rect.left) - cursorRadius}px`;
-                    this.brushCursor.style.top = `${(clientY - rect.top) - cursorRadius}px`;
+                    const x = (clientX - rect.left) - cursorRadius;
+                    const y = (clientY - rect.top) - cursorRadius;
+                    this.brushCursor.style.transform = `translate3d(${x}px, ${y}px, 0)`;
                 }
 
 				// Update cursor appearance based on tool
@@ -1545,8 +1549,9 @@ <h2 class="modal-title">Export Flow Map</h2>
                 const visualSize = (this.brushSize * brushScale * 2) / scale;
                 const cursorRadius = visualSize / 2;
 
-				this.brushCursor.style.left = `${(e.clientX - rect.left) - cursorRadius}px`;
-				this.brushCursor.style.top = `${(e.clientY - rect.top) - cursorRadius}px`;
+                const x = (e.clientX - rect.left) - cursorRadius;
+                const y = (e.clientY - rect.top) - cursorRadius;
+				this.brushCursor.style.transform = `translate3d(${x}px, ${y}px, 0)`;
 
 				// Calculate mouse velocity and direction
 				this.mouseVelocityX = this.mouseX - this.lastMouseX;
@@ -1807,6 +1812,7 @@ <h2 class="modal-title">Export Flow Map</h2>
                 this.ctx.globalAlpha = 0.5;
                 this.ctx.strokeStyle = '#ffffff';
                 this.ctx.lineWidth = Math.max(1, 2 * scale);
+                this.ctx.beginPath();
 
                 const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
                 const data = imageData.data;
@@ -1824,14 +1830,11 @@ <h2 class="modal-title">Export Flow Map</h2>
                         const magnitude = Math.sqrt(flowX * flowX + flowY * flowY);
 
                         if (magnitude > 0.1 && data[index + 3] > 10) {
-                            this.ctx.beginPath();
                             this.ctx.moveTo(x, y);
                             this.ctx.lineTo(x + flowX * arrowSize, y + flowY * arrowSize);
-                            this.ctx.stroke();
 
                             // Arrow head
                             const angle = Math.atan2(flowY, flowX);
-                            this.ctx.beginPath();
                             this.ctx.moveTo(x + flowX * arrowSize, y + flowY * arrowSize);
                             this.ctx.lineTo(
                                 x + flowX * arrowSize - headSize * Math.cos(angle - Math.PI / 6),
@@ -1842,11 +1845,10 @@ <h2 class="modal-title">Export Flow Map</h2>
                                 x + flowX * arrowSize - headSize * Math.cos(angle + Math.PI / 6),
                                 y + flowY * arrowSize - headSize * Math.sin(angle + Math.PI / 6)
                             );
-                            this.ctx.stroke();
                         }
                     }
                 }
-                
+                this.ctx.stroke();
                 this.ctx.restore();
             }
 
@@ -2488,44 +2490,6 @@ <h2 class="modal-title">Export Flow Map</h2>
 
                 requestAnimationFrame(() => this.animate());
             }
-            
-            // Utility functions
-            hexToRgb(hex) {
-                const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-                return result ? {
-                    r: parseInt(result[1], 16),
-                    g: parseInt(result[2], 16),
-                    b: parseInt(result[3], 16)
-                } : null;
-            }
-            
-            rgbToHex(r, g, b) {
-                return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-            }
-            
-            hsvToRgb(h, s, v) {
-                let r, g, b;
-                const i = Math.floor(h * 6);
-                const f = h * 6 - i;
-                const p = v * (1 - s);
-                const q = v * (1 - f * s);
-                const t = v * (1 - (1 - f) * s);
-                
-                switch (i % 6) {
-                    case 0: r = v, g = t, b = p; break;
-                    case 1: r = q, g = v, b = p; break;
-                    case 2: r = p, g = v, b = t; break;
-                    case 3: r = p, g = q, b = v; break;
-                    case 4: r = t, g = p, b = v; break;
-                    case 5: r = v, g = p, b = q; break;
-                }
-                
-                return {
-                    r: Math.round(r * 255),
-                    g: Math.round(g * 255),
-                    b: Math.round(b * 255)
-                };
-            }
         }
 
         // Initialize the application