hazo_pdf 1.6.2 → 1.6.5

package/README.md

@@ -879,6 +879,7 @@ You can override any or all of these on a per-highlight basis.
 |------|------|---------|-------------|
 | `className` | `string` | `""` | Additional CSS classes to apply to the viewer container. |
 | `scale` | `number` | `1.0` | Initial zoom level. Values > 1.0 zoom in, < 1.0 zoom out. |
+| `fit_to_width` | `boolean` | `false` | If `true`, automatically scales the PDF to fit the container width. Manual zoom buttons override auto-scaling. Container must have explicit dimensions. |
 | `background_color` | `string` | `"#2d2d2d"` | Background color for areas outside PDF pages (hex format: `#RRGGBB`). Overrides config file value. |
 | `config_file` | `string` | `undefined` | Path to configuration INI file (e.g., `"config/hazo_pdf_config.ini"`). If not provided, uses default configuration. |
 | `logger` | `Logger` | `undefined` | Logger instance from hazo_logs or custom logger matching the Logger interface. If not provided, falls back to console-based logging. Useful for debugging and monitoring PDF operations. |
@@ -1319,6 +1320,28 @@ The PDF viewer includes a toolbar at the top with the following controls:
 - Click "Reset" to return to default zoom
 - Zoom affects the PDF page size but maintains aspect ratio
 
