interactivity was broken

coolshaders.md

@@ -1,3 +1,4 @@
 x<<127*y*t
 x<<20*t*80*y^8
 x**10*y^200*t+20
+x**10*y^200*t+20

index.html

@@ -32,6 +32,7 @@
             color: #fff;
             font-family: 'IBM Plex Mono', monospace;
             overflow: hidden;
+            touch-action: manipulation; /* Allow pan and zoom but disable double-tap zoom */
         }
         
         #canvas {
@@ -43,6 +44,8 @@
             image-rendering: pixelated;
             image-rendering: -moz-crisp-edges;
             image-rendering: crisp-edges;
+            touch-action: none; /* Disable all touch gestures on canvas for shader interaction */
+            pointer-events: auto; /* Allow canvas interactions */
         }
         
         #topbar {
@@ -57,6 +60,8 @@
             align-items: center;
             padding: 0 20px;
             z-index: 100;
+            pointer-events: auto; /* Ensure topbar can be clicked */
+            touch-action: manipulation; /* Allow normal touch interactions */
         }
         
         #topbar .title {
@@ -123,6 +128,8 @@
             transition: right 0.3s ease;
             overflow-y: auto;
             padding: 20px;
+            pointer-events: auto; /* Ensure mobile menu can be clicked */
+            touch-action: manipulation; /* Allow normal touch interactions */
         }
         
         #mobile-menu.open {
@@ -197,10 +204,12 @@
             bottom: 0;
             background: rgba(0, 0, 0, 0.5);
             z-index: 149;
+            pointer-events: none; /* Don't block clicks when hidden */
         }
         
         #mobile-menu-overlay.open {
             display: block;
+            pointer-events: auto; /* Only block clicks when visible */
         }
         
         #topbar button {
@@ -242,6 +251,11 @@
             pointer-events: none;
         }
         
+        /* Ensure all button contents don't intercept clicks */
+        button *, button svg, button [data-lucide] {
+            pointer-events: none !important;
+        }
+        
         #editor-panel {
             position: fixed;
             bottom: 0;
@@ -254,6 +268,8 @@
             padding: 10px;
             z-index: 100;
             transition: all 0.3s ease;
+            pointer-events: auto; /* Ensure editor panel can be clicked */
+            touch-action: manipulation; /* Allow normal touch interactions */
         }
         
         #editor-panel.minimal {
@@ -277,6 +293,7 @@
             resize: none;
             outline: none;
             transition: all 0.3s ease;
+            touch-action: manipulation; /* Allow normal touch interactions for text editing */
         }
         
         #eval-btn {
@@ -328,6 +345,8 @@
             max-height: 80vh;
             overflow-y: auto;
             display: none;
+            pointer-events: auto; /* Ensure help popup can be clicked */
+            touch-action: manipulation; /* Allow normal touch interactions */
         }
         
         #help-popup h3 {
@@ -410,6 +429,8 @@
             transition: left 0.3s ease;
             backdrop-filter: blur(3px);
             overflow-y: auto;
+            pointer-events: auto; /* Ensure shader library can be clicked */
+            touch-action: manipulation; /* Allow normal touch interactions */
         }
         
         

src/main.ts

@@ -266,21 +266,30 @@ class BitfielderApp {
         
         // Touch tracking
         window.addEventListener('touchstart', (e) => {
-            e.preventDefault();
+            // Only prevent default on canvas area for shader interaction
+            if (e.target === this.canvas) {
+                e.preventDefault();
+            }
             this.touchCount = e.touches.length;
             this.updateTouchPositions(e.touches);
             this.initializePinchGesture(e.touches);
         });
         
         window.addEventListener('touchmove', (e) => {
-            e.preventDefault();
+            // Only prevent default on canvas area to allow UI scrolling
+            if (e.target === this.canvas) {
+                e.preventDefault();
+            }
             this.touchCount = e.touches.length;
             this.updateTouchPositions(e.touches);
             this.updatePinchGesture(e.touches);
         });
         
         window.addEventListener('touchend', (e) => {
-            e.preventDefault();
+            // Only prevent default on canvas area
+            if (e.target === this.canvas) {
+                e.preventDefault();
+            }
             this.touchCount = e.touches.length;
             if (this.touchCount === 0) {
                 this.touch0X = this.touch0Y = this.touch1X = this.touch1Y = 0;