@june24/expo-pdf-reader 0.1.2 → 0.1.4

package/build/ExpoPdfReader.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoPdfReader.types.js","sourceRoot":"","sources":["../src/ExpoPdfReader.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\nexport type AnnotationTool = 'none' | 'pen' | 'highlighter' | 'text' | 'note' | 'eraser';\n\nexport type DisplayMode = 'single' | 'continuous' | 'twoUp' | 'twoUpContinuous';\n\nexport type Point = { x: number; y: number };\n\nexport type Annotation = {\n  type: 'pen' | 'highlighter' | 'text';\n  color: string;\n  page?: number;\n  points?: Point[][]; // For pen/highlighter\n  width?: number; // Stroke width or font size for text? Let's use fontSize for text explicitly\n  text?: string; // For text\n  fontSize?: number; // For text\n  x?: number; // For text\n  y?: number; // For text\n};\n\nexport type AnnotationChangeEvent = {\n  nativeEvent: {\n    annotations: Annotation[];\n  };\n};\n\nexport type PageChangeEvent = {\n  nativeEvent: {\n    page: number;\n    total: number;\n  };\n};\n\nexport type ScrollEvent = {\n  nativeEvent: {\n    x: number;\n    y: number;\n    contentWidth: number;\n    contentHeight: number;\n    layoutWidth: number;\n    layoutHeight: number;\n  };\n};\n\nexport type SearchResult = {\n  page: number;\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  textSnippet?: string;\n};\n\n// Public API: group drawing configuration into a single object\nexport type AnnotationOptions = {\n  tool?: AnnotationTool;\n  color?: string; // Hex color\n  fontSize?: number;\n  text?: string;\n  strokeWidth?: number; // line thickness for pen/highlighter\n};\n\n// Props exposed to JS users of the component\nexport type ExpoPdfReaderViewProps = ViewProps & {\n  url: string;\n  style?: StyleProp<ViewStyle>;\n  displayMode?: DisplayMode; // 'single' | 'continuous' | 'twoUp' | 'twoUpContinuous'\n  initialPage?: number; // starting page index (0-based)\n  minZoom?: number;\n  maxZoom?: number;\n  annotationOptions?: AnnotationOptions;\n  initialAnnotations?: Annotation[];\n  onAnnotationChange?: (event: AnnotationChangeEvent) => void;\n  onPageChange?: (event: PageChangeEvent) => void;\n  onScroll?: (event: ScrollEvent) => void;\n};\n\n// Internal props that the native view actually receives.\n// This keeps backwards-compat with the native module while giving\n// JS a cleaner grouped API via `annotationOptions`.\nexport type NativeExpoPdfReaderViewProps = ViewProps & {\n  url: string;\n  style?: StyleProp<ViewStyle>;\n  displayMode?: DisplayMode;\n  initialPage?: number;\n  minZoom?: number;\n  maxZoom?: number;\n  annotationTool?: AnnotationTool;\n  annotationColor?: string; // Hex color\n  annotationFontSize?: number;\n  annotationText?: string; // Default text to place\n   // Native-only props derived from AnnotationOptions\n  annotationStrokeWidth?: number;\n  initialAnnotations?: Annotation[];\n  onAnnotationChange?: (event: AnnotationChangeEvent) => void;\n  onPageChange?: (event: PageChangeEvent) => void;\n  onScroll?: (event: ScrollEvent) => void;\n};\n\n"]}
+{"version":3,"file":"ExpoPdfReader.types.js","sourceRoot":"","sources":["../src/ExpoPdfReader.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\nexport type AnnotationTool = 'none' | 'pen' | 'highlighter' | 'text' | 'note' | 'eraser';\n\nexport type DisplayMode = 'single' | 'continuous' | 'twoUp' | 'twoUpContinuous';\n\nexport type Point = { x: number; y: number };\n\nexport type Annotation = {\n  type: 'pen' | 'highlighter' | 'text';\n  color: string;\n  page?: number;\n  points?: Point[][]; // For pen/highlighter\n  width?: number; // Stroke width or font size for text? Let's use fontSize for text explicitly\n  text?: string; // For text\n  fontSize?: number; // For text\n  x?: number; // For text\n  y?: number; // For text\n};\n\nexport type AnnotationChangeEvent = {\n  nativeEvent: {\n    annotations: Annotation[];\n  };\n};\n\nexport type PageChangeEvent = {\n  nativeEvent: {\n    page: number;\n    total: number;\n  };\n};\n\nexport type ScrollEvent = {\n  nativeEvent: {\n    x: number;\n    y: number;\n    contentWidth: number;\n    contentHeight: number;\n    layoutWidth: number;\n    layoutHeight: number;\n  };\n};\n\nexport type SearchResult = {\n  page: number;\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  textSnippet?: string;\n};\n\n// Public API: group drawing configuration into a single object\nexport type AnnotationOptions = {\n  tool?: AnnotationTool;\n  color?: string; // Hex color\n  fontSize?: number;\n  text?: string;\n  strokeWidth?: number; // line thickness for pen/highlighter\n};\n\n// Props exposed to JS users of the component\nexport type ExpoPdfReaderViewProps = ViewProps & {\n  url: string;\n  style?: StyleProp<ViewStyle>;\n  displayMode?: DisplayMode; // 'single' | 'continuous' | 'twoUp' | 'twoUpContinuous'\n  initialPage?: number; // starting page index (0-based)\n  minZoom?: number;\n  maxZoom?: number;\n  annotationOptions?: AnnotationOptions;\n  initialAnnotations?: Annotation[];\n  onAnnotationChange?: (event: AnnotationChangeEvent) => void;\n  onPageChange?: (event: PageChangeEvent) => void;\n  onScroll?: (event: ScrollEvent) => void;\n};\n\n// Internal props that the native view actually receives.\n// This keeps backwards-compat with the native module while giving\n// JS a cleaner grouped API via `annotationOptions`.\nexport type NativeExpoPdfReaderViewProps = ViewProps & {\n  url: string;\n  style?: StyleProp<ViewStyle>;\n  displayMode?: DisplayMode;\n  initialPage?: number;\n  minZoom?: number;\n  maxZoom?: number;\n  annotationTool?: AnnotationTool;\n  annotationColor?: string; // Hex color\n  annotationFontSize?: number;\n  annotationText?: string; // Default text to place\n  // Native-only props derived from AnnotationOptions\n  annotationStrokeWidth?: number;\n  initialAnnotations?: Annotation[];\n  onAnnotationChange?: (event: AnnotationChangeEvent) => void;\n  onPageChange?: (event: PageChangeEvent) => void;\n  onScroll?: (event: ScrollEvent) => void;\n};\n\n"]}

package/build/index.d.ts

@@ -1,4 +1,4 @@
-import ExpoPdfReaderView from './ExpoPdfReaderView';
-import { ExpoPdfReaderViewProps } from './ExpoPdfReader.types';
-export { ExpoPdfReaderView, ExpoPdfReaderViewProps };
+import ExpoPdfReaderView, { ExpoPdfReaderRef } from './ExpoPdfReaderView';
+import { ExpoPdfReaderViewProps, Annotation, AnnotationOptions, AnnotationTool, AnnotationChangeEvent, PageChangeEvent, ScrollEvent, SearchResult, DisplayMode } from './ExpoPdfReader.types';
+export { ExpoPdfReaderView, ExpoPdfReaderRef, ExpoPdfReaderViewProps, Annotation, AnnotationOptions, AnnotationTool, AnnotationChangeEvent, PageChangeEvent, ScrollEvent, SearchResult, DisplayMode, };
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,EAAE,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,UAAU,EAAE,iBAAiB,EAAE,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAG,MAAM,uBAAuB,CAAC;AAE/L,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,UAAU,EAAE,iBAAiB,EAAE,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,GAAG,CAAC"}

package/build/index.js

@@ -1,3 +1,3 @@
 import ExpoPdfReaderView from './ExpoPdfReaderView';
-export { ExpoPdfReaderView };
+export { ExpoPdfReaderView, };
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EAAE,iBAAiB,EAA0B,CAAC","sourcesContent":["import ExpoPdfReaderView from './ExpoPdfReaderView';\nimport { ExpoPdfReaderViewProps } from './ExpoPdfReader.types';\n\nexport { ExpoPdfReaderView, ExpoPdfReaderViewProps };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAuC,MAAM,qBAAqB,CAAC;AAG1E,OAAO,EAAE,iBAAiB,GAA4K,CAAC","sourcesContent":["import ExpoPdfReaderView, { ExpoPdfReaderRef } from './ExpoPdfReaderView';\nimport { ExpoPdfReaderViewProps, Annotation, AnnotationOptions, AnnotationTool, AnnotationChangeEvent, PageChangeEvent, ScrollEvent, SearchResult, DisplayMode, } from './ExpoPdfReader.types';\n\nexport { ExpoPdfReaderView, ExpoPdfReaderRef, ExpoPdfReaderViewProps, Annotation, AnnotationOptions, AnnotationTool, AnnotationChangeEvent, PageChangeEvent, ScrollEvent, SearchResult, DisplayMode, };\n"]}

package/ios/ExpoPdfReaderView.swift

@@ -1,7 +1,7 @@
 import ExpoModulesCore
 import PDFKit
 
-class ExpoPdfReaderView: ExpoView {
+class ExpoPdfReaderView: ExpoView, UIGestureRecognizerDelegate {
   let pdfView = PDFView()
   var currentTool: String = "none"
   var currentColor: UIColor = .black
@@ -23,6 +23,9 @@ class ExpoPdfReaderView: ExpoView {
   private var currentAnnotation: PDFAnnotation?
   private var currentPath: UIBezierPath?
   
+  // Drawing overlay layer for live preview
+  private var drawingLayer: CAShapeLayer?
+  
   // Undo/Redo stacks
   private var undoStack: [PDFAnnotation] = []
   private var redoStack: [PDFAnnotation] = []
@@ -40,7 +43,9 @@ class ExpoPdfReaderView: ExpoView {
     
     // Setup gestures
     panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:)))
+    panGesture?.delegate = self
     tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
+    tapGesture?.delegate = self
     
     // Initially disabled
     panGesture?.isEnabled = false
@@ -195,11 +200,18 @@ class ExpoPdfReaderView: ExpoView {
     let isDrawing = tool == "pen" || tool == "highlighter"
     let isEraser = tool == "eraser"
     panGesture?.isEnabled = isDrawing || isEraser
-    pdfView.isUserInteractionEnabled = !isDrawing && !isEraser // Disable PDF interaction when drawing/erasing to prevent scrolling
     
-    // Re-enable scrolling if not drawing or erasing
-    if !isDrawing && !isEraser {
-        pdfView.isUserInteractionEnabled = true
+    // Disable PDF's built-in gestures when drawing/erasing
+    if isDrawing || isEraser {
+        // Disable scroll and other PDF interactions
+        if let scrollView = pdfView.subviews.first(where: { $0 is UIScrollView }) as? UIScrollView {
+            scrollView.isScrollEnabled = false
+        }
+    } else {
+        // Re-enable scrolling
+        if let scrollView = pdfView.subviews.first(where: { $0 is UIScrollView }) as? UIScrollView {
+            scrollView.isScrollEnabled = true
+        }
     }
     
     if tool == "text" || tool == "note" {
@@ -492,6 +504,7 @@ class ExpoPdfReaderView: ExpoView {
     guard let page = pdfView.currentPage else { return }
     let location = gesture.location(in: pdfView)
     let convertedPoint = pdfView.convert(location, to: page)
+    let viewLocation = location // Keep view coordinates for drawing layer
     
     // Handle eraser
     if currentTool == "eraser" {
@@ -543,38 +556,99 @@ class ExpoPdfReaderView: ExpoView {
     switch gesture.state {
     case .began:
       currentPath = UIBezierPath()
-      currentPath?.move(to: convertedPoint)
+      currentPath?.move(to: viewLocation) // Use view coordinates for drawing layer
+      
+      // Create drawing layer for live preview in view coordinates
+      if drawingLayer == nil {
+          drawingLayer = CAShapeLayer()
+          drawingLayer?.fillColor = UIColor.clear.cgColor
+          drawingLayer?.lineCap = .round
+          drawingLayer?.lineJoin = .round
+          pdfView.layer.addSublayer(drawingLayer!)
+      }
       
-      // Create annotation
-      let bounds = page.bounds(for: pdfView.displayBox)
+    case .changed:
+      guard let path = currentPath else { return }
+      path.addLine(to: viewLocation) // Use view coordinates for drawing layer
       
+      // Update drawing layer to show live preview
+      drawingLayer?.path = path.cgPath
       if currentTool == "pen" {
-          let annotation = PDFAnnotation(bounds: bounds, forType: .ink, withProperties: nil)
+          drawingLayer?.strokeColor = currentColor.cgColor
+          drawingLayer?.lineWidth = currentStrokeWidth
+          drawingLayer?.opacity = 1.0
+      } else if currentTool == "highlighter" {
+          drawingLayer?.strokeColor = currentColor.cgColor
+          drawingLayer?.lineWidth = currentStrokeWidth * 3.0
+          drawingLayer?.opacity = 0.3
+      }
+      
+    case .ended:
+      guard let viewPath = currentPath else { return }
+      viewPath.addLine(to: viewLocation) // Complete view path
+      
+      // Remove drawing layer
+      drawingLayer?.removeFromSuperlayer()
+      drawingLayer = nil
+      
+      // Convert view path to page coordinates
+      let pagePathForAnnotation = UIBezierPath()
+      viewPath.cgPath.applyWithBlock { element in
+          let points = element.pointee.points
+          switch element.pointee.type {
+          case .moveToPoint:
+              let pagePoint = self.pdfView.convert(points[0], to: page)
+              pagePathForAnnotation.move(to: pagePoint)
+          case .addLineToPoint:
+              let pagePoint = self.pdfView.convert(points[0], to: page)
+              pagePathForAnnotation.addLine(to: pagePoint)
+          case .addQuadCurveToPoint:
+              let cp = self.pdfView.convert(points[0], to: page)
+              let pt = self.pdfView.convert(points[1], to: page)
+              pagePathForAnnotation.addQuadCurve(to: pt, controlPoint: cp)
+          case .addCurveToPoint:
+              let cp1 = self.pdfView.convert(points[0], to: page)
+              let cp2 = self.pdfView.convert(points[1], to: page)
+              let pt = self.pdfView.convert(points[2], to: page)
+              pagePathForAnnotation.addCurve(to: pt, controlPoint1: cp1, controlPoint2: cp2)
+          case .closeSubpath:
+              pagePathForAnnotation.close()
+          @unknown default:
+              break
+          }
+      }
+      
+      // Calculate proper bounds from path
+      var pathBounds = pagePathForAnnotation.bounds
+      // Expand bounds slightly to accommodate stroke width
+      let expansion = max(currentStrokeWidth * 2, 20)
+      pathBounds = pathBounds.insetBy(dx: -expansion, dy: -expansion)
+      
+      if currentTool == "pen" {
+          let annotation = PDFAnnotation(bounds: pathBounds, forType: .ink, withProperties: nil)
           annotation.color = currentColor
           let border = PDFBorder()
           border.lineWidth = currentStrokeWidth
           annotation.border = border
-          annotation.add(currentPath!)
+          annotation.add(pagePathForAnnotation)
           page.addAnnotation(annotation)
-          currentAnnotation = annotation
+          
+          // Force PDF view to update
+          pdfView.setNeedsDisplay()
       }
       else if currentTool == "highlighter" {
-           let annotation = PDFAnnotation(bounds: bounds, forType: .ink, withProperties: nil)
+           let annotation = PDFAnnotation(bounds: pathBounds, forType: .ink, withProperties: nil)
            annotation.color = currentColor.withAlphaComponent(0.3)
           let border = PDFBorder()
           border.lineWidth = currentStrokeWidth * 3.0
           annotation.border = border
-           annotation.add(currentPath!)
+           annotation.add(pagePathForAnnotation)
            page.addAnnotation(annotation)
-           currentAnnotation = annotation
+           
+           // Force PDF view to update
+           pdfView.setNeedsDisplay()
       }
       
-    case .changed:
-      guard let path = currentPath, let annotation = currentAnnotation else { return }
-      path.addLine(to: convertedPoint)
-      annotation.add(path) // Update path
-      
-    case .ended, .cancelled:
       // Clear redo stack when new annotation is added
       redoStack.removeAll()
       
@@ -586,6 +660,13 @@ class ExpoPdfReaderView: ExpoView {
         "annotations": getAnnotations()
       ])
       
+    case .cancelled:
+      // Remove drawing layer and clear without adding annotation
+      drawingLayer?.removeFromSuperlayer()
+      drawingLayer = nil
+      currentPath = nil
+      currentAnnotation = nil
+      
     default:
       break
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@june24/expo-pdf-reader",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A PDF reader for Expo apps with annotation and zoom controls",
   "homepage": "git@gitlab.com:june_241/expo-pdf-reader.git",
   "main": "build/index.js",
@@ -22,7 +22,7 @@
   "author": "User",
   "license": "MIT",
   "dependencies": {
-    "expo-modules-core": "^4.0.0"
+    "expo-modules-core": "^3.0.29"
   },
   "devDependencies": {
     "expo-module-scripts": "^5.0.8",

package/src/ExpoPdfReader.types.ts

@@ -89,7 +89,7 @@ export type NativeExpoPdfReaderViewProps = ViewProps & {
   annotationColor?: string; // Hex color
   annotationFontSize?: number;
   annotationText?: string; // Default text to place
-   // Native-only props derived from AnnotationOptions
+  // Native-only props derived from AnnotationOptions
   annotationStrokeWidth?: number;
   initialAnnotations?: Annotation[];
   onAnnotationChange?: (event: AnnotationChangeEvent) => void;

package/src/index.ts

@@ -1,4 +1,4 @@
-import ExpoPdfReaderView from './ExpoPdfReaderView';
-import { ExpoPdfReaderViewProps } from './ExpoPdfReader.types';
+import ExpoPdfReaderView, { ExpoPdfReaderRef } from './ExpoPdfReaderView';
+import { ExpoPdfReaderViewProps, Annotation, AnnotationOptions, AnnotationTool, AnnotationChangeEvent, PageChangeEvent, ScrollEvent, SearchResult, DisplayMode, } from './ExpoPdfReader.types';
 
-export { ExpoPdfReaderView, ExpoPdfReaderViewProps };
+export { ExpoPdfReaderView, ExpoPdfReaderRef, ExpoPdfReaderViewProps, Annotation, AnnotationOptions, AnnotationTool, AnnotationChangeEvent, PageChangeEvent, ScrollEvent, SearchResult, DisplayMode, };