+### Fit-to-Width Mode
+
+Enable automatic width-based scaling with the `fit_to_width` prop:
+
+```tsx
+<PdfViewer
+  url="/document.pdf"
+  fit_to_width={true}
+/>
+```
+
+**Behavior:**
+- When enabled, the PDF automatically scales to fit the container width on initial load and after window resize
+- User can manually zoom in/out with zoom buttons, which disables auto-scaling for that session
+- Changing the `fit_to_width` prop value re-enables auto-scaling behavior
+- Use case: Viewing documents where full-width display is preferred (e.g., forms, contracts)
+
+**Technical Notes:**
+- Does not conflict with the `scale` prop (scale is the initial value, fit_to_width can override it after render)
+- Manual zoom buttons override fit-to-width mode, allowing users to adjust as needed
+- Container must have explicit width and height (see [Container Requirements](#container-requirements))
+
 ### Annotation Tools
 
 - **Square button**: Activates square/rectangle annotation tool

package/dist/{chunk-ETZ57VO7.js → chunk-TTJ5QFUA.js}

@@ -657,7 +657,7 @@ var AnnotationOverlay = ({
           e.stopPropagation();
           e.nativeEvent.stopImmediatePropagation();
           log_annotation_click(annotation, "svg_hit_test", point);
-          on_annotation_click(annotation, point.x, point.y);
+          on_annotation_click(annotation, point.x, point.y, e.clientX, e.clientY);
           return;
         }
       }
@@ -673,7 +673,7 @@ var AnnotationOverlay = ({
       e.preventDefault();
       e.stopPropagation();
       if (on_freetext_click) {
-        on_freetext_click(point.x, point.y);
+        on_freetext_click(point.x, point.y, e.clientX, e.clientY);
       }
       return;
     }
@@ -906,7 +906,7 @@ var AnnotationOverlay = ({
                 const click_x = e.clientX - rect.left;
                 const click_y = e.clientY - rect.top;
                 log_annotation_click(annotation, "freetext_rect", { x: click_x, y: click_y });
-                on_annotation_click(annotation, click_x, click_y);
+                on_annotation_click(annotation, click_x, click_y, e.clientX, e.clientY);
               }
             },
             onClick: (e) => {
@@ -1020,7 +1020,7 @@ var AnnotationOverlay = ({
               const click_x = e.clientX - rect.left;
               const click_y = e.clientY - rect.top;
               log_annotation_click(annotation, "rect_overlay", { x: click_x, y: click_y });
-              on_annotation_click(annotation, click_x, click_y);
+              on_annotation_click(annotation, click_x, click_y, e.clientX, e.clientY);
             }
           },
           onClick: (e) => {
@@ -1349,14 +1349,14 @@ var PdfViewerLayout = ({
                       on_context_menu(e, index, screen_x, screen_y, mapper_data.mapper);
                     }
                   },
-                  on_annotation_click: (annotation, screen_x, screen_y) => {
+                  on_annotation_click: (annotation, screen_x, screen_y, viewport_x, viewport_y) => {
                     if (on_annotation_click && mapper_data.mapper) {
-                      on_annotation_click(annotation, screen_x, screen_y, mapper_data.mapper);
+                      on_annotation_click(annotation, screen_x, screen_y, mapper_data.mapper, viewport_x, viewport_y);
                     }
                   },
-                  on_freetext_click: (screen_x, screen_y) => {
+                  on_freetext_click: (screen_x, screen_y, viewport_x, viewport_y) => {
                     if (on_freetext_click && mapper_data.mapper) {
-                      on_freetext_click(index, screen_x, screen_y, mapper_data.mapper);
+                      on_freetext_click(index, screen_x, screen_y, mapper_data.mapper, viewport_x, viewport_y);
                     }
                   }
                 }
@@ -4611,6 +4611,8 @@ var PdfViewer = forwardRef(({
   }, []);
   const content_container_ref = useRef11(null);
   const [first_page_width, setFirstPageWidth] = useState13(null);
+  const [fit_to_width_active, setFitToWidthActive] = useState13(fit_to_width);
+  const fit_to_width_active_ref = useRef11(fit_to_width);
   useEffect10(() => {
     if (files && files.length > 0) {
       if (!current_file || !files.find((f) => f.id === current_file.id)) {
@@ -4994,18 +4996,21 @@ ${suffix_line}`;
     });
   }, [pdf_document]);
   useEffect10(() => {
-    if (!fit_to_width || !first_page_width || !content_container_ref.current) {
+    fit_to_width_active_ref.current = fit_to_width;
+    setFitToWidthActive(fit_to_width);
+  }, [fit_to_width]);
+  useEffect10(() => {
+    if (!fit_to_width_active || !first_page_width || !content_container_ref.current) {
       return;
     }
     const calculate_fit_scale = () => {
+      if (!fit_to_width_active_ref.current) return;
       if (!content_container_ref.current || !first_page_width) return;
       const container_width = content_container_ref.current.clientWidth;
       const padding = 40;
       const available_width = container_width - padding;
       const new_scale = Math.max(0.1, Math.min(3, available_width / first_page_width));
-      if (Math.abs(new_scale - scale) > 0.01) {
-        setScale(new_scale);
-      }
+      setScale(new_scale);
     };
     calculate_fit_scale();
     const resize_observer = new ResizeObserver(() => {
@@ -5015,7 +5020,7 @@ ${suffix_line}`;
     return () => {
       resize_observer.disconnect();
     };
-  }, [fit_to_width, first_page_width, scale]);
+  }, [fit_to_width_active, first_page_width]);
   const save_to_history = (new_annotations) => {
     if (history_ref.current.saving) {
       return;
@@ -5161,13 +5166,22 @@ ${suffix_line}`;
     };
   }, [handle_undo, handle_redo]);
   const handle_zoom_in = () => {
+    fit_to_width_active_ref.current = false;
+    setFitToWidthActive(false);
     setScale((prev) => Math.min(prev + 0.25, 3));
   };
   const handle_zoom_out = () => {
+    fit_to_width_active_ref.current = false;
+    setFitToWidthActive(false);
     setScale((prev) => Math.max(prev - 0.25, 0.5));
   };
   const handle_zoom_reset = () => {
-    setScale(1);
+    if (fit_to_width) {
+      fit_to_width_active_ref.current = true;
+      setFitToWidthActive(true);
+    } else {
+      setScale(1);
+    }
   };
   const normalize_rotation = (rotation) => {
     let normalized = rotation % 360;
@@ -6015,18 +6029,17 @@ ${suffix_line}`;
                 page_rotations,
                 on_visible_page_change: handle_visible_page_change,
                 on_annotation_create: handle_annotation_create,
-                on_annotation_click: (annotation, screen_x, screen_y, mapper) => {
+                on_annotation_click: (annotation, screen_x, screen_y, mapper, viewport_x, viewport_y) => {
                   console.log(
                     `\u{1F7E0} [AnnotationClick] opening editor id=${annotation.id}, page=${annotation.page_index}, screen=(${screen_x.toFixed(
                       1
                     )}, ${screen_y.toFixed(1)})`
                   );
-                  const dialog_x = window.innerWidth / 2;
-                  const dialog_y = Math.max(50, screen_y);
+                  const dialog_y = Math.max(50, viewport_y);
                   setTextDialog({
                     open: true,
                     page_index: annotation.page_index,
-                    x: dialog_x,
+                    x: viewport_x,
                     y: dialog_y,
                     screen_x,
                     screen_y,
@@ -6047,12 +6060,12 @@ ${suffix_line}`;
                     mapper
                   });
                 },
-                on_freetext_click: (page_index, screen_x, screen_y, mapper) => {
+                on_freetext_click: (page_index, screen_x, screen_y, mapper, viewport_x, viewport_y) => {
                   setTextDialog({
                     open: true,
                     page_index,
-                    x: screen_x,
-                    y: screen_y,
+                    x: viewport_x,
+                    y: viewport_y,
                     screen_x,
                     screen_y,
                     mapper
@@ -6308,4 +6321,4 @@ export {
   PdfViewer,
   pdf_viewer_default
 };
-//# sourceMappingURL=chunk-ETZ57VO7.js.map
+//# sourceMappingURL=chunk-TTJ5QFUA.js.map