feat: show OCR bounding box (#23717)

* feat: ocr bounding box

* bounding boxes

* pr feedback

* pr feedback

* allow copy across text boxes

* pr feedback

web/src/lib/actions/zoom-image.ts

@@ -2,7 +2,7 @@ import { photoZoomState } from '$lib/stores/zoom-image.store';
 import { useZoomImageWheel } from '@zoom-image/svelte';
 import { get } from 'svelte/store';
 
-export const zoomImageAction = (node: HTMLElement) => {
+export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolean }) => {
   const { createZoomImage, zoomImageState, setZoomImageState } = useZoomImageWheel();
 
   createZoomImage(node, {
@@ -14,9 +14,32 @@ export const zoomImageAction = (node: HTMLElement) => {
     setZoomImageState(state);
   }
 
+  // Store original event handlers so we can prevent them when disabled
+  const wheelHandler = (event: WheelEvent) => {
+    if (options?.disabled) {
+      event.stopImmediatePropagation();
+    }
+  };
+
+  const pointerDownHandler = (event: PointerEvent) => {
+    if (options?.disabled) {
+      event.stopImmediatePropagation();
+    }
+  };
+
+  // Add handlers at capture phase with higher priority
+  node.addEventListener('wheel', wheelHandler, { capture: true });
+  node.addEventListener('pointerdown', pointerDownHandler, { capture: true });
+
   const unsubscribes = [photoZoomState.subscribe(setZoomImageState), zoomImageState.subscribe(photoZoomState.set)];
+
   return {
+    update(newOptions?: { disabled?: boolean }) {
+      options = newOptions;
+    },
     destroy() {
+      node.removeEventListener('wheel', wheelHandler, { capture: true });
+      node.removeEventListener('pointerdown', pointerDownHandler, { capture: true });
       for (const unsubscribe of unsubscribes) {
         unsubscribe();
       }