update zoom behavior with zoomable section

Author: spartan-vutrannguyen

apps/web/client/public/onlook-preload-script.js

@@ -30,21 +30,6 @@ export const Main = observer(() => {
         rightPanelRef,
     );
 
-    useEffect(() => {
-        function handleGlobalWheel(event: WheelEvent) {
-            if (!(event.ctrlKey || event.metaKey)) {
-                return;
-            }
-            event.preventDefault();
-            event.stopPropagation();
-        }
-
-        window.addEventListener('wheel', handleGlobalWheel, { passive: false });
-        return () => {
-            window.removeEventListener('wheel', handleGlobalWheel);
-        };
-    }, []);
-
     if (error) {
         return (
             <div className="h-screen w-screen flex items-center justify-center gap-2 flex-col">

apps/web/client/src/app/project/[id]/_components/main.tsx

@@ -6,25 +6,59 @@ export function listenForWheelZoom() {
             return;
         }
 
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (penpalParent) {
-            penpalParent
-                .onFrameWheel({
-                    deltaY: event.deltaY,
-                    clientX: event.clientX,
-                    clientY: event.clientY,
-                    ctrlKey: event.ctrlKey,
-                    metaKey: event.metaKey,
-                })
-                .catch(() => {
-                    // ignore
-                });
+        const path = event.composedPath() as HTMLElement[];
+
+        let zoomHandledInside = false;
+
+        for (const el of path) {
+            if (el instanceof Element) {
+                try {
+                    const style = window.getComputedStyle(el);
+
+                    // Heuristic #1: It's explicitly scrollable
+                    const scrollable = /(auto|scroll)/.test(
+                        style.overflow + style.overflowX + style.overflowY,
+                    );
+
+                    // Heuristic #2: It's explicitly interactive / transforms
+                    const hasTransform = style.transform !== 'none';
+
+                    // Heuristic #3: Prevents pinch gestures in browser defaults
+                    const disablesDefaultTouch = style.touchAction === 'none';
+
+                    // Heuristic #4: Specific tag types often used for zoomable content
+                    const zoomableTags = ['CANVAS', 'SVG', 'IMG'];
+                    const isZoomableTag = zoomableTags.includes(el.tagName);
+
+                    if (scrollable || hasTransform || disablesDefaultTouch || isZoomableTag) {
+                        zoomHandledInside = true;
+                        break;
+                    }
+                } catch (err) {
+                    console.warn('Could not get computed style for node:', el, err);
+                }
+            }
         }
-    }
 
-    window.addEventListener('wheel', handleWheel, { passive: false });
-}
+        if (!zoomHandledInside) {
+            event.preventDefault();
+            event.stopPropagation();
 
+            if (penpalParent) {
+                penpalParent
+                    .onFrameWheel({
+                        deltaY: event.deltaY,
+                        clientX: event.clientX,
+                        clientY: event.clientY,
+                        ctrlKey: event.ctrlKey,
+                        metaKey: event.metaKey,
+                    })
+                    .catch(() => {
+                        // ignore
+                    });
+            }
+        }
+    }
 
+    window.addEventListener('wheel', handleWheel, { passive: false, capture: true });
+}